@tsparticles/engine 4.0.0-alpha.23 → 4.0.0-alpha.25

package/esm/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/esm/Core/Utils/Vectors.js

@@ -43,12 +43,6 @@ export class Vector3d {
     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,8 +74,7 @@ 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 = "z" in c ? c.z : originPoint.z;
     }
     sub(v) {
         return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
@@ -91,10 +84,10 @@ export class Vector3d {
         this.y -= v.y;
         this.z -= v.z;
     }
-    _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/esm/Utils/CanvasUtils.js

@@ -1,5 +1,4 @@
-import { defaultZoom, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
-import { AlterType } from "../Enums/Types/AlterType.js";
+import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -40,10 +39,7 @@ export function drawParticle(data) {
         fill: particle.shapeFill,
         stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData,
-        position: {
-            x: pos.x,
-            y: pos.y,
-        },
+        position: { ...pos },
         drawPosition,
         drawScale,
     };
@@ -128,10 +124,3 @@ export function drawParticlePlugin(context, plugin, particle, delta) {
     }
     plugin.drawParticle(context, particle, delta);
 }
-export function alterHsl(color, type, value) {
-    return {
-        h: color.h,
-        s: color.s,
-        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
-    };
-}

package/esm/Utils/ColorUtils.js

@@ -1,6 +1,7 @@
 import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
-import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
+import { AlterType } from "../Enums/Types/AlterType.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
 const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
@@ -350,3 +351,10 @@ export function updateColor(color, delta) {
     updateColorValue(s, ranges.s, true, delta);
     updateColorValue(l, ranges.l, true, delta);
 }
+export function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
+    };
+}

package/esm/Utils/MathUtils.js

@@ -21,10 +21,8 @@ export function getRandomInRange(min, max) {
     return getRandom() * (max - min) + min;
 }
 export function setAnimationFunctions(nextFrame, cancel) {
-    _animationLoop.nextFrame = (callback) => nextFrame(callback);
-    _animationLoop.cancel = (handle) => {
-        cancel(handle);
-    };
+    _animationLoop.nextFrame = nextFrame;
+    _animationLoop.cancel = cancel;
 }
 export function animate(fn) {
     return _animationLoop.nextFrame(fn);
@@ -68,8 +66,8 @@ export function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 export function getDistances(pointA, pointB) {
-    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y, squareExp = 2;
-    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** squareExp + dy ** squareExp) };
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+    return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
 }
 export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;

package/esm/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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.23",
+  "version": "4.0.0-alpha.25",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/engine [11 Feb 2026 at 18:23]</title>
+    <title>@tsparticles/engine [21 Feb 2026 at 12:47]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>