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

package/cjs/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/cjs/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/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v4.0.0-alpha.24
+ * tsParticles Engine v4.0.0-alpha.26
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -45,7 +45,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \***************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"./dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n    const effectData = effectOptions.options[effect];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.deepExtend)({\n        close: effectOptions.close,\n        fill: effectOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n    const shapeData = shapeOptions.options[shape];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.deepExtend)({\n        close: shapeOptions.close,\n        fill: shapeOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n    if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.isInArray)(data.outMode, data.checkModes)) {\n        return;\n    }\n    const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double;\n    if (data.coord > data.maxCoord - diameter) {\n        data.setCb(-data.radius);\n    } else if (data.coord < diameter) {\n        data.setCb(data.radius);\n    }\n}\nclass Particle {\n    container;\n    backColor;\n    bubble;\n    color;\n    destroyed;\n    direction;\n    effect;\n    effectClose;\n    effectData;\n    effectFill;\n    group;\n    id;\n    ignoresResizeRatio;\n    initialPosition;\n    initialVelocity;\n    isRotating;\n    lastPathTime;\n    misplaced;\n    moveCenter;\n    moveDecay;\n    offset;\n    opacity;\n    options;\n    outType;\n    pathDelay;\n    pathGenerator;\n    pathRotation;\n    position;\n    randomIndexData;\n    retina;\n    roll;\n    rotation;\n    shape;\n    shapeClose;\n    shapeData;\n    shapeFill;\n    sides;\n    size;\n    slow;\n    spawning;\n    strokeColor;\n    strokeOpacity;\n    strokeWidth;\n    unbreakable;\n    velocity;\n    zIndexFactor;\n    _cachedOpacityData = {\n        opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultOpacity,\n        strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultOpacity\n    };\n    _cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    _cachedRotateData = {\n        sin: 0,\n        cos: 0\n    };\n    _cachedTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    _engine;\n    constructor(engine, container){\n        this.container = container;\n        this._engine = engine;\n    }\n    destroy(override) {\n        if (this.unbreakable || this.destroyed) {\n            return;\n        }\n        this.destroyed = true;\n        this.bubble.inRange = false;\n        this.slow.inRange = false;\n        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;\n        shapeDrawer?.particleDestroy?.(this);\n        for (const plugin of container.particleDestroyedPlugins){\n            plugin.particleDestroyed?.(this, override);\n        }\n        for (const updater of container.particles.updaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        pathGenerator?.reset(this);\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            container: this.container,\n            data: {\n                particle: this\n            }\n        });\n    }\n    draw(delta) {\n        const container = this.container, canvas = container.canvas;\n        canvas.drawParticlePlugins(this, delta);\n        canvas.drawParticle(this, delta);\n    }\n    getAngle() {\n        return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultAngle);\n    }\n    getFillColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.color));\n    }\n    getMass() {\n        return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half;\n    }\n    getOpacity() {\n        const zIndexOptions = this.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;\n        this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n        return this._cachedOpacityData;\n    }\n    getPosition() {\n        this._cachedPosition.x = this.position.x + this.offset.x;\n        this._cachedPosition.y = this.position.y + this.offset.y;\n        this._cachedPosition.z = this.position.z;\n        return this._cachedPosition;\n    }\n    getRadius() {\n        return this.bubble.radius ?? this.size.value;\n    }\n    getRotateData() {\n        const angle = this.getAngle();\n        this._cachedRotateData.sin = Math.sin(angle);\n        this._cachedRotateData.cos = Math.cos(angle);\n        return this._cachedRotateData;\n    }\n    getStrokeColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.strokeColor));\n    }\n    getTransformData(externalTransform) {\n        const rotateData = this.getRotateData(), rotating = this.isRotating;\n        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultTransform.a);\n        this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultTransform.b;\n        this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultTransform.c;\n        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultTransform.d);\n        return this._cachedTransform;\n    }\n    init(id, position, overrideOptions, group) {\n        const container = this.container;\n        this.id = id;\n        this.group = group;\n        this.effectClose = true;\n        this.effectFill = true;\n        this.shapeClose = true;\n        this.shapeFill = true;\n        this.pathRotation = false;\n        this.lastPathTime = 0;\n        this.destroyed = false;\n        this.unbreakable = false;\n        this.isRotating = false;\n        this.rotation = 0;\n        this.misplaced = false;\n        this.retina = {\n            maxDistance: {}\n        };\n        this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n        this.ignoresResizeRatio = true;\n        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadParticlesOptions)(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;\n        this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n        this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;\n        if (overrideOptions) {\n            if (overrideOptions.effect?.type) {\n                const overrideEffectType = overrideOptions.effect.type, effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n                if (effect) {\n                    this.effect = effect;\n                    effectOptions.load(overrideOptions.effect);\n                }\n            }\n            if (overrideOptions.shape?.type) {\n                const overrideShapeType = overrideOptions.shape.type, shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n                if (shape) {\n                    this.shape = shape;\n                    shapeOptions.load(overrideOptions.shape);\n                }\n            }\n        }\n        if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.randomColorValue) {\n            const availableEffects = [\n                ...this.container.particles.effectDrawers.keys()\n            ];\n            this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableEffects.length)];\n        }\n        if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.randomColorValue) {\n            const availableShapes = [\n                ...this.container.particles.shapeDrawers.keys()\n            ];\n            this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableShapes.length)];\n        }\n        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n        particlesOptions.load(overrideOptions);\n        const effectData = this.effectData;\n        if (effectData) {\n            particlesOptions.load(effectData.particles);\n        }\n        const shapeData = this.shapeData;\n        if (shapeData) {\n            particlesOptions.load(shapeData.particles);\n        }\n        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n        this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n        this.options = particlesOptions;\n        const pathOptions = this.options.move.path;\n        this.pathDelay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.millisecondsToSeconds;\n        if (pathOptions.generator) {\n            let pathGenerator = this.container.particles.pathGenerators.get(pathOptions.generator);\n            if (!pathGenerator) {\n                pathGenerator = this.container.particles.availablePathGenerators.get(pathOptions.generator);\n                if (pathGenerator) {\n                    this.container.particles.pathGenerators.set(pathOptions.generator, pathGenerator);\n                    pathGenerator.init();\n                }\n            }\n            this.pathGenerator = pathGenerator;\n        }\n        container.retina.initParticle(this);\n        this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n        this.bubble = {\n            inRange: false\n        };\n        this.slow = {\n            inRange: false,\n            factor: 1\n        };\n        this._initPosition(position);\n        this.initialVelocity = this._calculateVelocity();\n        this.velocity = this.initialVelocity.copy();\n        this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.move.decay);\n        const particles = container.particles;\n        particles.setLastZIndex(this.position.z);\n        this.zIndexFactor = this.position.z / container.zLayers;\n        this.sides = 24;\n        let effectDrawer, shapeDrawer;\n        if (this.effect) {\n            effectDrawer = container.particles.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.particles.shapeDrawers.get(this.shape);\n        }\n        if (shapeDrawer?.loadShape) {\n            shapeDrawer.loadShape(this);\n        }\n        const sideCountFunc = shapeDrawer?.getSidesCount;\n        if (sideCountFunc) {\n            this.sides = sideCountFunc(this);\n        }\n        this.spawning = false;\n        for (const updater of particles.updaters){\n            updater.init(this);\n        }\n        for (const mover of particles.movers){\n            mover.init(this);\n        }\n        effectDrawer?.particleInit?.(container, this);\n        shapeDrawer?.particleInit?.(container, this);\n        for (const plugin of container.particleCreatedPlugins){\n            plugin.particleCreated?.(this);\n        }\n    }\n    isInsideCanvas() {\n        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;\n        return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n    }\n    isShowingBack() {\n        if (!this.roll) {\n            return false;\n        }\n        const angle = this.roll.angle;\n        if (this.roll.horizontal && this.roll.vertical) {\n            const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.doublePI, adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.doublePI : normalizedAngle;\n            return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half;\n        }\n        if (this.roll.horizontal) {\n            const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double;\n        }\n        if (this.roll.vertical) {\n            const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.double;\n        }\n        return false;\n    }\n    isVisible() {\n        return !this.destroyed && !this.spawning && this.isInsideCanvas();\n    }\n    reset() {\n        for (const updater of this.container.particles.updaters){\n            updater.reset?.(this);\n        }\n    }\n    _calcPosition = (position, zIndex)=>{\n        let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.defaultRetryCount, posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n        const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;\n        while(!signal.aborted){\n            for (const plugin of plugins){\n                const pluginPos = plugin.particlePosition?.(posVec, this);\n                if (pluginPos) {\n                    return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n                }\n            }\n            const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n                size: canvasSize,\n                position: posVec\n            }), pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n            this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n            this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n            let isValidPosition = true;\n            for (const plugin of container.particles.checkParticlePositionPlugins){\n                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n                if (!isValidPosition) {\n                    break;\n                }\n            }\n            if (isValidPosition) {\n                return pos;\n            }\n            tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.tryCountIncrement;\n            posVec = undefined;\n        }\n        return posVec;\n    };\n    _calculateVelocity = ()=>{\n        const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;\n        if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n            return res;\n        }\n        const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)), radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)), range = {\n            left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half,\n            right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.half\n        };\n        if (!moveOptions.straight) {\n            res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n        }\n        if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n            res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n        }\n        return res;\n    };\n    _fixHorizontal = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.x,\n            maxCoord: this.container.canvas.size.width,\n            setCb: (value)=>pos.x += value,\n            radius\n        });\n    };\n    _fixVertical = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.y,\n            maxCoord: this.container.canvas.size.height,\n            setCb: (value)=>pos.y += value,\n            radius\n        });\n    };\n    _getRollColor = (color)=>{\n        if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n            return color;\n        }\n        if (!this.isShowingBack()) {\n            return color;\n        }\n        if (this.backColor) {\n            return this.backColor;\n        }\n        if (this.roll.alter) {\n            return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n        }\n        return color;\n    };\n    _initPosition = (position)=>{\n        const container = this.container, zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.minZ, container.zLayers));\n        if (!initialPosition) {\n            throw new Error(\"a valid position cannot be found for particle\");\n        }\n        this.position = initialPosition;\n        this.initialPosition = this.position.copy();\n        const canvasSize = container.canvas.size;\n        this.moveCenter = {\n            ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_4__.getPosition)(this.options.move.center, canvasSize),\n            radius: this.options.move.center.radius,\n            mode: this.options.move.center.mode\n        };\n        this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n        switch(this.options.move.direction){\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n                break;\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.outside;\n                break;\n            default:\n                break;\n        }\n        this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"./dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n    const effectData = effectOptions.options[effect];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: effectOptions.close,\n        fill: effectOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n    const shapeData = shapeOptions.options[shape];\n    return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n        close: shapeOptions.close,\n        fill: shapeOptions.fill\n    }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n    if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n        return;\n    }\n    const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n    if (data.coord > data.maxCoord - diameter) {\n        data.setCb(-data.radius);\n    } else if (data.coord < diameter) {\n        data.setCb(data.radius);\n    }\n}\nclass Particle {\n    container;\n    backColor;\n    bubble;\n    color;\n    destroyed;\n    direction;\n    effect;\n    effectClose;\n    effectData;\n    effectFill;\n    group;\n    id;\n    ignoresResizeRatio;\n    initialPosition;\n    initialVelocity;\n    isRotating;\n    lastPathTime;\n    misplaced;\n    moveCenter;\n    offset;\n    opacity;\n    options;\n    outType;\n    pathRotation;\n    position;\n    randomIndexData;\n    retina;\n    roll;\n    rotation;\n    shape;\n    shapeClose;\n    shapeData;\n    shapeFill;\n    sides;\n    size;\n    slow;\n    spawning;\n    strokeColor;\n    strokeOpacity;\n    strokeWidth;\n    unbreakable;\n    velocity;\n    zIndexFactor;\n    _cachedOpacityData = {\n        opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity,\n        strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity\n    };\n    _cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    _cachedRotateData = {\n        sin: 0,\n        cos: 0\n    };\n    _cachedTransform = {\n        a: 1,\n        b: 0,\n        c: 0,\n        d: 1\n    };\n    _engine;\n    constructor(engine, container){\n        this.container = container;\n        this._engine = engine;\n    }\n    destroy(override) {\n        if (this.unbreakable || this.destroyed) {\n            return;\n        }\n        this.destroyed = true;\n        this.bubble.inRange = false;\n        this.slow.inRange = false;\n        const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;\n        shapeDrawer?.particleDestroy?.(this);\n        for (const plugin of container.particleDestroyedPlugins){\n            plugin.particleDestroyed?.(this, override);\n        }\n        for (const updater of container.particles.updaters){\n            updater.particleDestroyed?.(this, override);\n        }\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_5__.EventType.particleDestroyed, {\n            container: this.container,\n            data: {\n                particle: this\n            }\n        });\n    }\n    draw(delta) {\n        const container = this.container, canvas = container.canvas;\n        canvas.drawParticlePlugins(this, delta);\n        canvas.drawParticle(this, delta);\n    }\n    getAngle() {\n        return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle);\n    }\n    getFillColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.color));\n    }\n    getMass() {\n        return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n    }\n    getOpacity() {\n        const zIndexOptions = this.options.zIndex, zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;\n        this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n        return this._cachedOpacityData;\n    }\n    getPosition() {\n        this._cachedPosition.x = this.position.x + this.offset.x;\n        this._cachedPosition.y = this.position.y + this.offset.y;\n        this._cachedPosition.z = this.position.z;\n        return this._cachedPosition;\n    }\n    getRadius() {\n        return this.bubble.radius ?? this.size.value;\n    }\n    getRotateData() {\n        const angle = this.getAngle();\n        this._cachedRotateData.sin = Math.sin(angle);\n        this._cachedRotateData.cos = Math.cos(angle);\n        return this._cachedRotateData;\n    }\n    getStrokeColor() {\n        return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.getHslFromAnimation)(this.strokeColor));\n    }\n    getTransformData(externalTransform) {\n        const rotateData = this.getRotateData(), rotating = this.isRotating;\n        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.a);\n        this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.b;\n        this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.c;\n        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultTransform.d);\n        return this._cachedTransform;\n    }\n    init(id, position, overrideOptions, group) {\n        const container = this.container;\n        this.id = id;\n        this.group = group;\n        this.effectClose = true;\n        this.effectFill = true;\n        this.shapeClose = true;\n        this.shapeFill = true;\n        this.pathRotation = false;\n        this.lastPathTime = 0;\n        this.destroyed = false;\n        this.unbreakable = false;\n        this.isRotating = false;\n        this.rotation = 0;\n        this.misplaced = false;\n        this.retina = {\n            maxDistance: {}\n        };\n        this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n        this.ignoresResizeRatio = true;\n        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadParticlesOptions)(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;\n        this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n        this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;\n        if (overrideOptions) {\n            if (overrideOptions.effect?.type) {\n                const overrideEffectType = overrideOptions.effect.type, effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n                if (effect) {\n                    this.effect = effect;\n                    effectOptions.load(overrideOptions.effect);\n                }\n            }\n            if (overrideOptions.shape?.type) {\n                const overrideShapeType = overrideOptions.shape.type, shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n                if (shape) {\n                    this.shape = shape;\n                    shapeOptions.load(overrideOptions.shape);\n                }\n            }\n        }\n        if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableEffects = [\n                ...this.container.particles.effectDrawers.keys()\n            ];\n            this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableEffects.length)];\n        }\n        if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.randomColorValue) {\n            const availableShapes = [\n                ...this.container.particles.shapeDrawers.keys()\n            ];\n            this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)() * availableShapes.length)];\n        }\n        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n        particlesOptions.load(overrideOptions);\n        const effectData = this.effectData;\n        if (effectData) {\n            particlesOptions.load(effectData.particles);\n        }\n        const shapeData = this.shapeData;\n        if (shapeData) {\n            particlesOptions.load(shapeData.particles);\n        }\n        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n        this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n        this.options = particlesOptions;\n        container.retina.initParticle(this);\n        this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n        this.bubble = {\n            inRange: false\n        };\n        this.slow = {\n            inRange: false,\n            factor: 1\n        };\n        this._initPosition(position);\n        this.initialVelocity = this._calculateVelocity();\n        this.velocity = this.initialVelocity.copy();\n        const particles = container.particles;\n        particles.setLastZIndex(this.position.z);\n        this.zIndexFactor = this.position.z / container.zLayers;\n        this.sides = 24;\n        let effectDrawer, shapeDrawer;\n        if (this.effect) {\n            effectDrawer = container.particles.effectDrawers.get(this.effect);\n        }\n        if (effectDrawer?.loadEffect) {\n            effectDrawer.loadEffect(this);\n        }\n        if (this.shape) {\n            shapeDrawer = container.particles.shapeDrawers.get(this.shape);\n        }\n        if (shapeDrawer?.loadShape) {\n            shapeDrawer.loadShape(this);\n        }\n        const sideCountFunc = shapeDrawer?.getSidesCount;\n        if (sideCountFunc) {\n            this.sides = sideCountFunc(this);\n        }\n        this.spawning = false;\n        for (const updater of particles.updaters){\n            updater.init(this);\n        }\n        effectDrawer?.particleInit?.(container, this);\n        shapeDrawer?.particleInit?.(container, this);\n        for (const plugin of container.particleCreatedPlugins){\n            plugin.particleCreated?.(this);\n        }\n    }\n    isInsideCanvas() {\n        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;\n        return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n    }\n    isShowingBack() {\n        if (!this.roll) {\n            return false;\n        }\n        const angle = this.roll.angle;\n        if (this.roll.horizontal && this.roll.vertical) {\n            const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI, adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.doublePI : normalizedAngle;\n            return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half;\n        }\n        if (this.roll.horizontal) {\n            const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        if (this.roll.vertical) {\n            const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double), adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double : normalizedAngle;\n            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.double;\n        }\n        return false;\n    }\n    isVisible() {\n        return !this.destroyed && !this.spawning && this.isInsideCanvas();\n    }\n    reset() {\n        for (const updater of this.container.particles.updaters){\n            updater.reset?.(this);\n        }\n    }\n    _calcPosition = (position, zIndex)=>{\n        let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.defaultRetryCount, posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n        const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;\n        while(!signal.aborted){\n            for (const plugin of plugins){\n                const pluginPos = plugin.particlePosition?.(posVec, this);\n                if (pluginPos) {\n                    return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n                }\n            }\n            const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.calcExactPositionOrRandomFromSize)({\n                size: canvasSize,\n                position: posVec\n            }), pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n            this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n            this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n            this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n            let isValidPosition = true;\n            for (const plugin of container.particles.checkParticlePositionPlugins){\n                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n                if (!isValidPosition) {\n                    break;\n                }\n            }\n            if (isValidPosition) {\n                return pos;\n            }\n            tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.tryCountIncrement;\n            posVec = undefined;\n        }\n        return posVec;\n    };\n    _calculateVelocity = ()=>{\n        const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;\n        if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n            return res;\n        }\n        const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.value)), radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(moveOptions.angle.offset)), range = {\n            left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half,\n            right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.half\n        };\n        if (!moveOptions.straight) {\n            res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.setRangeValue)(range.left, range.right));\n        }\n        if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n            res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRandom)();\n        }\n        return res;\n    };\n    _fixHorizontal = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.x,\n            maxCoord: this.container.canvas.size.width,\n            setCb: (value)=>pos.x += value,\n            radius\n        });\n    };\n    _fixVertical = (pos, radius, outMode)=>{\n        fixOutMode({\n            outMode,\n            checkModes: [\n                _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce\n            ],\n            coord: pos.y,\n            maxCoord: this.container.canvas.size.height,\n            setCb: (value)=>pos.y += value,\n            radius\n        });\n    };\n    _getRollColor = (color)=>{\n        if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n            return color;\n        }\n        if (!this.isShowingBack()) {\n            return color;\n        }\n        if (this.backColor) {\n            return this.backColor;\n        }\n        if (this.roll.alter) {\n            return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_1__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n        }\n        return color;\n    };\n    _initPosition = (position)=>{\n        const container = this.container, zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_4__.minZ, container.zLayers));\n        if (!initialPosition) {\n            throw new Error(\"a valid position cannot be found for particle\");\n        }\n        this.position = initialPosition;\n        this.initialPosition = this.position.copy();\n        const canvasSize = container.canvas.size;\n        this.moveCenter = {\n            ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n            radius: this.options.move.center.radius,\n            mode: this.options.move.center.mode\n        };\n        this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n        switch(this.options.move.direction){\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n                break;\n            case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n                this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.outside;\n                break;\n            default:\n                break;\n        }\n        this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 
@@ -55,7 +55,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \****************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Enums/Modes/LimitMode.js */ \"./dist/browser/Enums/Modes/LimitMode.js\");\n/* harmony import */ var _Particle_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Particle.js */ \"./dist/browser/Core/Particle.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Point.js */ \"./dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"./dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils/Ranges.js */ \"./dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"./dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nconst qTreeRectangle = (canvasSize)=>{\n    const { height, width } = canvasSize;\n    return new _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_6__.Rectangle(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.posOffset * width, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.posOffset * height, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.sizeFactor * width, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.sizeFactor * height);\n};\nclass Particles {\n    availablePathGenerators;\n    checkParticlePositionPlugins;\n    effectDrawers;\n    movers;\n    pathGenerators;\n    quadTree;\n    shapeDrawers;\n    updaters;\n    _array;\n    _container;\n    _engine;\n    _groupLimits;\n    _limit;\n    _maxZIndex;\n    _minZIndex;\n    _needsSort;\n    _nextId;\n    _particleResetPlugins;\n    _particleUpdatePlugins;\n    _pool;\n    _postParticleUpdatePlugins;\n    _postUpdatePlugins;\n    _resizeFactor;\n    _updatePlugins;\n    _zArray;\n    constructor(engine, container){\n        this._engine = engine;\n        this._container = container;\n        this._nextId = 0;\n        this._array = [];\n        this._zArray = [];\n        this._pool = [];\n        this._limit = 0;\n        this._groupLimits = new Map();\n        this._needsSort = false;\n        this._minZIndex = 0;\n        this._maxZIndex = 0;\n        const canvasSize = container.canvas.size;\n        this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__.QuadTree(qTreeRectangle(canvasSize), _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.qTreeCapacity);\n        this.effectDrawers = new Map();\n        this.movers = [];\n        this.availablePathGenerators = new Map();\n        this.pathGenerators = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    get count() {\n        return this._array.length;\n    }\n    addParticle(position, overrideOptions, group, initializer) {\n        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;\n        if (limit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit) {\n            switch(limitMode){\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.delete:\n                    {\n                        const countToRemove = currentCount + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.countOffset - limit;\n                        if (countToRemove > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minCount) {\n                            this.removeQuantity(countToRemove);\n                        }\n                        break;\n                    }\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.wait:\n                    if (currentCount >= limit) {\n                        return;\n                    }\n                    break;\n                default:\n                    break;\n            }\n        }\n        try {\n            const particle = this._pool.pop() ?? new _Particle_js__WEBPACK_IMPORTED_MODULE_3__.Particle(this._engine, this._container);\n            particle.init(this._nextId, position, overrideOptions, group);\n            let canAdd = true;\n            if (initializer) {\n                canAdd = initializer(particle);\n            }\n            if (!canAdd) {\n                this._pool.push(particle);\n                return;\n            }\n            this._array.push(particle);\n            this._zArray.push(particle);\n            this._nextId++;\n            this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleAdded, {\n                container: this._container,\n                data: {\n                    particle\n                }\n            });\n            return particle;\n        } catch (e) {\n            (0,_Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_7__.getLogger)().warning(`error adding particle: ${e}`);\n        }\n        return undefined;\n    }\n    clear() {\n        this._array = [];\n        this._zArray = [];\n    }\n    destroy() {\n        const container = this._container;\n        for (const [, effectDrawer] of this.effectDrawers){\n            effectDrawer.destroy?.(container);\n        }\n        for (const [, shapeDrawer] of this.shapeDrawers){\n            shapeDrawer.destroy?.(container);\n        }\n        this._array = [];\n        this._pool.length = 0;\n        this._zArray = [];\n        this.effectDrawers = new Map();\n        this.movers = [];\n        this.availablePathGenerators = new Map();\n        this.pathGenerators = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    drawParticles(delta) {\n        for (const particle of this._zArray){\n            particle.draw(delta);\n        }\n    }\n    filter(condition) {\n        return this._array.filter(condition);\n    }\n    find(condition) {\n        return this._array.find(condition);\n    }\n    get(index) {\n        return this._array[index];\n    }\n    async init() {\n        const container = this._container, options = container.actualOptions;\n        this._minZIndex = 0;\n        this._maxZIndex = 0;\n        this._needsSort = false;\n        this.checkParticlePositionPlugins = [];\n        this._updatePlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._particleResetPlugins = [];\n        this._postParticleUpdatePlugins = [];\n        for (const plugin of container.plugins){\n            if (plugin.redrawInit) {\n                await plugin.redrawInit();\n            }\n            if (plugin.checkParticlePosition) {\n                this.checkParticlePositionPlugins.push(plugin);\n            }\n            if (plugin.update) {\n                this._updatePlugins.push(plugin);\n            }\n            if (plugin.particleUpdate) {\n                this._particleUpdatePlugins.push(plugin);\n            }\n            if (plugin.postUpdate) {\n                this._postUpdatePlugins.push(plugin);\n            }\n            if (plugin.particleReset) {\n                this._particleResetPlugins.push(plugin);\n            }\n            if (plugin.postParticleUpdate) {\n                this._postParticleUpdatePlugins.push(plugin);\n            }\n        }\n        await this.initPlugins();\n        for (const drawer of this.effectDrawers.values()){\n            await drawer.init?.(container);\n        }\n        for (const drawer of this.shapeDrawers.values()){\n            await drawer.init?.(container);\n        }\n        let handled = false;\n        for (const plugin of container.plugins){\n            handled = plugin.particlesInitialization?.() ?? handled;\n            if (handled) {\n                break;\n            }\n        }\n        if (!handled) {\n            const particlesOptions = options.particles, groups = particlesOptions.groups;\n            for(const group in groups){\n                const groupOptions = groups[group];\n                if (!groupOptions) {\n                    continue;\n                }\n                for(let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++){\n                    this.addParticle(undefined, groupOptions, group);\n                }\n            }\n            for(let i = this.count; i < particlesOptions.number.value; i++){\n                this.addParticle();\n            }\n        }\n    }\n    async initPlugins() {\n        const container = this._container;\n        this.effectDrawers = await this._engine.getEffectDrawers(container, true);\n        this.movers = await this._engine.getMovers(container, true);\n        this.availablePathGenerators = await this._engine.getPathGenerators(container, true);\n        this.pathGenerators = new Map();\n        this.shapeDrawers = await this._engine.getShapeDrawers(container, true);\n        this.updaters = await this._engine.getUpdaters(container, true);\n        for (const pathGenerator of this.pathGenerators.values()){\n            pathGenerator.init();\n        }\n    }\n    push(nb, position, overrideOptions, group) {\n        for(let i = 0; i < nb; i++){\n            this.addParticle(position, overrideOptions, group);\n        }\n    }\n    async redraw() {\n        this.clear();\n        await this.init();\n        this._container.canvas.drawParticles({\n            value: 0,\n            factor: 0\n        });\n    }\n    remove(particle, group, override) {\n        this.removeAt(this._array.indexOf(particle), undefined, group, override);\n    }\n    removeAt(index, quantity = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRemoveQuantity, group, override) {\n        if (index < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex || index > this.count) {\n            return;\n        }\n        let deleted = 0;\n        for(let i = index; deleted < quantity && i < this.count; i++){\n            if (this._removeParticle(i, group, override)) {\n                i--;\n                deleted++;\n            }\n        }\n    }\n    removeQuantity(quantity, group) {\n        this.removeAt(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex, quantity, group);\n    }\n    setDensity() {\n        const options = this._container.actualOptions, groups = options.particles.groups;\n        let pluginsCount = 0;\n        for (const plugin of this._container.plugins){\n            if (plugin.particlesDensityCount) {\n                pluginsCount += plugin.particlesDensityCount();\n            }\n        }\n        for(const group in groups){\n            const groupData = groups[group];\n            if (!groupData) {\n                continue;\n            }\n            const groupDataOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__.loadParticlesOptions)(this._engine, this._container, groupData);\n            this._applyDensity(groupDataOptions, pluginsCount, group);\n        }\n        this._applyDensity(options.particles, pluginsCount);\n    }\n    setLastZIndex(zIndex) {\n        this._needsSort ||= zIndex >= this._maxZIndex || zIndex > this._minZIndex && zIndex < this._maxZIndex;\n    }\n    setResizeFactor(factor) {\n        this._resizeFactor = factor;\n    }\n    update(delta) {\n        const container = this._container, particlesToDelete = new Set();\n        this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_5__.QuadTree(qTreeRectangle(container.canvas.size), _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.qTreeCapacity);\n        for (const pathGenerator of this.pathGenerators.values()){\n            pathGenerator.update();\n        }\n        for (const plugin of this._updatePlugins){\n            plugin.update?.(delta);\n        }\n        const resizeFactor = this._resizeFactor;\n        for (const particle of this._array){\n            if (resizeFactor && !particle.ignoresResizeRatio) {\n                particle.position.x *= resizeFactor.width;\n                particle.position.y *= resizeFactor.height;\n                particle.initialPosition.x *= resizeFactor.width;\n                particle.initialPosition.y *= resizeFactor.height;\n            }\n            particle.ignoresResizeRatio = false;\n            for (const plugin of this._particleResetPlugins){\n                plugin.particleReset?.(particle);\n            }\n            for (const plugin of this._particleUpdatePlugins){\n                if (particle.destroyed) {\n                    break;\n                }\n                plugin.particleUpdate?.(particle, delta);\n            }\n            for (const mover of this.movers){\n                if (mover.isEnabled(particle)) {\n                    mover.move(particle, delta);\n                }\n            }\n            if (particle.destroyed) {\n                particlesToDelete.add(particle);\n                continue;\n            }\n            this.quadTree.insert(new _Utils_Point_js__WEBPACK_IMPORTED_MODULE_4__.Point(particle.getPosition(), particle));\n        }\n        if (particlesToDelete.size) {\n            const checkDelete = (p)=>!particlesToDelete.has(p);\n            this._array = this.filter(checkDelete);\n            this._zArray = this._zArray.filter(checkDelete);\n            for (const particle of particlesToDelete){\n                this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n                    container: this._container,\n                    data: {\n                        particle\n                    }\n                });\n            }\n            this._addToPool(...particlesToDelete);\n        }\n        for (const plugin of this._postUpdatePlugins){\n            plugin.postUpdate?.(delta);\n        }\n        for (const particle of this._array){\n            for (const updater of this.updaters){\n                updater.update(particle, delta);\n            }\n            if (!particle.destroyed && !particle.spawning) {\n                for (const plugin of this._postParticleUpdatePlugins){\n                    plugin.postParticleUpdate?.(particle, delta);\n                }\n            }\n        }\n        delete this._resizeFactor;\n        if (this._needsSort) {\n            const zArray = this._zArray;\n            zArray.sort((a, b)=>b.position.z - a.position.z || a.id - b.id);\n            const firstItem = zArray[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex], lastItem = zArray[zArray.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.lengthOffset];\n            if (!firstItem || !lastItem) {\n                return;\n            }\n            this._maxZIndex = firstItem.position.z;\n            this._minZIndex = lastItem.position.z;\n            this._needsSort = false;\n        }\n    }\n    _addToPool = (...particles)=>{\n        this._pool.push(...particles);\n    };\n    _applyDensity = (options, pluginsCount, group, groupOptions)=>{\n        const numberOptions = options.number;\n        if (!numberOptions.density.enable) {\n            if (group === undefined) {\n                this._limit = numberOptions.limit.value;\n            } else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {\n                this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);\n            }\n            return;\n        }\n        const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter((t)=>t.group === group).length);\n        if (group === undefined) {\n            this._limit = numberOptions.limit.value * densityFactor;\n        } else {\n            this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n        }\n        if (particlesCount < particlesNumber) {\n            this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n        } else if (particlesCount > particlesNumber) {\n            this.removeQuantity(particlesCount - particlesNumber, group);\n        }\n    };\n    _initDensityFactor = (densityOptions)=>{\n        const container = this._container;\n        if (!container.canvas.element || !densityOptions.enable) {\n            return _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultDensityFactor;\n        }\n        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;\n        return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.squareExp);\n    };\n    _removeParticle = (index, group, override)=>{\n        const particle = this._array[index];\n        if (!particle) {\n            return false;\n        }\n        if (particle.group !== group) {\n            return false;\n        }\n        const zIdx = this._zArray.indexOf(particle);\n        this._array.splice(index, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        this._zArray.splice(zIdx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        particle.destroy(override);\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n            container: this._container,\n            data: {\n                particle\n            }\n        });\n        this._addToPool(particle);\n        return true;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particles.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Enums/Modes/LimitMode.js */ \"./dist/browser/Enums/Modes/LimitMode.js\");\n/* harmony import */ var _Particle_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Particle.js */ \"./dist/browser/Core/Particle.js\");\n/* harmony import */ var _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/SpatialHashGrid.js */ \"./dist/browser/Core/Utils/SpatialHashGrid.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"./dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\nclass Particles {\n    checkParticlePositionPlugins;\n    effectDrawers;\n    grid;\n    shapeDrawers;\n    updaters;\n    _array;\n    _container;\n    _engine;\n    _groupLimits;\n    _limit;\n    _maxZIndex;\n    _minZIndex;\n    _needsSort;\n    _nextId;\n    _particleResetPlugins;\n    _particleUpdatePlugins;\n    _pool;\n    _postParticleUpdatePlugins;\n    _postUpdatePlugins;\n    _resizeFactor;\n    _updatePlugins;\n    _zArray;\n    constructor(engine, container){\n        this._engine = engine;\n        this._container = container;\n        this._nextId = 0;\n        this._array = [];\n        this._zArray = [];\n        this._pool = [];\n        this._limit = 0;\n        this._groupLimits = new Map();\n        this._needsSort = false;\n        this._minZIndex = 0;\n        this._maxZIndex = 0;\n        this.grid = new _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__.SpatialHashGrid(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.spatialHashGridCellSize);\n        this.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    get count() {\n        return this._array.length;\n    }\n    addParticle(position, overrideOptions, group, initializer) {\n        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;\n        if (limit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit) {\n            switch(limitMode){\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.delete:\n                    {\n                        const countToRemove = currentCount + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.countOffset - limit;\n                        if (countToRemove > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minCount) {\n                            this.removeQuantity(countToRemove);\n                        }\n                        break;\n                    }\n                case _Enums_Modes_LimitMode_js__WEBPACK_IMPORTED_MODULE_2__.LimitMode.wait:\n                    if (currentCount >= limit) {\n                        return;\n                    }\n                    break;\n                default:\n                    break;\n            }\n        }\n        try {\n            const particle = this._pool.pop() ?? new _Particle_js__WEBPACK_IMPORTED_MODULE_3__.Particle(this._engine, this._container);\n            particle.init(this._nextId, position, overrideOptions, group);\n            let canAdd = true;\n            if (initializer) {\n                canAdd = initializer(particle);\n            }\n            if (!canAdd) {\n                this._pool.push(particle);\n                return;\n            }\n            this._array.push(particle);\n            this._zArray.push(particle);\n            this._nextId++;\n            this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleAdded, {\n                container: this._container,\n                data: {\n                    particle\n                }\n            });\n            return particle;\n        } catch (e) {\n            (0,_Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_5__.getLogger)().warning(`error adding particle: ${e}`);\n        }\n        return undefined;\n    }\n    clear() {\n        this._array = [];\n        this._zArray = [];\n    }\n    destroy() {\n        const container = this._container;\n        for (const [, effectDrawer] of this.effectDrawers){\n            effectDrawer.destroy?.(container);\n        }\n        for (const [, shapeDrawer] of this.shapeDrawers){\n            shapeDrawer.destroy?.(container);\n        }\n        this._array = [];\n        this._pool.length = 0;\n        this._zArray = [];\n        this.effectDrawers = new Map();\n        this.shapeDrawers = new Map();\n        this.updaters = [];\n        this.checkParticlePositionPlugins = [];\n        this._particleResetPlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this._updatePlugins = [];\n    }\n    drawParticles(delta) {\n        for (const particle of this._zArray){\n            particle.draw(delta);\n        }\n    }\n    filter(condition) {\n        return this._array.filter(condition);\n    }\n    find(condition) {\n        return this._array.find(condition);\n    }\n    get(index) {\n        return this._array[index];\n    }\n    async init() {\n        const container = this._container, options = container.actualOptions;\n        this._minZIndex = 0;\n        this._maxZIndex = 0;\n        this._needsSort = false;\n        this.checkParticlePositionPlugins = [];\n        this._updatePlugins = [];\n        this._particleUpdatePlugins = [];\n        this._postUpdatePlugins = [];\n        this._particleResetPlugins = [];\n        this._postParticleUpdatePlugins = [];\n        this.grid = new _Utils_SpatialHashGrid_js__WEBPACK_IMPORTED_MODULE_4__.SpatialHashGrid(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.spatialHashGridCellSize * container.retina.pixelRatio);\n        for (const plugin of container.plugins){\n            if (plugin.redrawInit) {\n                await plugin.redrawInit();\n            }\n            if (plugin.checkParticlePosition) {\n                this.checkParticlePositionPlugins.push(plugin);\n            }\n            if (plugin.update) {\n                this._updatePlugins.push(plugin);\n            }\n            if (plugin.particleUpdate) {\n                this._particleUpdatePlugins.push(plugin);\n            }\n            if (plugin.postUpdate) {\n                this._postUpdatePlugins.push(plugin);\n            }\n            if (plugin.particleReset) {\n                this._particleResetPlugins.push(plugin);\n            }\n            if (plugin.postParticleUpdate) {\n                this._postParticleUpdatePlugins.push(plugin);\n            }\n        }\n        await this.initPlugins();\n        for (const drawer of this.effectDrawers.values()){\n            await drawer.init?.(container);\n        }\n        for (const drawer of this.shapeDrawers.values()){\n            await drawer.init?.(container);\n        }\n        let handled = false;\n        for (const plugin of container.plugins){\n            handled = plugin.particlesInitialization?.() ?? handled;\n            if (handled) {\n                break;\n            }\n        }\n        if (!handled) {\n            const particlesOptions = options.particles, groups = particlesOptions.groups;\n            for(const group in groups){\n                const groupOptions = groups[group];\n                if (!groupOptions) {\n                    continue;\n                }\n                for(let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++){\n                    this.addParticle(undefined, groupOptions, group);\n                }\n            }\n            for(let i = this.count; i < particlesOptions.number.value; i++){\n                this.addParticle();\n            }\n        }\n    }\n    async initPlugins() {\n        const container = this._container;\n        this.effectDrawers = await this._engine.getEffectDrawers(container, true);\n        this.shapeDrawers = await this._engine.getShapeDrawers(container, true);\n        this.updaters = await this._engine.getUpdaters(container, true);\n    }\n    push(nb, position, overrideOptions, group) {\n        for(let i = 0; i < nb; i++){\n            this.addParticle(position, overrideOptions, group);\n        }\n    }\n    async redraw() {\n        this.clear();\n        await this.init();\n        this._container.canvas.drawParticles({\n            value: 0,\n            factor: 0\n        });\n    }\n    remove(particle, group, override) {\n        this.removeAt(this._array.indexOf(particle), undefined, group, override);\n    }\n    removeAt(index, quantity = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultRemoveQuantity, group, override) {\n        if (index < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex || index > this.count) {\n            return;\n        }\n        let deleted = 0;\n        for(let i = index; deleted < quantity && i < this.count; i++){\n            if (this._removeParticle(i, group, override)) {\n                i--;\n                deleted++;\n            }\n        }\n    }\n    removeQuantity(quantity, group) {\n        this.removeAt(_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex, quantity, group);\n    }\n    setDensity() {\n        const options = this._container.actualOptions, groups = options.particles.groups;\n        let pluginsCount = 0;\n        for (const plugin of this._container.plugins){\n            if (plugin.particlesDensityCount) {\n                pluginsCount += plugin.particlesDensityCount();\n            }\n        }\n        for(const group in groups){\n            const groupData = groups[group];\n            if (!groupData) {\n                continue;\n            }\n            const groupDataOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_6__.loadParticlesOptions)(this._engine, this._container, groupData);\n            this._applyDensity(groupDataOptions, pluginsCount, group);\n        }\n        this._applyDensity(options.particles, pluginsCount);\n    }\n    setLastZIndex(zIndex) {\n        this._needsSort ||= zIndex >= this._maxZIndex || zIndex > this._minZIndex && zIndex < this._maxZIndex;\n    }\n    setResizeFactor(factor) {\n        this._resizeFactor = factor;\n    }\n    update(delta) {\n        const particlesToDelete = new Set();\n        this.grid.clear();\n        for (const plugin of this._updatePlugins){\n            plugin.update?.(delta);\n        }\n        const resizeFactor = this._resizeFactor;\n        for (const particle of this._array){\n            if (resizeFactor && !particle.ignoresResizeRatio) {\n                particle.position.x *= resizeFactor.width;\n                particle.position.y *= resizeFactor.height;\n                particle.initialPosition.x *= resizeFactor.width;\n                particle.initialPosition.y *= resizeFactor.height;\n            }\n            particle.ignoresResizeRatio = false;\n            for (const plugin of this._particleResetPlugins){\n                plugin.particleReset?.(particle);\n            }\n            for (const plugin of this._particleUpdatePlugins){\n                if (particle.destroyed) {\n                    break;\n                }\n                plugin.particleUpdate?.(particle, delta);\n            }\n            if (particle.destroyed) {\n                particlesToDelete.add(particle);\n                continue;\n            }\n            this.grid.insert(particle);\n        }\n        if (particlesToDelete.size) {\n            const checkDelete = (p)=>!particlesToDelete.has(p);\n            this._array = this.filter(checkDelete);\n            this._zArray = this._zArray.filter(checkDelete);\n            for (const particle of particlesToDelete){\n                this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n                    container: this._container,\n                    data: {\n                        particle\n                    }\n                });\n            }\n            this._addToPool(...particlesToDelete);\n        }\n        for (const plugin of this._postUpdatePlugins){\n            plugin.postUpdate?.(delta);\n        }\n        for (const particle of this._array){\n            for (const updater of this.updaters){\n                updater.update(particle, delta);\n            }\n            if (!particle.destroyed && !particle.spawning) {\n                for (const plugin of this._postParticleUpdatePlugins){\n                    plugin.postParticleUpdate?.(particle, delta);\n                }\n            }\n        }\n        delete this._resizeFactor;\n        if (this._needsSort) {\n            const zArray = this._zArray;\n            zArray.sort((a, b)=>b.position.z - a.position.z || a.id - b.id);\n            const firstItem = zArray[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minIndex], lastItem = zArray[zArray.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.lengthOffset];\n            if (!firstItem || !lastItem) {\n                return;\n            }\n            this._maxZIndex = firstItem.position.z;\n            this._minZIndex = lastItem.position.z;\n            this._needsSort = false;\n        }\n    }\n    _addToPool = (...particles)=>{\n        this._pool.push(...particles);\n    };\n    _applyDensity = (options, pluginsCount, group, groupOptions)=>{\n        const numberOptions = options.number;\n        if (!numberOptions.density.enable) {\n            if (group === undefined) {\n                this._limit = numberOptions.limit.value;\n            } else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {\n                this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);\n            }\n            return;\n        }\n        const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter((t)=>t.group === group).length);\n        if (group === undefined) {\n            this._limit = numberOptions.limit.value * densityFactor;\n        } else {\n            this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n        }\n        if (particlesCount < particlesNumber) {\n            this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n        } else if (particlesCount > particlesNumber) {\n            this.removeQuantity(particlesCount - particlesNumber, group);\n        }\n    };\n    _initDensityFactor = (densityOptions)=>{\n        const container = this._container;\n        if (!container.canvas.element || !densityOptions.enable) {\n            return _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.defaultDensityFactor;\n        }\n        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;\n        return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.squareExp);\n    };\n    _removeParticle = (index, group, override)=>{\n        const particle = this._array[index];\n        if (!particle) {\n            return false;\n        }\n        if (particle.group !== group) {\n            return false;\n        }\n        const zIdx = this._zArray.indexOf(particle);\n        this._array.splice(index, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        this._zArray.splice(zIdx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.deleteCount);\n        particle.destroy(override);\n        this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_1__.EventType.particleRemoved, {\n            container: this._container,\n            data: {\n                particle\n            }\n        });\n        this._addToPool(particle);\n        return true;\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particles.js?\n}");
 
 /***/ },
 
