tsparticles 1.34.1 → 1.35.0

package/Updaters/Color/ColorUpdater.d.ts

@@ -1,6 +1,10 @@
 import { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
+import { Container } from "../../Core/Container";
 export declare class ColorUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Color/ColorUpdater.js

@@ -9,7 +9,7 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
     if (!colorValue || !valueAnimation.enable) {
         return;
     }
-    const offset = Utils_1.randomInRange(valueAnimation.offset);
+    const offset = (0, Utils_1.randomInRange)(valueAnimation.offset);
     const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6;
     if (!decrease || colorValue.status === Enums_1.AnimationStatus.increasing) {
         colorValue.value += velocity;
@@ -43,6 +43,15 @@ function updateColor(particle, delta) {
     }
 }
 class ColorUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const hslColor = (0, Utils_1.colorToHsl)(particle.options.color, particle.id, particle.options.reduceDuplicates);
+        if (hslColor) {
+            particle.color = (0, Utils_1.getHslAnimationFromHsl)(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);
+        }
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         const animationOptions = particle.options.color.animation;

package/Updaters/Color/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadColorUpdater = void 0;
 const ColorUpdater_1 = require("./ColorUpdater");
 function loadColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("color", () => new ColorUpdater_1.ColorUpdater());
+    tsParticles.addParticleUpdater("color", (container) => new ColorUpdater_1.ColorUpdater(container));
 }
 exports.loadColorUpdater = loadColorUpdater;

package/Updaters/Life/LifeUpdater.d.ts

@@ -4,6 +4,7 @@ import type { Container } from "../../Core/Container";
 export declare class LifeUpdater implements IParticleUpdater {
     private readonly container;
     constructor(container: Container);
+    init(): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Life/LifeUpdater.js

@@ -6,6 +6,8 @@ class LifeUpdater {
     constructor(container) {
         this.container = container;
     }
+    init() {
+    }
     isEnabled(particle) {
         return !particle.destroyed;
     }
@@ -50,16 +52,16 @@ class LifeUpdater {
             particle.destroy();
             return;
         }
-        const canvasSize = this.container.canvas.size, widthRange = Utils_1.setRangeValue(0, canvasSize.width), heightRange = Utils_1.setRangeValue(0, canvasSize.width);
-        particle.position.x = Utils_1.randomInRange(widthRange);
-        particle.position.y = Utils_1.randomInRange(heightRange);
+        const canvasSize = this.container.canvas.size, widthRange = (0, Utils_1.setRangeValue)(0, canvasSize.width), heightRange = (0, Utils_1.setRangeValue)(0, canvasSize.width);
+        particle.position.x = (0, Utils_1.randomInRange)(widthRange);
+        particle.position.y = (0, Utils_1.randomInRange)(heightRange);
         particle.spawning = true;
         life.delayTime = 0;
         life.time = 0;
         particle.reset();
         const lifeOptions = particle.options.life;
-        life.delay = Utils_1.getRangeValue(lifeOptions.delay.value) * 1000;
-        life.duration = Utils_1.getRangeValue(lifeOptions.duration.value) * 1000;
+        life.delay = (0, Utils_1.getRangeValue)(lifeOptions.delay.value) * 1000;
+        life.duration = (0, Utils_1.getRangeValue)(lifeOptions.duration.value) * 1000;
     }
 }
 exports.LifeUpdater = LifeUpdater;

package/Updaters/Opacity/OpacityUpdater.d.ts

