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

package/browser/Utils/MathUtils.js

@@ -69,8 +69,15 @@ export function getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
 }
+export function getDistanceSq(pointA, pointB) {
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return dx * dx + dy * dy;
+}
 export function getDistance(pointA, pointB) {
-    return getDistances(pointA, pointB).distance;
+    return Math.sqrt(getDistanceSq(pointA, pointB));
+}
+export function checkDistance(pointA, pointB, distance) {
+    return getDistanceSq(pointA, pointB) <= distance * distance;
 }
 export function degToRad(degrees) {
     return degrees * degToRadFactor;

package/browser/Utils/Utils.js

@@ -83,33 +83,29 @@ export function calculateBounds(point, radius) {
 }
 export function deepExtend(destination, ...sources) {
     for (const source of sources) {
-        if (source === undefined || source === null) {
+        if (isNull(source)) {
             continue;
         }
         if (!isObject(source)) {
             destination = source;
             continue;
         }
-        const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray) {
+        if (Array.isArray(source)) {
             if (!Array.isArray(destination)) {
                 destination = [];
             }
         }
-        else {
-            if (!isObject(destination) || Array.isArray(destination)) {
-                destination = {};
-            }
+        else if (!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] =
-                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;

package/browser/exports.js

@@ -1,5 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";
@@ -29,7 +28,6 @@ export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
 export * from "./Options/Classes/Particles/Stroke.js";
-export * from "./Options/Classes/Particles/Move/MoveAttract.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";
 export * from "./Options/Classes/Particles/Move/MoveCenter.js";

package/cjs/Core/Engine.js

@@ -57,13 +57,9 @@ export class Engine {
     effectDrawers = new Map();
     initializers = {
         effects: new Map(),
-        movers: new Map(),
-        pathGenerators: new Map(),
         shapes: new Map(),
         updaters: new Map(),
     };
-    movers = new Map();
-    pathGenerators = new Map();
     plugins = [];
     presets = new Map();
     shapeDrawers = new Map();
@@ -87,7 +83,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.24";
+        return "4.0.0-alpha.26";
     }
     addColorManager(name, manager) {
         this.colorManagers.set(name, manager);
@@ -109,15 +105,9 @@ export class Engine {
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    addMover(name, moverInitializer) {
-        this.initializers.movers.set(name, moverInitializer);
-    }
     addParticleUpdater(name, updaterInitializer) {
         this.initializers.updaters.set(name, updaterInitializer);
     }
-    addPathGenerator(name, generator) {
-        this.initializers.pathGenerators.set(name, generator);
-    }
     addPlugin(plugin) {
         if (this.getPlugin(plugin.id)) {
             return;
@@ -143,7 +133,6 @@ export class Engine {
     }
     clearPlugins(container) {
         this.effectDrawers.delete(container);
-        this.movers.delete(container);
         this.shapeDrawers.delete(container);
         this.updaters.delete(container);
     }
@@ -156,12 +145,6 @@ export class Engine {
     getEffectDrawers(container, force = false) {
         return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
     }
-    getMovers(container, force = false) {
-        return getItemsFromInitializer(container, this.movers, this.initializers.movers, force);
-    }
-    getPathGenerators(container, force = false) {
-        return getItemMapFromInitializer(container, this.pathGenerators, this.initializers.pathGenerators, force);
-    }
     getPlugin(plugin) {
         return this.plugins.find(t => t.id === plugin);
     }

package/cjs/Core/Particle.js

@@ -1,8 +1,8 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { alterHsl, getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, millisecondsToSeconds, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
@@ -54,13 +54,10 @@ export class Particle {
     lastPathTime;
     misplaced;
     moveCenter;
-    moveDecay;
     offset;
     opacity;
     options;
     outType;
-    pathDelay;
-    pathGenerator;
     pathRotation;
     position;
     randomIndexData;
@@ -105,7 +102,7 @@ export class Particle {
         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);
@@ -113,7 +110,6 @@ export class Particle {
         for (const updater of container.particles.updaters) {
             updater.particleDestroyed?.(this, override);
         }
-        pathGenerator?.reset(this);
         this._engine.dispatchEvent(EventType.particleDestroyed, {
             container: this.container,
             data: {
@@ -235,19 +231,6 @@ export class Particle {
         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 = getRangeValue(pathOptions.delay.value) * 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 = initParticleNumericAnimationValue(this.options.size, pxRatio);
         this.bubble = {
@@ -260,7 +243,6 @@ export class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        this.moveDecay = decayOffset - getRangeValue(this.options.move.decay);
         const particles = container.particles;
         particles.setLastZIndex(this.position.z);
         this.zIndexFactor = this.position.z / container.zLayers;
@@ -286,9 +268,6 @@ export class Particle {
         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/cjs/Core/Particles.js

@@ -1,23 +1,14 @@
-import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
-import { Point } from "./Utils/Point.js";
-import { QuadTree } from "./Utils/QuadTree.js";
-import { Rectangle } from "./Utils/Ranges.js";
+import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-const qTreeRectangle = (canvasSize) => {
-    const { height, width } = canvasSize;
-    return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
-};
 export class Particles {
-    availablePathGenerators;
     checkParticlePositionPlugins;
     effectDrawers;
-    movers;
-    pathGenerators;
-    quadTree;
+    grid;
     shapeDrawers;
     updaters;
     _array;
@@ -49,12 +40,8 @@ export class Particles {
         this._needsSort = false;
         this._minZIndex = 0;
         this._maxZIndex = 0;
-        const canvasSize = container.canvas.size;
-        this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
+        this.grid = new SpatialHashGrid(spatialHashGridCellSize);
         this.effectDrawers = new Map();
-        this.movers = [];
-        this.availablePathGenerators = new Map();
-        this.pathGenerators = new Map();
         this.shapeDrawers = new Map();
         this.updaters = [];
         this.checkParticlePositionPlugins = [];
@@ -130,9 +117,6 @@ export class Particles {
         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 = [];
@@ -167,6 +151,7 @@ export class Particles {
         this._postUpdatePlugins = [];
         this._particleResetPlugins = [];
         this._postParticleUpdatePlugins = [];
+        this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
         for (const plugin of container.plugins) {
             if (plugin.redrawInit) {
                 await plugin.redrawInit();
@@ -223,14 +208,8 @@ export class Particles {
     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++) {
@@ -285,11 +264,8 @@ export class Particles {
         this._resizeFactor = factor;
     }
     update(delta) {
-        const container = this._container, particlesToDelete = new Set();
-        this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), 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);
         }
@@ -311,16 +287,11 @@ export class Particles {
                 }
                 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(particle.getPosition(), particle));
+            this.grid.insert(particle);
         }
         if (particlesToDelete.size) {
             const checkDelete = (p) => !particlesToDelete.has(p);

package/cjs/Core/Utils/Constants.js

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

package/cjs/Core/Utils/Ranges.js

@@ -1,5 +1,5 @@
 import { RangeType } from "../../Enums/RangeType.js";
-import { getDistance } from "../../Utils/MathUtils.js";
+import { checkDistance } from "../../Utils/MathUtils.js";
 import { squareExp } from "./Constants.js";
 export class BaseRange {
     position;
@@ -19,7 +19,7 @@ export class Circle extends BaseRange {
         this.radius = radius;
     }
     contains(point) {
-        return getDistance(point, this.position) <= this.radius;
+        return 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/cjs/Core/Utils/SpatialHashGrid.js

@@ -0,0 +1,82 @@
+import { Circle, Rectangle } from "./Ranges.js";
+export 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 Circle(position.x, position.y, radius), check, out);
+    }
+    queryRectangle(position, size, check, out = []) {
+        return this.query(new 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 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 Rectangle) {
+            const { x, y } = range.position, { width, height } = range.size;
+            return {
+                minX: x,
+                maxX: x + width,
+                minY: y,
+                maxY: y + height,
+            };
+        }
+        return null;
+    }
+}

package/cjs/Core/Utils/Vectors.js

@@ -1,4 +1,7 @@
 import { inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
+function getZ(source) {
+    return "z" in source ? source.z : originPoint.z;
+}
 export class Vector3d {
     x;
     y;
@@ -24,31 +27,25 @@ export class Vector3d {
         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 ?? originPoint.y, z ?? originPoint.z);
         }
-        return new Vector3d(x.x, x.y, Object.hasOwn(x, "z") ? x.z : 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);
     }
@@ -80,21 +77,20 @@ export class Vector3d {
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
-        const v3d = c;
-        this.z = v3d.z ? v3d.z : 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;
-    };
+    }
 }
 export class Vector extends Vector3d {
     constructor(x = originPoint.x, y = originPoint.y) {

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

@@ -1,7 +1,6 @@
 import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNull, isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
-import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
 import { MoveGravity } from "./MoveGravity.js";
 import { MovePath } from "./Path/MovePath.js";
@@ -10,7 +9,6 @@ import { Spin } from "./Spin.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Move {
     angle;
-    attract;
     center;
     decay;
     direction;
@@ -29,7 +27,6 @@ export class Move {
     warp;
     constructor() {
         this.angle = new MoveAngle();
-        this.attract = new MoveAttract();
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
@@ -52,7 +49,6 @@ export class Move {
             return;
         }
         this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);
-        this.attract.load(data.attract);
         this.center.load(data.center);
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);

package/cjs/Utils/CanvasUtils.js

@@ -7,15 +7,16 @@ export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
+    const prevAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
-    context.globalAlpha = 1;
+    context.globalAlpha = prevAlpha;
 }
 export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
         x: pos.x,
         y: pos.y,
     };
@@ -46,42 +47,40 @@ export function drawParticle(data) {
     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();
 }
-export function drawAfterEffect(container, data) {
+export 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);
+}
+export function drawBeforeEffect(drawer, data) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawFunc(data);
-}
-export 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);
 }
-export function drawShape(container, data) {
-    const { context, particle, stroke } = data;
-    if (!particle.shape) {
+export 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();
@@ -96,26 +95,24 @@ export function drawShape(container, data) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(container, data) {
-    const { particle } = data;
-    if (!particle.shape) {
-        return;
-    }
-    const drawer = container.particles.shapeDrawers.get(particle.shape);
+export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw(data);
-}
-export function drawShapeBeforeDraw(container, data) {
     const { particle } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.particles.shapeDrawers.get(particle.shape);
+    drawer.afterDraw(data);
+}
+export function drawShapeBeforeDraw(drawer, data) {
     if (!drawer?.beforeDraw) {
         return;
     }
+    const { particle } = data;
+    if (!particle.shape) {
+        return;
+    }
     drawer.beforeDraw(data);
 }
 export function drawParticlePlugin(context, plugin, particle, delta) {

package/cjs/Utils/MathUtils.js

@@ -69,8 +69,15 @@ export function getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
 }
+export function getDistanceSq(pointA, pointB) {
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return dx * dx + dy * dy;
+}
 export function getDistance(pointA, pointB) {
-    return getDistances(pointA, pointB).distance;
+    return Math.sqrt(getDistanceSq(pointA, pointB));
+}
+export function checkDistance(pointA, pointB, distance) {
+    return getDistanceSq(pointA, pointB) <= distance * distance;
 }
 export function degToRad(degrees) {
     return degrees * degToRadFactor;