@tsparticles/updater-gradient 3.0.2 → 3.1.0

package/browser/GradientUpdater.js

@@ -1,14 +1,15 @@
-import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { AnimatableGradient } from "./Options/Classes/AnimatableGradient.js";
 import { updateGradient } from "./Utils.js";
+const double = 2, doublePI = Math.PI * double;
 export class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
-            ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
+        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+            ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const { stop, value, opacity: cOpacity } of gradient.colors) {
             fillGradient.addColorStop(stop, getStyleFromHsl({
@@ -24,14 +25,16 @@ export class GradientUpdater {
         if (!gradient) {
             return;
         }
-        const { angle } = gradient;
+        const { angle } = gradient, speedFactor = 360, delayOffset = 1;
         particle.gradient = {
             angle: {
                 value: getRangeValue(angle.value),
                 enable: angle.animation.enable,
-                velocity: (getRangeValue(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - getRangeValue(angle.animation.decay),
-                delayTime: getRangeValue(angle.animation.delay) * 1000,
+                velocity: (getRangeValue(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
+                decay: delayOffset - getRangeValue(angle.animation.decay),
+                delayTime: getRangeValue(angle.animation.delay) * millisecondsToSeconds,
+                max: doublePI,
+                min: 0,
                 time: 0,
             },
             type: gradient.type,
@@ -39,7 +42,7 @@ export class GradientUpdater {
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > halfRandom ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -66,10 +69,10 @@ export class GradientUpdater {
                         min: getRangeMin(grColor.opacity.value),
                         status: "increasing",
                         value: getRangeValue(grColor.opacity.value),
-                        velocity: (getRangeValue(grColor.opacity.animation.speed) / 100) *
+                        velocity: (getRangeValue(grColor.opacity.animation.speed) / percentDenominator) *
                             particle.container.retina.reduceFactor,
-                        decay: 1 - getRangeValue(grColor.opacity.animation.decay),
-                        delayTime: getRangeValue(grColor.opacity.animation.delay) * 1000,
+                        decay: delayOffset - getRangeValue(grColor.opacity.animation.decay),
+                        delayTime: getRangeValue(grColor.opacity.animation.delay) * millisecondsToSeconds,
                         time: 0,
                     }
                     : undefined,
@@ -93,7 +96,7 @@ export class GradientUpdater {
                     default:
                         addOpacity.value = randomInRange(addOpacity);
                         addOpacity.status =
-                            getRandom() >= 0.5 ? "increasing" : "decreasing";
+                            getRandom() >= halfRandom ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -103,7 +106,7 @@ export class GradientUpdater {
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
-            (particle.gradient?.angle.enable ||
+            (!!particle.gradient?.angle.enable ||
                 (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }

package/browser/Utils.js

@@ -1,107 +1,14 @@
-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;
-    }
-}
+import { updateAnimation, updateColor } from "@tsparticles/engine";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    updateAngle(delta, gradient.angle);
+    updateAnimation(particle, gradient.angle, false, "none", delta);
     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);
-        }
+        updateColor(color.value, delta);
         if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
+            updateAnimation(particle, color.opacity, true, "none", delta);
         }
     }
 }

package/cjs/GradientUpdater.js

@@ -4,14 +4,15 @@ exports.GradientUpdater = void 0;
 const engine_1 = require("@tsparticles/engine");
 const AnimatableGradient_js_1 = require("./Options/Classes/AnimatableGradient.js");
 const Utils_js_1 = require("./Utils.js");
+const double = 2, doublePI = Math.PI * double;
 class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
-            ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
+        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+            ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const { stop, value, opacity: cOpacity } of gradient.colors) {
             fillGradient.addColorStop(stop, (0, engine_1.getStyleFromHsl)({
@@ -27,14 +28,16 @@ class GradientUpdater {
         if (!gradient) {
             return;
         }
-        const { angle } = gradient;
+        const { angle } = gradient, speedFactor = 360, delayOffset = 1;
         particle.gradient = {
             angle: {
                 value: (0, engine_1.getRangeValue)(angle.value),
                 enable: angle.animation.enable,
-                velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - (0, engine_1.getRangeValue)(angle.animation.decay),
-                delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * 1000,
+                velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
+                decay: delayOffset - (0, engine_1.getRangeValue)(angle.animation.decay),
+                delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * engine_1.millisecondsToSeconds,
+                max: doublePI,
+                min: 0,
                 time: 0,
             },
             type: gradient.type,
@@ -42,7 +45,7 @@ class GradientUpdater {
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            rotateDirection = (0, engine_1.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
+            rotateDirection = (0, engine_1.getRandom)() > engine_1.halfRandom ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -69,10 +72,10 @@ class GradientUpdater {
                         min: (0, engine_1.getRangeMin)(grColor.opacity.value),
                         status: "increasing",
                         value: (0, engine_1.getRangeValue)(grColor.opacity.value),
-                        velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / 100) *
+                        velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / engine_1.percentDenominator) *
                             particle.container.retina.reduceFactor,
-                        decay: 1 - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
-                        delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * 1000,
+                        decay: delayOffset - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
+                        delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * engine_1.millisecondsToSeconds,
                         time: 0,
                     }
                     : undefined,
@@ -96,7 +99,7 @@ class GradientUpdater {
                     default:
                         addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
                         addOpacity.status =
-                            (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                            (0, engine_1.getRandom)() >= engine_1.halfRandom ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -106,7 +109,7 @@ class GradientUpdater {
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
-            (particle.gradient?.angle.enable ||
+            (!!particle.gradient?.angle.enable ||
                 (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }

package/cjs/Utils.js

@@ -1,110 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateGradient = void 0;
-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;
-    }
-}
+const engine_1 = require("@tsparticles/engine");
 function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    updateAngle(delta, gradient.angle);
+    (0, engine_1.updateAnimation)(particle, gradient.angle, false, "none", delta);
     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);
-        }
+        (0, engine_1.updateColor)(color.value, delta);
         if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
+            (0, engine_1.updateAnimation)(particle, color.opacity, true, "none", delta);
         }
     }
 }

package/esm/GradientUpdater.js

@@ -1,14 +1,15 @@
-import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { AnimatableGradient } from "./Options/Classes/AnimatableGradient.js";
 import { updateGradient } from "./Utils.js";
+const double = 2, doublePI = Math.PI * double;
 export class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
-            ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
+        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+            ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const { stop, value, opacity: cOpacity } of gradient.colors) {
             fillGradient.addColorStop(stop, getStyleFromHsl({
@@ -24,14 +25,16 @@ export class GradientUpdater {
         if (!gradient) {
             return;
         }
-        const { angle } = gradient;
+        const { angle } = gradient, speedFactor = 360, delayOffset = 1;
         particle.gradient = {
             angle: {
                 value: getRangeValue(angle.value),
                 enable: angle.animation.enable,
-                velocity: (getRangeValue(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - getRangeValue(angle.animation.decay),
-                delayTime: getRangeValue(angle.animation.delay) * 1000,
+                velocity: (getRangeValue(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
+                decay: delayOffset - getRangeValue(angle.animation.decay),
+                delayTime: getRangeValue(angle.animation.delay) * millisecondsToSeconds,
+                max: doublePI,
+                min: 0,
                 time: 0,
             },
             type: gradient.type,
@@ -39,7 +42,7 @@ export class GradientUpdater {
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > halfRandom ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -66,10 +69,10 @@ export class GradientUpdater {
                         min: getRangeMin(grColor.opacity.value),
                         status: "increasing",
                         value: getRangeValue(grColor.opacity.value),
-                        velocity: (getRangeValue(grColor.opacity.animation.speed) / 100) *
+                        velocity: (getRangeValue(grColor.opacity.animation.speed) / percentDenominator) *
                             particle.container.retina.reduceFactor,
-                        decay: 1 - getRangeValue(grColor.opacity.animation.decay),
-                        delayTime: getRangeValue(grColor.opacity.animation.delay) * 1000,
+                        decay: delayOffset - getRangeValue(grColor.opacity.animation.decay),
+                        delayTime: getRangeValue(grColor.opacity.animation.delay) * millisecondsToSeconds,
                         time: 0,
                     }
                     : undefined,
@@ -93,7 +96,7 @@ export class GradientUpdater {
                     default:
                         addOpacity.value = randomInRange(addOpacity);
                         addOpacity.status =
-                            getRandom() >= 0.5 ? "increasing" : "decreasing";
+                            getRandom() >= halfRandom ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -103,7 +106,7 @@ export class GradientUpdater {
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
-            (particle.gradient?.angle.enable ||
+            (!!particle.gradient?.angle.enable ||
                 (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }

package/esm/Utils.js

@@ -1,107 +1,14 @@
-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;
-    }
-}
+import { updateAnimation, updateColor } from "@tsparticles/engine";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    updateAngle(delta, gradient.angle);
+    updateAnimation(particle, gradient.angle, false, "none", delta);
     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);
-        }
+        updateColor(color.value, delta);
         if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
+            updateAnimation(particle, color.opacity, true, "none", delta);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-gradient",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "tsParticles particles gradient updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.2"
+    "@tsparticles/engine": "^3.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/updater-gradient [6 Dec 2023 at 17:46]</title>
+    <title>@tsparticles/updater-gradient [13 Jan 2024 at 23:08]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.updater.gradient.js","isAsset":true,"statSize":12013,"parsedSize":16172,"gzipSize":3575,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":11971,"groups":[{"id":397,"label":"index.js + 8 modules (concatenated)","path":"./dist/browser/index.js + 8 modules (concatenated)","statSize":11971,"parsedSize":16172,"gzipSize":3575,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser","statSize":11971,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/index.js","statSize":210,"parsedSize":283,"gzipSize":62,"inaccurateSizes":true},{"id":null,"label":"GradientUpdater.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/GradientUpdater.js","statSize":4901,"parsedSize":6620,"gzipSize":1463,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes","statSize":4021,"groups":[{"id":null,"label":"AnimatableGradient.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/AnimatableGradient.js","statSize":614,"parsedSize":829,"gzipSize":183,"inaccurateSizes":true},{"id":null,"label":"GradientAngle.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientAngle.js","statSize":550,"parsedSize":743,"gzipSize":164,"inaccurateSizes":true},{"id":null,"label":"AnimatableGradientColor.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/AnimatableGradientColor.js","statSize":679,"parsedSize":917,"gzipSize":202,"inaccurateSizes":true},{"id":null,"label":"GradientAngleAnimation.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientAngleAnimation.js","statSize":796,"parsedSize":1075,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"GradientColorOpacity.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientColorOpacity.js","statSize":459,"parsedSize":620,"gzipSize":137,"inaccurateSizes":true},{"id":null,"label":"GradientColorOpacityAnimation.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientColorOpacityAnimation.js","statSize":923,"parsedSize":1246,"gzipSize":275,"inaccurateSizes":true}],"parsedSize":5432,"gzipSize":1200,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Utils.js","statSize":2839,"parsedSize":3835,"gzipSize":847,"inaccurateSizes":true}],"parsedSize":16172,"gzipSize":3575,"inaccurateSizes":true}]}],"parsedSize":16172,"gzipSize":3575},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.updater.gradient":true}}];
+      window.chartData = [{"label":"tsparticles.updater.gradient.js","isAsset":true,"statSize":10014,"parsedSize":14255,"gzipSize":3280,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":9972,"groups":[{"id":453,"label":"index.js + 8 modules (concatenated)","path":"./dist/browser/index.js + 8 modules (concatenated)","statSize":9972,"parsedSize":14255,"gzipSize":3280,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser","statSize":9972,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/index.js","statSize":210,"parsedSize":300,"gzipSize":69,"inaccurateSizes":true},{"id":null,"label":"GradientUpdater.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/GradientUpdater.js","statSize":5299,"parsedSize":7574,"gzipSize":1742,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes","statSize":4021,"groups":[{"id":null,"label":"AnimatableGradient.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/AnimatableGradient.js","statSize":614,"parsedSize":877,"gzipSize":201,"inaccurateSizes":true},{"id":null,"label":"GradientAngle.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientAngle.js","statSize":550,"parsedSize":786,"gzipSize":180,"inaccurateSizes":true},{"id":null,"label":"AnimatableGradientColor.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/AnimatableGradientColor.js","statSize":679,"parsedSize":970,"gzipSize":223,"inaccurateSizes":true},{"id":null,"label":"GradientAngleAnimation.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientAngleAnimation.js","statSize":796,"parsedSize":1137,"gzipSize":261,"inaccurateSizes":true},{"id":null,"label":"GradientColorOpacity.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientColorOpacity.js","statSize":459,"parsedSize":656,"gzipSize":150,"inaccurateSizes":true},{"id":null,"label":"GradientColorOpacityAnimation.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/GradientColorOpacityAnimation.js","statSize":923,"parsedSize":1319,"gzipSize":303,"inaccurateSizes":true}],"parsedSize":5748,"gzipSize":1322,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Utils.js","statSize":442,"parsedSize":631,"gzipSize":145,"inaccurateSizes":true}],"parsedSize":14255,"gzipSize":3280,"inaccurateSizes":true}]}],"parsedSize":14255,"gzipSize":3280},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.updater.gradient":true}}];
       window.entrypoints = ["tsparticles.updater.gradient","tsparticles.updater.gradient.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.updater.gradient.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -263,92 +263,7 @@ class AnimatableGradient {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Utils.js
-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;
-  }
-}
+
 function updateGradient(particle, delta) {
   const {
     gradient
@@ -356,19 +271,11 @@ function updateGradient(particle, delta) {
   if (!gradient) {
     return;
   }
-  updateAngle(delta, gradient.angle);
+  (0,engine_root_window_.updateAnimation)(particle, gradient.angle, false, "none", delta);
   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);
-    }
+    (0,engine_root_window_.updateColor)(color.value, delta);
     if (color.opacity) {
-      updateColorOpacity(delta, color.opacity);
+      (0,engine_root_window_.updateAnimation)(particle, color.opacity, true, "none", delta);
     }
   }
 }
@@ -376,6 +283,8 @@ function updateGradient(particle, delta) {
 
 
 
+const GradientUpdater_double = 2,
+  doublePI = Math.PI * GradientUpdater_double;
 class GradientUpdater {
   getColorStyles(particle, context, radius, opacity) {
     const gradient = particle.gradient;
@@ -383,7 +292,12 @@ class GradientUpdater {
       return {};
     }
     const gradientAngle = gradient.angle.value,
-      fillGradient = gradient.type === "radial" ? context.createRadialGradient(0, 0, 0, 0, 0, radius) : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
+      origin = {
+        x: 0,
+        y: 0
+      },
+      minRadius = 0,
+      fillGradient = gradient.type === "radial" ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius) : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
     for (const {
       stop,
       value,
@@ -405,15 +319,19 @@ class GradientUpdater {
       return;
     }
     const {
-      angle
-    } = gradient;
+        angle
+      } = gradient,
+      speedFactor = 360,
+      delayOffset = 1;
     particle.gradient = {
       angle: {
         value: (0,engine_root_window_.getRangeValue)(angle.value),
         enable: angle.animation.enable,
-        velocity: (0,engine_root_window_.getRangeValue)(angle.animation.speed) / 360 * particle.container.retina.reduceFactor,
-        decay: 1 - (0,engine_root_window_.getRangeValue)(angle.animation.decay),
-        delayTime: (0,engine_root_window_.getRangeValue)(angle.animation.delay) * 1000,
+        velocity: (0,engine_root_window_.getRangeValue)(angle.animation.speed) / speedFactor * particle.container.retina.reduceFactor,
+        decay: delayOffset - (0,engine_root_window_.getRangeValue)(angle.animation.decay),
+        delayTime: (0,engine_root_window_.getRangeValue)(angle.animation.delay) * engine_root_window_.millisecondsToSeconds,
+        max: doublePI,
+        min: 0,
         time: 0
       },
       type: gradient.type,
@@ -421,7 +339,7 @@ class GradientUpdater {
     };
     let rotateDirection = gradient.angle.direction;
     if (rotateDirection === "random") {
-      rotateDirection = (0,engine_root_window_.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
+      rotateDirection = (0,engine_root_window_.getRandom)() > engine_root_window_.halfRandom ? "counter-clockwise" : "clockwise";
     }
     switch (rotateDirection) {
       case "counter-clockwise":
@@ -448,9 +366,9 @@ class GradientUpdater {
             min: (0,engine_root_window_.getRangeMin)(grColor.opacity.value),
             status: "increasing",
             value: (0,engine_root_window_.getRangeValue)(grColor.opacity.value),
-            velocity: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.speed) / 100 * particle.container.retina.reduceFactor,
-            decay: 1 - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay),
-            delayTime: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.delay) * 1000,
+            velocity: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.speed) / engine_root_window_.percentDenominator * particle.container.retina.reduceFactor,
+            decay: delayOffset - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay),
+            delayTime: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.delay) * engine_root_window_.millisecondsToSeconds,
             time: 0
           } : undefined
         };
@@ -474,7 +392,7 @@ class GradientUpdater {
           case "random":
           default:
             addOpacity.value = (0,engine_root_window_.randomInRange)(addOpacity);
-            addOpacity.status = (0,engine_root_window_.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+            addOpacity.status = (0,engine_root_window_.getRandom)() >= engine_root_window_.halfRandom ? "increasing" : "decreasing";
             break;
         }
       }
@@ -482,7 +400,7 @@ class GradientUpdater {
     }
   }
   isEnabled(particle) {
-    return !particle.destroyed && !particle.spawning && (particle.gradient?.angle.enable || (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ?? false));
+    return !particle.destroyed && !particle.spawning && (!!particle.gradient?.angle.enable || (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ?? false));
   }
   loadOptions(options, ...sources) {
     for (const source of sources) {

package/tsparticles.updater.gradient.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.updater.gradient.min.js.LICENSE.txt */
-!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var i in t)("object"==typeof exports?exports:e)[i]=t[i]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function i(e){var n=t[e];if(void 0!==n)return n.exports;var o=t[e]={exports:{}};return a[e](o,o.exports,i),o.exports}i.d=(e,a)=>{for(var t in a)i.o(a,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},i.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadGradientUpdater:()=>y});var e=i(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class o{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,(0,e.isNumber)(a.opacity)?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class s{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)),void 0!==a.sync&&(this.sync=a.sync))}}class l{constructor(){this.value=0,this.animation=new s,this.direction="clockwise"}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)),void 0!==a.direction&&(this.direction=a.direction))}}class c{constructor(){this.angle=new l,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new o;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}function r(e,a){if(!a.enable)return;const t=a.decay??1;switch(a.status){case"increasing":a.value>=a.max?a.status="decreasing":a.value+=(a.velocity??0)*e.factor;break;case"decreasing":a.value<=a.min?a.status="increasing":a.value-=(a.velocity??0)*e.factor}a.velocity&&1!==t&&(a.velocity*=t)}function u(e,a,t,i){if(!a||!a.enable)return;if(a.time||(a.time=0),(a.delayTime??0)>0&&a.time<(a.delayTime??0)&&(a.time+=e.value),(a.delayTime??0)>0&&a.time<(a.delayTime??0))return;const n=(a.velocity??0)*e.factor,o=a.decay??1;i&&"increasing"!==a.status?(a.value-=n,a.value<0&&(a.status="increasing",a.value+=a.value)):(a.value+=n,i&&a.value>t&&(a.status="decreasing",a.value-=a.value%t)),a.value>t&&(a.value%=t),a.velocity&&1!==o&&(a.velocity*=o)}function d(e,a){const{gradient:t}=e;if(t){!function(e,a){const t=(a.velocity??0)*e.factor,i=2*Math.PI,n=a.decay??1;a.enable&&("increasing"===a.status?(a.value+=t,a.value>i&&(a.value-=i)):(a.value-=t,a.value<0&&(a.value+=i)),a.velocity&&1!==n&&(a.velocity*=n))}(a,t.angle);for(const i of t.colors)void 0!==e.color?.h&&u(a,i.value.h,360,!1),void 0!==e.color?.s&&u(a,i.value.s,100,!0),void 0!==e.color?.l&&u(a,i.value.l,100,!0),i.opacity&&r(a,i.opacity)}}class v{getColorStyles(a,t,i,n){const o=a.gradient;if(!o)return{};const s=o.angle.value,l="radial"===o.type?t.createRadialGradient(0,0,0,0,0,i):t.createLinearGradient(Math.cos(s)*-i,Math.sin(s)*-i,Math.cos(s)*i,Math.sin(s)*i);for(const{stop:a,value:t,opacity:i}of o.colors)l.addColorStop(a,(0,e.getStyleFromHsl)({h:t.h.value,s:t.s.value,l:t.l.value},i?.value??n));return{fill:l}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;const{angle:i}=t;a.gradient={angle:{value:(0,e.getRangeValue)(i.value),enable:i.animation.enable,velocity:(0,e.getRangeValue)(i.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.animation.delay),time:0},type:t.type,colors:[]};let n=t.angle.direction;switch("random"===n&&(n=(0,e.getRandom)()>.5?"counter-clockwise":"clockwise"),n){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const o=a.options.reduceDuplicates;for(const i of t.colors){const t=(0,e.rangeColorToHsl)(i.value,a.id,o);if(!t)continue;const n=(0,e.getHslAnimationFromHsl)(t,i.value.animation,a.container.retina.reduceFactor),s={stop:i.stop,value:n,opacity:i.opacity?{enable:i.opacity.animation.enable,max:(0,e.getRangeMax)(i.opacity.value),min:(0,e.getRangeMin)(i.opacity.value),status:"increasing",value:(0,e.getRangeValue)(i.opacity.value),velocity:(0,e.getRangeValue)(i.opacity.animation.speed)/100*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.opacity.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.opacity.animation.delay),time:0}:void 0},{opacity:l}=s;if(i.opacity&&l){const a=i.opacity.value;l.min=(0,e.getRangeMin)(a),l.max=(0,e.getRangeMax)(a);switch(i.opacity.animation.startValue){case"min":l.value=l.min,l.status="increasing";break;case"max":l.value=l.max,l.status="decreasing";break;default:l.value=(0,e.randomInRange)(l),l.status=(0,e.getRandom)()>=.5?"increasing":"decreasing"}}a.gradient.colors.push(s)}}isEnabled(e){return!e.destroyed&&!e.spawning&&(e.gradient?.angle.enable||(e.gradient?.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable))??!1))}loadOptions(a,...t){for(const i of t){if(!i?.gradient)continue;const t=i.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(e,a){d(e,a)}}async function y(e,a=!0){await e.addParticleUpdater("gradient",(()=>new v),a)}})(),n})()));
+!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function n(e){var i=t[e];if(void 0!==i)return i.exports;var o=t[e]={exports:{}};return a[e](o,o.exports,n),o.exports}n.d=(e,a)=>{for(var t in a)n.o(a,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},n.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{n.r(i),n.d(i,{loadGradientUpdater:()=>u});var e=n(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class o{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,(0,e.isNumber)(a.opacity)?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class s{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)),void 0!==a.sync&&(this.sync=a.sync))}}class l{constructor(){this.value=0,this.animation=new s,this.direction="clockwise"}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)),void 0!==a.direction&&(this.direction=a.direction))}}class c{constructor(){this.angle=new l,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new o;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}const r=2*Math.PI;class d{getColorStyles(a,t,n,i){const o=a.gradient;if(!o)return{};const s=o.angle.value,l=0,c=0,r="radial"===o.type?t.createRadialGradient(l,c,0,l,c,n):t.createLinearGradient(Math.cos(s)*-n,Math.sin(s)*-n,Math.cos(s)*n,Math.sin(s)*n);for(const{stop:a,value:t,opacity:n}of o.colors)r.addColorStop(a,(0,e.getStyleFromHsl)({h:t.h.value,s:t.s.value,l:t.l.value},n?.value??i));return{fill:r}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;const{angle:n}=t;a.gradient={angle:{value:(0,e.getRangeValue)(n.value),enable:n.animation.enable,velocity:(0,e.getRangeValue)(n.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(n.animation.decay),delayTime:(0,e.getRangeValue)(n.animation.delay)*e.millisecondsToSeconds,max:r,min:0,time:0},type:t.type,colors:[]};let i=t.angle.direction;switch("random"===i&&(i=(0,e.getRandom)()>e.halfRandom?"counter-clockwise":"clockwise"),i){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const o=a.options.reduceDuplicates;for(const n of t.colors){const t=(0,e.rangeColorToHsl)(n.value,a.id,o);if(!t)continue;const i=(0,e.getHslAnimationFromHsl)(t,n.value.animation,a.container.retina.reduceFactor),s={stop:n.stop,value:i,opacity:n.opacity?{enable:n.opacity.animation.enable,max:(0,e.getRangeMax)(n.opacity.value),min:(0,e.getRangeMin)(n.opacity.value),status:"increasing",value:(0,e.getRangeValue)(n.opacity.value),velocity:(0,e.getRangeValue)(n.opacity.animation.speed)/e.percentDenominator*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(n.opacity.animation.decay),delayTime:(0,e.getRangeValue)(n.opacity.animation.delay)*e.millisecondsToSeconds,time:0}:void 0},{opacity:l}=s;if(n.opacity&&l){const a=n.opacity.value;l.min=(0,e.getRangeMin)(a),l.max=(0,e.getRangeMax)(a);switch(n.opacity.animation.startValue){case"min":l.value=l.min,l.status="increasing";break;case"max":l.value=l.max,l.status="decreasing";break;default:l.value=(0,e.randomInRange)(l),l.status=(0,e.getRandom)()>=e.halfRandom?"increasing":"decreasing"}}a.gradient.colors.push(s)}}isEnabled(e){return!e.destroyed&&!e.spawning&&(!!e.gradient?.angle.enable||(e.gradient?.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable))??!1))}loadOptions(a,...t){for(const n of t){if(!n?.gradient)continue;const t=n.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(a,t){!function(a,t){const{gradient:n}=a;if(n){(0,e.updateAnimation)(a,n.angle,!1,"none",t);for(const i of n.colors)(0,e.updateColor)(i.value,t),i.opacity&&(0,e.updateAnimation)(a,i.opacity,!0,"none",t)}}(a,t)}}async function u(e,a=!0){await e.addParticleUpdater("gradient",(()=>new d),a)}})(),i})()));

