@tsparticles/engine 3.9.0 → 4.0.0-alpha.0

package/umd/Core/Engine.js

@@ -1,21 +1,55 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "./Container.js", "../Utils/EventDispatcher.js", "../Enums/Types/EventType.js", "../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "../Utils/EventDispatcher.js", "../Enums/Types/EventType.js", "../Utils/LogUtils.js", "../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Engine = void 0;
     const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
-    const Container_js_1 = require("./Container.js");
     const EventDispatcher_js_1 = require("../Utils/EventDispatcher.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
-    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
+    const LogUtils_js_1 = require("../Utils/LogUtils.js");
+    const MathUtils_js_1 = require("../Utils/MathUtils.js");
     async function getItemsFromInitializer(container, map, initializers, force = false) {
         let res = map.get(container);
         if (!res || force) {
@@ -33,25 +67,23 @@
         if (response.ok) {
             return (await response.json());
         }
-        (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} ${response.status} while retrieving config file`);
+        (0, LogUtils_js_1.getLogger)().error(`${response.status.toString()} while retrieving config file`);
         return data.fallback;
     }
     const getCanvasFromContainer = (domContainer) => {
         let canvasEl;
         if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === Constants_js_1.canvasTag) {
             canvasEl = domContainer;
-            if (!canvasEl.dataset[Constants_js_1.generatedAttribute]) {
-                canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
-            }
+            canvasEl.dataset[Constants_js_1.generatedAttribute] ??= Constants_js_1.generatedFalse;
         }
         else {
-            const existingCanvases = domContainer.getElementsByTagName(Constants_js_1.canvasTag);
-            if (existingCanvases.length) {
-                canvasEl = existingCanvases[Constants_js_1.canvasFirstIndex];
+            const existingCanvases = domContainer.getElementsByTagName(Constants_js_1.canvasTag), foundCanvas = existingCanvases[Constants_js_1.canvasFirstIndex];
+            if (foundCanvas) {
+                canvasEl = foundCanvas;
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
             }
             else {
-                canvasEl = document.createElement(Constants_js_1.canvasTag);
+                canvasEl = (0, Utils_js_1.safeDocument)().createElement(Constants_js_1.canvasTag);
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
                 domContainer.appendChild(canvasEl);
             }
@@ -65,14 +97,14 @@
         }
         return canvasEl;
     }, getDomContainer = (id, source) => {
-        let domContainer = source ?? document.getElementById(id);
+        let domContainer = source ?? (0, Utils_js_1.safeDocument)().getElementById(id);
         if (domContainer) {
             return domContainer;
         }
-        domContainer = document.createElement("div");
+        domContainer = (0, Utils_js_1.safeDocument)().createElement("div");
         domContainer.id = id;
         domContainer.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
-        document.body.append(domContainer);
+        (0, Utils_js_1.safeDocument)().body.append(domContainer);
         return domContainer;
     };
     class Engine {
@@ -81,6 +113,7 @@
             this._domArray = [];
             this._eventDispatcher = new EventDispatcher_js_1.EventDispatcher();
             this._initialized = false;
+            this._loadPromises = new Set();
             this.plugins = [];
             this.colorManagers = new Map();
             this.easingFunctions = new Map();
@@ -108,73 +141,65 @@
             return this._domArray;
         }
         get version() {
-            return "3.9.0";
+            return "4.0.0-alpha.0";
         }
-        async addColorManager(manager, refresh = true) {
+        addColorManager(manager) {
             this.colorManagers.set(manager.key, manager);
-            await this.refresh(refresh);
         }
         addConfig(config) {
             const key = config.key ?? config.name ?? "default";
             this._configs.set(key, config);
             this._eventDispatcher.dispatchEvent(EventType_js_1.EventType.configAdded, { data: { name: key, config } });
         }
-        async addEasing(name, easing, refresh = true) {
-            if (this.getEasing(name)) {
+        addEasing(name, easing) {
+            if (this.easingFunctions.get(name)) {
                 return;
             }
             this.easingFunctions.set(name, easing);
-            await this.refresh(refresh);
         }
-        async addEffect(effect, drawer, refresh = true) {
-            (0, Utils_js_1.executeOnSingleOrMultiple)(effect, type => {
-                if (!this.getEffectDrawer(type)) {
-                    this.effectDrawers.set(type, drawer);
-                }
-            });
-            await this.refresh(refresh);
+        addEffect(effect, drawer) {
+            if (this.getEffectDrawer(effect)) {
+                return;
+            }
+            this.effectDrawers.set(effect, drawer);
         }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
         }
-        async addInteractor(name, interactorInitializer, refresh = true) {
+        addInteractor(name, interactorInitializer) {
             this._initializers.interactors.set(name, interactorInitializer);
-            await this.refresh(refresh);
         }
-        async addMover(name, moverInitializer, refresh = true) {
+        addMover(name, moverInitializer) {
             this._initializers.movers.set(name, moverInitializer);
-            await this.refresh(refresh);
         }
-        async addParticleUpdater(name, updaterInitializer, refresh = true) {
+        addParticleUpdater(name, updaterInitializer) {
             this._initializers.updaters.set(name, updaterInitializer);
-            await this.refresh(refresh);
         }
-        async addPathGenerator(name, generator, refresh = true) {
-            if (!this.getPathGenerator(name)) {
-                this.pathGenerators.set(name, generator);
+        addPathGenerator(name, generator) {
+            if (this.getPathGenerator(name)) {
+                return;
             }
-            await this.refresh(refresh);
+            this.pathGenerators.set(name, generator);
         }
-        async addPlugin(plugin, refresh = true) {
-            if (!this.getPlugin(plugin.id)) {
-                this.plugins.push(plugin);
+        addPlugin(plugin) {
+            if (this.getPlugin(plugin.id)) {
+                return;
             }
-            await this.refresh(refresh);
+            this.plugins.push(plugin);
         }
-        async addPreset(preset, options, override = false, refresh = true) {
-            if (override || !this.getPreset(preset)) {
-                this.presets.set(preset, options);
+        addPreset(preset, options, override = false) {
+            if (!(override || !this.getPreset(preset))) {
+                return;
             }
-            await this.refresh(refresh);
+            this.presets.set(preset, options);
         }
-        async addShape(drawer, refresh = true) {
+        addShape(drawer) {
             for (const validType of drawer.validTypes) {
                 if (this.getShapeDrawer(validType)) {
                     continue;
                 }
                 this.shapeDrawers.set(validType, drawer);
             }
-            await this.refresh(refresh);
         }
         checkVersion(pluginVersion) {
             if (this.version === pluginVersion) {
@@ -238,22 +263,29 @@
         async getUpdaters(container, force = false) {
             return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
         }
-        init() {
+        async init() {
             if (this._initialized) {
                 return;
             }
+            for (const loadPromise of this._loadPromises) {
+                await loadPromise(this);
+            }
+            this._loadPromises.clear();
             this._initialized = true;
         }
         item(index) {
             const { items } = this, item = items[index];
-            if (!item || item.destroyed) {
+            if (item?.destroyed) {
                 items.splice(index, Constants_js_1.removeDeleteCount);
                 return;
             }
             return item;
         }
         async load(params) {
-            const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container_js_1.Container(this, id, currentOptions);
+            await this.init();
+            const { Container } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Container.js"))) : new Promise((resolve_1, reject_1) => { require(["./Container.js"], resolve_1, reject_1); }).then(__importStar)), id = params.id ??
+                params.element?.id ??
+                `tsparticles${Math.floor((0, MathUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
             if (oldIndex >= Constants_js_1.loadMinIndex) {
                 const old = this.item(oldIndex), deleteCount = old ? Constants_js_1.one : Constants_js_1.none;
                 if (old && !old.destroyed) {
@@ -270,7 +302,9 @@
             return newItem;
         }
         loadOptions(options, sourceOptions) {
-            this.plugins.forEach(plugin => plugin.loadOptions?.(options, sourceOptions));
+            this.plugins.forEach(plugin => {
+                plugin.loadOptions(options, sourceOptions);
+            });
         }
         loadParticlesOptions(container, options, ...sourceOptions) {
             const updaters = this.updaters.get(container);
@@ -285,15 +319,25 @@
             }
             await Promise.all(this.items.map(t => t.refresh()));
         }
+        register(...loadPromises) {
+            if (this._initialized) {
+                throw new Error(`Register plugins can only be done before calling tsParticles.load()`);
+            }
+            for (const loadPromise of loadPromises) {
+                this._loadPromises.add(loadPromise);
+            }
+        }
         removeEventListener(type, listener) {
             this._eventDispatcher.removeEventListener(type, listener);
         }
         setOnClickHandler(callback) {
             const { items } = this;
             if (!items.length) {
-                throw new Error(`${Constants_js_1.errorPrefix} can only set click handlers after calling tsParticles.load()`);
+                throw new Error("Click handlers can only be set after calling tsParticles.load()");
             }
-            items.forEach(item => item.addClickHandler(callback));
+            items.forEach(item => {
+                item.addClickHandler(callback);
+            });
         }
     }
     exports.Engine = Engine;

package/umd/Core/Particle.js

@@ -4,30 +4,26 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Vectors.js", "../Utils/NumberUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Utils/ColorUtils.js", "../Enums/Types/EventType.js", "../Options/Classes/Interactivity/Interactivity.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Enums/Modes/PixelMode.js", "../Utils/CanvasUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Vectors.js", "../Utils/MathUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Enums/Types/EventType.js", "../Options/Classes/Interactivity/Interactivity.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Utils/CanvasUtils.js", "../Utils/ColorUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particle = void 0;
     const Vectors_js_1 = require("./Utils/Vectors.js");
-    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../Utils/MathUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
-    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.js");
     const MoveDirection_js_1 = require("../Enums/Directions/MoveDirection.js");
     const OutMode_js_1 = require("../Enums/Modes/OutMode.js");
     const ParticleOutType_js_1 = require("../Enums/Types/ParticleOutType.js");
-    const PixelMode_js_1 = require("../Enums/Modes/PixelMode.js");
     const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
         const effectData = effectOptions.options[effect];
-        if (!effectData) {
-            return;
-        }
         return (0, Utils_js_1.deepExtend)({
             close: effectOptions.close,
             fill: effectOptions.fill,
@@ -35,9 +31,6 @@
     }
     function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
         const shapeData = shapeOptions.options[shape];
-        if (!shapeData) {
-            return;
-        }
         return (0, Utils_js_1.deepExtend)({
             close: shapeOptions.close,
             fill: shapeOptions.fill,
@@ -59,13 +52,14 @@
         constructor(engine, container) {
             this.container = container;
             this._calcPosition = (container, position, zIndex, tryCount = Constants_js_1.defaultRetryCount) => {
-                for (const plugin of container.plugins.values()) {
-                    const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
+                const plugins = container.plugins.values();
+                for (const plugin of plugins) {
+                    const pluginPos = plugin.particlePosition?.(position, this);
                     if (pluginPos) {
                         return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
                     }
                 }
-                const canvasSize = container.canvas.size, exactPosition = (0, NumberUtils_js_1.calcExactPositionOrRandomFromSize)({
+                const canvasSize = container.canvas.size, exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
                     size: canvasSize,
                     position: position,
                 }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
@@ -91,48 +85,40 @@
                 fixHorizontal(outModes.right ?? outModes.default);
                 fixVertical(outModes.top ?? outModes.default);
                 fixVertical(outModes.bottom ?? outModes.default);
-                if (this._checkOverlap(pos, tryCount)) {
+                let isValidPosition = true;
+                for (const plugin of plugins) {
+                    isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);
+                    if (isValidPosition === false) {
+                        break;
+                    }
+                }
+                if (!isValidPosition) {
                     return this._calcPosition(container, undefined, zIndex, tryCount + Constants_js_1.tryCountIncrement);
                 }
                 return pos;
             };
             this._calculateVelocity = () => {
-                const baseVelocity = (0, NumberUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+                const baseVelocity = (0, MathUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
                 if (moveOptions.direction === MoveDirection_js_1.MoveDirection.inside || moveOptions.direction === MoveDirection_js_1.MoveDirection.outside) {
                     return res;
                 }
-                const rad = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
+                const rad = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
                     left: radOffset - rad * Constants_js_1.half,
                     right: radOffset + rad * Constants_js_1.half,
                 };
                 if (!moveOptions.straight) {
-                    res.angle += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
+                    res.angle += (0, MathUtils_js_1.randomInRangeValue)((0, MathUtils_js_1.setRangeValue)(range.left, range.right));
                 }
                 if (moveOptions.random && typeof moveOptions.speed === "number") {
-                    res.length *= (0, NumberUtils_js_1.getRandom)();
+                    res.length *= (0, MathUtils_js_1.getRandom)();
                 }
                 return res;
             };
-            this._checkOverlap = (pos, tryCount = Constants_js_1.defaultRetryCount) => {
-                const collisionsOptions = this.options.collisions, radius = this.getRadius();
-                if (!collisionsOptions.enable) {
-                    return false;
-                }
-                const overlapOptions = collisionsOptions.overlap;
-                if (overlapOptions.enable) {
-                    return false;
-                }
-                const retries = overlapOptions.retries;
-                if (retries >= Constants_js_1.minRetries && tryCount > retries) {
-                    throw new Error(`${Constants_js_1.errorPrefix} particle is overlapping and can't be placed`);
-                }
-                return !!this.container.particles.find(particle => (0, NumberUtils_js_1.getDistance)(pos, particle.position) < radius + particle.getRadius());
-            };
             this._getRollColor = color => {
                 if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                     return color;
                 }
-                const backFactor = this.roll.horizontal && this.roll.vertical ? Constants_js_1.double * Constants_js_1.rollFactor : Constants_js_1.rollFactor, backSum = this.roll.horizontal ? Math.PI * Constants_js_1.half : Constants_js_1.none, rolled = Math.floor(((this.roll.angle ?? Constants_js_1.none) + backSum) / (Math.PI / backFactor)) % Constants_js_1.double;
+                const backFactor = this.roll.horizontal && this.roll.vertical ? Constants_js_1.double * Constants_js_1.rollFactor : Constants_js_1.rollFactor, backSum = this.roll.horizontal ? Math.PI * Constants_js_1.half : Constants_js_1.none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % Constants_js_1.double;
                 if (!rolled) {
                     return color;
                 }
@@ -145,16 +131,16 @@
                 return color;
             };
             this._initPosition = position => {
-                const container = this.container, zIndexValue = (0, NumberUtils_js_1.getRangeValue)(this.options.zIndex.value);
-                this.position = this._calcPosition(container, position, (0, NumberUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
+                const container = this.container, zIndexValue = (0, MathUtils_js_1.getRangeValue)(this.options.zIndex.value);
+                this.position = this._calcPosition(container, position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
                 this.initialPosition = this.position.copy();
                 const canvasSize = container.canvas.size;
                 this.moveCenter = {
                     ...(0, Utils_js_1.getPosition)(this.options.move.center, canvasSize),
-                    radius: this.options.move.center.radius ?? Constants_js_1.defaultRadius,
-                    mode: this.options.move.center.mode ?? PixelMode_js_1.PixelMode.percent,
+                    radius: this.options.move.center.radius,
+                    mode: this.options.move.center.mode,
                 };
-                this.direction = (0, NumberUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
+                this.direction = (0, MathUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
                 switch (this.options.move.direction) {
                     case MoveDirection_js_1.MoveDirection.inside:
                         this.outType = ParticleOutType_js_1.ParticleOutType.inside;
@@ -174,7 +160,7 @@
             this.destroyed = true;
             this.bubble.inRange = false;
             this.slow.inRange = false;
-            const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+            const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
             for (const plugin of container.plugins.values()) {
                 plugin.particleDestroyed?.(this, override);
@@ -197,6 +183,9 @@
             }
             canvas.drawParticle(this, delta);
         }
+        getAngle() {
+            return this.rotation + (this.pathRotation ? this.velocity.angle : Constants_js_1.defaultAngle);
+        }
         getFillColor() {
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
         }
@@ -236,7 +225,7 @@
             };
             this.outType = ParticleOutType_js_1.ParticleOutType.normal;
             this.ignoresResizeRatio = true;
-            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), { reduceDuplicates } = particlesOptions, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
+            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
             this.effect = (0, Utils_js_1.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);
             this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
             const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
@@ -258,14 +247,16 @@
             }
             if (this.effect === Constants_js_1.randomColorValue) {
                 const availableEffects = [...this.container.effectDrawers.keys()];
-                this.effect = availableEffects[Math.floor((0, NumberUtils_js_1.getRandom)() * availableEffects.length)];
+                this.effect = availableEffects[Math.floor((0, MathUtils_js_1.getRandom)() * availableEffects.length)];
             }
             if (this.shape === Constants_js_1.randomColorValue) {
                 const availableShapes = [...this.container.shapeDrawers.keys()];
-                this.shape = availableShapes[Math.floor((0, NumberUtils_js_1.getRandom)() * availableShapes.length)];
+                this.shape = availableShapes[Math.floor((0, MathUtils_js_1.getRandom)() * availableShapes.length)];
             }
-            this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
-            this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
+            this.effectData = this.effect
+                ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates)
+                : undefined;
+            this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
             particlesOptions.load(overrideOptions);
             const effectData = this.effectData;
             if (effectData) {
@@ -285,7 +276,7 @@
             this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
             const pathOptions = this.options.move.path;
-            this.pathDelay = (0, NumberUtils_js_1.getRangeValue)(pathOptions.delay.value) * Constants_js_1.millisecondsToSeconds;
+            this.pathDelay = (0, MathUtils_js_1.getRangeValue)(pathOptions.delay.value) * Constants_js_1.millisecondsToSeconds;
             if (pathOptions.generator) {
                 this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
                 if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -304,26 +295,31 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            this.moveDecay = Constants_js_1.decayOffset - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
+            this.moveDecay = Constants_js_1.decayOffset - (0, MathUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
             particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
-            let effectDrawer = container.effectDrawers.get(this.effect);
-            if (!effectDrawer) {
-                effectDrawer = this._engine.getEffectDrawer(this.effect);
-                if (effectDrawer) {
-                    container.effectDrawers.set(this.effect, effectDrawer);
+            let effectDrawer, shapeDrawer;
+            if (this.effect) {
+                effectDrawer = container.effectDrawers.get(this.effect);
+                if (!effectDrawer) {
+                    effectDrawer = this._engine.getEffectDrawer(this.effect);
+                    if (effectDrawer) {
+                        container.effectDrawers.set(this.effect, effectDrawer);
+                    }
                 }
             }
             if (effectDrawer?.loadEffect) {
                 effectDrawer.loadEffect(this);
             }
-            let shapeDrawer = container.shapeDrawers.get(this.shape);
-            if (!shapeDrawer) {
-                shapeDrawer = this._engine.getShapeDrawer(this.shape);
-                if (shapeDrawer) {
-                    container.shapeDrawers.set(this.shape, shapeDrawer);
+            if (this.shape) {
+                shapeDrawer = container.shapeDrawers.get(this.shape);
+                if (!shapeDrawer) {
+                    shapeDrawer = this._engine.getShapeDrawer(this.shape);
+                    if (shapeDrawer) {
+                        container.shapeDrawers.set(this.shape, shapeDrawer);
+                    }
                 }
             }
             if (shapeDrawer?.loadShape) {
@@ -334,12 +330,11 @@
                 this.sides = sideCountFunc(this);
             }
             this.spawning = false;
-            this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, this.options.shadow.color);
             for (const updater of particles.updaters) {
                 updater.init(this);
             }
             for (const mover of particles.movers) {
-                mover.init?.(this);
+                mover.init(this);
             }
             effectDrawer?.particleInit?.(container, this);
             shapeDrawer?.particleInit?.(container, this);