@tsparticles/engine 3.0.0-beta.3 → 3.0.0-beta.5

package/types/Utils/CanvasUtils.d.ts

@@ -8,7 +8,6 @@ import type { IDrawParticleParams } from "../Core/Interfaces/IDrawParticleParams
 import type { IHsl } from "../Core/Interfaces/Colors.js";
 import type { Particle } from "../Core/Particle.js";
 export declare function drawLine(context: CanvasRenderingContext2D, begin: ICoordinates, end: ICoordinates): void;
-export declare function drawTriangle(context: CanvasRenderingContext2D, p1: ICoordinates, p2: ICoordinates, p3: ICoordinates): void;
 export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
 export declare function paintImage(context: CanvasRenderingContext2D, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
 export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
@@ -21,8 +20,9 @@ type DrawShapeData = {
     particle: Particle;
     radius: number;
 };
+export declare function drawEffect(data: DrawShapeData): void;
 export declare function drawShape(data: DrawShapeData): void;
-export declare function drawShapeAfterEffect(data: DrawShapeData): void;
+export declare function drawShapeAfterDraw(data: DrawShapeData): void;
 export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void;
 export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
 export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;

package/types/Utils/NumberUtils.d.ts

@@ -1,7 +1,6 @@
 import type { EasingType, EasingTypeAlt } from "../Enums/Types/EasingType.js";
 import type { IPositionFromSizeParams, IRangedPositionFromSizeParams } from "../Core/Interfaces/IPositionFromSizeParams.js";
 import type { ICoordinates } from "../Core/Interfaces/ICoordinates.js";
-import type { IValueWithRandom } from "../Options/Interfaces/IValueWithRandom.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import type { MoveDirectionAlt } from "../Enums/Directions/MoveDirection.js";
 import type { RangeValue } from "../Types/RangeValue.js";
@@ -18,7 +17,6 @@ export declare function getRangeValue(value: RangeValue): number;
 export declare function getRangeMin(value: RangeValue): number;
 export declare function getRangeMax(value: RangeValue): number;
 export declare function setRangeValue(source: RangeValue, value?: number): RangeValue;
-export declare function getValue(options: IValueWithRandom): number;
 export declare function getDistances(pointA: ICoordinates, pointB: ICoordinates): {
     distance: number;
     dx: number;

package/types/Utils/Utils.d.ts

@@ -1,7 +1,6 @@
 import type { ICoordinates, ICoordinatesWithMode } from "../Core/Interfaces/ICoordinates.js";
 import type { IDimension, IDimensionWithMode } from "../Core/Interfaces/IDimension.js";
 import type { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent.js";
-import type { DivMode } from "../Enums/Modes/DivMode.js";
 import type { IBounds } from "../Core/Interfaces/IBounds.js";
 import type { ICircleBouncer } from "../Core/Interfaces/ICircleBouncer.js";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv.js";
@@ -33,8 +32,8 @@ export declare function isPointInside(point: ICoordinates, size: IDimension, off
 export declare function areBoundsInside(bounds: IBounds, size: IDimension, offset: ICoordinates, direction?: OutModeDirection): boolean;
 export declare function calculateBounds(point: ICoordinates, radius: number): IBounds;
 export declare function deepExtend(destination: unknown, ...sources: unknown[]): unknown;
-export declare function isDivModeEnabled(mode: DivMode, divs: SingleOrMultiple<DivEvent>): boolean;
-export declare function divModeExecute(mode: DivMode, divs: SingleOrMultiple<DivEvent>, callback: (id: string, div: DivEvent) => void): void;
+export declare function isDivModeEnabled(mode: string, divs: SingleOrMultiple<DivEvent>): boolean;
+export declare function divModeExecute(mode: string, divs: SingleOrMultiple<DivEvent>, callback: (id: string, div: DivEvent) => void): void;
 export declare function singleDivModeExecute(div: DivEvent, callback: (selector: string, div: DivEvent) => void): void;
 export declare function divMode<T extends IModeDiv>(divs?: SingleOrMultiple<T>, element?: HTMLElement): T | undefined;
 export declare function circleBounceDataFromParticle(p: Particle): ICircleBouncer;

package/types/export-types.d.ts

@@ -11,6 +11,7 @@ export * from "./Core/Interfaces/IDelta.js";
 export * from "./Core/Interfaces/IDimension.js";
 export * from "./Core/Interfaces/IDistance.js";
 export * from "./Core/Interfaces/IDrawParticleParams.js";
+export * from "./Core/Interfaces/IEffectDrawer.js";
 export * from "./Core/Interfaces/IExternalInteractor.js";
 export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
@@ -30,6 +31,7 @@ export * from "./Core/Interfaces/IPlugin.js";
 export * from "./Core/Interfaces/IPositionFromSizeParams.js";
 export * from "./Core/Interfaces/IRangeValue.js";
 export * from "./Core/Interfaces/IRectSideResult.js";
+export * from "./Core/Interfaces/IShapeDrawData.js";
 export * from "./Core/Interfaces/IShapeDrawer.js";
 export * from "./Core/Interfaces/IShapeValues.js";
 export * from "./Core/Interfaces/ISlowParticleData.js";
@@ -62,6 +64,7 @@ export * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisions.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js";
+export * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export * from "./Options/Interfaces/Particles/IParticlesOptions.js";
 export * from "./Options/Interfaces/Particles/IShadow.js";
 export * from "./Options/Interfaces/Particles/IStroke.js";
@@ -76,6 +79,7 @@ export * from "./Options/Interfaces/Particles/Move/ISpin.js";
 export * from "./Options/Interfaces/Particles/Move/IMoveTrail.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesDensity.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesNumber.js";
+export * from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacity.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js";
 export * from "./Options/Interfaces/Particles/Shape/IShape.js";
@@ -103,3 +107,4 @@ export type { Particle } from "./Core/Particle.js";
 export type { Particles } from "./Core/Particles.js";
 export type { Retina } from "./Core/Retina.js";
 export type { Engine, Engine as Main };
+export type { IParticlesNumberLimit } from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";

package/types/exports.d.ts

@@ -11,10 +11,8 @@ export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
 export * from "./Enums/Modes/AnimationMode.js";
-export * from "./Enums/Modes/ClickMode.js";
-export * from "./Enums/Modes/DivMode.js";
-export * from "./Enums/Modes/HoverMode.js";
 export * from "./Enums/Modes/CollisionMode.js";
+export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
 export * from "./Enums/Modes/ThemeMode.js";
@@ -69,6 +67,7 @@ export * from "./Options/Classes/Particles/Move/Path/MovePath.js";
 export * from "./Options/Classes/Particles/Move/Spin.js";
 export * from "./Options/Classes/Particles/Move/MoveTrail.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
+export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
 export * from "./Options/Classes/Particles/Opacity/Opacity.js";
 export * from "./Options/Classes/Particles/Opacity/OpacityAnimation.js";

package/umd/Core/Canvas.js

@@ -414,10 +414,10 @@
             this.element.width = size.width = this.element.offsetWidth * pxRatio;
             this.element.height = size.height = this.element.offsetHeight * pxRatio;
             if (this.container.started) {
-                this.resizeFactor = {
+                container.particles.setResizeFactor({
                     width: size.width / oldSize.width,
                     height: size.height / oldSize.height,
-                };
+                });
             }
             return true;
         }

package/umd/Core/Container.js

@@ -48,16 +48,16 @@
             };
             this._nextFrame = async (timestamp) => {
                 try {
-                    if (!this.smooth &&
-                        this.lastFrameTime !== undefined &&
-                        timestamp < this.lastFrameTime + 1000 / this.fpsLimit) {
+                    if (!this._smooth &&
+                        this._lastFrameTime !== undefined &&
+                        timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
                         this.draw(false);
                         return;
                     }
-                    this.lastFrameTime ??= timestamp;
-                    const delta = initDelta(timestamp - this.lastFrameTime, this.fpsLimit, this.smooth);
+                    this._lastFrameTime ??= timestamp;
+                    const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                     this.addLifeTime(delta.value);
-                    this.lastFrameTime = timestamp;
+                    this._lastFrameTime = timestamp;
                     if (delta.value > 1000) {
                         this.draw(false);
                         return;
@@ -78,7 +78,7 @@
             this._engine = engine;
             this.id = Symbol(id);
             this.fpsLimit = 120;
-            this.smooth = false;
+            this._smooth = false;
             this._delay = 0;
             this._duration = 0;
             this._lifeTime = 0;
@@ -86,7 +86,7 @@
             this.started = false;
             this.destroyed = false;
             this._paused = true;
-            this.lastFrameTime = 0;
+            this._lastFrameTime = 0;
             this.zLayers = 100;
             this.pageHidden = false;
             this._sourceOptions = sourceOptions;
@@ -102,7 +102,8 @@
                 },
             };
             this.plugins = new Map();
-            this.drawers = new Map();
+            this.effectDrawers = new Map();
+            this.shapeDrawers = new Map();
             this._options = loadContainerOptions(this._engine, this);
             this.actualOptions = loadContainerOptions(this._engine, this);
             this._eventListeners = new EventListeners_js_1.EventListeners(this);
@@ -212,11 +213,17 @@
             this.stop();
             this.particles.destroy();
             this.canvas.destroy();
-            for (const [, drawer] of this.drawers) {
-                drawer.destroy && drawer.destroy(this);
+            for (const [, effectDrawer] of this.effectDrawers) {
+                effectDrawer.destroy && effectDrawer.destroy(this);
             }
-            for (const key of this.drawers.keys()) {
-                this.drawers.delete(key);
+            for (const [, shapeDrawer] of this.shapeDrawers) {
+                shapeDrawer.destroy && shapeDrawer.destroy(this);
+            }
+            for (const key of this.effectDrawers.keys()) {
+                this.effectDrawers.delete(key);
+            }
+            for (const key of this.shapeDrawers.keys()) {
+                this.shapeDrawers.delete(key);
             }
             this._engine.clearPlugins(this);
             this.destroyed = true;
@@ -233,7 +240,7 @@
             let refreshTime = force;
             this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
                 if (refreshTime) {
-                    this.lastFrameTime = undefined;
+                    this._lastFrameTime = undefined;
                     refreshTime = false;
                 }
                 await this._nextFrame(timestamp);
@@ -268,11 +275,18 @@
             if (!guardCheck(this)) {
                 return;
             }
+            const effects = this._engine.getSupportedEffects();
+            for (const type of effects) {
+                const drawer = this._engine.getEffectDrawer(type);
+                if (drawer) {
+                    this.effectDrawers.set(type, drawer);
+                }
+            }
             const shapes = this._engine.getSupportedShapes();
             for (const type of shapes) {
                 const drawer = this._engine.getShapeDrawer(type);
                 if (drawer) {
-                    this.drawers.set(type, drawer);
+                    this.shapeDrawers.set(type, drawer);
                 }
             }
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
@@ -291,8 +305,11 @@
             this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * 1000;
             this._lifeTime = 0;
             this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
-            this.smooth = this.actualOptions.smooth;
-            for (const [, drawer] of this.drawers) {
+            this._smooth = this.actualOptions.smooth;
+            for (const [, drawer] of this.effectDrawers) {
+                drawer.init && (await drawer.init(this));
+            }
+            for (const [, drawer] of this.shapeDrawers) {
                 drawer.init && (await drawer.init(this));
             }
             for (const [, plugin] of this.plugins) {
@@ -421,10 +438,10 @@
             this.actualOptions.responsive = [];
             const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
             this.actualOptions.setTheme(this._currentTheme);
-            if (this.responsiveMaxWidth === newMaxWidth) {
+            if (this._responsiveMaxWidth === newMaxWidth) {
                 return false;
             }
-            this.responsiveMaxWidth = newMaxWidth;
+            this._responsiveMaxWidth = newMaxWidth;
             return true;
         }
     }

package/umd/Core/Engine.js

@@ -51,7 +51,8 @@
             this.movers = new Map();
             this.updaters = new Map();
             this.presets = new Map();
-            this.drawers = new Map();
+            this.effectDrawers = new Map();
+            this.shapeDrawers = new Map();
             this.pathGenerators = new Map();
         }
         get configs() {
@@ -62,13 +63,19 @@
             return res;
         }
         get version() {
-            return "3.0.0-beta.3";
+            return "3.0.0-beta.5";
         }
         addConfig(config) {
             const name = config.name ?? "default";
             this._configs.set(name, config);
             this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
         }
+        async addEffect(effect, drawer, refresh = true) {
+            (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
+                !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+            });
+            await this.refresh(refresh);
+        }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
         }
@@ -98,7 +105,7 @@
         }
         async addShape(shape, drawer, refresh = true) {
             (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-                !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
+                !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
             });
             await this.refresh(refresh);
         }
@@ -128,6 +135,9 @@
             }
             return res;
         }
