From 6ea4e9121cd54e63db4d2de9c2bdb318a45fb9db Mon Sep 17 00:00:00 2001 From: Pouya Moazzezi Date: Thu, 23 May 2024 22:54:25 +0330 Subject: [PATCH] Reworked the opacity change system now all values change over time with associated events when reaches min/max --- src/Classes/firefly.ts | 465 ++++++++++-------- src/Config/colorValue.ts | 65 +-- src/Config/fade.ts | 27 - src/Config/glow.ts | 25 - src/Config/index.ts | 3 - src/Config/movement.ts | 12 +- src/Config/opacityChangeOptions.ts | 11 - src/Config/shaping.ts | 6 +- src/Config/size.ts | 12 +- src/Interfaces/ISingleFireflyConfig.ts | 19 +- src/Types/ColorValueConfigType.ts | 53 +- src/Types/ConfigType.ts | 5 - src/Types/OpacityChangeConfigType.ts | 34 -- src/Types/OpacityChangeOptionsConfigType.ts | 11 - src/Types/OutOfBoundsPositioningMethodType.ts | 2 - ...MethodType.ts => PositioningMethodType.ts} | 2 +- src/Types/SizeConfigType.ts | 10 +- src/Types/StartingPositioningConfigType.ts | 2 +- 18 files changed, 353 insertions(+), 411 deletions(-) delete mode 100644 src/Config/fade.ts delete mode 100644 src/Config/glow.ts delete mode 100644 src/Config/opacityChangeOptions.ts delete mode 100644 src/Types/OpacityChangeConfigType.ts delete mode 100644 src/Types/OpacityChangeOptionsConfigType.ts rename src/Types/{StartingPositioningMethodType.ts => PositioningMethodType.ts} (94%) diff --git a/src/Classes/firefly.ts b/src/Classes/firefly.ts index 4e33eae..383e70f 100644 --- a/src/Classes/firefly.ts +++ b/src/Classes/firefly.ts @@ -35,21 +35,25 @@ class FireFly { // getting range values const firefliesConfig = appConfig.fireflies const { + colorValue: { + hslColorChangeRangeOverTime: { + h: hueChangeRangeOverTime, + s: saturationChangeRangeOverTime, + l: lightnessChangeRangeOverTime, + a: alphaChangeRangeOverTime, + }, + }, size: { range: sizeRange, distributionFunction: sizeDistributionFunction, - pickingMethod: sizePickingMethod, + startingMethod: startingSizePickMethod, + sizeChangeRangeOverTime, }, startingPositioning: { backFillPosition: startingBackFillPosition, method: startingPositioningMethod, }, - opacityChangeOptions: { - fadeRatio, - fade: { rate: fadeRate, sizeChange: fadeSizeChangeConfig }, - glow: { rate: glowRate, sizeChange: glowSizeChangeConfig }, - }, movement: { speedX, speedY, @@ -77,8 +81,10 @@ class FireFly { } = firefliesConfig this.initializedConfig = { + sizeChangeOverTime: 0, x: 0, y: 0, + colorChangeOverTime: { h: 0, s: 0, l: 0, a: 0 }, movementMode: "cartesian", movingAngle: 0, angle: 0, @@ -88,13 +94,9 @@ class FireFly { debugMode: false, shape: "circle", sideCount: 3, - opacityChangeMode: "fade", - opacityChangeRate: 0, jitterX: 0, jitterY: 0, size: 0, - sizeBehaviourWhenFading: "none", - sizeBehaviourWhenGlowing: "none", speedPolar: 0, accelerationPolar: 0, speedX: 0, @@ -125,8 +127,6 @@ class FireFly { ] } - const opacityChangeMode = Math.random() < fadeRatio ? "fade" : "glow" - const getStartingAngle = () => { return startAngleOnRandom ? getRandomNumberBetween({ min: 0, max: Math.PI * 2 }) @@ -136,7 +136,7 @@ class FireFly { const startingMovingAngle = getRandomNumberBetween(movementAngleRange) const fireflySize = (() => { - switch (sizePickingMethod) { + switch (startingSizePickMethod) { case "custom": return sizeDistributionFunction( this.fireflyIndex, @@ -179,6 +179,17 @@ class FireFly { this.config = { x: 0, y: 0, + colorChangeOverTime: { + h: getRandomNumberBetween(hueChangeRangeOverTime) / iterationsPerFrame, + s: + getRandomNumberBetween(saturationChangeRangeOverTime) / + iterationsPerFrame, + l: + getRandomNumberBetween(lightnessChangeRangeOverTime) / + iterationsPerFrame, + a: + getRandomNumberBetween(alphaChangeRangeOverTime) / iterationsPerFrame, + }, movementMode: movementMode, movingAngle: startingMovingAngle, // this will change in config later @@ -210,24 +221,13 @@ class FireFly { debugMode: debugMode, jitterX: getRandomNumberBetween(jitterCoefficientX) / iterationsPerFrame, jitterY: getRandomNumberBetween(jitterCoefficientY) / iterationsPerFrame, - sizeBehaviourWhenFading: - Math.random() < fadeSizeChangeConfig.frequency - ? fadeSizeChangeConfig.mode - : "none", - sizeBehaviourWhenGlowing: - Math.random() < glowSizeChangeConfig.frequency - ? glowSizeChangeConfig.mode - : "none", shape: shape, sideCount: shape === "square" ? 4 : getRandomNumberBetween(sideCount, true), - opacityChangeRate: - getRandomNumberBetween( - opacityChangeMode === "fade" ? fadeRate : glowRate - ) / iterationsPerFrame, - opacityChangeMode, // size gets randomized based on your config size: fireflySize, + sizeChangeOverTime: + getRandomNumberBetween(sizeChangeRangeOverTime) / iterationsPerFrame, speedPolar: getRandomNumberBetween(speedPolar) / iterationsPerFrame, speedX: this.determinePropertyXonCartesianOrPolar( @@ -386,7 +386,7 @@ class FireFly { } getNewPosition = ( - method: StartingPositioningMethodType, + method: postitioningMethodType, backFillPosition: CartesianCoordinateSystemType ): CartesianCoordinateSystemType => { switch (method) { @@ -427,36 +427,16 @@ class FireFly { determineColor = ( coloringMode: ColorValueUpdateModeType, - determiningType: "starting" | "fading" = "starting" + determiningType: "starting" ): HslColor => { const { fireflies: firefliesConfig } = this.appConfig const { - incrementOnFade: { - h: hueIncrementOnFade, - s: saturationIncrementOnFade, - l: lightnessIncrementOnFade, - a: alphaIncrementOnFade, - }, - - hslColorShouldChangeAfterFade: { - h: shouldChangeAfterFadeHue, - s: shouldChangeAfterFadeSaturation, - l: shouldChangeAfterFadeLightness, - a: shouldChangeAfterFadeAlpha, - }, - - hslColorChangeRange: { - h: hueChangeRange, - s: saturationChangeRange, - l: lightnessChangeRange, - a: alphaChangeRange, - }, - onFadeMethod: { - h: hueFadeMethod, - s: saturationFadeMethod, - l: lightnessFadeMethod, - a: alphaFadeMethod, + hslColorRange: { + h: hueRange, + s: saturationRange, + l: lightnessRange, + a: alphaRange, }, startingMehtod: { h: startingHueMethod, @@ -466,54 +446,46 @@ class FireFly { }, } = this.appConfig.fireflies.colorValue - const hueUpdateMethod = - determiningType === "fading" ? hueFadeMethod : startingHueMethod - const saturationUpdateMethod = - determiningType === "fading" - ? saturationFadeMethod - : startingSaturationMethod - const lightnessUpdateMethod = - determiningType === "fading" - ? lightnessFadeMethod - : startingLightnessMethod - const alphaUpdateMethod = - determiningType === "fading" ? alphaFadeMethod : startingAlphaMethod + const hueUpdateMethod = startingHueMethod + const saturationUpdateMethod = startingSaturationMethod + const lightnessUpdateMethod = startingLightnessMethod + const alphaUpdateMethod = startingAlphaMethod switch (coloringMode) { case "updatingHslColor": return new HslColor( - shouldChangeAfterFadeHue || determiningType === "starting" + determiningType === "starting" ? this.getDeterminatedValue( this.config.colorValue.h, - hueChangeRange, + hueRange, hueUpdateMethod, - hueIncrementOnFade + 0 ) : this.config.colorValue.h, - shouldChangeAfterFadeSaturation || determiningType === "starting" + determiningType === "starting" ? this.getDeterminatedValue( this.config.colorValue.s, - saturationChangeRange, + saturationRange, saturationUpdateMethod, - saturationIncrementOnFade + 0 ) : this.config.colorValue.s, - shouldChangeAfterFadeLightness || determiningType === "starting" + determiningType === "starting" ? this.getDeterminatedValue( this.config.colorValue.l, - lightnessChangeRange, + lightnessRange, lightnessUpdateMethod, - lightnessIncrementOnFade + 0 ) : this.config.colorValue.l, - shouldChangeAfterFadeAlpha || determiningType === "starting" + determiningType === "starting" ? this.getDeterminatedValue( this.config.colorValue.a, - alphaChangeRange, + alphaRange, alphaUpdateMethod, - alphaIncrementOnFade + 0 ) : this.config.colorValue.a ) @@ -727,133 +699,6 @@ class FireFly { ctx.fill() } - // handleFade() lowers the opacity of the firefly - // if it reaches 0, it is moved to a random location - // and its opacity is reset to a random value (> 0.5) - handleFade = () => { - const { opacityChangeRate, sizeBehaviourWhenFading } = this.config - this.config.colorValue.a = Math.max( - this.config.colorValue.a - opacityChangeRate, - 0 - ) - - if (sizeBehaviourWhenFading === "shrink") - this.config.size = this.config.colorValue.a * this.originalConfig.size - - if (sizeBehaviourWhenFading === "grow") { - if (this.config.colorValue.a === 0) { - this.config.colorValue.a = 1 - this.config.colorValue.a - this.config.size = 0 - } else - this.config.size = - (1 - this.config.colorValue.a) * this.originalConfig.size - } - - if (this.config.colorValue.a === 0) { - this.resetConfigAfterOpacityChange("fade") - } - } - - // handleGlow() highers the opacity of the firefly - // if it reaches 1, it is moved to a random location - // and its opacity is reset to a random value (> 0.5) - - handleGlow = () => { - const { opacityChangeRate, sizeBehaviourWhenGlowing } = this.config - this.config.colorValue.a = Math.min( - this.config.colorValue.a + opacityChangeRate, - 1 - ) - - if (sizeBehaviourWhenGlowing === "grow") - this.config.size = this.config.colorValue.a * this.originalConfig.size - - if (sizeBehaviourWhenGlowing === "shrink") { - if (this.config.colorValue.a === 0) { - this.config.colorValue.a = 1 - this.config.colorValue.a - this.config.size = 0 - } else - this.config.size = - (1 - this.config.colorValue.a) * this.originalConfig.size - } - - if (this.config.colorValue.a === 1) { - this.resetConfigAfterOpacityChange("glow") - } - } - - resetConfigAfterOpacityChange = ( - opacityChangeMode: OpacityChangeModeType - ) => { - const { iterationsPerFrame } = this.appConfig - const { fade: fadeConfig, glow: glowConfig } = - this.appConfig.fireflies.opacityChangeOptions - - const opacityChangeConfig = - opacityChangeMode === "fade" ? fadeConfig : glowConfig - - const { - resetColorAfterOpacityChange, - resetSizeAfterOpacityChange, - resetRateAfterOpacityChange, - opacityAfterOpacityChange, - } = opacityChangeConfig - - const { size } = this.appConfig.fireflies - - this.resetSpeeds() - - if (resetRateAfterOpacityChange) { - this.config.opacityChangeRate = - getRandomNumberBetween(opacityChangeConfig.rate) / iterationsPerFrame - } - - if (resetSizeAfterOpacityChange) { - this.config.size = getRandomNumberBetween(size.range) - } - - if (resetColorAfterOpacityChange) { - this.config.colorValue = this.determineColor( - this.appConfig.fireflies.colorValue.updateMode, - "fading" - ) - } - - const { x: newX, y: newY } = this.getNewPosition( - opacityChangeConfig.positioningMethod, - opacityChangeConfig.backFillPosition - ) - - this.config.x = newX - this.config.y = newY - - // resets the opacity to a new or original opacity - this.config.colorValue.a = opacityChangeConfig.resetRateAfterOpacityChange - ? getRandomNumberBetween(opacityAfterOpacityChange) - : this.originalConfig.colorValue.a - - this.config.accelerationX = - this.determinePropertyXonCartesianOrPolar( - this.appConfig.fireflies.movement.accelerationX, - this.appConfig.fireflies.movement.accelerationPolar, - this.config.movementMode, - this.config.movingAngle - ) / iterationsPerFrame - - this.config.accelerationY = - this.determinePropertyYonCartesianOrPolar( - this.appConfig.fireflies.movement.accelerationY, - this.appConfig.fireflies.movement.accelerationPolar, - this.config.movementMode, - this.config.movingAngle - ) / iterationsPerFrame - - this.config.rotationSpeed = - this.originalConfig.rotationSpeed / iterationsPerFrame - - // recalculate the nearest target after opacitychange - this.pickCurrentTarget() - } somewhereOverTheRainbow = () => { this.config.colorValue.h += @@ -867,7 +712,7 @@ class FireFly { bounds: boundsConfig, colorValue: { updateMode: colorValueUpdateMode, - hslColorChangeRange: { + hslColorRange: { h: { max: maxAllowedHueInHsl, min: minAllowedHueInHsl }, }, }, @@ -1104,11 +949,6 @@ class FireFly { this.config.rotationSpeed = this.originalConfig.rotationSpeed switch (postitioningMethod) { - case "forceFade": - if (this.config.opacityChangeMode === "fade") - this.config.colorValue.a = 0 - else this.config.colorValue.a = 1 - break case "continueOnOtherSide": // -- reset the speed after going out of bounds if (isOutOfBoundsFromLeft) { @@ -1296,15 +1136,212 @@ class FireFly { } } + // handle color change over time: + handleColorChangeOverTime = () => { + // hue + this.handleHueChangeOverTime() + // saturation + this.handleSaturationChangeOverTime() + // lightness + this.handleLightnessChangeOverTime() + // alpha + this.handleAlphaChangeOverTime() + } + + handleHueChangeOverTime = () => { + const { colorChangeOverTime } = this.config + + const { min, max } = this.appConfig.fireflies.colorValue.hslColorRange.h + + this.config.colorValue.h += colorChangeOverTime.h + + if (this.config.colorValue.h > max) { + // after hue hitting max + this.handleMaxHueReached() + } + + if (this.config.colorValue.h < min) { + // after hue hitting min + this.handleMinHueReached() + } + } + + handleSaturationChangeOverTime = () => { + const { colorChangeOverTime } = this.config + const { min, max } = this.appConfig.fireflies.colorValue.hslColorRange.s + + this.config.colorValue.s += colorChangeOverTime.s + + if (this.config.colorValue.s > max) { + // after saturation hitting max + this.handleMaxSaturationReached() + } + if (this.config.colorValue.s < min) { + // after saturation hitting min + this.handleMinSaturationReached() + } + } + + handleLightnessChangeOverTime = () => { + const { colorChangeOverTime } = this.config + const { min, max } = this.appConfig.fireflies.colorValue.hslColorRange.l + + this.config.colorValue.l += colorChangeOverTime.l + if (this.config.colorValue.l > max) { + // after lightness hitting max + this.handleMaxLightnessReached() + } + if (this.config.colorValue.l < min) { + // after lightness hitting min + this.handleMinLightnessReached() + } + } + + handleAlphaChangeOverTime = () => { + const { colorChangeOverTime } = this.config + const { min, max } = this.appConfig.fireflies.colorValue.hslColorRange.a + + this.config.colorValue.a += colorChangeOverTime.a + if (this.config.colorValue.a > max) { + // after alpha hitting max + this.handleMaxAlphaReached() + } + if (this.config.colorValue.a < min) { + // after alpha hitting min + this.handleMinAlphaReached() + } + } + + // handle when color value reaches min or max + handleMinHueReached = () => { + const { + hslColorRange: { h: hueRange }, + newHslColorValueAfterHittingMin: { h: hAfterHittingMin }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.h = + hAfterHittingMin === "max" + ? hueRange.max + : getRandomNumberBetween(hueRange) + } + + handleMaxHueReached = () => { + const { + hslColorRange: { h: hueRange }, + newHslColorValueAfterHittingMax: { h: hAfterHittingMax }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.h = + hAfterHittingMax === "min" + ? hueRange.min + : getRandomNumberBetween(hueRange) + } + + handleMinSaturationReached = () => { + const { + hslColorRange: { s: saturationRange }, + newHslColorValueAfterHittingMin: { s: sAfterHittingMin }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.s = + sAfterHittingMin === "max" + ? saturationRange.max + : getRandomNumberBetween(saturationRange) + } + + handleMaxSaturationReached = () => { + const { + hslColorRange: { s: saturationRange }, + newHslColorValueAfterHittingMax: { s: sAfterHittingMax }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.s = + sAfterHittingMax === "min" + ? saturationRange.min + : getRandomNumberBetween(saturationRange) + } + + handleMinLightnessReached = () => { + const { + hslColorRange: { l: lightnessRange }, + newHslColorValueAfterHittingMin: { l: lAfterHittingMin }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.l = + lAfterHittingMin === "max" + ? lightnessRange.max + : getRandomNumberBetween(lightnessRange) + } + + handleMaxLightnessReached = () => { + const { + hslColorRange: { l: lightnessRange }, + newHslColorValueAfterHittingMax: { l: lAfterHittingMax }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.l = + lAfterHittingMax === "min" + ? lightnessRange.min + : getRandomNumberBetween(lightnessRange) + } + + handleMinAlphaReached = () => { + const { + hslColorRange: { a: alphaRange }, + newHslColorValueAfterHittingMin: { a: aAfterHittingMin }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.a = + aAfterHittingMin === "max" + ? alphaRange.max + : getRandomNumberBetween(alphaRange) + } + + handleMaxAlphaReached = () => { + const { + hslColorRange: { a: alphaRange }, + newHslColorValueAfterHittingMax: { a: aAfterHittingMax }, + } = this.appConfig.fireflies.colorValue + + this.config.colorValue.a = + aAfterHittingMax === "min" + ? alphaRange.min + : getRandomNumberBetween(alphaRange) + } + + // handle size change over time + handleSizeChangeOverTime = () => { + const { sizeChangeOverTime } = this.config + const { min, max } = this.appConfig.fireflies.size.range + + this.config.size += sizeChangeOverTime + + if (this.config.size > max) this.handleMaxSizeReached() + if (this.config.size < min) this.handleMinSizeReached() + } + + handleMaxSizeReached = () => { + const { newSizeAfterHitMax, range } = this.appConfig.fireflies.size + + this.config.size = + newSizeAfterHitMax === "min" ? range.min : getRandomNumberBetween(range) + } + + handleMinSizeReached = () => { + const { newSizeAfterHitMin, range } = this.appConfig.fireflies.size + + this.config.size = + newSizeAfterHitMin === "max" ? range.max : getRandomNumberBetween(range) + } + + // update for each frame update(ctx: CanvasRenderingContext2D, hueShiftAmount: number) { this.draw(ctx, hueShiftAmount) + this.handleSizeChangeOverTime() + this.handleColorChangeOverTime() this.handleRotation() this.handleRotationAcceleration() - // handle Opacity change - if (this.config.opacityChangeMode === "fade") this.handleFade() - else this.handleGlow() - // this.handleWind() if (this.config.willFollowTarget) { diff --git a/src/Config/colorValue.ts b/src/Config/colorValue.ts index 4bd7265..0eff982 100644 --- a/src/Config/colorValue.ts +++ b/src/Config/colorValue.ts @@ -4,55 +4,64 @@ import HslColor from "../Classes/hslColor" const colorValueConfig: ColorValueConfigType = { updateMode: "updatingHslColor", startingMehtod: { - h: "random", + h: "min", s: "random", l: "random", a: "max", }, startingMethodForColorChoices: "random", - onFadeMethod: { - h: "random", - s: "random", - l: "random", - a: "random", - }, - incrementOnFade: { - h: 10, - s: 5, - l: 4, - a: 0, - }, - // TODO: Later it should be implemented it changes on: - // -- Glow - // -- OutOfBounds - // Also consider moving it to fadeConfig - hslColorShouldChangeAfterFade: { - h: true, - s: false, - l: false, - a: false, + hslColorRange: { + h: { + min: 0, + max: 360, + }, + s: { + min: 75, + max: 95, + }, + l: { + min: 10, + max: 75, + }, + a: { + min: 0, + max: 1, + }, }, - hslColorChangeRange: { + hslColorChangeRangeOverTime: { h: { - min: 0, - max: 30, + min: 0.4, + max: 0.5, }, s: { min: 0, max: 0, }, l: { - min: 100, - max: 100, + min: 0, + max: 0, }, a: { min: 0, - max: 1, + max: 0, }, }, + newHslColorValueAfterHittingMax: { + h: "min", + s: "min", + l: "min", + a: "min", + }, + newHslColorValueAfterHittingMin: { + h: "max", + s: "max", + l: "max", + a: "random", + }, + weightedColorChoices: [ // color 1: { diff --git a/src/Config/fade.ts b/src/Config/fade.ts deleted file mode 100644 index f59f677..0000000 --- a/src/Config/fade.ts +++ /dev/null @@ -1,27 +0,0 @@ -const fadeConfig: OpacityChangeConfigType = { - rate: { - min: 0.025, - max: 0.04, - }, - - // TODO: change this to new opacity after fade (and grow) - // TODO: Refactor the code - opacityAfterOpacityChange: { - min: 1, - max: 1, - }, - backFillPosition: { - x: 0, - y: 0, - }, - positioningMethod: "random", - resetColorAfterOpacityChange: false, - resetRateAfterOpacityChange: false, - resetSizeAfterOpacityChange: false, - sizeChange: { - mode: "none", - frequency: 1, - }, -} - -export default fadeConfig diff --git a/src/Config/glow.ts b/src/Config/glow.ts deleted file mode 100644 index 7582421..0000000 --- a/src/Config/glow.ts +++ /dev/null @@ -1,25 +0,0 @@ -const glowConfig: OpacityChangeConfigType = { - rate: { - min: 0.003, - max: 0.009, - }, - - opacityAfterOpacityChange: { - min: 0, - max: 0, - }, - backFillPosition: { - x: 0, - y: 0, - }, - positioningMethod: "none", - resetColorAfterOpacityChange: false, - resetRateAfterOpacityChange: false, - resetSizeAfterOpacityChange: false, - sizeChange: { - mode: "none", - frequency: 1, - }, -} - -export default glowConfig diff --git a/src/Config/index.ts b/src/Config/index.ts index 4687379..7453ce7 100644 --- a/src/Config/index.ts +++ b/src/Config/index.ts @@ -11,7 +11,6 @@ import movementConfig from "./movement" import rotationConfig from "./rotation" import startingPositioningConfig from "./startingPositioning" import shapingConfig from "./shaping" -import opacityChangeOptionsConfig from "./opacityChangeOptions" import colorValueConfig from "./colorValue" import boundsConfig from "./bounds" import outOfBoundsConfig from "./outOfBounds" @@ -40,8 +39,6 @@ const config: ConfigType = { shaping: shapingConfig, - opacityChangeOptions: opacityChangeOptionsConfig, - colorValue: colorValueConfig, bounds: boundsConfig, diff --git a/src/Config/movement.ts b/src/Config/movement.ts index bfb9b3e..19ad648 100644 --- a/src/Config/movement.ts +++ b/src/Config/movement.ts @@ -1,8 +1,8 @@ const movementConfig: MovementConfigType = { movementMode: "polar", angleRange: { - min: Math.PI / 1.5, - max: Math.PI / 3, + min: 0, + max: Math.PI * 2, }, speedX: { min: -2, @@ -14,8 +14,8 @@ const movementConfig: MovementConfigType = { }, speedPolar: { - min: 5, - max: 10, + min: 1, + max: 3, }, accelerationX: { @@ -28,8 +28,8 @@ const movementConfig: MovementConfigType = { }, accelerationPolar: { - min: 0.1, - max: 0.1, + min: 0.0001, + max: 0.001, }, accelerateInCurrentMovingDirection: false, diff --git a/src/Config/opacityChangeOptions.ts b/src/Config/opacityChangeOptions.ts deleted file mode 100644 index 00d9ad2..0000000 --- a/src/Config/opacityChangeOptions.ts +++ /dev/null @@ -1,11 +0,0 @@ -import fadeConfig from "./fade" -import glowConfig from "./glow" - -const opacityChangeOptionsConfig: OpacityChangeOptionsConfigType = { - fadeRatio: 1, - - fade: fadeConfig, - glow: glowConfig, -} - -export default opacityChangeOptionsConfig diff --git a/src/Config/shaping.ts b/src/Config/shaping.ts index c0b9ed4..e469bf6 100644 --- a/src/Config/shaping.ts +++ b/src/Config/shaping.ts @@ -1,9 +1,9 @@ const shapingConfig: ShapingConfigType = { - shape: "circle", + shape: "regularPolygram", regularPolygon: { sideCount: { - min: 4, - max: 4, + min: 5, + max: 5, }, }, } diff --git a/src/Config/size.ts b/src/Config/size.ts index 9130ea2..ace09e0 100644 --- a/src/Config/size.ts +++ b/src/Config/size.ts @@ -1,10 +1,18 @@ const sizeConfig: SizeConfigType = { range: { - min: 15, + min: 1, max: 30, }, - pickingMethod: "max", + startingMethod: "max", + + sizeChangeRangeOverTime: { + min: 0, + max: 0, + }, + + newSizeAfterHitMax: "random", + newSizeAfterHitMin: "random", distributionFunction: (index, count, minSize, maxSize) => { return 7 diff --git a/src/Interfaces/ISingleFireflyConfig.ts b/src/Interfaces/ISingleFireflyConfig.ts index 1f8f15e..180f283 100644 --- a/src/Interfaces/ISingleFireflyConfig.ts +++ b/src/Interfaces/ISingleFireflyConfig.ts @@ -19,6 +19,13 @@ interface ISingleFireflyConfig { // all the targets on the canvas targets: Target[] + colorChangeOverTime: { + h: number + s: number + l: number + a: number + } + // the chosen target currentTarget: Target @@ -52,21 +59,15 @@ interface ISingleFireflyConfig { // Size of the firefly (in pixels) size: number + // How much size changes over time + sizeChangeOverTime: number + // Color of the firefly colorValue: HslColor - // Determines Firefly fades or glows - opacityChangeMode: OpacityChangeModeType - // Rate of the fading or glowing of the firefly - opacityChangeRate: number - // if true This firefly is going to be used for debug debugMode: boolean - // Method that size changes when glowed or faded - sizeBehaviourWhenFading: OpacityChangeSizeChangeModeType - sizeBehaviourWhenGlowing: OpacityChangeSizeChangeModeType - // How much the firefly shakes // - Horizontally jitterX: number diff --git a/src/Types/ColorValueConfigType.ts b/src/Types/ColorValueConfigType.ts index e8f8ba8..791cbef 100644 --- a/src/Types/ColorValueConfigType.ts +++ b/src/Types/ColorValueConfigType.ts @@ -20,41 +20,40 @@ type ColorValueConfigType = { // -- -- for color choices: startingMethodForColorChoices: ColorRangeSpecificationStartingModeType - // -- OnFade - // how the app gets different hsl values - // after each time firefly fades - onFadeMethod: { - h: ColorDeterminationMethodType - s: ColorDeterminationMethodType - l: ColorDeterminationMethodType - a: ColorDeterminationMethodType - } - - // on fade, - // when colorValueUpdateMode: randomHslColor - // how much all the values gets inc or dec - incrementOnFade: HslColor - - // If firefly should change the hsla value - // once it fades - hslColorShouldChangeAfterFade: { - h: boolean - s: boolean - l: boolean - a: boolean + // max and min of color values + hslColorRange: { + h: RangeType + s: RangeType + l: RangeType + a: RangeType } - // if hslColorShouldChange in any of the - // hslValues are true, - // at which range should the value change - - hslColorChangeRange: { + // how much the value should change over time + // (respecting hslColorRange) + hslColorChangeRangeOverTime: { h: RangeType s: RangeType l: RangeType a: RangeType } + // after hitting max or min, value sets to: + // min: hslColorRange.value.min + // max: hslColorRange.value.max + // random: hslColorRange.value.random(min - max) + newHslColorValueAfterHittingMax: { + h: "min" | "random" + s: "min" | "random" + l: "min" | "random" + a: "min" | "random" + } + newHslColorValueAfterHittingMin: { + h: "max" | "random" + s: "max" | "random" + l: "max" | "random" + a: "max" | "random" + } + // -- Weighted Color Choices // if colorValueUpdateMode: multipleColorValues // how the color choices are weighted diff --git a/src/Types/ConfigType.ts b/src/Types/ConfigType.ts index 88cd838..95c2c73 100644 --- a/src/Types/ConfigType.ts +++ b/src/Types/ConfigType.ts @@ -48,11 +48,6 @@ type ConfigType = { // once the app runs startingPositioning: StartingPositioningConfigType - // Config for: - // - Fading (opacity 1 -> 0) - // - Glowing (opacity 0 -> 1) - opacityChangeOptions: OpacityChangeOptionsConfigType - // Config for: // - How the color value changes colorValue: ColorValueConfigType diff --git a/src/Types/OpacityChangeConfigType.ts b/src/Types/OpacityChangeConfigType.ts deleted file mode 100644 index e39fdca..0000000 --- a/src/Types/OpacityChangeConfigType.ts +++ /dev/null @@ -1,34 +0,0 @@ -// Opacity change refers to Fade or Glow in this project -type OpacityChangeConfigType = { - // rate (per frame) that a firefly fade (or glow) - rate: RangeType - // rate of opacity change (fade or glow) will be reset once it fades (or glows) - // (Set in FadeConfig or GlowConfig ) - resetRateAfterOpacityChange: boolean - - // new initial opacity which is used by newly spawned firefly - opacityAfterOpacityChange: RangeType - - // if true: the size of firefly gets new random value (set in config file) - // after a firefly fades (or glows) - resetSizeAfterOpacityChange: boolean - - // when faded (or glowed) gets the color again (from the values set in ColorValueConfig type) - resetColorAfterOpacityChange: boolean - - // it determines how the app gets the firefly position - // after it faded (or glowed) - positioningMethod: StartingPositioningMethodType - - // it determines how the app gets larger or smaller according to the fade (or glow) - sizeChange: { - // grow or shrink - mode: OpacityChangeSizeChangeModeType - // how much it grows or shrinks - frequency: number - } - - // The positioning System uses this position's value(s) to fill the values not set - // by the positioningMethod - backFillPosition: CartesianCoordinateSystemType -} diff --git a/src/Types/OpacityChangeOptionsConfigType.ts b/src/Types/OpacityChangeOptionsConfigType.ts deleted file mode 100644 index 9f8209e..0000000 --- a/src/Types/OpacityChangeOptionsConfigType.ts +++ /dev/null @@ -1,11 +0,0 @@ -// The Config for fade and glow respectively -type OpacityChangeOptionsConfigType = { - // how many of fireflies are going to fade (others will glow) - fadeRatio: number - - // config for fade - fade: OpacityChangeConfigType - - // config for glow - glow: OpacityChangeConfigType -} diff --git a/src/Types/OutOfBoundsPositioningMethodType.ts b/src/Types/OutOfBoundsPositioningMethodType.ts index 86f460d..e6b25b5 100644 --- a/src/Types/OutOfBoundsPositioningMethodType.ts +++ b/src/Types/OutOfBoundsPositioningMethodType.ts @@ -3,8 +3,6 @@ type OutOfBoundsPositioningMethodType = // if fireflies get out of bounds, they will continue from the other side (the opposite direction) // e.g. if fireflies got out of bounds from the left bound, they will continue from the right bound, and so on | "continueOnOtherSide" - // when fireflies gets out of bound, treats it as if fireflies are faded (gets from fadeConfig) - | "forceFade" // Fireflies continues their journey into the oblivion :D (not recommended) | "none" // Fireflies respawn at the center of canvas diff --git a/src/Types/StartingPositioningMethodType.ts b/src/Types/PositioningMethodType.ts similarity index 94% rename from src/Types/StartingPositioningMethodType.ts rename to src/Types/PositioningMethodType.ts index 1ee5d73..569dabb 100644 --- a/src/Types/StartingPositioningMethodType.ts +++ b/src/Types/PositioningMethodType.ts @@ -1,4 +1,4 @@ -type StartingPositioningMethodType = +type postitioningMethodType = // Fireflies spawn at random positions on canvas | "random" // Fireflies spawn at positions w/ random x value diff --git a/src/Types/SizeConfigType.ts b/src/Types/SizeConfigType.ts index 3daf836..f772ce5 100644 --- a/src/Types/SizeConfigType.ts +++ b/src/Types/SizeConfigType.ts @@ -2,8 +2,14 @@ type SizeConfigType = { range: RangeType - // How the size is picked - pickingMethod: SizePickingMethodsType + // How the size is picked when app runs + startingMethod: SizePickingMethodsType + + // How the size changes over time + sizeChangeRangeOverTime: RangeType + + newSizeAfterHitMin: "max" | "random" + newSizeAfterHitMax: "min" | "random" // How size is distributed // Default: (min, max) => random(min, max) diff --git a/src/Types/StartingPositioningConfigType.ts b/src/Types/StartingPositioningConfigType.ts index 6ca6bb9..f40a010 100644 --- a/src/Types/StartingPositioningConfigType.ts +++ b/src/Types/StartingPositioningConfigType.ts @@ -1,6 +1,6 @@ type StartingPositioningConfigType = { // Method that determines where the fireflies spawn when the app starts running - method: StartingPositioningMethodType + method: postitioningMethodType // the set values need to fill the position of firefly when app starts running // for the values not set by the app