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

package/cjs/Core/Container.js

@@ -39,16 +39,16 @@ class Container {
         };
         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;
@@ -69,7 +69,7 @@ class Container {
         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;
@@ -77,7 +77,7 @@ class Container {
         this.started = false;
         this.destroyed = false;
         this._paused = true;
-        this.lastFrameTime = 0;
+        this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
         this._sourceOptions = sourceOptions;
@@ -93,7 +93,8 @@ class Container {
             },
         };
         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);
@@ -203,11 +204,17 @@ class Container {
         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;
@@ -224,7 +231,7 @@ class Container {
         let refreshTime = force;
         this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
             if (refreshTime) {
-                this.lastFrameTime = undefined;
+                this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             await this._nextFrame(timestamp);
@@ -259,11 +266,18 @@ class Container {
         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);
@@ -282,8 +296,11 @@ class Container {
         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) {
@@ -412,10 +429,10 @@ class Container {
         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/cjs/Core/Engine.js

@@ -42,7 +42,8 @@ class Engine {
         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() {
@@ -53,13 +54,19 @@ class Engine {
         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);
     }
@@ -89,7 +96,7 @@ class Engine {
     }
     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);
     }
@@ -119,6 +126,9 @@ class Engine {
         }
         return res;
     }
+    getEffectDrawer(type) {
+        return this.effectDrawers.get(type);
+    }
     getInteractors(container, force = false) {
         return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
@@ -135,10 +145,13 @@ class Engine {
         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/cjs/Core/Particle.js

@@ -10,6 +10,16 @@ const Vector3d_js_1 = require("./Utils/Vector3d.js");
 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) {
@@ -79,8 +89,8 @@ class Particle {
                 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));
@@ -109,7 +119,7 @@ class Particle {
             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;
             }
@@ -152,20 +162,15 @@ class Particle {
         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;
@@ -178,7 +183,7 @@ class Particle {
         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 {
@@ -197,9 +202,11 @@ class Particle {
         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;
@@ -210,18 +217,33 @@ class Particle {
         };
         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);
@@ -230,11 +252,13 @@ class Particle {
         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)) {
@@ -255,34 +279,46 @@ class Particle {
         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);

package/cjs/Core/Particles.js

@@ -10,16 +10,29 @@ const Rectangle_js_1 = require("./Utils/Rectangle.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 const qTreeCapacity = 4;
 const qTreeRectangle = (canvasSize) => {
-    return new Rectangle_js_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+    const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
+    return new Rectangle_js_1.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
 class Particles {
     constructor(engine, container) {
         this._applyDensity = (options, manualCount, group) => {
+            const numberOptions = options.number;
             if (!options.number.density?.enable) {
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value;
+                }
+                else {
+                    this._groupLimits.set(group, numberOptions.limit.value);
+                }
                 return;
             }
-            const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
-            this.limit = numberOptions.limit * densityFactor;
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > 0 ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
+            if (group === undefined) {
+                this._limit = numberOptions.limit.value * densityFactor;
+            }
+            else {
+                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+            }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
@@ -37,7 +50,7 @@ class Particles {
         };
         this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
-                let particle = this.pool.pop();
+                let particle = this._pool.pop();
                 if (particle) {
                     particle.init(this._nextId, position, overrideOptions, group);
                 }
@@ -76,7 +89,7 @@ class Particles {
             const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
             this._zArray.splice(zIdx, 1);
-            this.pool.push(particle);
+            this._pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
                 data: {
@@ -90,10 +103,11 @@ class Particles {
         this._nextId = 0;
         this._array = [];
         this._zArray = [];
-        this.pool = [];
-        this.limit = 0;
-        this.needsSort = false;
-        this.lastZIndex = 0;
+        this._pool = [];
+        this._limit = 0;
+        this._groupLimits = new Map();
+        this._needsSort = false;
+        this._lastZIndex = 0;
         this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -110,17 +124,21 @@ class Particles {
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
-        this.pushing = true;
-        const container = this._container, options = container.actualOptions, limit = options.particles.number.limit;
+        const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;
         if (limit > 0) {
-            const countToRemove = this.count + 1 - limit;
-            if (countToRemove > 0) {
-                this.removeQuantity(countToRemove);
+            if (limitOptions.mode === "delete") {
+                const countToRemove = currentCount + 1 - limit;
+                if (countToRemove > 0) {
+                    this.removeQuantity(countToRemove);
+                }
+            }
+            else if (limitOptions.mode === "wait") {
+                if (currentCount >= limit) {
+                    return;
+                }
             }
         }
-        const res = this._pushParticle(position, overrideOptions, group, initializer);
-        this.pushing = false;
-        return res;
+        return this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
@@ -157,8 +175,8 @@ class Particles {
     }
     init() {
         const container = this._container, options = container.actualOptions;
-        this.lastZIndex = 0;
-        this.needsSort = false;
+        this._lastZIndex = 0;
+        this._needsSort = false;
         let handled = false;
         this.updaters = this._engine.getUpdaters(container, true);
         this._interactionManager.init();
@@ -220,6 +238,13 @@ class Particles {
         }
         this._applyDensity(options.particles, options.manualParticles.length);
     }
+    setLastZIndex(zIndex) {
+        this._lastZIndex = zIndex;
+        this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+    }
+    setResizeFactor(factor) {
+        this._resizeFactor = factor;
+    }
     async update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
@@ -227,10 +252,10 @@ class Particles {
             pathGenerator.update();
         }
         for (const [, plugin] of container.plugins) {
-            plugin.update && plugin.update(delta);
+            plugin.update && (await plugin.update(delta));
         }
+        const resizeFactor = this._resizeFactor;
         for (const particle of this._array) {
-            const resizeFactor = container.canvas.resizeFactor;
             if (resizeFactor && !particle.ignoresResizeRatio) {
                 particle.position.x *= resizeFactor.width;
                 particle.position.y *= resizeFactor.height;
@@ -258,7 +283,7 @@ class Particles {
             const checkDelete = (p) => !particlesToDelete.has(p);
             this._array = this.filter(checkDelete);
             this._zArray = this._zArray.filter(checkDelete);
-            this.pool.push(...particlesToDelete);
+            this._pool.push(...particlesToDelete);
         }
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
@@ -269,12 +294,12 @@ class Particles {
                 await this._interactionManager.particlesInteract(particle, delta);
             }
         }
-        delete container.canvas.resizeFactor;
-        if (this.needsSort) {
+        delete this._resizeFactor;
+        if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            this.lastZIndex = zArray[zArray.length - 1].position.z;
-            this.needsSort = false;
+            this._lastZIndex = zArray[zArray.length - 1].position.z;
+            this._needsSort = false;
         }
     }
 }

package/cjs/Core/Retina.js

@@ -20,13 +20,11 @@ class Retina {
             canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles, moveOptions = particles.move;
-        this.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
         this.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
         this.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-        props.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
         props.moveDrift = (0, NumberUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
         props.moveSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
         props.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;

package/cjs/Core/Utils/QuadTree.js

@@ -11,7 +11,7 @@ class QuadTree {
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
             for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
+                this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - (i % 2)), width * 0.5, height * 0.5), capacity));
             }
             this._divided = true;
         };

package/cjs/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -17,8 +17,7 @@ class BackgroundMask {
             this.composite = data.composite;
         }
         if (data.cover !== undefined) {
-            const cover = data.cover;
-            const color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
+            const cover = data.cover, color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {

package/cjs/Options/Classes/ColorAnimation.js

@@ -1,42 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorAnimation = void 0;
+const AnimationOptions_js_1 = require("./AnimationOptions.js");
 const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
-class ColorAnimation {
+class ColorAnimation extends AnimationOptions_js_1.AnimationOptions {
     constructor() {
-        this.count = 0;
-        this.enable = false;
+        super();
         this.offset = 0;
-        this.speed = 1;
-        this.delay = 0;
-        this.decay = 0;
         this.sync = true;
     }
     load(data) {
+        super.load(data);
         if (!data) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = (0, NumberUtils_js_1.setRangeValue)(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
         if (data.offset !== undefined) {
             this.offset = (0, NumberUtils_js_1.setRangeValue)(data.offset);
         }
-        if (data.speed !== undefined) {
-            this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
     }
 }
 exports.ColorAnimation = ColorAnimation;

package/cjs/Options/Classes/Interactivity/Events/Events.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Events = void 0;
-const Utils_js_1 = require("../../../../Utils/Utils.js");
 const ClickEvent_js_1 = require("./ClickEvent.js");
 const DivEvent_js_1 = require("./DivEvent.js");
 const HoverEvent_js_1 = require("./HoverEvent.js");
 const ResizeEvent_js_1 = require("./ResizeEvent.js");
+const Utils_js_1 = require("../../../../Utils/Utils.js");
 class Events {
     constructor() {
         this.onClick = new ClickEvent_js_1.ClickEvent();
@@ -27,12 +27,7 @@ class Events {
             });
         }
         this.onHover.load(data.onHover);
-        if ((0, Utils_js_1.isBoolean)(data.resize)) {
-            this.resize.enable = data.resize;
-        }
-        else {
-            this.resize.load(data.resize);
-        }
+        this.resize.load(data.resize);
     }
 }
 exports.Events = Events;