@tsparticles/updater-gradient 3.0.0-alpha.0 → 3.0.0-beta.0

package/esm/Options/Classes/GradientAngle.js

@@ -1,3 +1,4 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation";
 export class GradientAngle {
     constructor() {
@@ -11,7 +12,7 @@ export class GradientAngle {
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
         if (data.direction !== undefined) {
             this.direction = data.direction;

package/esm/Options/Classes/GradientAngleAnimation.js

@@ -1,10 +1,11 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -23,6 +24,9 @@ export class GradientAngleAnimation {
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

package/esm/Options/Classes/GradientColorOpacity.js

@@ -1,5 +1,5 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
-import { setRangeValue } from "@tsparticles/engine";
 export class GradientColorOpacity {
     constructor() {
         this.value = 0;

package/esm/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,10 +1,11 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
         this.startValue = "random";
     }
@@ -27,5 +28,11 @@ export class GradientColorOpacityAnimation {
         if (data.startValue !== undefined) {
             this.startValue = data.startValue;
         }
+        if (data.decay !== undefined) {
+            this.decay = setRangeValue(data.decay);
+        }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
     }
 }

package/esm/Types.js

@@ -0,0 +1 @@
+export {};

package/esm/Utils.js

@@ -0,0 +1,107 @@
+function updateColorOpacity(delta, value) {
+    if (!value.enable) {
+        return;
+    }
+    const decay = value.decay ?? 1;
+    switch (value.status) {
+        case "increasing":
+            if (value.value >= value.max) {
+                value.status = "decreasing";
+            }
+            else {
+                value.value += (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+        case "decreasing":
+            if (value.value <= value.min) {
+                value.status = "increasing";
+            }
+            else {
+                value.value -= (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+    }
+    if (value.velocity && decay !== 1) {
+        value.velocity *= decay;
+    }
+}
+function updateColorValue(delta, colorValue, max, decrease) {
+    if (!colorValue || !colorValue.enable) {
+        return;
+    }
+    if (!colorValue.time) {
+        colorValue.time = 0;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        colorValue.time += delta.value;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        return;
+    }
+    const velocity = (colorValue.velocity ?? 0) * delta.factor, decay = colorValue.decay ?? 1;
+    if (!decrease || colorValue.status === "increasing") {
+        colorValue.value += velocity;
+        if (decrease && colorValue.value > max) {
+            colorValue.status = "decreasing";
+            colorValue.value -= colorValue.value % max;
+        }
+    }
+    else {
+        colorValue.value -= velocity;
+        if (colorValue.value < 0) {
+            colorValue.status = "increasing";
+            colorValue.value += colorValue.value;
+        }
+    }
+    if (colorValue.value > max) {
+        colorValue.value %= max;
+    }
+    if (colorValue.velocity && decay !== 1) {
+        colorValue.velocity *= decay;
+    }
+}
+function updateAngle(delta, angle) {
+    const speed = (angle.velocity ?? 0) * delta.factor, max = 2 * Math.PI, decay = angle.decay ?? 1;
+    if (!angle.enable) {
+        return;
+    }
+    switch (angle.status) {
+        case "increasing":
+            angle.value += speed;
+            if (angle.value > max) {
+                angle.value -= max;
+            }
+            break;
+        case "decreasing":
+        default:
+            angle.value -= speed;
+            if (angle.value < 0) {
+                angle.value += max;
+            }
+            break;
+    }
+    if (angle.velocity && decay !== 1) {
+        angle.velocity *= decay;
+    }
+}
+export function updateGradient(particle, delta) {
+    const { gradient } = particle;
+    if (!gradient) {
+        return;
+    }
+    updateAngle(delta, gradient.angle);
+    for (const color of gradient.colors) {
+        if (particle.color?.h !== undefined) {
+            updateColorValue(delta, color.value.h, 360, false);
+        }
+        if (particle.color?.s !== undefined) {
+            updateColorValue(delta, color.value.s, 100, true);
+        }
+        if (particle.color?.l !== undefined) {
+            updateColorValue(delta, color.value.l, 100, true);
+        }
+        if (color.opacity) {
+            updateColorOpacity(delta, color.opacity);
+        }
+    }
+}

package/esm/index.js

@@ -1,4 +1,4 @@
 import { GradientUpdater } from "./GradientUpdater";
-export function loadGradientUpdater(engine) {
-    engine.addParticleUpdater("gradient", () => new GradientUpdater());
+export async function loadGradientUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("gradient", () => new GradientUpdater(), refresh);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-gradient",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles particles gradient updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -73,6 +73,10 @@
       "type": "github",
       "url": "https://github.com/sponsors/matteobruni"
     },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
     {
       "type": "buymeacoffee",
       "url": "https://www.buymeacoffee.com/matteobruni"
@@ -83,10 +87,11 @@
   "unpkg": "tsparticles.updater.gradient.min.js",
   "module": "esm/index.js",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.0"
   }
-}
+}