@tsparticles/engine 4.0.0-alpha.24 → 4.0.0-alpha.26

package/umd/Core/Particle.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Vectors.js", "../Utils/ColorUtils.js", "../Utils/MathUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Enums/Types/EventType.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Vectors.js", "../Utils/ColorUtils.js", "../Utils/MathUtils.js", "../Utils/Utils.js", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,8 +13,8 @@
     const Vectors_js_1 = require("./Utils/Vectors.js");
     const ColorUtils_js_1 = require("../Utils/ColorUtils.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 Constants_js_1 = require("./Utils/Constants.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const MoveDirection_js_1 = require("../Enums/Directions/MoveDirection.js");
     const OutMode_js_1 = require("../Enums/Modes/OutMode.js");
@@ -66,13 +66,10 @@
         lastPathTime;
         misplaced;
         moveCenter;
-        moveDecay;
         offset;
         opacity;
         options;
         outType;
-        pathDelay;
-        pathGenerator;
         pathRotation;
         position;
         randomIndexData;
@@ -117,7 +114,7 @@
             this.destroyed = true;
             this.bubble.inRange = false;
             this.slow.inRange = false;
-            const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;
+            const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
             for (const plugin of container.particleDestroyedPlugins) {
                 plugin.particleDestroyed?.(this, override);
@@ -125,7 +122,6 @@
             for (const updater of container.particles.updaters) {
                 updater.particleDestroyed?.(this, override);
             }
-            pathGenerator?.reset(this);
             this._engine.dispatchEvent(EventType_js_1.EventType.particleDestroyed, {
                 container: this.container,
                 data: {
@@ -247,19 +243,6 @@
             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, MathUtils_js_1.getRangeValue)(pathOptions.delay.value) * Constants_js_1.millisecondsToSeconds;
-            if (pathOptions.generator) {
-                let pathGenerator = this.container.particles.pathGenerators.get(pathOptions.generator);
-                if (!pathGenerator) {
-                    pathGenerator = this.container.particles.availablePathGenerators.get(pathOptions.generator);
-                    if (pathGenerator) {
-                        this.container.particles.pathGenerators.set(pathOptions.generator, pathGenerator);
-                        pathGenerator.init();
-                    }
-                }
-                this.pathGenerator = pathGenerator;
-            }
             container.retina.initParticle(this);
             this.size = (0, Utils_js_1.initParticleNumericAnimationValue)(this.options.size, pxRatio);
             this.bubble = {
@@ -272,7 +255,6 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            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;
@@ -298,9 +280,6 @@
             for (const updater of particles.updaters) {
                 updater.init(this);
             }
-            for (const mover of particles.movers) {
-                mover.init(this);
-            }
             effectDrawer?.particleInit?.(container, this);
             shapeDrawer?.particleInit?.(container, this);
             for (const plugin of container.particleCreatedPlugins) {

package/umd/Core/Particles.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/SpatialHashGrid.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -14,22 +14,13 @@
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LimitMode_js_1 = require("../Enums/Modes/LimitMode.js");
     const Particle_js_1 = require("./Particle.js");
-    const Point_js_1 = require("./Utils/Point.js");
-    const QuadTree_js_1 = require("./Utils/QuadTree.js");
-    const Ranges_js_1 = require("./Utils/Ranges.js");
+    const SpatialHashGrid_js_1 = require("./Utils/SpatialHashGrid.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const qTreeRectangle = (canvasSize) => {
-        const { height, width } = canvasSize;
-        return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
-    };
     class Particles {
-        availablePathGenerators;
         checkParticlePositionPlugins;
         effectDrawers;
-        movers;
-        pathGenerators;
-        quadTree;
+        grid;
         shapeDrawers;
         updaters;
         _array;
@@ -61,12 +52,8 @@
             this._needsSort = false;
             this._minZIndex = 0;
             this._maxZIndex = 0;
-            const canvasSize = container.canvas.size;
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), Constants_js_1.qTreeCapacity);
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize);
             this.effectDrawers = new Map();
-            this.movers = [];
-            this.availablePathGenerators = new Map();
-            this.pathGenerators = new Map();
             this.shapeDrawers = new Map();
             this.updaters = [];
             this.checkParticlePositionPlugins = [];
@@ -142,9 +129,6 @@
             this._pool.length = 0;
             this._zArray = [];
             this.effectDrawers = new Map();
-            this.movers = [];
-            this.availablePathGenerators = new Map();
-            this.pathGenerators = new Map();
             this.shapeDrawers = new Map();
             this.updaters = [];
             this.checkParticlePositionPlugins = [];
@@ -179,6 +163,7 @@
             this._postUpdatePlugins = [];
             this._particleResetPlugins = [];
             this._postParticleUpdatePlugins = [];
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
                     await plugin.redrawInit();
@@ -235,14 +220,8 @@
         async initPlugins() {
             const container = this._container;
             this.effectDrawers = await this._engine.getEffectDrawers(container, true);
-            this.movers = await this._engine.getMovers(container, true);
-            this.availablePathGenerators = await this._engine.getPathGenerators(container, true);
-            this.pathGenerators = new Map();
             this.shapeDrawers = await this._engine.getShapeDrawers(container, true);
             this.updaters = await this._engine.getUpdaters(container, true);
-            for (const pathGenerator of this.pathGenerators.values()) {
-                pathGenerator.init();
-            }
         }
         push(nb, position, overrideOptions, group) {
             for (let i = 0; i < nb; i++) {
@@ -297,11 +276,8 @@
             this._resizeFactor = factor;
         }
         update(delta) {
-            const container = this._container, particlesToDelete = new Set();
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), Constants_js_1.qTreeCapacity);
-            for (const pathGenerator of this.pathGenerators.values()) {
-                pathGenerator.update();
-            }
+            const particlesToDelete = new Set();
+            this.grid.clear();
             for (const plugin of this._updatePlugins) {
                 plugin.update?.(delta);
             }
@@ -323,16 +299,11 @@
                     }
                     plugin.particleUpdate?.(particle, delta);
                 }
-                for (const mover of this.movers) {
-                    if (mover.isEnabled(particle)) {
-                        mover.move(particle, delta);
-                    }
-                }
                 if (particle.destroyed) {
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.quadTree.insert(new Point_js_1.Point(particle.getPosition(), particle));
+                this.grid.insert(particle);
             }
             if (particlesToDelete.size) {
                 const checkDelete = (p) => !particlesToDelete.has(p);

package/umd/Core/Utils/Constants.js

@@ -9,7 +9,7 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultZoom = exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.generatedAttribute = void 0;
+    exports.defaultZoom = exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.spatialHashGridCellSize = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.generatedAttribute = void 0;
     exports.generatedAttribute = "generated", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
         x: 0,
         y: 0,
@@ -19,5 +19,5 @@
         b: 0,
         c: 0,
         d: 1,
-    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0, exports.defaultZoom = 1;
+    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.spatialHashGridCellSize = 100, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0, exports.defaultZoom = 1;
 });

package/umd/Core/Utils/Ranges.js

@@ -32,7 +32,7 @@
             this.radius = radius;
         }
         contains(point) {
-            return (0, MathUtils_js_1.getDistance)(point, this.position) <= this.radius;
+            return (0, MathUtils_js_1.checkDistance)(point, this.position, this.radius);
         }
         intersects(range) {
             const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;

package/umd/Core/Utils/SpatialHashGrid.js

@@ -0,0 +1,96 @@
+(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", "./Ranges.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SpatialHashGrid = void 0;
+    const Ranges_js_1 = require("./Ranges.js");
+    class SpatialHashGrid {
+        _cellSize;
+        _cells = new Map();
+        _pendingCellSize;
+        constructor(cellSize) {
+            this._cellSize = cellSize;
+        }
+        clear() {
+            this._cells.clear();
+            const pendingCellSize = this._pendingCellSize;
+            if (pendingCellSize) {
+                this._cellSize = pendingCellSize;
+            }
+            this._pendingCellSize = undefined;
+        }
+        insert(particle) {
+            const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
+            if (!this._cells.has(key)) {
+                this._cells.set(key, []);
+            }
+            this._cells.get(key)?.push(particle);
+        }
+        query(range, check, out = []) {
+            const bounds = this._getRangeBounds(range);
+            if (!bounds) {
+                return out;
+            }
+            const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+            for (let cx = minCellX; cx <= maxCellX; cx++) {
+                for (let cy = minCellY; cy <= maxCellY; cy++) {
+                    const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                    if (!cellParticles) {
+                        continue;
+                    }
+                    for (const p of cellParticles) {
+                        if (check && !check(p)) {
+                            continue;
+                        }
+                        if (range.contains(p.getPosition())) {
+                            out.push(p);
+                        }
+                    }
+                }
+            }
+            return out;
+        }
+        queryCircle(position, radius, check, out = []) {
+            return this.query(new Ranges_js_1.Circle(position.x, position.y, radius), check, out);
+        }
+        queryRectangle(position, size, check, out = []) {
+            return this.query(new Ranges_js_1.Rectangle(position.x, position.y, size.width, size.height), check, out);
+        }
+        setCellSize(cellSize) {
+            this._pendingCellSize = cellSize;
+        }
+        _cellKeyFromCoords(x, y) {
+            const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+            return `${cellX}_${cellY}`;
+        }
+        _getRangeBounds(range) {
+            if (range instanceof Ranges_js_1.Circle) {
+                const r = range.radius, { x, y } = range.position;
+                return {
+                    minX: x - r,
+                    maxX: x + r,
+                    minY: y - r,
+                    maxY: y + r,
+                };
+            }
+            if (range instanceof Ranges_js_1.Rectangle) {
+                const { x, y } = range.position, { width, height } = range.size;
+                return {
+                    minX: x,
+                    maxX: x + width,
+                    minY: y,
+                    maxY: y + height,
+                };
+            }
+            return null;
+        }
+    }
+    exports.SpatialHashGrid = SpatialHashGrid;
+});

