@tsparticles/engine 3.4.0 → 3.6.0-beta.0

package/cjs/Utils/Utils.js

@@ -1,6 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateAnimation = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
+exports.setLogger = setLogger;
+exports.getLogger = getLogger;
+exports.isSsr = isSsr;
+exports.hasMatchMedia = hasMatchMedia;
+exports.safeMatchMedia = safeMatchMedia;
+exports.safeIntersectionObserver = safeIntersectionObserver;
+exports.safeMutationObserver = safeMutationObserver;
+exports.isInArray = isInArray;
+exports.loadFont = loadFont;
+exports.arrayRandomIndex = arrayRandomIndex;
+exports.itemFromArray = itemFromArray;
+exports.isPointInside = isPointInside;
+exports.areBoundsInside = areBoundsInside;
+exports.calculateBounds = calculateBounds;
+exports.deepExtend = deepExtend;
+exports.isDivModeEnabled = isDivModeEnabled;
+exports.divModeExecute = divModeExecute;
+exports.singleDivModeExecute = singleDivModeExecute;
+exports.divMode = divMode;
+exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
+exports.circleBounce = circleBounce;
+exports.rectBounce = rectBounce;
+exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
+exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
+exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
+exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
+exports.getPosition = getPosition;
+exports.getSize = getSize;
+exports.updateAnimation = updateAnimation;
 const NumberUtils_js_1 = require("./NumberUtils.js");
 const Constants_js_1 = require("../Core/Utils/Constants.js");
 const TypeUtils_js_1 = require("./TypeUtils.js");
@@ -27,11 +55,9 @@ function setLogger(logger) {
     _logger.verbose = logger.verbose || _logger.verbose;
     _logger.warning = logger.warning || _logger.warning;
 }
-exports.setLogger = setLogger;
 function getLogger() {
     return _logger;
 }
-exports.getLogger = getLogger;
 function rectSideBounce(data) {
     const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data, half = 0.5, minVelocity = 0;
     if (pOtherSide.min < rectOtherSide.min ||
@@ -56,37 +82,31 @@ function checkSelector(element, selectors) {
 function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
 }
-exports.isSsr = isSsr;
 function hasMatchMedia() {
     return !isSsr() && typeof matchMedia !== "undefined";
 }
-exports.hasMatchMedia = hasMatchMedia;
 function safeMatchMedia(query) {
     if (!hasMatchMedia()) {
         return;
     }
     return matchMedia(query);
 }
-exports.safeMatchMedia = safeMatchMedia;
 function safeIntersectionObserver(callback) {
     if (isSsr() || typeof IntersectionObserver === "undefined") {
         return;
     }
     return new IntersectionObserver(callback);
 }
-exports.safeIntersectionObserver = safeIntersectionObserver;
 function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
     }
     return new MutationObserver(callback);
 }
-exports.safeMutationObserver = safeMutationObserver;
 function isInArray(value, array) {
     const invalidIndex = -1;
     return value === array || ((0, TypeUtils_js_1.isArray)(array) && array.indexOf(value) > invalidIndex);
 }