@@ -1,6 +1,10 @@
 import type { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
+import { Container } from "../../Core/Container";
 export declare class OpacityUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Opacity/OpacityUpdater.js

@@ -19,6 +19,9 @@ function checkDestroy(particle, value, minValue, maxValue) {
 }
 function updateOpacity(particle, delta) {
     var _a, _b, _c, _d, _e;
+    if (!particle.opacity) {
+        return;
+    }
     const minValue = particle.opacity.min;
     const maxValue = particle.opacity.max;
     if (!(!particle.destroyed &&
@@ -54,14 +57,56 @@ function updateOpacity(particle, delta) {
     }
     checkDestroy(particle, particle.opacity.value, minValue, maxValue);
     if (!particle.destroyed) {
-        particle.opacity.value = Utils_1.clamp(particle.opacity.value, minValue, maxValue);
+        particle.opacity.value = (0, Utils_1.clamp)(particle.opacity.value, minValue, maxValue);
     }
 }
 class OpacityUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const opacityOptions = particle.options.opacity;
+        particle.opacity = {
+            enable: opacityOptions.animation.enable,
+            max: (0, Utils_1.getRangeMax)(opacityOptions.value),
+            min: (0, Utils_1.getRangeMin)(opacityOptions.value),
+            value: (0, Utils_1.getRangeValue)(opacityOptions.value),
+            loops: 0,
+            maxLoops: opacityOptions.animation.count,
+        };
+        const opacityAnimation = opacityOptions.animation;
+        if (opacityAnimation.enable) {
+            particle.opacity.status = Enums_1.AnimationStatus.increasing;
+            const opacityRange = opacityOptions.value;
+            particle.opacity.min = (0, Utils_1.getRangeMin)(opacityRange);
+            particle.opacity.max = (0, Utils_1.getRangeMax)(opacityRange);
+            switch (opacityAnimation.startValue) {
+                case Enums_1.StartValueType.min:
+                    particle.opacity.value = particle.opacity.min;
+                    particle.opacity.status = Enums_1.AnimationStatus.increasing;
+                    break;
+                case Enums_1.StartValueType.random:
+                    particle.opacity.value = (0, Utils_1.randomInRange)(particle.opacity);
+                    particle.opacity.status =
+                        Math.random() >= 0.5 ? Enums_1.AnimationStatus.increasing : Enums_1.AnimationStatus.decreasing;
+                    break;
+                case Enums_1.StartValueType.max:
+                default:
+                    particle.opacity.value = particle.opacity.max;
+                    particle.opacity.status = Enums_1.AnimationStatus.decreasing;
+                    break;
+            }
+            particle.opacity.velocity = (opacityAnimation.speed / 100) * this.container.retina.reduceFactor;
+            if (!opacityAnimation.sync) {
+                particle.opacity.velocity *= Math.random();
+            }
+        }
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         return (!particle.destroyed &&
             !particle.spawning &&
+            !!particle.opacity &&
             particle.opacity.enable &&
             (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0)));
     }

package/Updaters/Opacity/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadOpacityUpdater = void 0;
 const OpacityUpdater_1 = require("./OpacityUpdater");
 function loadOpacityUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("opacity", () => new OpacityUpdater_1.OpacityUpdater());
+    tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater_1.OpacityUpdater(container));
 }
 exports.loadOpacityUpdater = loadOpacityUpdater;

package/Updaters/OutModes/OutOfCanvasUpdater.d.ts