package/tsparticles.updater.gradient.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Gradient Updater v3.0.2 by Matteo Bruni */
+/*! tsParticles Gradient Updater v3.1.0 by Matteo Bruni */

package/types/Types.d.ts

@@ -1,4 +1,4 @@
-import type { GradientType, IParticleHslAnimation, IParticleNumericValueAnimation, IParticleValueAnimation, IParticlesOptions, Particle, ParticlesOptions, SingleOrMultiple } from "@tsparticles/engine";
+import type { GradientType, IParticleHslAnimation, IParticleNumericValueAnimation, IParticlesOptions, Particle, ParticlesOptions, SingleOrMultiple } from "@tsparticles/engine";
 import type { AnimatableGradient } from "./Options/Classes/AnimatableGradient.js";
 import type { IAnimatableGradient } from "./Options/Interfaces/IAnimatableGradient.js";
 export interface IParticleGradientColorAnimation {
@@ -7,7 +7,7 @@ export interface IParticleGradientColorAnimation {
     value: IParticleHslAnimation;
 }
 export interface IParticleGradientAnimation {
-    angle: IParticleValueAnimation<number>;
+    angle: IParticleNumericValueAnimation;
     colors: IParticleGradientColorAnimation[];
     type: GradientType;
 }

package/umd/GradientUpdater.js

@@ -13,14 +13,15 @@
     const engine_1 = require("@tsparticles/engine");
     const AnimatableGradient_js_1 = require("./Options/Classes/AnimatableGradient.js");
     const Utils_js_1 = require("./Utils.js");
+    const double = 2, doublePI = Math.PI * double;
     class GradientUpdater {
         getColorStyles(particle, context, radius, opacity) {
             const gradient = particle.gradient;
             if (!gradient) {
                 return {};
             }
-            const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
-                ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
+            const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+                ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
                 : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
             for (const { stop, value, opacity: cOpacity } of gradient.colors) {
                 fillGradient.addColorStop(stop, (0, engine_1.getStyleFromHsl)({
@@ -36,14 +37,16 @@
             if (!gradient) {
                 return;
             }
-            const { angle } = gradient;
+            const { angle } = gradient, speedFactor = 360, delayOffset = 1;
             particle.gradient = {
                 angle: {
                     value: (0, engine_1.getRangeValue)(angle.value),
                     enable: angle.animation.enable,
-                    velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                    decay: 1 - (0, engine_1.getRangeValue)(angle.animation.decay),
-                    delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * 1000,
+                    velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
+                    decay: delayOffset - (0, engine_1.getRangeValue)(angle.animation.decay),
+                    delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * engine_1.millisecondsToSeconds,
+                    max: doublePI,
+                    min: 0,
                     time: 0,
                 },
                 type: gradient.type,
@@ -51,7 +54,7 @@
             };
             let rotateDirection = gradient.angle.direction;
             if (rotateDirection === "random") {
-                rotateDirection = (0, engine_1.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
+                rotateDirection = (0, engine_1.getRandom)() > engine_1.halfRandom ? "counter-clockwise" : "clockwise";
             }
             switch (rotateDirection) {
                 case "counter-clockwise":
@@ -78,10 +81,10 @@
                             min: (0, engine_1.getRangeMin)(grColor.opacity.value),
                             status: "increasing",
                             value: (0, engine_1.getRangeValue)(grColor.opacity.value),
-                            velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / 100) *
+                            velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / engine_1.percentDenominator) *
                                 particle.container.retina.reduceFactor,
-                            decay: 1 - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
-                            delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * 1000,
+                            decay: delayOffset - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
+                            delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * engine_1.millisecondsToSeconds,
                             time: 0,
                         }
                         : undefined,
@@ -105,7 +108,7 @@
                         default:
                             addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
                             addOpacity.status =
-                                (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                                (0, engine_1.getRandom)() >= engine_1.halfRandom ? "increasing" : "decreasing";
                             break;
                     }
                 }
@@ -115,7 +118,7 @@
         isEnabled(particle) {
             return (!particle.destroyed &&
                 !particle.spawning &&
-                (particle.gradient?.angle.enable ||
+                (!!particle.gradient?.angle.enable ||
                     (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                         false)));
         }

package/umd/Utils.js

@@ -4,116 +4,23 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.updateGradient = void 0;
-    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;
-        }
-    }
+    const engine_1 = require("@tsparticles/engine");
     function updateGradient(particle, delta) {
         const { gradient } = particle;
         if (!gradient) {
             return;
         }
-        updateAngle(delta, gradient.angle);
+        (0, engine_1.updateAnimation)(particle, gradient.angle, false, "none", delta);
         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);
-            }
+            (0, engine_1.updateColor)(color.value, delta);
             if (color.opacity) {
-                updateColorOpacity(delta, color.opacity);
+                (0, engine_1.updateAnimation)(particle, color.opacity, true, "none", delta);
             }
         }
     }