@tsparticles/engine 3.0.0-alpha.1 → 3.0.0-beta.0

package/umd/Options/Classes/Particles/Move/MoveAttract.js

@@ -20,20 +20,7 @@
                 y: 3000,
             };
         }
-        get rotateX() {
-            return this.rotate.x;
-        }
-        set rotateX(value) {
-            this.rotate.x = value;
-        }
-        get rotateY() {
-            return this.rotate.y;
-        }
-        set rotateY(value) {
-            this.rotate.y = value;
-        }
         load(data) {
-            var _a, _b, _c, _d;
             if (!data) {
                 return;
             }
@@ -43,13 +30,15 @@
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }
-            const rotateX = (_b = (_a = data.rotate) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : data.rotateX;
-            if (rotateX !== undefined) {
-                this.rotate.x = rotateX;
-            }
-            const rotateY = (_d = (_c = data.rotate) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : data.rotateY;
-            if (rotateY !== undefined) {
-                this.rotate.y = rotateY;
+            if (data.rotate) {
+                const rotateX = data.rotate.x;
+                if (rotateX !== undefined) {
+                    this.rotate.x = rotateX;
+                }
+                const rotateY = data.rotate.y;
+                if (rotateY !== undefined) {
+                    this.rotate.y = rotateY;
+                }
             }
         }
     }

package/umd/Options/Classes/Particles/Move/MoveTrail.js

@@ -17,12 +17,6 @@
             this.length = 10;
             this.fill = new MoveTrailFill_1.MoveTrailFill();
         }
-        get fillColor() {
-            return this.fill.color;
-        }
-        set fillColor(value) {
-            this.fill.load({ color: value });
-        }
         load(data) {
             if (!data) {
                 return;
@@ -30,8 +24,8 @@
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }
-            if (data.fill !== undefined || data.fillColor !== undefined) {
-                this.fill.load(data.fill || { color: data.fillColor });
+            if (data.fill !== undefined) {
+                this.fill.load(data.fill);
             }
             if (data.length !== undefined) {
                 this.length = data.length;

package/umd/Options/Classes/Particles/Move/OutModes.js

@@ -15,17 +15,16 @@
             this.default = "out";
         }
         load(data) {
-            var _a, _b, _c, _d;
             if (!data) {
                 return;
             }
             if (data.default !== undefined) {
                 this.default = data.default;
             }
-            this.bottom = (_a = data.bottom) !== null && _a !== void 0 ? _a : data.default;
-            this.left = (_b = data.left) !== null && _b !== void 0 ? _b : data.default;
-            this.right = (_c = data.right) !== null && _c !== void 0 ? _c : data.default;
-            this.top = (_d = data.top) !== null && _d !== void 0 ? _d : data.default;
+            this.bottom = data.bottom ?? data.default;
+            this.left = data.left ?? data.default;
+            this.right = data.right ?? data.default;
+            this.top = data.top ?? data.default;
         }
     }
     exports.OutModes = OutModes;

package/umd/Options/Classes/Particles/Move/Spin.js

@@ -27,7 +27,9 @@
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }
-            this.position = data.position ? (0, Utils_1.deepExtend)({}, data.position) : undefined;
+            if (data.position) {
+                this.position = (0, Utils_1.deepExtend)({}, data.position);
+            }
         }
     }
     exports.Spin = Spin;

package/umd/Options/Classes/Particles/Number/ParticlesDensity.js

@@ -16,37 +16,18 @@
             this.width = 1920;
             this.height = 1080;
         }