@@ -4,6 +4,7 @@ import type { Container } from "../../Core/Container";
 export declare class OutOfCanvasUpdater implements IParticleUpdater {
     private readonly container;
     constructor(container: Container);
+    init(): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
     private updateOutMode;

package/Updaters/OutModes/OutOfCanvasUpdater.js

@@ -8,6 +8,8 @@ class OutOfCanvasUpdater {
     constructor(container) {
         this.container = container;
     }
+    init() {
+    }
     isEnabled(particle) {
         return !particle.destroyed && !particle.spawning;
     }
@@ -43,14 +45,14 @@ class OutOfCanvasUpdater {
     }
     destroy(particle, direction) {
         const container = this.container;
-        if (Utils_1.isPointInside(particle.position, container.canvas.size, particle.getRadius(), direction)) {
+        if ((0, Utils_1.isPointInside)(particle.position, container.canvas.size, particle.getRadius(), direction)) {
             return;
         }
         container.particles.remove(particle, undefined, true);
     }
     out(particle, direction) {
         const container = this.container;
-        if (Utils_1.isPointInside(particle.position, container.canvas.size, particle.getRadius(), direction)) {
+        if ((0, Utils_1.isPointInside)(particle.position, container.canvas.size, particle.getRadius(), direction)) {
             return;
         }
         const wrap = particle.options.move.warp, canvasSize = container.canvas.size, newPos = {
@@ -58,7 +60,7 @@ class OutOfCanvasUpdater {
             left: -particle.getRadius() - particle.offset.x,
             right: canvasSize.width + particle.getRadius() + particle.offset.x,
             top: -particle.getRadius() - particle.offset.y,
-        }, sizeValue = particle.getRadius(), nextBounds = Utils_1.calculateBounds(particle.position, sizeValue);
+        }, sizeValue = particle.getRadius(), nextBounds = (0, Utils_1.calculateBounds)(particle.position, sizeValue);
         if (direction === Enums_1.OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
             particle.position.x = newPos.left;
             particle.initialPosition.x = particle.position.x;
@@ -106,9 +108,9 @@ class OutOfCanvasUpdater {
         if (handled) {
             return;
         }
-        const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = Utils_1.calculateBounds(pos, size), canvasSize = container.canvas.size;
-        Utils_2.bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, size });
-        Utils_2.bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, size });
+        const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = (0, Utils_1.calculateBounds)(pos, size), canvasSize = container.canvas.size;
+        (0, Utils_2.bounceHorizontal)({ particle, outMode, direction, bounds, canvasSize, offset, size });
+        (0, Utils_2.bounceVertical)({ particle, outMode, direction, bounds, canvasSize, offset, size });
     }
     none(particle, direction) {
         if ((particle.options.move.distance.horizontal &&
@@ -127,7 +129,7 @@ class OutOfCanvasUpdater {
                 (particle.velocity.x < 0 && particle.position.x >= -pRadius)) {
                 return;
             }
-            if (!Utils_1.isPointInside(particle.position, container.canvas.size, pRadius, direction)) {
+            if (!(0, Utils_1.isPointInside)(particle.position, container.canvas.size, pRadius, direction)) {
                 container.particles.remove(particle);
             }
         }

package/Updaters/OutModes/Utils.js

@@ -14,7 +14,7 @@ function bounceHorizontal(data) {
     let bounced = false;
     if ((data.direction === Enums_1.OutModeDirection.right && data.bounds.right >= data.canvasSize.width && velocity > 0) ||
         (data.direction === Enums_1.OutModeDirection.left && data.bounds.left <= 0 && velocity < 0)) {
-        const newVelocity = Utils_1.getRangeValue(data.particle.options.bounce.horizontal.value);
+        const newVelocity = (0, Utils_1.getRangeValue)(data.particle.options.bounce.horizontal.value);
         data.particle.velocity.x *= -newVelocity;
         bounced = true;
     }
@@ -44,7 +44,7 @@ function bounceVertical(data) {
             data.bounds.bottom >= data.canvasSize.height &&
             velocity > 0) ||
             (data.direction === Enums_1.OutModeDirection.top && data.bounds.top <= 0 && velocity < 0)) {
-            const newVelocity = Utils_1.getRangeValue(data.particle.options.bounce.vertical.value);
+            const newVelocity = (0, Utils_1.getRangeValue)(data.particle.options.bounce.vertical.value);
             data.particle.velocity.y *= -newVelocity;
             bounced = true;
         }

package/Updaters/Roll/RollUpdater.d.ts

@@ -1,6 +1,7 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
 export declare class RollUpdater implements IParticleUpdater {
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Roll/RollUpdater.js

@@ -1,19 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RollUpdater = void 0;
+const Utils_1 = require("../../Utils");
+const Enums_1 = require("../../Enums");
 function updateRoll(particle, delta) {
     const roll = particle.options.roll;
-    const speed = particle.rollSpeed * delta.factor;
-    const max = 2 * Math.PI;
-    if (!roll.enable) {
+    if (!particle.roll || !roll.enable) {
         return;
     }
-    particle.rollAngle += speed;
-    if (particle.rollAngle > max) {
-        particle.rollAngle -= max;
+    const speed = particle.roll.speed * delta.factor;
+    const max = 2 * Math.PI;
+    particle.roll.angle += speed;
+    if (particle.roll.angle > max) {
+        particle.roll.angle -= max;
     }
 }
 class RollUpdater {
+    init(particle) {
+        const rollOpt = particle.options.roll;
+        if (rollOpt.enable) {
+            particle.roll = {
+                angle: Math.random() * Math.PI * 2,
+                speed: (0, Utils_1.getRangeValue)(rollOpt.speed) / 360,
+            };
+            if (rollOpt.backColor) {
+                particle.backColor = (0, Utils_1.colorToHsl)(rollOpt.backColor);
+            }
+            else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+                const alterType = Math.random() >= 0.5 ? Enums_1.AlterType.darken : Enums_1.AlterType.enlighten;
+                particle.roll.alter = {
+                    type: alterType,
+                    value: alterType === Enums_1.AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value,
+                };
+            }
+            else if (rollOpt.darken.enable) {
+                particle.roll.alter = {
+                    type: Enums_1.AlterType.darken,
+                    value: rollOpt.darken.value,
+                };
+            }
+            else if (rollOpt.enlighten.enable) {
+                particle.roll.alter = {
+                    type: Enums_1.AlterType.enlighten,
+                    value: rollOpt.enlighten.value,
+                };
+            }
+        }
+        else {
+            particle.roll = { angle: 0, speed: 0 };
+        }
+    }
     isEnabled(particle) {
         const roll = particle.options.roll;
         return !particle.destroyed && !particle.spawning && roll.enable;

package/Updaters/Size/SizeUpdater.d.ts

@@ -1,6 +1,7 @@
 import type { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 export declare class SizeUpdater implements IParticleUpdater {
+    init(): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Size/SizeUpdater.js

@@ -54,10 +54,12 @@ function updateSize(particle, delta) {
     }
     checkDestroy(particle, particle.size.value, minValue, maxValue);
     if (!particle.destroyed) {
-        particle.size.value = Utils_1.clamp(particle.size.value, minValue, maxValue);
+        particle.size.value = (0, Utils_1.clamp)(particle.size.value, minValue, maxValue);
     }
 }
 class SizeUpdater {
+    init() {
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         return (!particle.destroyed &&

package/Updaters/StrokeColor/StrokeColorUpdater.d.ts

@@ -1,6 +1,10 @@
-import { Particle } from "../../Core/Particle";
+import type { Particle } from "../../Core/Particle";
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
+import type { Container } from "../../Core/Container";
 export declare class StrokeColorUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/StrokeColor/StrokeColorUpdater.js

@@ -9,7 +9,7 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
     if (!colorValue || !colorValue.enable) {
         return;
     }
-    const offset = Utils_1.randomInRange(valueAnimation.offset);
+    const offset = (0, Utils_1.randomInRange)(valueAnimation.offset);
     const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6;
     if (!decrease || colorValue.status === Enums_1.AnimationStatus.increasing) {
         colorValue.value += velocity;
@@ -30,34 +30,50 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
     }
 }
 function updateStrokeColor(particle, delta) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (!particle.stroke.color) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
         return;
     }
     const animationOptions = particle.stroke.color.animation;
-    const h = (_b = (_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h) !== null && _b !== void 0 ? _b : (_c = particle.color) === null || _c === void 0 ? void 0 : _c.h;
+    const h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
     if (h) {
         updateColorValue(delta, h, animationOptions.h, 360, false);
     }
-    const s = (_e = (_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.s) !== null && _e !== void 0 ? _e : (_f = particle.color) === null || _f === void 0 ? void 0 : _f.s;
+    const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
     if (s) {
         updateColorValue(delta, s, animationOptions.s, 100, true);
     }
-    const l = (_h = (_g = particle.strokeColor) === null || _g === void 0 ? void 0 : _g.l) !== null && _h !== void 0 ? _h : (_j = particle.color) === null || _j === void 0 ? void 0 : _j.l;
+    const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
     if (l) {
         updateColorValue(delta, l, animationOptions.l, 100, true);
     }
 }
 class StrokeColorUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        var _a, _b;
+        const container = this.container;
+        particle.stroke =
+            particle.options.stroke instanceof Array
+                ? (0, Utils_1.itemFromArray)(particle.options.stroke, particle.id, particle.options.reduceDuplicates)
+                : particle.options.stroke;
+        particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
+        const strokeHslColor = (_a = (0, Utils_1.colorToHsl)(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+        if (strokeHslColor) {
+            particle.strokeColor = (0, Utils_1.getHslAnimationFromHsl)(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+        }
+    }
     isEnabled(particle) {
-        var _a, _b, _c;
-        const color = particle.stroke.color;
+        var _a, _b, _c, _d;
+        const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
         return (!particle.destroyed &&
             !particle.spawning &&
-            color !== undefined &&
-            ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && color.animation.h.enable) ||
-                (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && color.animation.s.enable) ||
-                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && color.animation.l.enable)));
+            !!color &&
+            ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
+                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
+                (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/Updaters/StrokeColor/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadStrokeColorUpdater = void 0;
 const StrokeColorUpdater_1 = require("./StrokeColorUpdater");
 function loadStrokeColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("strokeColor", () => new StrokeColorUpdater_1.StrokeColorUpdater());
+    tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container));
 }
 exports.loadStrokeColorUpdater = loadStrokeColorUpdater;

package/Updaters/Tilt/TiltUpdater.d.ts

@@ -1,6 +1,10 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
+import { Container } from "../../Core/Container";
 export declare class TiltUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Tilt/TiltUpdater.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TiltUpdater = void 0;
 const Enums_1 = require("../../Enums");
+const Utils_1 = require("../../Utils");
 function updateTilt(particle, delta) {
     var _a;
+    if (!particle.tilt) {
+        return;
+    }
     const tilt = particle.options.tilt;
     const tiltAnimation = tilt.animation;
     const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
@@ -28,6 +32,39 @@ function updateTilt(particle, delta) {
     }
 }
 class TiltUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const tiltOptions = particle.options.tilt;
+        particle.tilt = {
+            enable: tiltOptions.enable,
+            value: ((0, Utils_1.getRangeValue)(tiltOptions.value) * Math.PI) / 180,
+            sinDirection: Math.random() >= 0.5 ? 1 : -1,
+            cosDirection: Math.random() >= 0.5 ? 1 : -1,
+        };
+        let tiltDirection = tiltOptions.direction;
+        if (tiltDirection === Enums_1.TiltDirection.random) {
+            const index = Math.floor(Math.random() * 2);
+            tiltDirection = index > 0 ? Enums_1.TiltDirection.counterClockwise : Enums_1.TiltDirection.clockwise;
+        }
+        switch (tiltDirection) {
+            case Enums_1.TiltDirection.counterClockwise:
+            case "counterClockwise":
+                particle.tilt.status = Enums_1.AnimationStatus.decreasing;
+                break;
+            case Enums_1.TiltDirection.clockwise:
+                particle.tilt.status = Enums_1.AnimationStatus.increasing;
+                break;
+        }
+        const tiltAnimation = particle.options.tilt.animation;
+        if (tiltAnimation.enable) {
+            particle.tilt.velocity = (tiltAnimation.speed / 360) * this.container.retina.reduceFactor;
+            if (!tiltAnimation.sync) {
+                particle.tilt.velocity *= Math.random();
+            }
+        }
+    }
     isEnabled(particle) {
         const tilt = particle.options.tilt;
         const tiltAnimation = tilt.animation;

package/Updaters/Tilt/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTiltUpdater = void 0;
 const TiltUpdater_1 = require("./TiltUpdater");
 function loadTiltUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("tilt", () => new TiltUpdater_1.TiltUpdater());
+    tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater_1.TiltUpdater(container));
 }
 exports.loadTiltUpdater = loadTiltUpdater;

package/Updaters/Wobble/WobbleUpdater.d.ts

@@ -1,6 +1,16 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import type { Particle } from "../../Core/Particle";
+import type { Container } from "../../Core/Container";
+declare type WobbleParticle = Particle & {
+    retina: {
+        wobbleDistance?: number;
+    };
+};
 export declare class WobbleUpdater implements IParticleUpdater {
-    isEnabled(particle: Particle): boolean;
-    update(particle: Particle, delta: IDelta): void;
+    private readonly container;
+    constructor(container: Container);
+    init(particle: WobbleParticle): void;
+    isEnabled(particle: WobbleParticle): boolean;
+    update(particle: WobbleParticle, delta: IDelta): void;
 }
+export {};

package/Updaters/Wobble/WobbleUpdater.js

@@ -1,25 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WobbleUpdater = void 0;
+const Utils_1 = require("../../Utils");
 function updateWobble(particle, delta) {
+    var _a;
     const wobble = particle.options.wobble;
-    const speed = particle.wobbleSpeed * delta.factor;
-    const distance = (particle.wobbleDistance * delta.factor) / (1000 / 60);
-    const max = 2 * Math.PI;
-    if (!wobble.enable) {
+    if (!wobble.enable || !particle.wobble) {
         return;
     }
-    particle.wobbleAngle += speed;
-    if (particle.wobbleAngle > max) {
-        particle.wobbleAngle -= max;
+    const speed = particle.wobble.speed * delta.factor;
+    const distance = (((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor) / (1000 / 60);
+    const max = 2 * Math.PI;
+    particle.wobble.angle += speed;
+    if (particle.wobble.angle > max) {
+        particle.wobble.angle -= max;
     }
-    particle.position.x += distance * Math.cos(particle.wobbleAngle);
-    particle.position.y += distance * Math.abs(Math.sin(particle.wobbleAngle));
+    particle.position.x += distance * Math.cos(particle.wobble.angle);
+    particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
 }
 class WobbleUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const wobbleOpt = particle.options.wobble;
+        if (wobbleOpt.enable) {
+            particle.wobble = {
+                angle: Math.random() * Math.PI * 2,
+                speed: (0, Utils_1.getRangeValue)(wobbleOpt.speed) / 360,
+            };
+        }
+        else {
+            particle.wobble = {
+                angle: 0,
+                speed: 0,
+            };
+        }
+        particle.retina.wobbleDistance = (0, Utils_1.getRangeValue)(wobbleOpt.distance) * this.container.retina.pixelRatio;
+    }
     isEnabled(particle) {
-        const wobble = particle.options.wobble;
-        return !particle.destroyed && !particle.spawning && wobble.enable;
+        return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/Updaters/Wobble/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadWobbleUpdater = void 0;
 const WobbleUpdater_1 = require("./WobbleUpdater");
 function loadWobbleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("wobble", () => new WobbleUpdater_1.WobbleUpdater());
+    tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater_1.WobbleUpdater(container));
 }
 exports.loadWobbleUpdater = loadWobbleUpdater;

package/Utils/CanvasUtils.d.ts

@@ -3,6 +3,7 @@ import type { IShadow } from "../Options/Interfaces/Particles/IShadow";
 import type { Container } from "../Core/Container";
 import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IHsl, IParticle, IParticleGradientAnimation, IRgb } from "../Core/Interfaces";
 import type { Particle } from "../Core/Particle";
+import { AlterType } from "../Enums";
 export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
 export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
 export declare function drawLinkLine(context: CanvasRenderingContext2D, width: number, begin: ICoordinates, end: ICoordinates, maxDistance: number, canvasSize: IDimension, warp: boolean, backgroundMask: boolean, composite: string, colorLine: IRgb, opacity: number, shadow: ILinksShadow): void;
@@ -16,3 +17,4 @@ export declare function drawShapeAfterEffect(container: Container, context: Canv
 export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void;
 export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
 export declare function drawEllipse(context: CanvasRenderingContext2D, particle: IParticle, fillColorValue: IHsl | undefined, radius: number, opacity: number, width: number, rotation: number, start: number, end: number): void;
+export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;