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

package/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v4.0.0-alpha.24
+ * tsParticles Engine v4.0.0-alpha.25
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -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    availablePathGenerators;\n    checkParticlePositionPlugins;\n    effectDrawers;\n    grid;\n    movers;\n    pathGenerators;\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.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_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.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        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.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_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 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.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

@@ -87,7 +87,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.24";
+        return "4.0.0-alpha.25";
     }
     addColorManager(name, manager) {
         this.colorManagers.set(name, manager);

package/esm/Core/Particles.js

@@ -1,23 +1,17 @@
-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;
+    grid;
     movers;
     pathGenerators;
-    quadTree;
     shapeDrawers;
     updaters;
     _array;
@@ -49,8 +43,7 @@ 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();
@@ -167,6 +160,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();
@@ -285,8 +279,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);
+        const particlesToDelete = new Set();
+        this.grid.clear();
         for (const pathGenerator of this.pathGenerators.values()) {
             pathGenerator.update();
         }
@@ -320,7 +314,7 @@ export class Particles {
                 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/SpatialHashGrid.js

@@ -0,0 +1,82 @@
+import { Circle, Rectangle } from "./Ranges.js";
+export class SpatialHashGrid {
+    _cellSize;
+    _cells = new Map();
+    _pendingCellSize;
+    constructor(cellSize) {
+        this._cellSize = cellSize;
+    }
+    clear() {
+        this._cells.clear();
+        const pendingCellSize = this._pendingCellSize;
+        if (pendingCellSize) {
+            this._cellSize = pendingCellSize;
+        }
+        this._pendingCellSize = undefined;
+    }
+    insert(particle) {
+        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
+        if (!this._cells.has(key)) {
+            this._cells.set(key, []);
+        }
+        this._cells.get(key)?.push(particle);
+    }
+    query(range, check, out = []) {
+        const bounds = this._getRangeBounds(range);
+        if (!bounds) {
+            return out;
+        }
+        const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+        for (let cx = minCellX; cx <= maxCellX; cx++) {
+            for (let cy = minCellY; cy <= maxCellY; cy++) {
+                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                if (!cellParticles) {
+                    continue;
+                }
+                for (const p of cellParticles) {
+                    if (check && !check(p)) {
+                        continue;
+                    }
+                    if (range.contains(p.getPosition())) {
+                        out.push(p);
+                    }
+                }
+            }
+        }
+        return out;
+    }
+    queryCircle(position, radius, check, out = []) {
+        return this.query(new Circle(position.x, position.y, radius), check, out);
+    }
+    queryRectangle(position, size, check, out = []) {
+        return this.query(new Rectangle(position.x, position.y, size.width, size.height), check, out);
+    }
+    setCellSize(cellSize) {
+        this._pendingCellSize = cellSize;
+    }
+    _cellKeyFromCoords(x, y) {
+        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+        return `${cellX}_${cellY}`;
+    }
+    _getRangeBounds(range) {
+        if (range instanceof Circle) {
+            const r = range.radius, { x, y } = range.position;
+            return {
+                minX: x - r,
+                maxX: x + r,
+                minY: y - r,
+                maxY: y + r,
+            };
+        }
+        if (range instanceof Rectangle) {
+            const { x, y } = range.position, { width, height } = range.size;
+            return {
+                minX: x,
+                maxX: x + width,
+                minY: y,
+                maxY: y + height,
+            };
+        }
+        return null;
+    }
+}

package/esm/Core/Utils/Vectors.js

@@ -43,12 +43,6 @@ export class Vector3d {
     copy() {
         return Vector3d.clone(this);
     }
-    distanceTo(v) {
-        return this.sub(v).length;
-    }
-    distanceToSq(v) {
-        return this.sub(v).getLengthSq();
-    }
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
@@ -80,8 +74,7 @@ export class Vector3d {
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
-        const v3d = c;
-        this.z = v3d.z ? v3d.z : originPoint.z;
+        this.z = "z" in c ? c.z : originPoint.z;
     }
     sub(v) {
         return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
@@ -91,10 +84,10 @@ export class Vector3d {
         this.y -= v.y;
         this.z -= v.z;
     }
-    _updateFromAngle = (angle, length) => {
+    _updateFromAngle(angle, length) {
         this.x = Math.cos(angle) * length;
         this.y = Math.sin(angle) * length;
-    };
+    }
 }
 export class Vector extends Vector3d {
     constructor(x = originPoint.x, y = originPoint.y) {

package/esm/exports.js

@@ -1,5 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";

package/package.json

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

package/report.html

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