feat: add translucency, foilVisibility and hueRotationSpeed to the pl…

…astics
gleamy-js · Mar 6, 2023 · c1bf3ed · c1bf3ed
1 parent eb3081f
commit c1bf3ed
Show file tree

Hide file tree

Showing 17 changed files with 159 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gleamy",
   "description": "Create a reactive shiny background in different materials",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "NPOSL-3.0",
   "private": false,
   "author": {

diff --git a/src/lib/components/base-materials/GradientMaterial.tsx b/src/lib/components/base-materials/GradientMaterial.tsx
@@ -4,6 +4,7 @@ import { TStaticGradient, TDynamicGradient } from '../../../types';
 import { GleamyContext } from '../../provider';
 
 export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
+  animator,
   width = 100,
   height = 100,
   noFill = false,
@@ -15,8 +16,10 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
   edgeThickness = 0,
   rendering = true,
   clipPathScale = 1,
-  backgroundColor = undefined,
-  animator,
+  backgroundColor,
+  translucency = undefined,
+  hueRotationSpeed = undefined,
+  foilVisibility = undefined,
   ...props
 }) => {
   const gleamyProvider = useContext(GleamyContext);
@@ -155,6 +158,11 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
       animatorX: xY.x,
       animatorY: xY.y,
       spread,
+      translucency: typeof translucency === 'number' ? translucency : undefined,
+      hueRotationSpeed:
+        typeof hueRotationSpeed === 'number' ? hueRotationSpeed : undefined,
+      foilVisibility:
+        typeof foilVisibility === 'number' ? foilVisibility : undefined,
     });
 
     if (clipPathRef) {
@@ -180,6 +188,12 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
         animatorX: xY.y,
         animatorY: xY.x,
         spread,
+        translucency:
+          typeof translucency === 'number' ? translucency : undefined,
+        hueRotationSpeed:
+          typeof hueRotationSpeed === 'number' ? hueRotationSpeed : undefined,
+        foilVisibility:
+          typeof foilVisibility === 'number' ? foilVisibility : undefined,
       });
       createEdge(context);
     } else if (edgeThickness) {
@@ -236,6 +250,7 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
     edgeThickness,
     rendering,
     gleamyProvider,
+    backgroundColor,
   ]);
 
   useEffect(() => {

diff --git a/src/lib/components/base-materials/Plastic.tsx b/src/lib/components/base-materials/Plastic.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { TDynamicGradient } from '../../../types';
 
 const Material = styled(GradientMaterial)`
-  mix-blend-mode: overlay;
+  mix-blend-mode: screen;
   position: relative;
 `;
 

diff --git a/src/lib/components/materials/compound/Holographic.tsx b/src/lib/components/materials/compound/Holographic.tsx
@@ -29,6 +29,8 @@ export const Holographic = ({
   backgroundColor,
   clipPathScale = 1,
   clipPathScaleMetal = 1,
+  hueRotationSpeed = 1.2,
+  foilVisibility = 0.02,
   animator,
   ...props
 }: THolographic): JSX.Element => (
@@ -45,6 +47,8 @@ export const Holographic = ({
       rendering={rendering}
       clipPathScale={clipPathScale}
       animator={animator}
+      foilVisibility={foilVisibility}
+      hueRotationSpeed={hueRotationSpeed}
     />
     <StyledMetal
       spread={spread}

diff --git a/src/lib/components/materials/glitter/Glitter.tsx b/src/lib/components/materials/glitter/Glitter.tsx
@@ -3,8 +3,8 @@ import { glitter } from '../../../definitions';
 import { TGlitter } from '../../../../types';
 
 export const Glitter = ({
-  width,
-  height,
+  width = 100,
+  height = 100,
   acceleration,
   clipPathRef,
   glitterCoverage,

diff --git a/src/lib/components/materials/plastics/Iridescent.tsx b/src/lib/components/materials/plastics/Iridescent.tsx
@@ -20,6 +20,9 @@ export const Iridescent = ({
   backgroundColor,
   clipPathScale,
   animator,
+  translucency = 1,
+  foilVisibility = 0.5,
+  hueRotationSpeed = 1,
   ...props
 }: TIridescent): JSX.Element => (
   <Component
@@ -36,6 +39,9 @@ export const Iridescent = ({
     backgroundColor={backgroundColor}
     clipPathScale={clipPathScale}
     animator={animator}
+    translucency={translucency}
+    hueRotationSpeed={hueRotationSpeed}
+    foilVisibility={foilVisibility}
     {...props}
   />
 );
diff --git a/src/lib/components/materials/plastics/Lacquer.tsx b/src/lib/components/materials/plastics/Lacquer.tsx
@@ -14,6 +14,8 @@ export const Lacquer = ({
   rendering,
   backgroundColor,
   clipPathScale,
+  translucency = 1,
+  foilVisibility = 0.02,
   animator,
   ...props
 }: TLacquer): JSX.Element => (
@@ -31,6 +33,8 @@ export const Lacquer = ({
     backgroundColor={backgroundColor}
     clipPathScale={clipPathScale}
     animator={animator}
+    translucency={translucency}
+    foilVisibility={foilVisibility}
     {...props}
   />
 );
diff --git a/src/lib/definitions/metal/laser.ts b/src/lib/definitions/metal/laser.ts
@@ -11,86 +11,68 @@ export const laser = ({
   animatorX,
   animatorY,
   spread,
+  translucency = 1,
+  hueRotationSpeed = 1,
+  foilVisibility = 0.1,
 }: DynamicGradientDefinition): CanvasGradient => {
-  const nonHologrpahicAlpha = 0.01;
+  const hueRotation = hueRotationSpeed || 1;
   const colorSpreadOffset = 80;
   const material = context.createLinearGradient(pos0X, pos0Y, pos1X, pos1Y);
   const angleDeg =
     Math.ceil(
-      ((Math.atan2(animatorY - pos0Y, animatorX - pos1X) * 720) / Math.PI) * 1,
+      ((Math.atan2(animatorY, animatorX) * 360) / Math.PI) * hueRotation,
     ) || 1;
   const saturation = 100;
   const flatSaturationReduction = 100;
 
   let renderStops = [] as ColorStops;
 
   const background = Math.floor(
-    (angleDeg -
+    angleDeg -
       (angleDeg / flatSaturationReduction > 0
         ? angleDeg / flatSaturationReduction
         : -angleDeg / flatSaturationReduction) +
-      1 * 10) **
-      0.9,
+      hueRotation * 10,
   );
   const bg = (background > 0 ? background : -background) || 0;
   const bgSaturation =
     saturation - flatSaturationReduction > 0
       ? saturation - flatSaturationReduction
       : -(saturation - flatSaturationReduction);
-  const lightness = saturation / flatSaturationReduction - bgSaturation;
-  const bgLightness = (lightness > 0 ? lightness : -lightness) + 50;
 
   const colorStops = [
-    [
-      0,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
-    ],
-    [
-      0.57,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
-    ],
+    [0, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
+    [0.57, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
     [
       0.59,
-      `hsla(${angleDeg - colorSpreadOffset}, ${saturation}%, 50%, ${
-        saturation / 10
-      })`,
+      `hsla(${
+        angleDeg - colorSpreadOffset
+      }, ${saturation}%, 50%, ${translucency.toString()})`,
     ],
-    [0.6, `hsla(${angleDeg}, ${saturation}%, 50%, ${saturation / 10})`],
+    [0.6, `hsla(${angleDeg}, ${saturation}%, 50%, ${translucency.toString()})`],
     [
       0.61,
-      `hsla(${angleDeg + colorSpreadOffset}, ${saturation}%, 50%, ${
-        saturation / 10
-      })`,
-    ],
-    [
-      0.62,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
-    ],
-    [
-      0.75,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
+      `hsla(${
+        angleDeg + colorSpreadOffset
+      }, ${saturation}%, 50%, ${translucency.toString()})`,
     ],
+    [0.62, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
+    [0.75, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
     [
       0.77,
-      `hsla(${angleDeg - colorSpreadOffset}, ${saturation}%, 50%, ${
-        saturation / 10
-      })`,
+      `hsla(${
+        angleDeg - colorSpreadOffset
+      }, ${saturation}%, 50%, ${translucency.toString()})`,
     ],
-    [0.8, `hsla(${angleDeg}, ${saturation}%, 50%, ${saturation / 10})`],
+    [0.8, `hsla(${angleDeg}, ${saturation}%, 50%, ${translucency.toString()})`],
     [
       0.83,
-      `hsla(${angleDeg + colorSpreadOffset}, ${saturation}%, 50%, ${
-        saturation / 10
-      })`,
-    ],
-    [
-      0.9,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
-    ],
-    [
-      1.0,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
+      `hsla(${
+        angleDeg + colorSpreadOffset
+      }, ${saturation}%, 50%, ${translucency})`,
     ],
+    [0.9, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
+    [1.0, `hsla(${bg}, ${bgSaturation}%, 50%, ${foilVisibility.toString()})`],
   ];
 
   renderStops = spreadColorProps(colorStops, spread, 1);

diff --git a/src/lib/definitions/plastic/holographic.ts b/src/lib/definitions/plastic/holographic.ts
@@ -10,13 +10,16 @@ export const holographic = ({
   animatorX,
   animatorY,
   spread,
+  foilVisibility = 0.05,
+  translucency = 1,
+  hueRotationSpeed = 1,
 }: DynamicGradientDefinition): CanvasGradient => {
-  const nonHologrpahicAlpha = 0.05;
   const colorSpreadOffset = 80;
   const material = context.createLinearGradient(pos0X, pos0Y, pos1X, pos1Y);
-  const angleDeg = Math.floor(
-    (Math.atan2(animatorY - pos0Y, animatorX - pos0X) * 180) / Math.PI,
-  );
+  const angleDeg =
+    Math.floor(
+      (Math.atan2(animatorY - pos0Y, animatorX - pos0X) * 180) / Math.PI,
+    ) ** hueRotationSpeed;
   const saturation = 100;
   const flatSaturationReduction = 100;
 
@@ -39,24 +42,32 @@ export const holographic = ({
   const colorStops = [
     [
       0,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
+      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${foilVisibility.toString()})`,
     ],
     [
       0.4,
-      `hsla(${angleDeg - colorSpreadOffset}, ${saturation}%, 50%, ${
+      `hsla(
+        ${angleDeg - colorSpreadOffset}, ${saturation}%, 
+        50%, 
+        ${saturation / 10},
+        ${foilVisibility.toString()}
+      )`,
+    ],
+    [
+      0.5,
+      `hsla(${angleDeg}, ${saturation}%, 50%, ${
         saturation / 10
-      })`,
+      }, ${translucency.toString()})`,
     ],
-    [0.5, `hsla(${angleDeg}, ${saturation}%, 50%, ${saturation / 10})`],
     [
       0.6,
       `hsla(${angleDeg + colorSpreadOffset}, ${saturation}%, 50%, ${
         saturation / 10
-      })`,
+      }, ${foilVisibility.toString()})`,
     ],
     [
       1,
-      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${nonHologrpahicAlpha})`,
+      `hsla(${bg}, ${bgSaturation}%, ${bgLightness}%, ${foilVisibility.toString()})`,
     ],
   ];
 

diff --git a/src/lib/definitions/plastic/iridescent.ts b/src/lib/definitions/plastic/iridescent.ts
@@ -10,40 +10,44 @@ export const iridescent = ({
   animatorX,
   animatorY,
   spread,
+  translucency = 1,
+  hueRotationSpeed = 1,
+  foilVisibility = 0.5,
 }: DynamicGradientDefinition): CanvasGradient => {
-  const hueDegrees = Math.floor(
-    (Math.atan2(animatorX, animatorY) * 180) / Math.PI,
-  );
+  const hueDegrees =
+    Math.floor((Math.atan2(animatorX, animatorY) * 180) / Math.PI) **
+    hueRotationSpeed;
   const material = context.createLinearGradient(pos0X, pos0Y, pos1X, pos1Y);
-  const bgTranslucency = 0.8;
-  const shineTranslucency = 1;
-  const bgLightness = 50;
-  const shineLightness = 80;
-  const saturation = 100;
-  const colorOffsetDeg = 90;
+  const saturation = 100 ** hueRotationSpeed;
+  const colorOffsetDeg = 45 ** hueRotationSpeed;
+
+  console.log(foilVisibility);
 
   const colorStops = [
     [
       0,
       `hsla(${
         hueDegrees - colorOffsetDeg
-      }, ${saturation}%, ${bgLightness}%, ${bgTranslucency})`,
+      }, ${saturation}%, 50%, ${foilVisibility})`,
     ],
     [
-      0.25,
-      `hsla(${hueDegrees}, ${saturation}%, ${shineLightness}%, ${shineTranslucency})`,
+      0.5,
+      `hsla(${
+        hueDegrees - colorOffsetDeg
+      }, ${saturation}%, 50%, ${foilVisibility})`,
     ],
+    [0.6, `hsla(${-hueDegrees}, ${saturation}%, 50%, ${translucency})`],
     [
-      0.5,
+      0.7,
       `hsla(${
         hueDegrees + colorOffsetDeg
-      }, ${saturation}%, ${bgLightness}%, ${bgTranslucency})`,
+      }, ${saturation}%, 50%, ${foilVisibility})`,
     ],
     [
       1,
       `hsla(${
-        hueDegrees - colorOffsetDeg
-      }, ${saturation}%, ${bgLightness}%, ${bgTranslucency})`,
+        hueDegrees + colorOffsetDeg
+      }, ${saturation}%, 50%, ${foilVisibility})`,
     ],
   ];