Reworked the opacity change system

now all values change over time with associated events when reaches  min/max

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:
     {

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,

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,

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,
     },
   },
 }

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

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

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

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