@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.3

package/esm/Core/Container.js

@@ -12,11 +12,9 @@ import { safeIntersectionObserver } from "../Utils/Utils.js";
 function guardCheck(container) {
     return !container.destroyed;
 }
-function initDelta(value, fpsLimit = defaultFps, smooth = false) {
-    return {
-        value,
-        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds,
-    };
+function updateDelta(delta, value, fpsLimit = defaultFps, smooth = false) {
+    delta.value = value;
+    delta.factor = smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds;
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
     const options = new Options(engine, container);
@@ -25,6 +23,7 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
+        this._delta = { value: 0, factor: 0 };
         this._intersectionManager = entries => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -50,14 +49,14 @@ export class Container {
                     return;
                 }
                 this._lastFrameTime ??= timestamp;
-                const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                this.addLifeTime(delta.value);
+                updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
+                this.addLifeTime(this._delta.value);
                 this._lastFrameTime = timestamp;
-                if (delta.value > millisecondsToSeconds) {
+                if (this._delta.value > millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
-                this.canvas.drawParticles(delta);
+                this.canvas.drawParticles(this._delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;
@@ -222,15 +221,11 @@ export class Container {
         for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
+        this.effectDrawers.clear();
         for (const shapeDrawer of this.shapeDrawers.values()) {
             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.shapeDrawers.clear();
         this._engine.clearPlugins(this);
         this.destroyed = true;
         if (remove) {

package/esm/Core/Engine.js

@@ -4,6 +4,7 @@ import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { getRandom } from "../Utils/MathUtils.js";
+const fullPercent = "100%";
 async function getItemsFromInitializer(container, map, initializers, force = false) {
     let res = map.get(container);
     if (!res || force) {
@@ -25,6 +26,7 @@ async function getDataFromUrl(data) {
     return data.fallback;
 }
 const getCanvasFromContainer = (domContainer) => {
+    const documentSafe = safeDocument();
     let canvasEl;
     if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
         canvasEl = domContainer;
@@ -37,28 +39,24 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedFalse;
         }
         else {
-            canvasEl = safeDocument().createElement(canvasTag);
+            canvasEl = documentSafe.createElement(canvasTag);
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
     }
-    const fullPercent = "100%";
-    if (!canvasEl.style.width) {
-        canvasEl.style.width = fullPercent;
-    }
-    if (!canvasEl.style.height) {
-        canvasEl.style.height = fullPercent;
-    }
+    canvasEl.style.width ||= fullPercent;
+    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
-    let domContainer = source ?? safeDocument().getElementById(id);
+    const documentSafe = safeDocument();
+    let domContainer = source ?? document.getElementById(id);
     if (domContainer) {
         return domContainer;
     }
-    domContainer = safeDocument().createElement("div");
+    domContainer = documentSafe.createElement("div");
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
-    safeDocument().body.append(domContainer);
+    documentSafe.body.append(domContainer);
     return domContainer;
 };
 export class Engine {
@@ -95,7 +93,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.1";
+        return "4.0.0-alpha.3";
     }
     addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
@@ -221,10 +219,32 @@ export class Engine {
         if (this._initialized) {
             return;
         }
-        for (const loadPromise of this._loadPromises) {
-            await loadPromise(this);
+        const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
+        while (stack.length) {
+            const loader = stack.shift();
+            if (!loader) {
+                continue;
+            }
+            if (executed.has(loader)) {
+                continue;
+            }
+            executed.add(loader);
+            const inner = [], origRegister = this.register.bind(this);
+            this.register = (...loaders) => {
+                inner.push(...loaders);
+                for (const loader of loaders) {
+                    allLoaders.add(loader);
+                }
+            };
+            await loader(this);
+            this.register = origRegister;
+            stack.unshift(...inner);
+            this._loadPromises.delete(loader);
         }
         this._loadPromises.clear();
+        for (const loader of allLoaders) {
+            this._loadPromises.add(loader);
+        }
         this._initialized = true;
     }
     item(index) {

package/esm/Core/Interfaces/IParticleOpacityData.js

@@ -0,0 +1 @@
+export {};

package/esm/Core/Interfaces/IParticleRotateData.js

@@ -0,0 +1 @@
+export {};

package/esm/Core/Particle.js

@@ -1,6 +1,6 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultRetryCount, double, half, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, } from "./Utils/Constants.js";
+import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, half, identity, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
@@ -39,51 +39,50 @@ function fixOutMode(data) {
 export class Particle {
     constructor(engine, container) {
         this.container = container;
-        this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            const plugins = container.plugins.values();
-            for (const plugin of plugins) {
-                const pluginPos = plugin.particlePosition?.(position, this);
-                if (pluginPos) {
-                    return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+        this._cachedOpacityData = {
+            opacity: defaultOpacity,
+            strokeOpacity: defaultOpacity,
+        };
+        this._cachedPosition = Vector3d.origin;
+        this._cachedRotateData = { sin: 0, cos: 0 };
+        this._cachedTransform = {
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+        };
+        this._calcPosition = (position, zIndex) => {
+            let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
+            const container = this.container, plugins = Array.from(container.plugins.values()), outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
+            while (!signal.aborted) {
+                for (const plugin of plugins) {
+                    const pluginPos = plugin.particlePosition?.(posVec, this);
+                    if (pluginPos) {
+                        return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                    }
                 }
-            }
-            const canvasSize = container.canvas.size, exactPosition = calcExactPositionOrRandomFromSize({
-                size: canvasSize,
-                position: position,
-            }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [OutMode.bounce],
-                    coord: pos.x,
-                    maxCoord: container.canvas.size.width,
-                    setCb: (value) => (pos.x += value),
-                    radius,
-                });
-            }, fixVertical = (outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [OutMode.bounce],
-                    coord: pos.y,
-                    maxCoord: container.canvas.size.height,
-                    setCb: (value) => (pos.y += value),
-                    radius,
-                });
-            };
-            fixHorizontal(outModes.left ?? outModes.default);
-            fixHorizontal(outModes.right ?? outModes.default);
-            fixVertical(outModes.top ?? outModes.default);
-            fixVertical(outModes.bottom ?? outModes.default);
-            let isValidPosition = true;
-            for (const plugin of plugins) {
-                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);
-                if (isValidPosition === false) {
-                    break;
+                const exactPosition = calcExactPositionOrRandomFromSize({
+                    size: canvasSize,
+                    position: posVec,
+                }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
+                this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);
+                this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);
+                this._fixVertical(pos, radius, outModes.top ?? outModes.default);
+                this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);
+                let isValidPosition = true;
+                for (const plugin of plugins) {
+                    isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
+                    if (!isValidPosition) {
+                        break;
+                    }
                 }
+                if (isValidPosition) {
+                    return pos;
+                }
+                tryCount += tryCountIncrement;
+                posVec = undefined;
             }
-            if (!isValidPosition) {
-                return this._calcPosition(container, undefined, zIndex, tryCount + tryCountIncrement);
-            }
-            return pos;
+            return posVec;
         };
         this._calculateVelocity = () => {
             const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
@@ -102,6 +101,26 @@ export class Particle {
             }
             return res;
         };
+        this._fixHorizontal = (pos, radius, outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode.bounce],
+                coord: pos.x,
+                maxCoord: this.container.canvas.size.width,
+                setCb: (value) => (pos.x += value),
+                radius,
+            });
+        };
+        this._fixVertical = (pos, radius, outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode.bounce],
+                coord: pos.y,
+                maxCoord: this.container.canvas.size.height,
+                setCb: (value) => (pos.y += value),
+                radius,
+            });
+        };
         this._getRollColor = color => {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
@@ -120,7 +139,11 @@ export class Particle {
         };
         this._initPosition = position => {
             const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
-            this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
+            const initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+            if (!initialPosition) {
+                throw new Error("a valid position cannot be found for particle");
+            }
+            this.position = initialPosition;
             this.initialPosition = this.position.copy();
             const canvasSize = container.canvas.size;
             this.moveCenter = {
@@ -180,19 +203,42 @@ export class Particle {
     getMass() {
         return this.getRadius() ** squareExp * Math.PI * half;
     }
+    getOpacity() {
+        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+        this._cachedOpacityData.opacity = opacity * zOpacityFactor;
+        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+        return this._cachedOpacityData;
+    }
     getPosition() {
-        return {
-            x: this.position.x + this.offset.x,
-            y: this.position.y + this.offset.y,
-            z: this.position.z,
-        };
+        this._cachedPosition.x = this.position.x + this.offset.x;
+        this._cachedPosition.y = this.position.y + this.offset.y;
+        this._cachedPosition.z = this.position.z;
+        return this._cachedPosition;
     }
     getRadius() {
         return this.bubble.radius ?? this.size.value;
     }
+    getRotateData() {
+        const angle = this.getAngle();
+        this._cachedRotateData.sin = Math.sin(angle);
+        this._cachedRotateData.cos = Math.cos(angle);
+        return this._cachedRotateData;
+    }
     getStrokeColor() {
         return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
     }
+    getTransformData(externalTransform) {
+        const rotateData = this.getRotateData(), rotating = this.isRotating;
+        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
+        this._cachedTransform.b = rotating
+            ? rotateData.sin * (externalTransform.b ?? identity)
+            : (externalTransform.b ?? defaultTransform.b);
+        this._cachedTransform.c = rotating
+            ? -rotateData.sin * (externalTransform.c ?? identity)
+            : (externalTransform.c ?? defaultTransform.c);
+        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? defaultTransform.d);
+        return this._cachedTransform;
+    }
     init(id, position, overrideOptions, group) {
         const container = this.container, engine = this._engine;
         this.id = id;

package/esm/Utils/CanvasUtils.js

@@ -1,4 +1,4 @@
-import { defaultTransform, identity, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
+import { lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
 export function clearDrawPlugin(context, plugin, delta) {
     if (!plugin.clearDraw) {
@@ -28,15 +28,7 @@ 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(), angle = particle.getAngle(), rotateData = {
-        sin: Math.sin(angle),
-        cos: Math.cos(angle),
-    }, rotating = particle.isRotating, transformData = {
-        a: rotateData.cos * (transform.a ?? defaultTransform.a),
-        b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
-        c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
-        d: rotateData.cos * (transform.d ?? defaultTransform.d),
-    };
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
@@ -47,24 +39,25 @@ export function drawParticle(data) {
         context.strokeStyle = colorStyles.stroke;
     }
     const drawData = {
-        container,
         context,
         particle,
         radius,
         opacity,
         delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData,
-        strokeWidth,
     };
-    drawBeforeEffect(drawData);
-    drawShapeBeforeDraw(drawData);
-    drawShape(drawData);
-    drawShapeAfterDraw(drawData);
-    drawAfterEffect(drawData);
+    drawBeforeEffect(container, drawData);
+    drawShapeBeforeDraw(container, drawData);
+    drawShape(container, drawData);
+    drawShapeAfterDraw(container, drawData);
+    drawAfterEffect(container, drawData);
     context.resetTransform();
 }
-export function drawAfterEffect(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawAfterEffect(container, data) {
+    const { particle } = data;
     if (!particle.effect) {
         return;
     }
@@ -72,20 +65,10 @@ export function drawAfterEffect(data) {
     if (!drawFunc) {
         return;
     }
-    drawFunc({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawFunc(data);
 }
-export function drawBeforeEffect(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawBeforeEffect(container, data) {
+    const { particle } = data;
     if (!particle.effect) {
         return;
     }
@@ -93,20 +76,10 @@ export function drawBeforeEffect(data) {
     if (!drawer?.drawBefore) {
         return;
     }
-    drawer.drawBefore({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.drawBefore(data);
 }
-export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
+export function drawShape(container, data) {
+    const { context, particle, stroke } = data;
     if (!particle.shape) {
         return;
     }
@@ -115,29 +88,19 @@ export function drawShape(data) {
         return;
     }
     context.beginPath();
-    drawer.draw({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.draw(data);
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (strokeWidth > minStrokeWidth) {
+    if (stroke) {
         context.stroke();
     }
     if (particle.shapeFill) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawShapeAfterDraw(container, data) {
+    const { particle } = data;
     if (!particle.shape) {
         return;
     }
@@ -145,20 +108,10 @@ export function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.afterDraw(data);
 }
-export function drawShapeBeforeDraw(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawShapeBeforeDraw(container, data) {
+    const { particle } = data;
     if (!particle.shape) {
         return;
     }
@@ -166,17 +119,7 @@ export function drawShapeBeforeDraw(data) {
     if (!drawer?.beforeDraw) {
         return;
     }
-    drawer.beforeDraw({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.beforeDraw(data);
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/esm/Utils/ColorUtils.js

@@ -3,6 +3,17 @@ import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime,
 import { isArray, isString } from "./TypeUtils.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
+const styleCache = new Map(), maxCacheSize = 1000;
+function getCachedStyle(key, generator) {
+    let cached = styleCache.get(key);
+    if (!cached) {
+        cached = generator();
+        if (styleCache.size < maxCacheSize) {
+            styleCache.set(key, cached);
+        }
+    }
+    return cached;
+}
 function stringToRgba(engine, input) {
     if (!input) {
         return;
@@ -155,7 +166,8 @@ export function getRandomRgbColor(min) {
     };
 }
 export function getStyleFromRgb(color, hdr, opacity) {
-    return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toString()}-${color.g.toString()}-${color.b.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
 }
 function getHdrStyleFromRgb(color, opacity) {
     return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity).toString()})`;
@@ -164,7 +176,8 @@ function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
 export function getStyleFromHsl(color, hdr, opacity) {
-    return hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity);
+    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toString()}-${color.s.toString()}-${color.l.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
 }
 function getHdrStyleFromHsl(color, opacity) {
     return getHdrStyleFromRgb(hslToRgb(color), opacity);

package/esm/Utils/MathUtils.js

@@ -137,9 +137,10 @@ export function calcPositionOrRandomFromSizeRanged(data) {
     return calcPositionOrRandomFromSize({ size: data.size, position });
 }
 export function calcExactPositionOrRandomFromSize(data) {
+    const { position, size } = data;
     return {
-        x: data.position?.x ?? getRandom() * data.size.width,
-        y: data.position?.y ?? getRandom() * data.size.height,
+        x: position?.x ?? getRandom() * size.width,
+        y: position?.y ?? getRandom() * size.height,
     };
 }
 export function calcExactPositionOrRandomFromSizeRanged(data) {

package/esm/Utils/Utils.js

@@ -328,7 +328,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.prototype.hasOwnProperty.call(style, key) || isNull(styleKey)) {
+        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "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 [8 Jan 2026 at 08:56]</title>
+    <title>@tsparticles/engine [10 Jan 2026 at 19:10]</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>