package/umd/Core/Utils/Vectors.js

@@ -11,6 +11,9 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Vector = exports.Vector3d = void 0;
     const Constants_js_1 = require("./Constants.js");
+    function getZ(source) {
+        return "z" in source ? source.z : Constants_js_1.originPoint.z;
+    }
     class Vector3d {
         x;
         y;
@@ -36,31 +39,25 @@
             this._updateFromAngle(this.angle, length);
         }
         static clone(source) {
-            return Vector3d.create(source.x, source.y, source.z);
+            return Vector3d.create(source.x, source.y, getZ(source));
         }
         static create(x, y, z) {
             if (typeof x === "number") {
                 return new Vector3d(x, y ?? Constants_js_1.originPoint.y, z ?? Constants_js_1.originPoint.z);
             }
-            return new Vector3d(x.x, x.y, Object.hasOwn(x, "z") ? x.z : Constants_js_1.originPoint.z);
+            return new Vector3d(x.x, x.y, getZ(x));
         }
         add(v) {
-            return Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z);
+            return Vector3d.create(this.x + v.x, this.y + v.y, this.z + getZ(v));
         }
         addTo(v) {
             this.x += v.x;
             this.y += v.y;
-            this.z += v.z;
+            this.z += getZ(v);
         }
         copy() {
             return Vector3d.clone(this);
         }