+        getEffectDrawer(type) {
+            return this.effectDrawers.get(type);
+        }
         getInteractors(container, force = false) {
             return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
         }
@@ -144,10 +154,13 @@
             return this.presets.get(preset);
         }
         getShapeDrawer(type) {
-            return this.drawers.get(type);
+            return this.shapeDrawers.get(type);
+        }
+        getSupportedEffects() {
+            return this.effectDrawers.keys();
         }
         getSupportedShapes() {
-            return this.drawers.keys();
+            return this.shapeDrawers.keys();
         }
         getUpdaters(container, force = false) {
             return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);

package/umd/Core/Particle.js

@@ -19,6 +19,16 @@
     const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
     const Constants_js_1 = require("./Utils/Constants.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,
+        }, (0, Utils_js_1.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));
+    }
     function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
         const shapeData = shapeOptions.options[shape];
         if (!shapeData) {
@@ -88,8 +98,8 @@
                     return res;
                 }
                 const rad = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value), radOffset = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset), range = {
-                    left: radOffset - rad / 2,
-                    right: radOffset + rad / 2,
+                    left: radOffset - rad * 0.5,
+                    right: radOffset + rad * 0.5,
                 };
                 if (!moveOptions.straight) {
                     res.angle += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
@@ -118,7 +128,7 @@
                 if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                     return color;
                 }
