tsparticles 1.42.4 → 1.43.0

package/esm/Plugins/Absorbers/index.js

@@ -1,6 +1,6 @@
 import { Absorber } from "./Options/Classes/Absorber";
 import { Absorbers } from "./Absorbers";
-import { isInArray } from "../../Utils";
+import { isInArray } from "../../Utils/Utils";
 class AbsorbersPlugin {
     constructor() {
         this.id = "absorbers";
@@ -14,20 +14,17 @@ class AbsorbersPlugin {
             return false;
         }
         const absorbers = options.absorbers;
-        let loadAbsorbers = false;
         if (absorbers instanceof Array) {
-            if (absorbers.length) {
-                loadAbsorbers = true;
-            }
+            return !!absorbers.length;
         }
-        else if (absorbers !== undefined) {
-            loadAbsorbers = true;
+        else if (absorbers) {
+            return true;
         }
         else if (((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) &&
             isInArray("absorber", options.interactivity.events.onClick.mode)) {
-            loadAbsorbers = true;
+            return true;
         }
-        return loadAbsorbers;
+        return false;
     }
     loadOptions(options, source) {
         var _a, _b;
@@ -74,3 +71,5 @@ export async function loadAbsorbersPlugin(engine) {
     const plugin = new AbsorbersPlugin();
     await engine.addPlugin(plugin);
 }
+export * from "./Enums/AbsorberClickMode";
+export * from "./Options/Interfaces/IAbsorberOptions";

package/esm/Plugins/Emitters/EmitterInstance.js

@@ -10,9 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
-import { colorToHsl, deepExtend, getRangeValue, isPointInside, randomInRange } from "../../Utils";
+import { calcPositionOrRandomFromSizeRanged, getRangeValue, randomInRange } from "../../Utils/NumberUtils";
+import { deepExtend, isPointInside } from "../../Utils/Utils";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterSize } from "./Options/Classes/EmitterSize";
+import { colorToHsl } from "../../Utils/ColorUtils";
 export class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -77,16 +79,17 @@ export class EmitterInstance {
         if (this.paused) {
             return;
         }
-        if (this.container.retina.reduceFactor &&
+        if (!(this.container.retina.reduceFactor &&
             (this.lifeCount > 0 || this.immortal || !this.options.life.count) &&
-            (__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
-            if (this.emitDelay === undefined) {
-                const delay = getRangeValue(this.options.rate.delay);
-                this.emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
-            }
-            if (this.lifeCount > 0 || this.immortal) {
-                this.prepareToDie();
-            }
+            (__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0)))) {
+            return;
+        }
+        if (this.emitDelay === undefined) {
+            const delay = getRangeValue(this.options.rate.delay);
+            this.emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
+        }
+        if (this.lifeCount > 0 || this.immortal) {
+            this.prepareToDie();
         }
     }
     pause() {
@@ -204,13 +207,10 @@ export class EmitterInstance {
         this.emitters.removeEmitter(this);
     }
     calcPosition() {
-        var _a, _b;
-        const container = this.container;
-        const percentPosition = this.options.position;
-        return {
-            x: (getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width,
-            y: (getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height,
-        };
+        return calcPositionOrRandomFromSizeRanged({
+            size: this.container.canvas.size,
+            position: this.options.position,
+        });
     }
     emit() {
         if (this.paused) {
@@ -221,9 +221,7 @@ export class EmitterInstance {
     }
     emitParticles(quantity) {
         var _a, _b, _c;
-        const container = this.container;
-        const position = this.getPosition();
-        const size = this.getSize();
+        const position = this.getPosition(), size = this.getSize();
         for (let i = 0; i < quantity; i++) {
             const particlesOptions = deepExtend({}, this.particlesOptions);
             if (this.spawnColor) {
@@ -246,7 +244,7 @@ export class EmitterInstance {
                 return;
             }
             const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
-            container.particles.addParticle(pPosition, particlesOptions);
+            this.container.particles.addParticle(pPosition, particlesOptions);
         }
     }
     setColorAnimation(animation, initValue, maxValue) {
@@ -255,10 +253,7 @@ export class EmitterInstance {
         if (!animation.enable) {
             return initValue;
         }
-        const colorOffset = randomInRange(animation.offset);
-        const delay = getRangeValue(this.options.rate.delay);
-        const emitFactor = (1000 * delay) / container.retina.reduceFactor;
-        const colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
+        const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
         return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
     }
 }

package/esm/Plugins/Emitters/Emitters.js

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Emitters_engine;
-import { deepExtend, itemFromArray } from "../../Utils";
+import { deepExtend, itemFromArray } from "../../Utils/Utils";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterInstance } from "./EmitterInstance";
 export class Emitters {
@@ -109,9 +109,7 @@ export class Emitters {
         }
     }
     handleClickMode(mode) {
-        const container = this.container;
-        const emitterOptions = this.emitters;
-        const modeEmitters = this.interactivityEmitters;
+        const emitterOptions = this.emitters, modeEmitters = this.interactivityEmitters;
         if (mode === "emitter") {
             let emitterModeOptions;
             if (modeEmitters instanceof Array) {
@@ -122,8 +120,7 @@ export class Emitters {
             else {
                 emitterModeOptions = modeEmitters;
             }
-            const emittersOptions = emitterModeOptions !== null && emitterModeOptions !== void 0 ? emitterModeOptions : (emitterOptions instanceof Array ? itemFromArray(emitterOptions) : emitterOptions);
-            const ePosition = container.interactivity.mouse.clickPosition;
+            const emittersOptions = emitterModeOptions !== null && emitterModeOptions !== void 0 ? emitterModeOptions : (emitterOptions instanceof Array ? itemFromArray(emitterOptions) : emitterOptions), ePosition = this.container.interactivity.mouse.clickPosition;
             this.addEmitter(deepExtend({}, emittersOptions), ePosition);
         }
     }

package/esm/Plugins/Emitters/Options/Classes/Emitter.js

@@ -1,8 +1,9 @@
-import { deepExtend, setRangeValue } from "../../../../Utils";
 import { AnimatableColor } from "../../../../Options/Classes/AnimatableColor";
 import { EmitterLife } from "./EmitterLife";
 import { EmitterRate } from "./EmitterRate";
 import { EmitterSize } from "./EmitterSize";
+import { deepExtend } from "../../../../Utils/Utils";
+import { setRangeValue } from "../../../../Utils/NumberUtils";
 export class Emitter {
     constructor() {
         this.autoPlay = true;

package/esm/Plugins/Emitters/Options/Classes/EmitterRate.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../../../Utils";
+import { setRangeValue } from "../../../../Utils/NumberUtils";
 export class EmitterRate {
     constructor() {
         this.quantity = 1;

package/esm/Plugins/Emitters/Shapes/Circle/CircleShape.js

@@ -1,9 +1,7 @@
 export class CircleShape {
     randomPosition(position, size, fill) {
         const generateTheta = (x, y) => {
-            const u = Math.random() / 4.0;
-            const theta = Math.atan((y / x) * Math.tan(2 * Math.PI * u));
-            const v = Math.random();
+            const u = Math.random() / 4.0, theta = Math.atan((y / x) * Math.tan(2 * Math.PI * u)), v = Math.random();
             if (v < 0.25) {
                 return theta;
             }
@@ -16,10 +14,7 @@ export class CircleShape {
             else {
                 return -theta;
             }
-        };
-        const radius = (x, y, theta) => (x * y) / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
-        const [a, b] = [size.width / 2, size.height / 2];
-        const randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
+        }, radius = (x, y, theta) => (x * y) / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2), [a, b] = [size.width / 2, size.height / 2], randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
         return {
             x: position.x + randomRadius * Math.cos(randomTheta),
             y: position.y + randomRadius * Math.sin(randomTheta),

package/esm/Plugins/Emitters/index.js

@@ -15,7 +15,7 @@ import { Emitter } from "./Options/Classes/Emitter";
 import { Emitters } from "./Emitters";
 import { ShapeManager } from "./ShapeManager";
 import { SquareShape } from "./Shapes/Square/SquareShape";
-import { isInArray } from "../../Utils";
+import { isInArray } from "../../Utils/Utils";
 class EmittersPlugin {
     constructor(engine) {
         _EmittersPlugin_engine.set(this, void 0);
@@ -94,3 +94,6 @@ export async function loadEmittersPlugin(engine) {
     engine.addEmitterShape("square", new SquareShape());
 }
 export * from "./EmittersEngine";
+export * from "./Enums/EmitterClickMode";
+export * from "./Enums/EmitterShapeType";
+export * from "./Options/Interfaces/IEmitterOptions";

package/esm/Plugins/PolygonMask/Options/Classes/PolygonMask.js

@@ -2,7 +2,7 @@ import { PolygonMaskDraw } from "./PolygonMaskDraw";
 import { PolygonMaskInline } from "./PolygonMaskInline";
 import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg";
 import { PolygonMaskMove } from "./PolygonMaskMove";
-import { deepExtend } from "../../../../Utils";
+import { deepExtend } from "../../../../Utils/Utils";
 export class PolygonMask {
     constructor() {
         this.draw = new PolygonMaskDraw();

package/esm/Plugins/PolygonMask/Options/Classes/PolygonMaskDrawStroke.js

@@ -1,5 +1,5 @@
 import { OptionsColor } from "../../../../Options/Classes/OptionsColor";
-import { stringToAlpha } from "../../../../Utils";
+import { stringToAlpha } from "../../../../Utils/ColorUtils";
 export class PolygonMaskDrawStroke {
     constructor() {
         this.color = new OptionsColor();

package/esm/Plugins/PolygonMask/PolygonMaskInstance.js

@@ -1,6 +1,7 @@
 import { calcClosestPtOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./Utils";
-import { deepExtend, getDistance, getDistances, itemFromArray } from "../../Utils";
-import { Constants } from "../../Core";
+import { deepExtend, itemFromArray } from "../../Utils/Utils";
+import { getDistance, getDistances } from "../../Utils/NumberUtils";
+import { Constants } from "../../Core/Utils/Constants";
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 export class PolygonMaskInstance {
     constructor(container) {
@@ -22,8 +23,7 @@ export class PolygonMaskInstance {
         }
     }
     resize() {
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         if (!(options.enable && options.type !== "none")) {
             return;
         }
@@ -73,15 +73,13 @@ export class PolygonMaskInstance {
         if (!((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
             return;
         }
-        const options = this.options;
-        const polygonDraw = options.draw;
-        if (!(options.enable && polygonDraw.enable)) {
+        const options = this.options, polygonDraw = options.draw;
+        if (!options.enable || !polygonDraw.enable) {
             return;
         }
         const rawData = this.raw;
         for (const path of this.paths) {
-            const path2d = path.path2d;
-            const path2dSupported = this.path2DSupported;
+            const path2d = path.path2d, path2dSupported = this.path2DSupported;
             if (!context) {
                 continue;
             }
@@ -137,22 +135,17 @@ export class PolygonMaskInstance {
     }
     checkInsidePolygon(position) {
         var _a, _b;
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         if (!options.enable || options.type === "none" || options.type === "inline") {
             return true;
         }
         if (!this.raw) {
             throw new Error(Constants.noPolygonFound);
         }
-        const canvasSize = container.canvas.size;
-        const x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width;
-        const y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
+        const canvasSize = container.canvas.size, x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
         let inside = false;
         for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
-            const pi = this.raw[i];
-            const pj = this.raw[j];
-            const intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
+            const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
             if (intersect) {
                 inside = !inside;
             }
@@ -169,11 +162,7 @@ export class PolygonMaskInstance {
         if (this.paths !== undefined && !forceDownload) {
             return this.raw;
         }
-        const container = this.container;
-        const options = this.options;
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(xml, "image/svg+xml");
-        const svg = doc.getElementsByTagName("svg")[0];
+        const container = this.container, options = this.options, parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
         let svgPaths = svg.getElementsByTagName("path");
         if (!svgPaths.length) {
             svgPaths = doc.getElementsByTagName("path");
@@ -188,8 +177,7 @@ export class PolygonMaskInstance {
                 });
             }
         }
-        const pxRatio = container.retina.pixelRatio;
-        const scale = options.scale / pxRatio;
+        const pxRatio = container.retina.pixelRatio, scale = options.scale / pxRatio;
         this.dimension.width = parseFloat((_a = svg.getAttribute("width")) !== null && _a !== void 0 ? _a : "0") * scale;
         this.dimension.height = parseFloat((_b = svg.getAttribute("height")) !== null && _b !== void 0 ? _b : "0") * scale;
         const position = (_c = options.position) !== null && _c !== void 0 ? _c : {
@@ -203,9 +191,7 @@ export class PolygonMaskInstance {
         return parsePaths(this.paths, scale, this.offset);
     }
     async downloadSvgPath(svgUrl, force) {
-        const options = this.options;
-        const url = svgUrl || options.url;
-        const forceDownload = force !== null && force !== void 0 ? force : false;
+        const options = this.options, url = svgUrl || options.url, forceDownload = force !== null && force !== void 0 ? force : false;
         if (!url || (this.paths !== undefined && !forceDownload)) {
             return this.raw;
         }
@@ -227,8 +213,7 @@ export class PolygonMaskInstance {
         }
     }
     randomPoint() {
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         let position;
         if (options.type === "inline") {
             switch (options.inline.arrangement) {
@@ -276,9 +261,7 @@ export class PolygonMaskInstance {
         if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
             throw new Error(Constants.noPolygonDataLoaded);
         }
-        const path = itemFromArray(this.paths);
-        const distance = Math.floor(Math.random() * path.length) + 1;
-        const point = path.element.getPointAtLength(distance);
+        const path = itemFromArray(this.paths), distance = Math.floor(Math.random() * path.length) + 1, point = path.element.getPointAtLength(distance);
         return {
             x: point.x * options.scale + (((_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) || 0),
             y: point.y * options.scale + (((_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) || 0),
@@ -286,14 +269,11 @@ export class PolygonMaskInstance {
     }
     getEquidistantPointByIndex(index) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const options = this.container.actualOptions;
-        const polygonMaskOptions = this.options;
+        const options = this.container.actualOptions, polygonMaskOptions = this.options;
         if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length))
             throw new Error(Constants.noPolygonDataLoaded);
-        let offset = 0;
-        let point;
-        const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0);
-        const distance = totalLength / options.particles.number.value;
+        let offset = 0, point;
+        const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0), distance = totalLength / options.particles.number.value;
         for (const path of this.paths) {
             const pathDistance = distance * index - offset;
             if (pathDistance <= path.length) {
@@ -328,10 +308,7 @@ export class PolygonMaskInstance {
         for (const path of this.paths) {
             const pathData = (_b = path.element) === null || _b === void 0 ? void 0 : _b.getAttribute("d");
             if (pathData) {
-                const path2d = new Path2D(pathData);
-                const matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
-                const finalPath = new Path2D();
-                const transform = matrix.scale(options.scale);
+                const path2d = new Path2D(pathData), matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(options.scale);
                 if (finalPath.addPath) {
                     finalPath.addPath(path2d, transform);
                     path.path2d = finalPath;

package/esm/Plugins/PolygonMask/Utils.js

@@ -1,5 +1,6 @@
-import { colorToRgb, getDistances, getStyleFromRgb } from "../../Utils";
-import { Vector } from "../../Core";
+import { colorToRgb, getStyleFromRgb } from "../../Utils/ColorUtils";
+import { Vector } from "../../Core/Utils/Vector";
+import { getDistances } from "../../Utils/NumberUtils";
 export function drawPolygonMask(context, rawData, stroke) {
     const color = colorToRgb(stroke.color);
     if (!color) {
@@ -29,9 +30,7 @@ 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 = {
+        const segments = path.element.pathSegList, len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0, p = {
             x: 0,
             y: 0,
         };
@@ -88,10 +87,7 @@ export function parsePaths(paths, scale, offset) {
     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);
-    const res = {
+    const { dx, dy } = getDistances(pos, s1), { dx: dxx, dy: dyy } = getDistances(s2, s1), t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2), res = {
         x: s1.x + dxx * t,
         y: s1.x + dyy * t,
         isOnSegment: t >= 0 && t <= 1,
@@ -107,10 +103,7 @@ export function calcClosestPtOnSegment(s1, s2, pos) {
     return res;
 }
 export function segmentBounce(start, stop, velocity) {
-    const { dx, dy } = getDistances(start, stop);
-    const wallAngle = Math.atan2(dy, dx);
-    const wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle));
-    const d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+    const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
     wallNormal.multTo(d);
     velocity.subFrom(wallNormal);
 }

package/esm/Plugins/PolygonMask/index.js

@@ -1,6 +1,6 @@
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 import { PolygonMaskInstance } from "./PolygonMaskInstance";
-import { isSsr } from "../../Utils";
+import { isSsr } from "../../Utils/Utils";
 class PolygonMaskPlugin {
     constructor() {
         this.id = "polygonMask";
@@ -26,8 +26,12 @@ class PolygonMaskPlugin {
 }
 export async function loadPolygonMaskPlugin(engine) {
     if (!isSsr() && !("SVGPathSeg" in window)) {
-        await import("./pathseg");
+        await import("./pathseg.js");
     }
     const plugin = new PolygonMaskPlugin();
     await engine.addPlugin(plugin);
 }
+export * from "./Enums/PolygonMaskInlineArrangement";
+export * from "./Enums/PolygonMaskMoveType";
+export * from "./Enums/PolygonMaskType";
+export * from "./Options/Interfaces/IPolygonMaskOptions";

package/esm/Shapes/Image/ImageDrawer.js

@@ -39,26 +39,6 @@ export class ImageDrawer {
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    async loadImageShape(container, imageShape) {
-        const source = imageShape.src;
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-            const image = {
-                source: source,
-                type: source.substr(source.length - 3),
-                error: false,
-                loading: true,
-            };
-            this.addImage(container, image);
-            const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-            await imageFunc(image);
-        }
-        catch (_a) {
-            throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
-    }
     draw(context, particle, radius, opacity) {
         var _a, _b;
         const image = particle.image;
@@ -124,5 +104,25 @@ export class ImageDrawer {
         particle.fill = imageShape.fill;
         particle.close = imageShape.close;
     }
+    async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+            throw new Error("Error tsParticles - No image.src");
+        }
+        try {
+            const image = {
+                source: source,
+                type: source.substr(source.length - 3),
+                error: false,
+                loading: true,
+            };
+            this.addImage(container, image);
+            const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+            await imageFunc(image);
+        }
+        catch (_a) {
+            throw new Error(`tsParticles error - ${imageShape.src} not found`);
+        }
+    }
 }
 _ImageDrawer_images = new WeakMap();

package/esm/Shapes/Image/Utils.js

@@ -1,4 +1,4 @@
-import { getStyleFromHsl } from "../../Utils";
+import { getStyleFromHsl } from "../../Utils/ColorUtils";
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
 function replaceColorSvg(imageShape, color, opacity) {
     const { svgData } = imageShape;

package/esm/Shapes/Text/TextDrawer.js

@@ -1,4 +1,4 @@
-import { isInArray, itemFromArray, loadFont } from "../../Utils";
+import { isInArray, itemFromArray, loadFont } from "../../Utils/Utils";
 export const validTypes = ["text", "character", "char"];
 export class TextDrawer {
     getSidesCount() {

package/esm/Updaters/Angle/AngleUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateAngle(particle, delta) {
     var _a;
     const rotate = particle.rotate;

package/esm/Updaters/Color/ColorUpdater.js

@@ -1,4 +1,5 @@
-import { colorToHsl, getHslAnimationFromHsl, randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl } from "../../Utils/ColorUtils";
+import { randomInRange } from "../../Utils/NumberUtils";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
     const colorValue = value;

package/esm/Updaters/Life/LifeUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue, randomInRange, setRangeValue } from "../../Utils";
+import { getRangeValue, randomInRange, setRangeValue } from "../../Utils/NumberUtils";
 export class LifeUpdater {
     constructor(container) {
         this.container = container;

package/esm/Updaters/Opacity/OpacityUpdater.js

@@ -1,4 +1,4 @@
-import { clamp, getRangeMax, getRangeMin, getRangeValue, randomInRange } from "../../Utils";
+import { clamp, getRangeMax, getRangeMin, getRangeValue, randomInRange } from "../../Utils/NumberUtils";
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.opacity.animation.destroy) {
         case "max":

package/esm/Updaters/OutModes/OutOfCanvasUpdater.js

@@ -1,5 +1,5 @@
 import { bounceHorizontal, bounceVertical } from "./Utils";
-import { calculateBounds, isPointInside } from "../../Utils";
+import { calculateBounds, isPointInside } from "../../Utils/Utils";
 export class OutOfCanvasUpdater {
     constructor(container) {
         this.container = container;

package/esm/Updaters/OutModes/Utils.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 export function bounceHorizontal(data) {
     if (!(data.outMode === "bounce" ||
         data.outMode === "bounce-horizontal" ||

package/esm/Updaters/Roll/RollUpdater.js

@@ -1,4 +1,5 @@
-import { colorToHsl, getRangeValue } from "../../Utils";
+import { colorToHsl } from "../../Utils/ColorUtils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateRoll(particle, delta) {
     const roll = particle.options.roll;
     if (!particle.roll || !roll.enable) {

package/esm/Updaters/Size/SizeUpdater.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../Utils";
+import { clamp } from "../../Utils/NumberUtils";
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.size.animation.destroy) {
         case "max":

package/esm/Updaters/StrokeColor/StrokeColorUpdater.js

@@ -1,4 +1,6 @@
-import { colorToHsl, getHslAnimationFromHsl, itemFromArray, randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl } from "../../Utils/ColorUtils";
+import { itemFromArray } from "../../Utils/Utils";
+import { randomInRange } from "../../Utils/NumberUtils";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
     const colorValue = value;

package/esm/Updaters/Tilt/TiltUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateTilt(particle, delta) {
     var _a;
     if (!particle.tilt) {

package/esm/Updaters/Twinkle/TwinkleUpdater.js

@@ -0,0 +1,17 @@
+import { colorToHsl, getStyleFromHsl } from "../../Utils/ColorUtils";
+import { getRangeValue } from "../../Utils/NumberUtils";
+export class TwinkleUpdater {
+    getColorStyles(particle, context, radius, opacity) {
+        const pOptions = particle.options, twinkle = pOptions.twinkle.particles, twinkling = twinkle.enable && Math.random() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleRgb = colorToHsl(twinkle.color), twinkleStyle = twinkleRgb ? getStyleFromHsl(twinkleRgb, twinklingOpacity) : undefined, res = {}, needsTwinkle = twinkling && twinkleStyle;
+        res.fill = needsTwinkle ? twinkleStyle : undefined;
+        res.stroke = needsTwinkle ? twinkleStyle : undefined;
+        return res;
+    }
+    init() {
+    }
+    isEnabled(particle) {
+        return particle.options.twinkle.particles.enable;
+    }
+    update() {
+    }
+}

package/esm/Updaters/Twinkle/index.js

@@ -0,0 +1,4 @@
+import { TwinkleUpdater } from "./TwinkleUpdater";
+export async function loadTwinkleUpdater(engine) {
+    await engine.addParticleUpdater("tilt", () => new TwinkleUpdater());
+}

package/esm/Updaters/Wobble/WobbleUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateWobble(particle, delta) {
     var _a;
     const wobble = particle.options.wobble;