From c1bf3ed48cdc11f0762ef4d1cfe6a5ebf91e9e62 Mon Sep 17 00:00:00 2001 From: Space Corp Engineering Date: Mon, 6 Mar 2023 17:47:03 +0100 Subject: [PATCH] feat: add translucency, foilVisibility and hueRotationSpeed to the plastics --- package.json | 2 +- .../base-materials/GradientMaterial.tsx | 19 ++++- src/lib/components/base-materials/Plastic.tsx | 2 +- .../materials/compound/Holographic.tsx | 4 ++ .../components/materials/glitter/Glitter.tsx | 4 +- .../materials/plastics/Iridescent.tsx | 6 ++ .../components/materials/plastics/Lacquer.tsx | 4 ++ src/lib/definitions/metal/laser.ts | 72 +++++++------------ src/lib/definitions/plastic/holographic.ts | 31 +++++--- src/lib/definitions/plastic/iridescent.ts | 36 +++++----- src/lib/definitions/plastic/lacquer.ts | 20 +++--- src/types/base-materials/TDynamicGradient.ts | 11 ++- src/types/generics/ranges.ts | 6 ++ .../DynamicGradientDefinition.ts | 10 ++- src/types/materials/compound/THolographic.ts | 10 ++- src/types/materials/plastics/TIridescent.ts | 10 ++- src/types/materials/plastics/TLacquer.ts | 4 +- 17 files changed, 159 insertions(+), 92 deletions(-) diff --git a/package.json b/package.json index e1227d1..afc25fa 100644 --- 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 index 5638d31..3c3b099 100644 --- 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 = ({ + animator, width = 100, height = 100, noFill = false, @@ -15,8 +16,10 @@ export const GradientMaterial: FC = ({ 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 = ({ 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 = ({ 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 = ({ edgeThickness, rendering, gleamyProvider, + backgroundColor, ]); useEffect(() => { diff --git a/src/lib/components/base-materials/Plastic.tsx b/src/lib/components/base-materials/Plastic.tsx index 4658047..ae48eb9 100644 --- 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 index 409d202..5820631 100644 --- 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} /> ( ); diff --git a/src/lib/components/materials/plastics/Lacquer.tsx b/src/lib/components/materials/plastics/Lacquer.tsx index 06a6599..ff9e795 100644 --- 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 index 285acb5..e63b852 100755 --- a/src/lib/definitions/metal/laser.ts +++ b/src/lib/definitions/metal/laser.ts @@ -11,13 +11,16 @@ 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; @@ -25,72 +28,51 @@ export const laser = ({ 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 index e2b6a92..6d6ead2 100755 --- 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 index f83bc75..7ffa47a 100755 --- 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})`, ], ]; diff --git a/src/lib/definitions/plastic/lacquer.ts b/src/lib/definitions/plastic/lacquer.ts index 1526b47..d19f903 100755 --- a/src/lib/definitions/plastic/lacquer.ts +++ b/src/lib/definitions/plastic/lacquer.ts @@ -1,16 +1,6 @@ import { DynamicGradientDefinition } from '../../../types'; import { spreadColorProps } from '../../utils/spreadColorProps'; -const bgSheenAlpha = 0.05; -const foregroundSheenAlpha = 0.9; -const colorStops = [ - [0.0, `rgba(255,255,255, ${bgSheenAlpha})`], - [0.4, `rgba(255,255,255, ${bgSheenAlpha})`], - [0.5, `rgba(255,255,255, ${foregroundSheenAlpha})`], - [0.6, `rgba(255,255,255, ${bgSheenAlpha})`], - [1, `rgba(255,255,255, ${bgSheenAlpha})`], -]; - export const lacquer = ({ context, pos0X, @@ -18,7 +8,17 @@ export const lacquer = ({ pos1X, pos1Y, spread, + translucency = 1, + foilVisibility = 0.05, }: DynamicGradientDefinition): CanvasGradient => { + const colorStops = [ + [0.0, `rgba(255,255,255, ${foilVisibility})`], + [0.48, `rgba(255,255,255, ${foilVisibility})`], + [0.5, `rgba(255,255,255, ${translucency})`], + [0.52, `rgba(255,255,255, ${foilVisibility})`], + [1, `rgba(255,255,255, ${foilVisibility})`], + ]; + const material = context.createLinearGradient(pos0X, pos0Y, pos1X, pos1Y); const renderStops = spread ? spreadColorProps(colorStops, spread, 1) diff --git a/src/types/base-materials/TDynamicGradient.ts b/src/types/base-materials/TDynamicGradient.ts index 03993a5..b9c4c0a 100644 --- a/src/types/base-materials/TDynamicGradient.ts +++ b/src/types/base-materials/TDynamicGradient.ts @@ -1,4 +1,10 @@ -import { Color, Spread } from '../generics'; +import { + Color, + FoilVisibility, + HueRotationSpeed, + Spread, + Translucency, +} from '../generics'; import { DynamicGradientDefinition } from '../materialdefinitions'; import { TBase } from './TBase'; @@ -7,5 +13,8 @@ export type TDynamicGradient = TBase & { edgeThickness: number; spread: Spread; backgroundColor?: Color; + translucency?: Translucency; + hueRotationSpeed?: HueRotationSpeed; + foilVisibility?: FoilVisibility; material: (material: DynamicGradientDefinition) => string; }; diff --git a/src/types/generics/ranges.ts b/src/types/generics/ranges.ts index 9c5758f..4a5e06f 100644 --- a/src/types/generics/ranges.ts +++ b/src/types/generics/ranges.ts @@ -12,6 +12,12 @@ export type PercentageRange = export type Spread = One | 1; +export type Translucency = number; + +export type FoilVisibility = number; + +export type HueRotationSpeed = number; + export type Acceleration = One | Two; export type Intensity = One; diff --git a/src/types/materialdefinitions/DynamicGradientDefinition.ts b/src/types/materialdefinitions/DynamicGradientDefinition.ts index 43591d4..884f253 100644 --- a/src/types/materialdefinitions/DynamicGradientDefinition.ts +++ b/src/types/materialdefinitions/DynamicGradientDefinition.ts @@ -1,4 +1,9 @@ -import { Spread } from '../generics'; +import { + HueRotationSpeed, + Spread, + Translucency, + FoilVisibility, +} from '../generics'; export interface DynamicGradientDefinition { context: CanvasRenderingContext2D; @@ -9,4 +14,7 @@ export interface DynamicGradientDefinition { spread: Spread; animatorX: number; animatorY: number; + translucency?: Translucency; + hueRotationSpeed?: HueRotationSpeed; + foilVisibility?: FoilVisibility; } diff --git a/src/types/materials/compound/THolographic.ts b/src/types/materials/compound/THolographic.ts index 98d7523..0f1cea7 100644 --- a/src/types/materials/compound/THolographic.ts +++ b/src/types/materials/compound/THolographic.ts @@ -1,5 +1,11 @@ import { TBaseComponent } from '../TBaseComponent'; -import { clipPathRef, clipPathScale, Spread } from '../../generics'; +import { + clipPathRef, + clipPathScale, + HueRotationSpeed, + Spread, + FoilVisibility, +} from '../../generics'; export type THolographic = TBaseComponent & { edgeThickness?: number; @@ -8,4 +14,6 @@ export type THolographic = TBaseComponent & { clipPathScaleMetal?: clipPathScale; noFill?: boolean; spread?: Spread; + hueRotationSpeed?: HueRotationSpeed; + foilVisibility?: FoilVisibility; }; diff --git a/src/types/materials/plastics/TIridescent.ts b/src/types/materials/plastics/TIridescent.ts index ef20d94..95251dd 100644 --- a/src/types/materials/plastics/TIridescent.ts +++ b/src/types/materials/plastics/TIridescent.ts @@ -1,8 +1,16 @@ import { TBaseComponent } from '../TBaseComponent'; -import { Spread } from '../../generics'; +import { + FoilVisibility, + HueRotationSpeed, + Spread, + Translucency, +} from '../../generics'; export type TIridescent = TBaseComponent & { spread?: Spread; noFill?: boolean; edgeThickness?: number; + translucency?: Translucency; + hueRotationSpeed?: HueRotationSpeed; + foilVisibility?: FoilVisibility; }; diff --git a/src/types/materials/plastics/TLacquer.ts b/src/types/materials/plastics/TLacquer.ts index 624011b..735be40 100644 --- a/src/types/materials/plastics/TLacquer.ts +++ b/src/types/materials/plastics/TLacquer.ts @@ -1,8 +1,10 @@ import { TBaseComponent } from '../TBaseComponent'; -import { Spread } from '../../generics'; +import { FoilVisibility, Spread, Translucency } from '../../generics'; export type TLacquer = TBaseComponent & { spread?: Spread; noFill?: boolean; edgeThickness?: number; + translucency?: Translucency; + foilVisibility?: FoilVisibility; };