-exports.isInArray = isInArray;
 async function loadFont(font, weight) {
     try {
         await document.fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
@@ -94,20 +114,16 @@ async function loadFont(font, weight) {
     catch {
     }
 }
-exports.loadFont = loadFont;
 function arrayRandomIndex(array) {
     return Math.floor((0, NumberUtils_js_1.getRandom)() * array.length);
 }
-exports.arrayRandomIndex = arrayRandomIndex;
 function itemFromArray(array, index, useIndex = true) {
     return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
-exports.itemFromArray = itemFromArray;
 function isPointInside(point, size, offset, radius, direction) {
     const minRadius = 0;
     return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
-exports.isPointInside = isPointInside;
 function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
     if (!direction || direction === OutModeDirection_js_1.OutModeDirection.bottom) {
@@ -124,7 +140,6 @@ function areBoundsInside(bounds, size, offset, direction) {
     }
     return inside;
 }
-exports.areBoundsInside = areBoundsInside;
 function calculateBounds(point, radius) {
     return {
         bottom: point.y + radius,
@@ -133,7 +148,6 @@ function calculateBounds(point, radius) {
         top: point.y - radius,
     };
 }
-exports.calculateBounds = calculateBounds;
 function deepExtend(destination, ...sources) {
     for (const source of sources) {
         if (source === undefined || source === null) {
@@ -163,11 +177,9 @@ function deepExtend(destination, ...sources) {
     }
     return destination;
 }
-exports.deepExtend = deepExtend;
 function isDivModeEnabled(mode, divs) {
     return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
 }
-exports.isDivModeEnabled = isDivModeEnabled;
 function divModeExecute(mode, divs, callback) {
     executeOnSingleOrMultiple(divs, div => {
         const divMode = div.mode, divEnabled = div.enable;
@@ -176,14 +188,12 @@ function divModeExecute(mode, divs, callback) {
         }
     });
 }
-exports.divModeExecute = divModeExecute;
 function singleDivModeExecute(div, callback) {
     const selectors = div.selectors;
     executeOnSingleOrMultiple(selectors, selector => {
         callback(selector, div);
     });
 }
-exports.singleDivModeExecute = singleDivModeExecute;
 function divMode(divs, element) {
     if (!element || !divs) {
         return;
@@ -192,7 +202,6 @@ function divMode(divs, element) {
         return checkSelector(element, div.selectors);
     });
 }
-exports.divMode = divMode;
 function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -202,7 +211,6 @@ function circleBounceDataFromParticle(p) {
         factor: Vectors_js_1.Vector.create((0, NumberUtils_js_1.getRangeValue)(p.options.bounce.horizontal.value), (0, NumberUtils_js_1.getRangeValue)(p.options.bounce.vertical.value)),
     };
 }
-exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 function circleBounce(p1, p2) {
     const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = (0, NumberUtils_js_1.getDistances)(pos2, pos1), minimumDistance = 0;
     if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
@@ -214,7 +222,6 @@ function circleBounce(p1, p2) {
     p2.velocity.x = vFinal2.x * p2.factor.x;
     p2.velocity.y = vFinal2.y * p2.factor.y;
 }
-exports.circleBounce = circleBounce;
 function rectBounce(particle, divBounds) {
     const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
@@ -273,16 +280,13 @@ function rectBounce(particle, divBounds) {
         }
     }
 }
-exports.rectBounce = rectBounce;
 function executeOnSingleOrMultiple(obj, callback) {
     const defaultIndex = 0;
     return (0, TypeUtils_js_1.isArray)(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
-exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
 function itemFromSingleOrMultiple(obj, index, useIndex) {
     return (0, TypeUtils_js_1.isArray)(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
-exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
 function findItemFromSingleOrMultiple(obj, callback) {
     if ((0, TypeUtils_js_1.isArray)(obj)) {
         return obj.find((t, index) => callback(t, index));
@@ -290,7 +294,6 @@ function findItemFromSingleOrMultiple(obj, callback) {
     const defaultIndex = 0;
     return callback(obj, defaultIndex) ? obj : undefined;
 }
-exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
 function initParticleNumericAnimationValue(options, pxRatio) {
     const valueRange = options.value, animationOptions = options.animation, res = {
         delayTime: (0, NumberUtils_js_1.getRangeValue)(animationOptions.delay) * Constants_js_1.millisecondsToSeconds,
@@ -341,7 +344,6 @@ function initParticleNumericAnimationValue(options, pxRatio) {
     res.initialValue = res.value;
     return res;
 }
-exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
 function getPositionOrSize(positionOrSize, canvasSize) {
     const isPercent = positionOrSize.mode === PixelMode_js_1.PixelMode.percent;
     if (!isPercent) {
@@ -365,11 +367,9 @@ function getPositionOrSize(positionOrSize, canvasSize) {
 function getPosition(position, canvasSize) {
     return getPositionOrSize(position, canvasSize);
 }
-exports.getPosition = getPosition;
 function getSize(size, canvasSize) {
     return getPositionOrSize(size, canvasSize);
 }
-exports.getSize = getSize;
 function checkDestroy(particle, destroyType, value, minValue, maxValue) {
     switch (destroyType) {
         case DestroyType_js_1.DestroyType.max:
@@ -445,4 +445,3 @@ function updateAnimation(particle, data, changeDirection, destroyType, delta) {
         data.value = (0, NumberUtils_js_1.clamp)(data.value, minValue, maxValue);
     }
 }
-exports.updateAnimation = updateAnimation;

package/cjs/init.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = void 0;
+exports.init = init;
 const Engine_js_1 = require("./Core/Engine.js");
 const HslColorManager_js_1 = require("./Utils/HslColorManager.js");
 const RgbColorManager_js_1 = require("./Utils/RgbColorManager.js");
@@ -13,4 +13,3 @@ function init() {
     engine.init();
     return engine;
 }
-exports.init = init;

package/esm/Core/Canvas.js

@@ -22,9 +22,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -208,10 +205,11 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -378,7 +376,7 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }

package/esm/Core/Container.js

@@ -1,3 +1,4 @@
+import { animate, cancelAnimation, getRangeValue } from "../Utils/NumberUtils.js";
 import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
@@ -6,7 +7,6 @@ import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
-import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
@@ -220,10 +220,10 @@ export class Container {
         this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, effectDrawer] of this.effectDrawers) {
+        for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
+        for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
@@ -255,10 +255,10 @@ export class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));
+        this._drawAnimationFrame = animate(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             if (!plugin.export) {
                 continue;
             }
@@ -275,7 +275,7 @@ export class Container {
             return;
         }
         this.particles.handleClickMode(mode);
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.handleClickMode?.(mode);
         }
     }
@@ -317,19 +317,19 @@ export class Container {
         const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
-        for (const [, drawer] of this.effectDrawers) {
+        for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, drawer] of this.shapeDrawers) {
+        for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             await plugin.init?.();
         }
         this._engine.dispatchEvent(EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
@@ -346,13 +346,13 @@ export class Container {
             return;
         }
         if (this._drawAnimationFrame !== undefined) {
-            cancelAnimationFrame(this._drawAnimationFrame);
+            cancelAnimation(this._drawAnimationFrame);
             delete this._drawAnimationFrame;
         }
         if (this._paused) {
             return;
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -373,7 +373,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const [, plugin] of this.plugins) {
+            for (const plugin of this.plugins.values()) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -411,7 +411,7 @@ export class Container {
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
-                for (const [, plugin] of this.plugins) {
+                for (const plugin of this.plugins.values()) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType.containerStarted, { container: this });
@@ -438,7 +438,7 @@ export class Container {
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {

package/esm/Core/Engine.js

@@ -95,7 +95,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.4.0";
+        return "3.6.0-beta.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/esm/Core/Particle.js

@@ -48,7 +48,7 @@ export class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
                     return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
@@ -166,7 +166,7 @@ export class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
         shapeDrawer?.particleDestroy?.(this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -182,7 +182,7 @@ export class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -334,7 +334,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleCreated?.(this);
         }
     }

package/esm/Core/Particles.js

@@ -122,7 +122,7 @@ export class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode.delete: {
@@ -156,7 +156,7 @@ export class Particles {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
         this.update(delta);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
@@ -181,7 +181,7 @@ export class Particles {
         this._needsSort = false;
         await this.initPlugins();
         let handled = false;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
@@ -209,7 +209,7 @@ export class Particles {
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
@@ -233,7 +233,8 @@ export class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            if (this._removeParticle(i--, group, override)) {
+            if (this._removeParticle(i, group, override)) {
+                i--;
                 deleted++;
             }
         }
@@ -259,10 +260,10 @@ export class Particles {
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -275,7 +276,7 @@ export class Particles {
             }
             particle.ignoresResizeRatio = false;
             this._interactionManager.reset(particle);
-            for (const [, plugin] of this._container.plugins) {
+            for (const plugin of this._container.plugins.values()) {
                 if (particle.destroyed) {
                     break;
                 }

package/esm/Core/Utils/EventListeners.js

@@ -187,7 +187,7 @@ export class EventListeners {
             if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 if (!plugin.clickPositionValid) {
                     continue;
                 }

package/esm/Utils/CanvasUtils.js

@@ -33,8 +33,8 @@ export function drawParticle(data) {
         cos: Math.cos(angle),
     }, rotating = !!angle, identity = 1, 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,
+        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),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);

package/esm/Utils/ColorUtils.js

@@ -15,7 +15,7 @@ export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
 function stringToRgba(input) {
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         if (input.startsWith(manager.stringPrefix)) {
             return manager.parseString(input);
         }
@@ -47,7 +47,7 @@ export function rangeColorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -67,7 +67,7 @@ export function colorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;

package/esm/Utils/NumberUtils.js

@@ -3,15 +3,18 @@ import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
-const easings = new Map(), double = 2, doublePI = Math.PI * double;
+const _animationLoop = {
+    nextFrame: (cb) => requestAnimationFrame(cb),
+    cancel: (idx) => cancelAnimationFrame(idx),
+}, easingFunctions = new Map(), double = 2, doublePI = Math.PI * double;
 export function addEasing(name, easing) {
-    if (easings.get(name)) {
+    if (easingFunctions.get(name)) {
         return;
     }
-    easings.set(name, easing);
+    easingFunctions.set(name, easing);
 }
 export function getEasing(name) {
-    return easings.get(name) ?? ((value) => value);
+    return easingFunctions.get(name) ?? ((value) => value);
 }
 export function setRandom(rnd = Math.random) {
     _random = rnd;
@@ -20,6 +23,16 @@ export function getRandom() {
     const min = 0, max = 1;
     return clamp(_random(), min, max - Number.EPSILON);
 }
+export function setAnimationFunctions(nextFrame, cancel) {
+    _animationLoop.nextFrame = (callback) => nextFrame(callback);
+    _animationLoop.cancel = (handle) => cancel(handle);
+}
+export function animate(fn) {
+    return _animationLoop.nextFrame(fn);
+}
+export function cancelAnimation(handle) {
+    _animationLoop.cancel(handle);
+}
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.4.0",
+  "version": "3.6.0-beta.0",
   "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 [13 May 2024 at 00:05]</title>
+    <title>@tsparticles/engine [7 Oct 2024 at 10:30]</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>