@@ -79,13 +79,13 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 
 /***/ },
 
-/***/ "./dist/browser/Core/Utils/QuadTree.js"
-/*!*********************************************!*\
-  !*** ./dist/browser/Core/Utils/QuadTree.js ***!
-  \*********************************************/
+/***/ "./dist/browser/Core/Utils/SpatialHashGrid.js"
+/*!****************************************************!*\
+  !*** ./dist/browser/Core/Utils/SpatialHashGrid.js ***!
+  \****************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"./dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n\n\n\nclass QuadTree {\n    rectangle;\n    capacity;\n    _points = [];\n    _subs = null;\n    constructor(rectangle, capacity){\n        this.rectangle = rectangle;\n        this.capacity = capacity;\n    }\n    insert(point) {\n        if (!this.rectangle.contains(point.position)) {\n            return false;\n        }\n        const subs = this._subs;\n        if (!subs) {\n            if (this._points.length < this.capacity) {\n                this._points.push(point);\n                return true;\n            }\n            this._subdivide();\n            const newSubs = this._subs;\n            for (const p of this._points){\n                for(let s = 0; s < _Constants_js__WEBPACK_IMPORTED_MODULE_1__.subdivideCount; s++){\n                    if (newSubs?.[s]?.insert(p)) {\n                        break;\n                    }\n                }\n            }\n            this._points.length = 0;\n            for(let s = 0; s < _Constants_js__WEBPACK_IMPORTED_MODULE_1__.subdivideCount; s++){\n                if (newSubs?.[s]?.insert(point)) {\n                    return true;\n                }\n            }\n            return false;\n        }\n        for(let s = 0; s < _Constants_js__WEBPACK_IMPORTED_MODULE_1__.subdivideCount; s++){\n            if (subs[s]?.insert(point)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    query(range, check, out = []) {\n        if (!range.intersects(this.rectangle)) {\n            return out;\n        }\n        const points = this._points;\n        for (const p of points){\n            const particle = p.particle;\n            if (!range.contains(p.position) && (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDistance)(range.position, p.position) > particle.getRadius()) {\n                continue;\n            }\n            if (check && !check(particle)) {\n                continue;\n            }\n            out.push(particle);\n        }\n        const subs = this._subs;\n        if (subs) {\n            for (const s of subs){\n                s.query(range, check, out);\n            }\n        }\n        return out;\n    }\n    queryCircle(position, radius, check) {\n        return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle(position.x, position.y, radius), check);\n    }\n    queryRectangle(position, size, check) {\n        return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(position.x, position.y, size.width, size.height), check);\n    }\n    _subdivide() {\n        const rect = this.rectangle, { x, y } = rect.position, { width, height } = rect.size, halfWidth = width * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half, halfHeight = height * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.half, capacity = this.capacity;\n        this._subs = [\n            new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x, y, halfWidth, halfHeight), capacity),\n            new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + halfWidth, y, halfWidth, halfHeight), capacity),\n            new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x, y + halfHeight, halfWidth, halfHeight), capacity),\n            new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + halfWidth, y + halfHeight, halfWidth, halfHeight), capacity)\n        ];\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/QuadTree.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SpatialHashGrid: () => (/* binding */ SpatialHashGrid)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"./dist/browser/Core/Utils/Ranges.js\");\n\nclass SpatialHashGrid {\n    _cellSize;\n    _cells = new Map();\n    _pendingCellSize;\n    constructor(cellSize){\n        this._cellSize = cellSize;\n    }\n    clear() {\n        this._cells.clear();\n        const pendingCellSize = this._pendingCellSize;\n        if (pendingCellSize) {\n            this._cellSize = pendingCellSize;\n        }\n        this._pendingCellSize = undefined;\n    }\n    insert(particle) {\n        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);\n        if (!this._cells.has(key)) {\n            this._cells.set(key, []);\n        }\n        this._cells.get(key)?.push(particle);\n    }\n    query(range, check, out = []) {\n        const bounds = this._getRangeBounds(range);\n        if (!bounds) {\n            return out;\n        }\n        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);\n        for(let cx = minCellX; cx <= maxCellX; cx++){\n            for(let cy = minCellY; cy <= maxCellY; cy++){\n                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);\n                if (!cellParticles) {\n                    continue;\n                }\n                for (const p of cellParticles){\n                    if (check && !check(p)) {\n                        continue;\n                    }\n                    if (range.contains(p.getPosition())) {\n                        out.push(p);\n                    }\n                }\n            }\n        }\n        return out;\n    }\n    queryCircle(position, radius, check, out = []) {\n        return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle(position.x, position.y, radius), check, out);\n    }\n    queryRectangle(position, size, check, out = []) {\n        return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(position.x, position.y, size.width, size.height), check, out);\n    }\n    setCellSize(cellSize) {\n        this._pendingCellSize = cellSize;\n    }\n    _cellKeyFromCoords(x, y) {\n        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);\n        return `${cellX}_${cellY}`;\n    }\n    _getRangeBounds(range) {\n        if (range instanceof _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle) {\n            const r = range.radius, { x, y } = range.position;\n            return {\n                minX: x - r,\n                maxX: x + r,\n                minY: y - r,\n                maxY: y + r\n            };\n        }\n        if (range instanceof _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle) {\n            const { x, y } = range.position, { width, height } = range.size;\n            return {\n                minX: x,\n                maxX: x + width,\n                minY: y,\n                maxY: y + height\n            };\n        }\n        return null;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Utils/SpatialHashGrid.js?\n}");
 
 /***/ }
 

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