tsparticles 1.34.1 → 1.35.0

package/browser/Plugins/PolygonMask/plugin.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadPolygonMaskPlugin(tsParticles: Main): void;
+export declare function loadPolygonMaskPlugin(tsParticles: Main): Promise<void>;

package/browser/Plugins/PolygonMask/plugin.js

@@ -24,7 +24,10 @@ class Plugin {
         polygonOptions.load(source === null || source === void 0 ? void 0 : source.polygon);
     }
 }
-export function loadPolygonMaskPlugin(tsParticles) {
+export async function loadPolygonMaskPlugin(tsParticles) {
+    if (!window.SVGPathSeg) {
+        await import("./pathseg");
+    }
     const plugin = new Plugin();
     tsParticles.addPlugin(plugin);
 }

package/browser/Plugins/PolygonMask/types.d.ts

@@ -0,0 +1,8 @@
+import type { IOptions } from "../../Options/Interfaces/IOptions";
+import type { IPolygonMask } from "./Options/Interfaces/IPolygonMask";
+import type { SVGPathSegArcAbs, SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegLinetoAbs, SVGPathSegMovetoAbs, SVGPathSegArcRel, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoCubicSmoothRel, SVGPathSegCurvetoQuadraticRel, SVGPathSegCurvetoQuadraticSmoothRel, SVGPathSegLinetoRel, SVGPathSegMovetoRel } from "./pathseg";
+export declare type SvgAbsoluteCoordinatesTypes = SVGPathSegArcAbs | SVGPathSegCurvetoCubicAbs | SVGPathSegCurvetoCubicSmoothAbs | SVGPathSegCurvetoQuadraticAbs | SVGPathSegCurvetoQuadraticSmoothAbs | SVGPathSegLinetoAbs | SVGPathSegMovetoAbs;
+export declare type SvgRelativeCoordinatesTypes = SVGPathSegArcRel | SVGPathSegCurvetoCubicRel | SVGPathSegCurvetoCubicSmoothRel | SVGPathSegCurvetoQuadraticRel | SVGPathSegCurvetoQuadraticSmoothRel | SVGPathSegLinetoRel | SVGPathSegMovetoRel;
+export declare type IPolygonMaskOptions = IOptions & {
+    polygon: IPolygonMask;
+};

package/browser/Plugins/PolygonMask/types.js

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

package/browser/Plugins/PolygonMask/utils.d.ts

@@ -0,0 +1,11 @@
+import type { ICoordinates } from "../../Core/Interfaces";
+import type { IDrawStroke } from "./Options/Interfaces/IDrawStroke";
+import type { ISvgPath } from "./Interfaces/ISvgPath";
+import { Vector } from "../../Core/Particle/Vector";
+export declare function drawPolygonMask(context: CanvasRenderingContext2D, rawData: ICoordinates[], stroke: IDrawStroke): void;
+export declare function drawPolygonMaskPath(context: CanvasRenderingContext2D, path: Path2D, stroke: IDrawStroke, position: ICoordinates): void;
+export declare function parsePaths(paths: ISvgPath[], scale: number, offset: ICoordinates): ICoordinates[];
+export declare function calcClosestPtOnSegment(s1: ICoordinates, s2: ICoordinates, pos: ICoordinates): ICoordinates & {
+    isOnSegment: boolean;
+};
+export declare function segmentBounce(start: ICoordinates, stop: ICoordinates, velocity: Vector): void;

package/browser/Plugins/PolygonMask/utils.js

@@ -0,0 +1,113 @@
+import { colorToRgb, getDistances, getStyleFromRgb } from "../../Utils";
+export function drawPolygonMask(context, rawData, stroke) {
+    const color = colorToRgb(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.beginPath();
+    context.moveTo(rawData[0].x, rawData[0].y);
+    for (const item of rawData) {
+        context.lineTo(item.x, item.y);
+    }
+    context.closePath();
+    context.strokeStyle = getStyleFromRgb(color);
+    context.lineWidth = stroke.width;
+    context.stroke();
+}
+export function drawPolygonMaskPath(context, path, stroke, position) {
+    context.translate(position.x, position.y);
+    const color = colorToRgb(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
+    context.lineWidth = stroke.width;
+    context.stroke(path);
+}
+export function parsePaths(paths, scale, offset) {
+    var _a;
+    const res = [];
+    for (const path of paths) {
+        const segments = path.element.pathSegList;
+        const len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0;
+        const p = {
+            x: 0,
+            y: 0,
+        };
+        for (let i = 0; i < len; i++) {
+            const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
+            const svgPathSeg = window.SVGPathSeg;
+            switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
+                case svgPathSeg.PATHSEG_MOVETO_ABS:
+                case svgPathSeg.PATHSEG_LINETO_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
+                case svgPathSeg.PATHSEG_ARC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: {
+                    const absSeg = segment;
+                    p.x = absSeg.x;
+                    p.y = absSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
+                    p.x = segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
+                    p.y = segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_REL:
+                case svgPathSeg.PATHSEG_MOVETO_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
+                case svgPathSeg.PATHSEG_ARC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: {
+                    const relSeg = segment;
+                    p.x += relSeg.x;
+                    p.y += relSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
+                    p.x += segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:
+                    p.y += segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_UNKNOWN:
+                case svgPathSeg.PATHSEG_CLOSEPATH:
+                    continue;
+            }
+            res.push({
+                x: p.x * scale + offset.x,
+                y: p.y * scale + offset.y,
+            });
+        }
+    }
+    return res;
+}
+export function calcClosestPtOnSegment(s1, s2, pos) {
+    const { dx, dy } = getDistances(pos, s1);
+    const { dx: dxx, dy: dyy } = getDistances(s2, s1);
+    const t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2);
+    let x = s1.x + dxx * t;
+    let y = s1.y + dyy * t;
+    if (t < 0) {
+        x = s1.x;
+        y = s1.y;
+    }
+    else if (t > 1) {
+        x = s2.x;
+        y = s2.y;
+    }
+    return { x: x, y: y, isOnSegment: t >= 0 && t <= 1 };
+}
+export function segmentBounce(start, stop, velocity) {
+    const { dx, dy } = getDistances(start, stop);
+    const wallAngle = Math.atan2(dy, dx);
+    const wallNormalX = Math.sin(wallAngle);
+    const wallNormalY = -Math.cos(wallAngle);
+    const d = 2 * (velocity.x * wallNormalX + velocity.y * wallNormalY);
+    velocity.x -= d * wallNormalX;
+    velocity.y -= d * wallNormalY;
+}

package/browser/Shapes/Image/ImageDrawer.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
@@ -47,86 +38,80 @@ export class ImageDrawer {
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-            for (const manualParticle of container.actualOptions.manualParticles) {
-                yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-            }
-            const emitterOptions = container.actualOptions;
-            if (emitterOptions.emitters) {
-                if (emitterOptions.emitters instanceof Array) {
-                    for (const emitter of emitterOptions.emitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+    async init(container) {
+        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
+        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
+        for (const manualParticle of container.actualOptions.manualParticles) {
+            await this.loadImagesFromParticlesOptions(container, manualParticle.options);
+        }
+        const emitterOptions = container.actualOptions;
+        if (emitterOptions.emitters) {
+            if (emitterOptions.emitters instanceof Array) {
+                for (const emitter of emitterOptions.emitters) {
+                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
                 }
             }
-            const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-            if (interactiveEmitters) {
-                if (interactiveEmitters instanceof Array) {
-                    for (const emitter of interactiveEmitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+            else {
+                await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+            }
+        }
+        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
+        if (interactiveEmitters) {
+            if (interactiveEmitters instanceof Array) {
+                for (const emitter of interactiveEmitters) {
+                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
                 }
             }
-        });
+            else {
+                await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+            }
+        }
     }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    loadImagesFromParticlesOptions(container, options) {
+    async loadImagesFromParticlesOptions(container, options) {
         var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-            if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-                !shapeOptions.options ||
-                (!isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type))) {
-                return;
-            }
-            const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
-            if (idx >= 0) {
-                __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-            }
-            const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
-            if (imageOptions instanceof Array) {
-                for (const optionsImage of imageOptions) {
-                    yield this.loadImageShape(container, optionsImage);
-                }
-            }
-            else {
-                yield this.loadImageShape(container, imageOptions);
-            }
-            if (options === null || options === void 0 ? void 0 : options.groups) {
-                for (const groupName in options.groups) {
-                    const group = options.groups[groupName];
-                    yield this.loadImagesFromParticlesOptions(container, group);
-                }
+        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
+        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
+            !shapeOptions.options ||
+            (!isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type))) {
+            return;
+        }
+        const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
+        if (idx >= 0) {
+            __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
+        }
+        const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
+        if (imageOptions instanceof Array) {
+            for (const optionsImage of imageOptions) {
+                await this.loadImageShape(container, optionsImage);
             }
-            if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-                yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+        }
+        else {
+            await this.loadImageShape(container, imageOptions);
+        }
+        if (options === null || options === void 0 ? void 0 : options.groups) {
+            for (const groupName in options.groups) {
+                const group = options.groups[groupName];
+                await this.loadImagesFromParticlesOptions(container, group);
             }
-        });
+        }
+        if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
+            await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+        }
     }
-    loadImageShape(container, imageShape) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-                const image = yield imageFunc(imageShape.src);
-                if (image) {
-                    this.addImage(container, image);
-                }
-            }
-            catch (_a) {
-                console.warn(`tsParticles error - ${imageShape.src} not found`);
+    async loadImageShape(container, imageShape) {
+        try {
+            const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+            const image = await imageFunc(imageShape.src);
+            if (image) {
+                this.addImage(container, image);
             }
-        });
+        }
+        catch (_a) {
+            console.warn(`tsParticles error - ${imageShape.src} not found`);
+        }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b;
@@ -152,7 +137,7 @@ export class ImageDrawer {
         }
     }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -165,7 +150,7 @@ export class ImageDrawer {
             return;
         }
         if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = replaceColorSvg(image, color, particle.opacity.value);
+            const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
             const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
             const domUrl = URL || window.URL || window.webkitURL || window;
             const url = domUrl.createObjectURL(svg);
@@ -173,7 +158,7 @@ export class ImageDrawer {
             imageRes = {
                 data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
                 source: imageData.src,
             };
             img.addEventListener("load", () => {
@@ -201,15 +186,15 @@ export class ImageDrawer {
                 data: image,
                 loaded: true,
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
                 source: imageData.src,
             };
         }
         if (!imageRes.ratio) {
             imageRes.ratio = 1;
         }
-        const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-        const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
+        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
         const imageShape = {
             image: imageRes,
             fill,

package/browser/Shapes/Image/Utils.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { getStyleFromHsl } from "../../Utils";
 export function loadImage(source) {
     return new Promise((resolve, reject) => {
@@ -29,25 +20,23 @@ export function loadImage(source) {
         img.src = source;
     });
 }
-export function downloadSvgImage(source) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-        };
-        if (image.type !== "svg") {
-            return loadImage(source);
-        }
-        const response = yield fetch(image.source);
-        if (!response.ok) {
-            throw new Error("Error tsParticles - Image not found");
-        }
-        image.svgData = yield response.text();
-        return image;
-    });
+export async function downloadSvgImage(source) {
+    if (!source) {
+        throw new Error("Error tsParticles - No image.src");
+    }
+    const image = {
+        source: source,
+        type: source.substr(source.length - 3),
+    };
+    if (image.type !== "svg") {
+        return loadImage(source);
+    }
+    const response = await fetch(image.source);
+    if (!response.ok) {
+        throw new Error("Error tsParticles - Image not found");
+    }
+    image.svgData = await response.text();
+    return image;
 }
 export function replaceColorSvg(imageShape, color, opacity) {
     const { svgData } = imageShape;

package/browser/Shapes/Text/TextDrawer.js

@@ -1,37 +1,26 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { isInArray, itemFromArray, loadFont } from "../../Utils";
 export const validTypes = ["text", "character", "char"];
 export class TextDrawer {
     getSidesCount() {
         return 12;
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = container.actualOptions;
-            if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
-                const shapeOptions = validTypes.map((t) => options.particles.shape.options[t]).find((t) => !!t);
-                if (shapeOptions instanceof Array) {
-                    const promises = [];
-                    for (const character of shapeOptions) {
-                        promises.push(loadFont(character));
-                    }
-                    yield Promise.allSettled(promises);
+    async init(container) {
+        const options = container.actualOptions;
+        if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
+            const shapeOptions = validTypes.map((t) => options.particles.shape.options[t]).find((t) => !!t);
+            if (shapeOptions instanceof Array) {
+                const promises = [];
+                for (const character of shapeOptions) {
+                    promises.push(loadFont(character));
                 }
-                else {
-                    if (shapeOptions !== undefined) {
-                        yield loadFont(shapeOptions);
-                    }
+                await Promise.allSettled(promises);
+            }
+            else {
+                if (shapeOptions !== undefined) {
+                    await loadFont(shapeOptions);
                 }
             }
-        });
+        }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b, _c;

package/browser/Updaters/Angle/AngleUpdater.d.ts

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

package/browser/Updaters/Angle/AngleUpdater.js

@@ -1,30 +1,66 @@
-import { AnimationStatus } from "../../Enums";
+import { AnimationStatus, RotateDirection } from "../../Enums";
+import { getRangeValue } from "../../Utils";
 function updateAngle(particle, delta) {
     var _a;
-    const rotate = particle.options.rotate;
-    const rotateAnimation = rotate.animation;
-    const speed = ((_a = particle.rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+    const rotate = particle.rotate;
+    if (!rotate) {
+        return;
+    }
+    const rotateOptions = particle.options.rotate;
+    const rotateAnimation = rotateOptions.animation;
+    const speed = ((_a = rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
     const max = 2 * Math.PI;
     if (!rotateAnimation.enable) {
         return;
     }
-    switch (particle.rotate.status) {
+    switch (rotate.status) {
         case AnimationStatus.increasing:
-            particle.rotate.value += speed;
-            if (particle.rotate.value > max) {
-                particle.rotate.value -= max;
+            rotate.value += speed;
+            if (rotate.value > max) {
+                rotate.value -= max;
             }
             break;
         case AnimationStatus.decreasing:
         default:
-            particle.rotate.value -= speed;
-            if (particle.rotate.value < 0) {
-                particle.rotate.value += max;
+            rotate.value -= speed;
+            if (rotate.value < 0) {
+                rotate.value += max;
             }
             break;
     }
 }
 export class AngleUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const rotateOptions = particle.options.rotate;
+        particle.rotate = {
+            enable: rotateOptions.animation.enable,
+            value: (getRangeValue(rotateOptions.value) * Math.PI) / 180,
+        };
+        let rotateDirection = rotateOptions.direction;
+        if (rotateDirection === RotateDirection.random) {
+            const index = Math.floor(Math.random() * 2);
+            rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
+        }
+        switch (rotateDirection) {
+            case RotateDirection.counterClockwise:
+            case "counterClockwise":
+                particle.rotate.status = AnimationStatus.decreasing;
+                break;
+            case RotateDirection.clockwise:
+                particle.rotate.status = AnimationStatus.increasing;
+                break;
+        }
+        const rotateAnimation = particle.options.rotate.animation;
+        if (rotateAnimation.enable) {
+            particle.rotate.velocity = (rotateAnimation.speed / 360) * this.container.retina.reduceFactor;
+            if (!rotateAnimation.sync) {
+                particle.rotate.velocity *= Math.random();
+            }
+        }
+    }
     isEnabled(particle) {
         const rotate = particle.options.rotate;
         const rotateAnimation = rotate.animation;

package/browser/Updaters/Angle/index.js

@@ -1,4 +1,4 @@
 import { AngleUpdater } from "./AngleUpdater";
 export function loadAngleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("angle", () => new AngleUpdater());
+    tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater(container));
 }

package/browser/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/browser/Updaters/Color/ColorUpdater.js

@@ -1,5 +1,5 @@
 import { AnimationStatus } from "../../Enums";
-import { randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl, randomInRange } from "../../Utils";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
     const colorValue = value;
@@ -40,6 +40,15 @@ function updateColor(particle, delta) {
     }
 }
 export class ColorUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const hslColor = colorToHsl(particle.options.color, particle.id, particle.options.reduceDuplicates);
+        if (hslColor) {
+            particle.color = getHslAnimationFromHsl(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);
+        }
+    }
     isEnabled(particle) {
         var _a, _b, _c;
         const animationOptions = particle.options.color.animation;

package/browser/Updaters/Color/index.js

@@ -1,4 +1,4 @@
 import { ColorUpdater } from "./ColorUpdater";
 export function loadColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("color", () => new ColorUpdater());
+    tsParticles.addParticleUpdater("color", (container) => new ColorUpdater(container));
 }

package/browser/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/browser/Updaters/Life/LifeUpdater.js

@@ -3,6 +3,8 @@ export class LifeUpdater {
     constructor(container) {
         this.container = container;
     }
+    init() {
+    }
     isEnabled(particle) {
         return !particle.destroyed;
     }

package/browser/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;
 }