-        distanceTo(v) {
-            return this.sub(v).length;
-        }
-        distanceToSq(v) {
-            return this.sub(v).getLengthSq();
-        }
         div(n) {
             return Vector3d.create(this.x / n, this.y / n, this.z / n);
         }
@@ -92,21 +89,20 @@
         setTo(c) {
             this.x = c.x;
             this.y = c.y;
-            const v3d = c;
-            this.z = v3d.z ? v3d.z : Constants_js_1.originPoint.z;
+            this.z = getZ(c);
         }
         sub(v) {
-            return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
+            return Vector3d.create(this.x - v.x, this.y - v.y, this.z - getZ(v));
         }
         subFrom(v) {
             this.x -= v.x;
             this.y -= v.y;
-            this.z -= v.z;
+            this.z -= getZ(v);
         }
-        _updateFromAngle = (angle, length) => {
+        _updateFromAngle(angle, length) {
             this.x = Math.cos(angle) * length;
             this.y = Math.sin(angle) * length;
-        };
+        }
     }
     exports.Vector3d = Vector3d;
     class Vector extends Vector3d {

package/umd/Options/Classes/Particles/Move/Move.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Enums/Directions/MoveDirection.js", "../../../../Utils/TypeUtils.js", "./MoveAngle.js", "./MoveAttract.js", "./MoveCenter.js", "./MoveGravity.js", "./Path/MovePath.js", "./OutModes.js", "./Spin.js", "../../../../Utils/MathUtils.js"], factory);
+        define(["require", "exports", "../../../../Enums/Directions/MoveDirection.js", "../../../../Utils/TypeUtils.js", "./MoveAngle.js", "./MoveCenter.js", "./MoveGravity.js", "./Path/MovePath.js", "./OutModes.js", "./Spin.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,7 +13,6 @@
     const MoveDirection_js_1 = require("../../../../Enums/Directions/MoveDirection.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MoveAngle_js_1 = require("./MoveAngle.js");
-    const MoveAttract_js_1 = require("./MoveAttract.js");
     const MoveCenter_js_1 = require("./MoveCenter.js");
     const MoveGravity_js_1 = require("./MoveGravity.js");
     const MovePath_js_1 = require("./Path/MovePath.js");
@@ -22,7 +21,6 @@
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Move {
         angle;
-        attract;
         center;
         decay;
         direction;
@@ -41,7 +39,6 @@
         warp;
         constructor() {
             this.angle = new MoveAngle_js_1.MoveAngle();
-            this.attract = new MoveAttract_js_1.MoveAttract();
             this.center = new MoveCenter_js_1.MoveCenter();
             this.decay = 0;
             this.distance = {};
@@ -64,7 +61,6 @@
                 return;
             }
             this.angle.load((0, TypeUtils_js_1.isNumber)(data.angle) ? { value: data.angle } : data.angle);
-            this.attract.load(data.attract);
             this.center.load(data.center);
             if (data.decay !== undefined) {
                 this.decay = (0, MathUtils_js_1.setRangeValue)(data.decay);

package/umd/Utils/CanvasUtils.js

@@ -28,15 +28,16 @@
         if (!image) {
             return;
         }
+        const prevAlpha = context.globalAlpha;
         context.globalAlpha = opacity;
         context.drawImage(image, Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
-        context.globalAlpha = 1;
+        context.globalAlpha = prevAlpha;
     }
     function clear(context, dimension) {
         context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
     }
     function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
             x: pos.x,
             y: pos.y,
         };
@@ -67,42 +68,40 @@
         for (const plugin of container.plugins) {
             plugin.drawParticleTransform?.(drawData);
         }
-        drawBeforeEffect(container, drawData);
-        drawShapeBeforeDraw(container, drawData);
-        drawShape(container, drawData);
-        drawShapeAfterDraw(container, drawData);
-        drawAfterEffect(container, drawData);
+        const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
+        drawBeforeEffect(effect, drawData);
+        drawShapeBeforeDraw(shape, drawData);
+        drawShape(shape, drawData);
+        drawShapeAfterDraw(shape, drawData);
+        drawAfterEffect(effect, drawData);
         context.resetTransform();
     }
-    function drawAfterEffect(container, data) {
+    function drawAfterEffect(drawer, data) {
+        if (!drawer?.drawAfter) {
+            return;
+        }
         const { particle } = data;
         if (!particle.effect) {
             return;
         }
-        const drawer = container.particles.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
-        if (!drawFunc) {
+        drawer.drawAfter(data);
+    }
+    function drawBeforeEffect(drawer, data) {
+        if (!drawer?.drawBefore) {
             return;
         }
-        drawFunc(data);
-    }
-    function drawBeforeEffect(container, data) {
         const { particle } = data;
         if (!particle.effect) {
             return;
         }
-        const drawer = container.particles.effectDrawers.get(particle.effect);
-        if (!drawer?.drawBefore) {
-            return;
-        }
         drawer.drawBefore(data);
     }
-    function drawShape(container, data) {
-        const { context, particle, stroke } = data;
-        if (!particle.shape) {
+    function drawShape(drawer, data) {
+        if (!drawer) {
             return;
         }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
-        if (!drawer) {
+        const { context, particle, stroke } = data;
+        if (!particle.shape) {
             return;
         }
         context.beginPath();
@@ -117,26 +116,24 @@
             context.fill();
         }
     }
-    function drawShapeAfterDraw(container, data) {
-        const { particle } = data;
-        if (!particle.shape) {
-            return;
-        }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
+    function drawShapeAfterDraw(drawer, data) {
         if (!drawer?.afterDraw) {
             return;
         }
-        drawer.afterDraw(data);
-    }
-    function drawShapeBeforeDraw(container, data) {
         const { particle } = data;
         if (!particle.shape) {
             return;
         }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
+        drawer.afterDraw(data);
+    }
+    function drawShapeBeforeDraw(drawer, data) {
         if (!drawer?.beforeDraw) {
             return;
         }
+        const { particle } = data;
+        if (!particle.shape) {
+            return;
+        }
         drawer.beforeDraw(data);
     }
     function drawParticlePlugin(context, plugin, particle, delta) {

package/umd/Utils/MathUtils.js

@@ -23,7 +23,9 @@
     exports.getRangeMax = getRangeMax;
     exports.setRangeValue = setRangeValue;
     exports.getDistances = getDistances;
+    exports.getDistanceSq = getDistanceSq;
     exports.getDistance = getDistance;
+    exports.checkDistance = checkDistance;
     exports.degToRad = degToRad;
     exports.getParticleDirectionAngle = getParticleDirectionAngle;
     exports.getParticleBaseVelocity = getParticleBaseVelocity;
@@ -105,8 +107,15 @@
         const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
         return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
     }
+    function getDistanceSq(pointA, pointB) {
+        const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+        return dx * dx + dy * dy;
+    }
     function getDistance(pointA, pointB) {
-        return getDistances(pointA, pointB).distance;
+        return Math.sqrt(getDistanceSq(pointA, pointB));
+    }
+    function checkDistance(pointA, pointB, distance) {
+        return getDistanceSq(pointA, pointB) <= distance * distance;
     }
     function degToRad(degrees) {
         return degrees * degToRadFactor;

package/umd/Utils/Utils.js

@@ -120,33 +120,29 @@
     }
     function deepExtend(destination, ...sources) {
         for (const source of sources) {
-            if (source === undefined || source === null) {
+            if ((0, TypeUtils_js_1.isNull)(source)) {
                 continue;
             }
             if (!(0, TypeUtils_js_1.isObject)(source)) {
                 destination = source;
                 continue;
             }
-            const sourceIsArray = Array.isArray(source);
-            if (sourceIsArray) {
+            if (Array.isArray(source)) {
                 if (!Array.isArray(destination)) {
                     destination = [];
                 }
             }
-            else {
-                if (!(0, TypeUtils_js_1.isObject)(destination) || Array.isArray(destination)) {
-                    destination = {};
-                }
+            else if (!(0, TypeUtils_js_1.isObject)(destination) || Array.isArray(destination)) {
+                destination = {};
             }
-            for (const key in source) {
-                if (key === "__proto__") {
+            for (const key of Object.keys(source)) {
+                if (key === "__proto__" || key === "constructor" || key === "prototype") {
                     continue;
                 }
-                const sourceDict = source, value = sourceDict[key], destDict = destination;
-                destDict[key] =
-                    (0, TypeUtils_js_1.isObject)(value) && Array.isArray(value)
-                        ? value.map(v => deepExtend(destDict[key], v))
-                        : deepExtend(destDict[key], value);
+                const sourceDict = source, destDict = destination, value = sourceDict[key];
+                destDict[key] = Array.isArray(value)
+                    ? value.map(v => deepExtend(undefined, v))
+                    : deepExtend(destDict[key], value);
             }
         }
         return destination;