-        get area() {
-            return this.width;
-        }
-        set area(value) {
-            this.width = value;
-        }
-        get factor() {
-            return this.height;
-        }
-        set factor(value) {
-            this.height = value;
-        }
-        get value_area() {
-            return this.area;
-        }
-        set value_area(value) {
-            this.area = value;
-        }
         load(data) {
-            var _a, _b, _c;
             if (!data) {
                 return;
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }
-            const width = (_b = (_a = data.width) !== null && _a !== void 0 ? _a : data.area) !== null && _b !== void 0 ? _b : data.value_area;
+            const width = data.width;
             if (width !== undefined) {
                 this.width = width;
             }
-            const height = (_c = data.height) !== null && _c !== void 0 ? _c : data.factor;
+            const height = data.height;
             if (height !== undefined) {
                 this.height = height;
             }

package/umd/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -15,21 +15,14 @@
         constructor() {
             this.density = new ParticlesDensity_1.ParticlesDensity();
             this.limit = 0;
-            this.value = 100;
-        }
-        get max() {
-            return this.limit;
-        }
-        set max(value) {
-            this.limit = value;
+            this.value = 0;
         }
         load(data) {
-            var _a;
             if (!data) {
                 return;
             }
             this.density.load(data.density);
-            const limit = (_a = data.limit) !== null && _a !== void 0 ? _a : data.max;
+            const limit = data.limit;
             if (limit !== undefined) {
                 this.limit = limit;
             }

package/umd/Options/Classes/Particles/Opacity/Opacity.js

@@ -12,18 +12,22 @@
     exports.Opacity = void 0;
     const OpacityAnimation_1 = require("./OpacityAnimation");
     const ValueWithRandom_1 = require("../../ValueWithRandom");
-    class Opacity extends ValueWithRandom_1.RangedAnimationValueWithRandom {
+    class Opacity extends ValueWithRandom_1.ValueWithRandom {
         constructor() {
             super();
             this.animation = new OpacityAnimation_1.OpacityAnimation();
             this.random.minimumValue = 0.1;
             this.value = 1;
         }
-        get anim() {
-            return this.animation;
-        }
-        set anim(value) {
-            this.animation = value;
+        load(data) {
+            if (!data) {
+                return;
+            }
+            super.load(data);
+            const animation = data.animation;
+            if (animation !== undefined) {
+                this.animation.load(animation);
+            }
         }
     }
     exports.Opacity = Opacity;

package/umd/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -17,16 +17,7 @@
             this.destroy = "none";
             this.speed = 2;
         }
-        get opacity_min() {
-            return this.minimumValue;
-        }
-        set opacity_min(value) {
-            this.minimumValue = value;
-        }
         load(data) {
-            if ((data === null || data === void 0 ? void 0 : data.opacity_min) !== undefined && data.minimumValue === undefined) {
-                data.minimumValue = data.opacity_min;
-            }
             super.load(data);
             if (!data) {
                 return;

package/umd/Options/Classes/Particles/ParticlesOptions.js

@@ -42,7 +42,6 @@
             this.zIndex = new ZIndex_1.ZIndex();
         }
         load(data) {
-            var _a, _b, _c, _d;
             if (!data) {
                 return;
             }
@@ -52,7 +51,7 @@
                 for (const group in data.groups) {
                     const item = data.groups[group];
                     if (item !== undefined) {
-                        this.groups[group] = (0, Utils_1.deepExtend)((_a = this.groups[group]) !== null && _a !== void 0 ? _a : {}, item);
+                        this.groups[group] = (0, Utils_1.deepExtend)(this.groups[group] ?? {}, item);
                     }
                 }
             }
@@ -66,24 +65,20 @@
             this.size.load(data.size);
             this.shadow.load(data.shadow);
             this.zIndex.load(data.zIndex);
-            const collisions = (_c = (_b = data.move) === null || _b === void 0 ? void 0 : _b.collisions) !== null && _c !== void 0 ? _c : (_d = data.move) === null || _d === void 0 ? void 0 : _d.bounce;
-            if (collisions !== undefined) {
-                this.collisions.enable = collisions;
-            }
             this.collisions.load(data.collisions);
             if (data.interactivity !== undefined) {
                 this.interactivity = (0, Utils_1.deepExtend)({}, data.interactivity);
             }
-            const stroke = data.stroke;
-            if (stroke) {
-                this.stroke = (0, Utils_1.executeOnSingleOrMultiple)(stroke, (t) => {
+            const strokeToLoad = data.stroke;
+            if (strokeToLoad) {
+                this.stroke = (0, Utils_1.executeOnSingleOrMultiple)(strokeToLoad, (t) => {
                     const tmp = new Stroke_1.Stroke();
                     tmp.load(t);
                     return tmp;
                 });
             }
             if (this._container) {
-                const updaters = this._engine.plugins.updaters.get(this._container);
+                const updaters = this._engine.updaters.get(this._container);
                 if (updaters) {
                     for (const updater of updaters) {
                         if (updater.loadOptions) {
@@ -91,7 +86,7 @@
                         }
                     }
                 }
-                const interactors = this._engine.plugins.interactors.get(this._container);
+                const interactors = this._engine.interactors.get(this._container);
                 if (interactors) {
                     for (const interactor of interactors) {
                         if (interactor.loadParticlesOptions) {

package/umd/Options/Classes/Particles/Shape/Shape.js

@@ -13,31 +13,30 @@
     const Utils_1 = require("../../../../Utils/Utils");
     class Shape {
         constructor() {
-            this.options = {};
-            this.type = "circle";
             this.close = true;
             this.fill = true;
+            this.options = {};
+            this.type = "circle";
         }
         load(data) {
-            var _a;
             if (!data) {
                 return;
             }
-            if (data.close !== undefined) {
-                this.close = data.close;
-            }
-            if (data.fill !== undefined) {
-                this.fill = data.fill;
-            }
             const options = data.options;
             if (options !== undefined) {
                 for (const shape in options) {
                     const item = options[shape];
                     if (item) {
-                        this.options[shape] = (0, Utils_1.deepExtend)((_a = this.options[shape]) !== null && _a !== void 0 ? _a : {}, item);
+                        this.options[shape] = (0, Utils_1.deepExtend)(this.options[shape] ?? {}, item);
                     }
                 }
             }
+            if (data.close !== undefined) {
+                this.close = data.close;
+            }
+            if (data.fill !== undefined) {
+                this.fill = data.fill;
+            }
             if (data.type !== undefined) {
                 this.type = data.type;
             }

package/umd/Options/Classes/Particles/Size/Size.js

@@ -4,26 +4,30 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../ValueWithRandom", "./SizeAnimation"], factory);
+        define(["require", "exports", "./SizeAnimation", "../../ValueWithRandom"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Size = void 0;
-    const ValueWithRandom_1 = require("../../ValueWithRandom");
     const SizeAnimation_1 = require("./SizeAnimation");
-    class Size extends ValueWithRandom_1.RangedAnimationValueWithRandom {
+    const ValueWithRandom_1 = require("../../ValueWithRandom");
+    class Size extends ValueWithRandom_1.ValueWithRandom {
         constructor() {
             super();
             this.animation = new SizeAnimation_1.SizeAnimation();
             this.random.minimumValue = 1;
             this.value = 3;
         }
-        get anim() {
-            return this.animation;
-        }
-        set anim(value) {
-            this.animation = value;
+        load(data) {
+            super.load(data);
+            if (!data) {
+                return;
+            }
+            const animation = data.animation;
+            if (animation !== undefined) {
+                this.animation.load(animation);
+            }
         }
     }
     exports.Size = Size;

package/umd/Options/Classes/Particles/Size/SizeAnimation.js

@@ -17,16 +17,7 @@
             this.destroy = "none";
             this.speed = 5;
         }
-        get size_min() {
-            return this.minimumValue;
-        }
-        set size_min(value) {
-            this.minimumValue = value;
-        }
         load(data) {
-            if ((data === null || data === void 0 ? void 0 : data.size_min) !== undefined && data.minimumValue === undefined) {
-                data.minimumValue = data.size_min;
-            }
             super.load(data);
             if (!data) {
                 return;

package/umd/Options/Classes/ValueWithRandom.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./AnimationOptions", "./Random", "./AnimationOptions", "../../Utils/NumberUtils"], factory);
+        define(["require", "exports", "./AnimationOptions", "./Random", "../../Utils/Utils", "../../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.RangedAnimationValueWithRandom = exports.AnimationValueWithRandom = exports.ValueWithRandom = void 0;
     const AnimationOptions_1 = require("./AnimationOptions");
     const Random_1 = require("./Random");
-    const AnimationOptions_2 = require("./AnimationOptions");
+    const Utils_1 = require("../../Utils/Utils");
     const NumberUtils_1 = require("../../Utils/NumberUtils");
     class ValueWithRandom {
         constructor() {
@@ -23,7 +23,7 @@
             if (!data) {
                 return;
             }
-            if (typeof data.random === "boolean") {
+            if ((0, Utils_1.isBoolean)(data.random)) {
                 this.random.enable = data.random;
             }
             else {
@@ -40,19 +40,12 @@
             super();
             this.animation = new AnimationOptions_1.AnimationOptions();
         }
-        get anim() {
-            return this.animation;
-        }
-        set anim(value) {
-            this.animation = value;
-        }
         load(data) {
-            var _a;
             super.load(data);
             if (!data) {
                 return;
             }
-            const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+            const animation = data.animation;
             if (animation !== undefined) {
                 this.animation.load(animation);
             }
@@ -62,16 +55,10 @@
     class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
         constructor() {
             super();
-            this.animation = new AnimationOptions_2.RangedAnimationOptions();
+            this.animation = new AnimationOptions_1.RangedAnimationOptions();
         }
         load(data) {
             super.load(data);
-            if (!data) {
-                return;
-            }
-            if (data.animation !== undefined) {
-                this.value = (0, NumberUtils_1.setRangeValue)(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
-            }
         }
     }
     exports.RangedAnimationValueWithRandom = RangedAnimationValueWithRandom;

package/umd/Utils/CanvasUtils.js

@@ -9,58 +9,8 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.clear = exports.drawTriangle = exports.drawLine = exports.paintCanvas = exports.clearCanvas = exports.getContext = void 0;
+    exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.clear = exports.paintImage = exports.paintBase = exports.drawTriangle = exports.drawLine = void 0;
     const ColorUtils_1 = require("./ColorUtils");
-    function paintBase(context, dimension, baseColor) {
-        context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
-        context.fillRect(0, 0, dimension.width, dimension.height);
-    }
-    function paintImage(context, dimension, image, opacity) {
-        if (!image) {
-            return;
-        }
-        context.globalAlpha = opacity;
-        context.drawImage(image, 0, 0, dimension.width, dimension.height);
-        context.globalAlpha = 1;
-    }
-    function getContext(canvas) {
-        const context = canvas.getContext("2d");
-        if (!context) {
-            throw new Error("Error tsParticles - No canvas context found");
-        }
-        return context;
-    }
-    exports.getContext = getContext;
-    function clearCanvas(context, size, options, trailFill, coverColorStyle) {
-        if (options.backgroundMask.enable) {
-            paintCanvas(context, size, options, coverColorStyle);
-        }
-        else {
-            const trail = options.particles.move.trail;
-            if (trail.enable && trail.length > 0 && trailFill) {
-                if (trailFill.color) {
-                    paintBase(context, size, (0, ColorUtils_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
-                }
-                else if (trailFill.image) {
-                    paintImage(context, size, trailFill.image, trailFill.opacity);
-                }
-            }
-            else {
-                clear(context, size);
-            }
-        }
-    }
-    exports.clearCanvas = clearCanvas;
-    function paintCanvas(context, size, options, coverColorStyle) {
-        if (options.backgroundMask.enable && coverColorStyle) {
-            clear(context, size);
-            paintBase(context, size, coverColorStyle);
-        }
-        else {
-            paintBase(context, size);
-        }
-    }
-    exports.paintCanvas = paintCanvas;
     function drawLine(context, begin, end) {
         context.beginPath();
         context.moveTo(begin.x, begin.y);
@@ -76,21 +26,34 @@
         context.closePath();
     }
     exports.drawTriangle = drawTriangle;
+    function paintBase(context, dimension, baseColor) {
+        context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
+        context.fillRect(0, 0, dimension.width, dimension.height);
+    }
+    exports.paintBase = paintBase;
+    function paintImage(context, dimension, image, opacity) {
+        if (!image) {
+            return;
+        }
+        context.globalAlpha = opacity;
+        context.drawImage(image, 0, 0, dimension.width, dimension.height);
+        context.globalAlpha = 1;
+    }
+    exports.paintImage = paintImage;
     function clear(context, dimension) {
         context.clearRect(0, 0, dimension.width, dimension.height);
     }
     exports.clear = clear;
     function drawParticle(data) {
-        var _a, _b, _c, _d, _e;
         const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;
         const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {
             sin: Math.sin(angle),
             cos: Math.cos(angle),
         }, transformData = {
-            a: rotateData.cos * ((_a = transform.a) !== null && _a !== void 0 ? _a : 1),
-            b: rotateData.sin * ((_b = transform.b) !== null && _b !== void 0 ? _b : 1),
-            c: -rotateData.sin * ((_c = transform.c) !== null && _c !== void 0 ? _c : 1),
-            d: rotateData.cos * ((_d = transform.d) !== null && _d !== void 0 ? _d : 1),
+            a: rotateData.cos * (transform.a ?? 1),
+            b: rotateData.sin * (transform.b ?? 1),
+            c: -rotateData.sin * (transform.c ?? 1),
+            d: rotateData.cos * (transform.d ?? 1),
         };
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
         context.beginPath();
@@ -107,7 +70,7 @@
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
         }
-        const strokeWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
+        const strokeWidth = particle.strokeWidth ?? 0;
         context.lineWidth = strokeWidth;
         if (colorStyles.stroke) {
             context.strokeStyle = colorStyles.stroke;
@@ -143,7 +106,7 @@
             return;
         }
         const drawer = container.drawers.get(particle.shape);
-        if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
+        if (!drawer || !drawer.afterEffect) {
             return;
         }
         drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);

package/umd/Utils/ColorUtils.js

@@ -57,11 +57,11 @@
         if (!input) {
             return;
         }
-        const color = typeof input === "string" ? { value: input } : input;
-        if (typeof color.value === "string") {
+        const color = (0, Utils_1.isString)(input) ? { value: input } : input;
+        if ((0, Utils_1.isString)(color.value)) {
             return colorToRgb(color.value, index, useIndex);
         }
-        if (color.value instanceof Array) {
+        if ((0, Utils_1.isArray)(color.value)) {
             return rangeColorToRgb({
                 value: (0, Utils_1.itemFromArray)(color.value, index, useIndex),
             });
@@ -78,11 +78,11 @@
         if (!input) {
             return;
         }
-        const color = typeof input === "string" ? { value: input } : input;
-        if (typeof color.value === "string") {
+        const color = (0, Utils_1.isString)(input) ? { value: input } : input;
+        if ((0, Utils_1.isString)(color.value)) {
             return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
         }
-        if (color.value instanceof Array) {
+        if ((0, Utils_1.isArray)(color.value)) {
             return colorToRgb({
                 value: (0, Utils_1.itemFromArray)(color.value, index, useIndex),
             });
@@ -131,8 +131,7 @@
     }
     exports.rgbToHsl = rgbToHsl;
     function stringToAlpha(input) {
-        var _a;
-        return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
+        return stringToRgba(input)?.a;
     }
     exports.stringToAlpha = stringToAlpha;
     function stringToRgb(input) {
@@ -146,9 +145,7 @@
             s: hsl.s / 100,
         };
         if (!hslPercent.s) {
-            result.b = hslPercent.l;
-            result.g = hslPercent.l;
-            result.r = hslPercent.l;
+            result.r = result.g = result.b = hslPercent.l;
         }
         else {
             const q = hslPercent.l < 0.5
@@ -175,7 +172,7 @@
     }
     exports.hslaToRgba = hslaToRgba;
     function getRandomRgbColor(min) {
-        const fixedMin = min !== null && min !== void 0 ? min : 0;
+        const fixedMin = min ?? 0;
         return {
             b: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
             g: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
@@ -184,11 +181,11 @@
     }
     exports.getRandomRgbColor = getRandomRgbColor;
     function getStyleFromRgb(color, opacity) {
-        return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+        return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
     }
     exports.getStyleFromRgb = getStyleFromRgb;
     function getStyleFromHsl(color, opacity) {
-        return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+        return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
     }
     exports.getStyleFromHsl = getStyleFromHsl;
     function colorMix(color1, color2, size1, size2) {
@@ -207,17 +204,16 @@
     }
     exports.colorMix = colorMix;
     function getLinkColor(p1, p2, linkColor) {
-        var _a, _b;
         if (linkColor === randomColorValue) {
             return getRandomRgbColor();
         }
         else if (linkColor === midColorValue) {
-            const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
+            const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
             if (sourceColor && destColor && p2) {
                 return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
             }
             else {
-                const hslColor = sourceColor !== null && sourceColor !== void 0 ? sourceColor : destColor;
+                const hslColor = sourceColor ?? destColor;
                 if (hslColor) {
                     return hslToRgb(hslColor);
                 }
@@ -229,7 +225,7 @@
     }
     exports.getLinkColor = getLinkColor;
     function getLinkRandomColor(optColor, blink, consent) {
-        const color = typeof optColor === "string" ? optColor : optColor.value;
+        const color = (0, Utils_1.isString)(optColor) ? optColor : optColor.value;
         if (color === randomColorValue) {
             if (consent) {
                 return rangeColorToRgb({
@@ -292,6 +288,8 @@
             colorValue.status = "increasing";
             colorValue.loops = 0;
             colorValue.maxLoops = (0, NumberUtils_1.getRangeValue)(colorAnimation.count);
+            colorValue.time = 0;
+            colorValue.delayTime = (0, NumberUtils_1.getRangeValue)(colorAnimation.delay) * 1000;
             if (!colorAnimation.sync) {
                 colorValue.velocity *= (0, NumberUtils_1.getRandom)();
                 colorValue.value *= (0, NumberUtils_1.getRandom)();