-                const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+                const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI * 0.5 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
                 if (!rolled) {
                     return color;
                 }
@@ -161,20 +171,15 @@
             this.destroyed = true;
             this.bubble.inRange = false;
             this.slow.inRange = false;
-            const container = this.container, pathGenerator = this.pathGenerator;
+            const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+            shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
             for (const [, plugin] of container.plugins) {
-                if (plugin.particleDestroyed) {
-                    plugin.particleDestroyed(this, override);
-                }
+                plugin.particleDestroyed && plugin.particleDestroyed(this, override);
             }
             for (const updater of container.particles.updaters) {
-                if (updater.particleDestroyed) {
-                    updater.particleDestroyed(this, override);
-                }
-            }
-            if (pathGenerator) {
-                pathGenerator.reset(this);
+                updater.particleDestroyed && updater.particleDestroyed(this, override);
             }
+            pathGenerator && pathGenerator.reset(this);
         }
         draw(delta) {
             const container = this.container, canvas = container.canvas;
@@ -187,7 +192,7 @@
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
         }
         getMass() {
-            return (this.getRadius() ** 2 * Math.PI) / 2;
+            return this.getRadius() ** 2 * Math.PI * 0.5;
         }
         getPosition() {
             return {
@@ -206,9 +211,11 @@
             const container = this.container, engine = this._engine;
             this.id = id;
             this.group = group;
-            this.fill = true;
+            this.effectClose = true;
+            this.effectFill = true;
+            this.shapeClose = true;
+            this.shapeFill = true;
             this.pathRotation = false;
-            this.close = true;
             this.lastPathTime = 0;
             this.destroyed = false;
             this.unbreakable = false;
@@ -219,18 +226,33 @@
             };
             this.outType = "normal";
             this.ignoresResizeRatio = true;
-            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+            this.effect = (0, Utils_js_1.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);
             this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
-            const shapeOptions = particlesOptions.shape;
-            if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-                const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
-                if (shape) {
-                    this.shape = shape;
-                    shapeOptions.load(overrideOptions.shape);
+            const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
+            if (overrideOptions) {
+                if (overrideOptions.effect && overrideOptions.effect.type) {
+                    const overrideEffectType = overrideOptions.effect.type, effect = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);
+                    if (effect) {
+                        this.effect = effect;
+                        effectOptions.load(overrideOptions.effect);
+                    }
+                }
+                if (overrideOptions.shape && overrideOptions.shape.type) {
+                    const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
+                    if (shape) {
+                        this.shape = shape;
+                        shapeOptions.load(overrideOptions.shape);
+                    }
                 }
             }
+            this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
             this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
             particlesOptions.load(overrideOptions);
+            const effectData = this.effectData;
+            if (effectData) {
+                particlesOptions.load(effectData.particles);
+            }
             const shapeData = this.shapeData;
             if (shapeData) {
                 particlesOptions.load(shapeData.particles);
@@ -239,11 +261,13 @@
             interactivity.load(container.actualOptions.interactivity);
             interactivity.load(particlesOptions.interactivity);
             this.interactivity = interactivity;
-            this.fill = shapeData?.fill ?? particlesOptions.shape.fill;
-            this.close = shapeData?.close ?? particlesOptions.shape.close;
+            this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
+            this.effectClose = effectData?.close ?? particlesOptions.effect.close;
+            this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
+            this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
             const pathOptions = this.options.move.path;
-            this.pathDelay = (0, NumberUtils_js_1.getValue)(pathOptions.delay) * 1000;
+            this.pathDelay = (0, NumberUtils_js_1.getRangeValue)(pathOptions.delay.value) * 1000;
             if (pathOptions.generator) {
                 this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
                 if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -264,34 +288,46 @@
             this.velocity = this.initialVelocity.copy();
             this.moveDecay = 1 - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
-            particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
-            particles.lastZIndex = this.position.z;
+            particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
-            let drawer = container.drawers.get(this.shape);
-            if (!drawer) {
-                drawer = this._engine.getShapeDrawer(this.shape);
-                if (drawer) {
-                    container.drawers.set(this.shape, drawer);
+            let effectDrawer = container.effectDrawers.get(this.effect);
+            if (!effectDrawer) {
+                effectDrawer = this._engine.getEffectDrawer(this.effect);
+                if (effectDrawer) {
+                    container.effectDrawers.set(this.effect, effectDrawer);
+                }
+            }
+            if (effectDrawer && 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 (drawer && drawer.loadShape) {
-                drawer.loadShape(this);
+            if (shapeDrawer && shapeDrawer.loadShape) {
+                shapeDrawer.loadShape(this);
             }
-            const sideCountFunc = drawer?.getSidesCount;
+            const sideCountFunc = shapeDrawer?.getSidesCount;
             if (sideCountFunc) {
                 this.sides = sideCountFunc(this);
             }
             this.spawning = false;
             this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
-            for (const updater of container.particles.updaters) {
+            for (const updater of particles.updaters) {
                 updater.init(this);
             }
-            for (const mover of container.particles.movers) {
+            for (const mover of particles.movers) {
                 mover.init && mover.init(this);
             }
-            if (drawer && drawer.particleInit) {
-                drawer.particleInit(container, this);
+            if (effectDrawer && effectDrawer.particleInit) {
+                effectDrawer.particleInit(container, this);
+            }
+            if (shapeDrawer && shapeDrawer.particleInit) {
+                shapeDrawer.particleInit(container, this);
             }
             for (const [, plugin] of container.plugins) {
                 plugin.particleCreated && plugin.particleCreated(this);