@tsparticles/engine 4.0.0-alpha.4 → 4.0.0-alpha.8

package/cjs/Core/Engine.js

@@ -57,7 +57,10 @@ export class Engine {
         this._domArray = [];
         this._eventDispatcher = new EventDispatcher();
         this._initialized = false;
+        this._isRunningLoaders = false;
         this._loadPromises = new Set();
+        this._allLoadersSet = new Set();
+        this._executedSet = new Set();
         this.plugins = [];
         this.colorManagers = new Map();
         this.easingFunctions = new Map();
@@ -83,7 +86,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.4";
+        return "4.0.0-alpha.8";
     }
     addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
@@ -184,40 +187,21 @@ export class Engine {
         return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
     async init() {
-        if (this._initialized) {
+        if (this._initialized || this._isRunningLoaders)
             return;
-        }
-        const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
-        while (stack.length) {
-            const loader = stack.shift();
-            if (!loader) {
-                continue;
-            }
-            if (executed.has(loader)) {
-                continue;
-            }
-            executed.add(loader);
-            const inner = [], origRegister = this.register.bind(this);
-            this.register = (...loaders) => {
-                inner.push(...loaders);
-                for (const loader of loaders) {
-                    allLoaders.add(loader);
-                }
-            };
-            try {
-                await loader(this);
+        this._isRunningLoaders = true;
+        this._executedSet = new Set();
+        this._allLoadersSet = new Set(this._loadPromises);
+        try {
+            for (const loader of this._allLoadersSet) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
             }
-            finally {
-                this.register = origRegister;
-            }
-            stack.unshift(...inner);
-            this._loadPromises.delete(loader);
         }
-        this._loadPromises.clear();
-        for (const loader of allLoaders) {
-            this._loadPromises.add(loader);
+        finally {
+            this._loadPromises.clear();
+            this._isRunningLoaders = false;
+            this._initialized = true;
         }
-        this._initialized = true;
     }
     item(index) {
         const { items } = this, item = items[index];
@@ -229,10 +213,7 @@ export class Engine {
     }
     async load(params) {
         await this.init();
-        this._loadPromises.clear();
-        const { Container } = await import("./Container.js"), id = params.id ??
-            params.element?.id ??
-            `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+        const { Container } = await import("./Container.js"), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
@@ -261,15 +242,27 @@ export class Engine {
         }
         await Promise.all(this.items.map(t => t.refresh()));
     }
-    register(...loadPromises) {
+    async register(...loaders) {
         if (this._initialized) {
-            throw new Error(`Register plugins can only be done before calling tsParticles.load()`);
+            throw new Error("Register plugins can only be done before calling tsParticles.load()");
         }
-        for (const loadPromise of loadPromises) {
-            this._loadPromises.add(loadPromise);
+        for (const loader of loaders) {
+            if (this._isRunningLoaders) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+            else {
+                this._loadPromises.add(loader);
+            }
         }
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
+    async _runLoader(loader, executed, allLoaders) {
+        if (executed.has(loader))
+            return;
+        executed.add(loader);
+        allLoaders.add(loader);
+        await loader(this);
+    }
 }

package/cjs/Core/Particle.js

@@ -1,6 +1,6 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, half, identity, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.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 { EventType } from "../Enums/Types/EventType.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
@@ -124,8 +124,7 @@ export class Particle {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double;
-            if (!rolled) {
+            if (!this.isShowingBack()) {
                 return color;
             }
             if (this.backColor) {
@@ -286,9 +285,7 @@ export class Particle {
             const availableShapes = [...this.container.shapeDrawers.keys()];
             this.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
         }
-        this.effectData = this.effect
-            ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates)
-            : undefined;
+        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
         this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
         particlesOptions.load(overrideOptions);
         const effectData = this.effectData;
@@ -378,6 +375,25 @@ export class Particle {
             position.y <= canvasSize.height + radius &&
             position.x <= canvasSize.width + radius);
     }
+    isShowingBack() {
+        if (!this.roll) {
+            return false;
+        }
+        const angle = this.roll.angle;
+        if (this.roll.horizontal && this.roll.vertical) {
+            const normalizedAngle = angle % doublePI, adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + doublePI : normalizedAngle;
+            return adjustedAngle >= Math.PI * half && adjustedAngle < Math.PI * triple * half;
+        }
+        if (this.roll.horizontal) {
+            const normalizedAngle = (angle + Math.PI * half) % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        if (this.roll.vertical) {
+            const normalizedAngle = angle % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        return false;
+    }
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }

package/cjs/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.0, 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, rollFactor = 1, 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;
+}, 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.0, 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;

package/cjs/Enums/Types/EasingType.js

@@ -1,30 +1,45 @@
 export var EasingType;
 (function (EasingType) {
     EasingType["easeInBack"] = "ease-in-back";
+    EasingType["easeInBounce"] = "ease-in-bounce";
     EasingType["easeInCirc"] = "ease-in-circ";
     EasingType["easeInCubic"] = "ease-in-cubic";
+    EasingType["easeInElastic"] = "ease-in-elastic";
+    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInGaussian"] = "ease-in-gaussian";
     EasingType["easeInLinear"] = "ease-in-linear";
     EasingType["easeInQuad"] = "ease-in-quad";
     EasingType["easeInQuart"] = "ease-in-quart";
     EasingType["easeInQuint"] = "ease-in-quint";
-    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInSigmoid"] = "ease-in-sigmoid";
     EasingType["easeInSine"] = "ease-in-sine";
+    EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
     EasingType["easeOutBack"] = "ease-out-back";
+    EasingType["easeOutBounce"] = "ease-out-bounce";
     EasingType["easeOutCirc"] = "ease-out-circ";
     EasingType["easeOutCubic"] = "ease-out-cubic";
+    EasingType["easeOutElastic"] = "ease-out-elastic";
+    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutGaussian"] = "ease-out-gaussian";
     EasingType["easeOutLinear"] = "ease-out-linear";
     EasingType["easeOutQuad"] = "ease-out-quad";
     EasingType["easeOutQuart"] = "ease-out-quart";
     EasingType["easeOutQuint"] = "ease-out-quint";
-    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
     EasingType["easeOutSine"] = "ease-out-sine";
+    EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
     EasingType["easeInOutBack"] = "ease-in-out-back";
+    EasingType["easeInOutBounce"] = "ease-in-out-bounce";
     EasingType["easeInOutCirc"] = "ease-in-out-circ";
     EasingType["easeInOutCubic"] = "ease-in-out-cubic";
+    EasingType["easeInOutElastic"] = "ease-in-out-elastic";
+    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
     EasingType["easeInOutLinear"] = "ease-in-out-linear";
     EasingType["easeInOutQuad"] = "ease-in-out-quad";
     EasingType["easeInOutQuart"] = "ease-in-out-quart";
     EasingType["easeInOutQuint"] = "ease-in-out-quint";
-    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
     EasingType["easeInOutSine"] = "ease-in-out-sine";
+    EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
 })(EasingType || (EasingType = {}));

package/cjs/Utils/CanvasUtils.js

@@ -1,11 +1,5 @@
 import { lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
-export function clearDrawPlugin(context, plugin, delta) {
-    if (!plugin.clearDraw) {
-        return;
-    }
-    plugin.clearDraw(context, delta);
-}
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -121,12 +115,6 @@ export function drawShapeBeforeDraw(container, data) {
     }
     drawer.beforeDraw(data);
 }
-export function drawPlugin(context, plugin, delta) {
-    if (!plugin.draw) {
-        return;
-    }
-    plugin.draw(context, delta);
-}
 export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;

package/cjs/Utils/Utils.js

@@ -98,11 +98,15 @@ export function deepExtend(destination, ...sources) {
             continue;
         }
         const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray && (isObject(destination) || !destination || !Array.isArray(destination))) {
-            destination = [];
+        if (sourceIsArray) {
+            if (!Array.isArray(destination)) {
+                destination = [];
+            }
         }
-        else if (!sourceIsArray && (isObject(destination) || !destination || Array.isArray(destination))) {
-            destination = {};
+        else {
+            if (!isObject(destination) || Array.isArray(destination)) {
+                destination = {};
+            }
         }
         for (const key in source) {
             if (key === "__proto__") {

package/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v4.0.0-alpha.4
+ * tsParticles Engine v4.0.0-alpha.8
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -25,7 +25,7 @@
   \*************************************/
 (__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 */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n  sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key];\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas,\n    elementStyle = element.style,\n    keys = new Set();\n  for (let i = 0; i < elementStyle.length; i++) {\n    const key = elementStyle.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (let i = 0; i < style.length; i++) {\n    const key = style.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (value) {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    } else {\n      elementStyle.removeProperty(key);\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\n    this._reusableColorStyles = {};\n    this._reusablePluginColors = [undefined, undefined];\n    this._reusableTransform = {};\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      this._reusablePluginColors[fColorIndex] = fColor;\n      this._reusablePluginColors[sColorIndex] = sColor;\n      return this._reusablePluginColors;\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !Object.hasOwn(options.style, key)) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => {\n        observer.disconnect();\n      });\n      this._initStyle();\n      this.initBackground();\n      const pointerEvents = this._pointerEvents;\n      element.style.pointerEvents = pointerEvents;\n      element.setAttribute(\"pointer-events\", pointerEvents);\n      this._safeMutationObserver(observer => {\n        if (!(element instanceof Node)) {\n          return;\n        }\n        observer.observe(element, {\n          attributes: true\n        });\n      });\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!element || !originalStyle) {\n        return;\n      }\n      setStyle(element, originalStyle, true);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n    this._engine = engine;\n    this._standardSize = {\n      height: 0,\n      width: 0\n    };\n    const pxRatio = container.retina.pixelRatio,\n      stdSize = this._standardSize;\n    this.size = {\n      height: stdSize.height * pxRatio,\n      width: stdSize.width * pxRatio\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n    this._pointerEvents = \"none\";\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  canvasClear() {\n    if (!this.container.actualOptions.clear) {\n      return;\n    }\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  clear() {\n    let pluginHandled = false;\n    for (const plugin of this.container.plugins) {\n      if (!pluginHandled && plugin.canvasClear) {\n        pluginHandled = plugin.canvasClear();\n      }\n    }\n    if (pluginHandled) {\n      return;\n    }\n    this.canvasClear();\n  }\n  clearDrawPlugin(plugin, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clearDrawPlugin)(ctx, plugin, delta);\n    });\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n      this.element = undefined;\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius();\n    if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    fColor ??= pfColor;\n    sColor ??= psColor;\n    if (!fColor && !sColor) {\n      return;\n    }\n    const container = this.container,\n      zIndexOptions = particle.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n      {\n        opacity,\n        strokeOpacity\n      } = particle.getOpacity(),\n      transform = this._reusableTransform,\n      colorStyles = this._reusableColorStyles,\n      fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n      stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n    transform.a = transform.b = transform.c = transform.d = undefined;\n    colorStyles.fill = fill;\n    colorStyles.stroke = stroke;\n    this.draw(context => {\n      this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context,\n        particle,\n        delta,\n        colorStyles,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: opacity,\n        transform\n      });\n    });\n    this._applyPostDrawUpdaters(particle);\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n    });\n  }\n  drawParticles(delta) {\n    const {\n      particles,\n      plugins\n    } = this.container;\n    this.clear();\n    particles.update(delta);\n    for (const plugin of plugins.values()) {\n      this.drawPlugin(plugin, delta);\n    }\n    this.draw(() => {\n      particles.drawParticles(delta);\n    });\n    for (const plugin of plugins.values()) {\n      this.clearDrawPlugin(plugin, delta);\n    }\n  }\n  drawPlugin(plugin, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta);\n    });\n  }\n  init() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const {\n        container\n      } = this,\n      options = container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style,\n      color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n    if (color) {\n      elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const plugin of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    const container = this.container;\n    this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n    const standardSize = this._standardSize;\n    standardSize.height = canvas.offsetHeight;\n    standardSize.width = canvas.offsetWidth;\n    const pxRatio = this.container.retina.pixelRatio,\n      retinaSize = this.size;\n    canvas.height = retinaSize.height = standardSize.height * pxRatio;\n    canvas.width = retinaSize.width = standardSize.width * pxRatio;\n    const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n    this._context = this.element.getContext(\"2d\", {\n      alpha: true,\n      colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n      desynchronized: true,\n      willReadFrequently: false\n    });\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    container.retina.init();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n  }\n  paint() {\n    let handled = false;\n    for (const plugin of this.container.plugins) {\n      if (handled) {\n        break;\n      }\n      handled = plugin.canvasPaint?.() ?? false;\n    }\n    if (handled) {\n      return;\n    }\n    this.paintBase();\n  }\n  paintBase(baseColor) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n    });\n  }\n  paintImage(image, opacity) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      currentSize = container.canvas._standardSize,\n      newSize = {\n        width: this.element.offsetWidth,\n        height: this.element.offsetHeight\n      },\n      pxRatio = container.retina.pixelRatio,\n      retinaSize = {\n        width: newSize.width * pxRatio,\n        height: newSize.height * pxRatio\n      };\n    if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...currentSize\n    };\n    currentSize.height = newSize.height;\n    currentSize.width = newSize.width;\n    const canvasSize = this.size;\n    this.element.width = canvasSize.width = retinaSize.width;\n    this.element.height = canvasSize.height = retinaSize.height;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: currentSize.width / oldSize.width,\n        height: currentSize.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  setPointerEvents(type) {\n    const element = this.element;\n    if (!element) {\n      return;\n    }\n    this._pointerEvents = type;\n    this._repairStyle();\n  }\n  stop() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = undefined;\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Canvas.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n  sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key];\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas,\n    elementStyle = element.style,\n    keys = new Set();\n  for (let i = 0; i < elementStyle.length; i++) {\n    const key = elementStyle.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (let i = 0; i < style.length; i++) {\n    const key = style.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (value) {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    } else {\n      elementStyle.removeProperty(key);\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\n    this._reusableColorStyles = {};\n    this._reusablePluginColors = [undefined, undefined];\n    this._reusableTransform = {};\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      this._reusablePluginColors[fColorIndex] = fColor;\n      this._reusablePluginColors[sColorIndex] = sColor;\n      return this._reusablePluginColors;\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !Object.hasOwn(options.style, key)) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => {\n        observer.disconnect();\n      });\n      this._initStyle();\n      this.initBackground();\n      const pointerEvents = this._pointerEvents;\n      element.style.pointerEvents = pointerEvents;\n      element.setAttribute(\"pointer-events\", pointerEvents);\n      this._safeMutationObserver(observer => {\n        if (!(element instanceof Node)) {\n          return;\n        }\n        observer.observe(element, {\n          attributes: true\n        });\n      });\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!element || !originalStyle) {\n        return;\n      }\n      setStyle(element, originalStyle, true);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n    this._engine = engine;\n    this._standardSize = {\n      height: 0,\n      width: 0\n    };\n    const pxRatio = container.retina.pixelRatio,\n      stdSize = this._standardSize;\n    this.size = {\n      height: stdSize.height * pxRatio,\n      width: stdSize.width * pxRatio\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n    this._pointerEvents = \"none\";\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  canvasClear() {\n    if (!this.container.actualOptions.clear) {\n      return;\n    }\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  clear() {\n    let pluginHandled = false;\n    for (const plugin of this.container.plugins) {\n      if (!pluginHandled && plugin.canvasClear) {\n        pluginHandled = plugin.canvasClear();\n      }\n    }\n    if (pluginHandled) {\n      return;\n    }\n    this.canvasClear();\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n      this.element = undefined;\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius();\n    if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    fColor ??= pfColor;\n    sColor ??= psColor;\n    if (!fColor && !sColor) {\n      return;\n    }\n    const container = this.container,\n      zIndexOptions = particle.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n      {\n        opacity,\n        strokeOpacity\n      } = particle.getOpacity(),\n      transform = this._reusableTransform,\n      colorStyles = this._reusableColorStyles,\n      fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n      stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n    transform.a = transform.b = transform.c = transform.d = undefined;\n    colorStyles.fill = fill;\n    colorStyles.stroke = stroke;\n    this.draw(context => {\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleSetup) {\n          plugin.drawParticleSetup(context, particle, delta);\n        }\n      }\n      this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context,\n        particle,\n        delta,\n        colorStyles,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: opacity,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleCleanup) {\n          plugin.drawParticleCleanup(context, particle, delta);\n        }\n      }\n    });\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n    });\n  }\n  drawParticles(delta) {\n    const {\n      particles,\n      plugins\n    } = this.container;\n    this.clear();\n    particles.update(delta);\n    this.draw(ctx => {\n      for (const plugin of plugins) {\n        plugin.drawSettingsSetup?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.draw?.(ctx, delta);\n      }\n      particles.drawParticles(delta);\n      for (const plugin of plugins) {\n        plugin.clearDraw?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.drawSettingsCleanup?.(ctx, delta);\n      }\n    });\n  }\n  init() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const {\n        container\n      } = this,\n      options = container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style,\n      color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n    if (color) {\n      elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const plugin of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    const container = this.container;\n    this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n    const standardSize = this._standardSize;\n    standardSize.height = canvas.offsetHeight;\n    standardSize.width = canvas.offsetWidth;\n    const pxRatio = this.container.retina.pixelRatio,\n      retinaSize = this.size;\n    canvas.height = retinaSize.height = standardSize.height * pxRatio;\n    canvas.width = retinaSize.width = standardSize.width * pxRatio;\n    const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n    this._context = this.element.getContext(\"2d\", {\n      alpha: true,\n      colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n      desynchronized: true,\n      willReadFrequently: false\n    });\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    container.retina.init();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n  }\n  paint() {\n    let handled = false;\n    for (const plugin of this.container.plugins) {\n      if (handled) {\n        break;\n      }\n      handled = plugin.canvasPaint?.() ?? false;\n    }\n    if (handled) {\n      return;\n    }\n    this.paintBase();\n  }\n  paintBase(baseColor) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n    });\n  }\n  paintImage(image, opacity) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      currentSize = container.canvas._standardSize,\n      newSize = {\n        width: this.element.offsetWidth,\n        height: this.element.offsetHeight\n      },\n      pxRatio = container.retina.pixelRatio,\n      retinaSize = {\n        width: newSize.width * pxRatio,\n        height: newSize.height * pxRatio\n      };\n    if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...currentSize\n    };\n    currentSize.height = newSize.height;\n    currentSize.width = newSize.width;\n    const canvasSize = this.size;\n    this.element.width = canvasSize.width = retinaSize.width;\n    this.element.height = canvasSize.height = retinaSize.height;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: currentSize.width / oldSize.width,\n        height: currentSize.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  setPointerEvents(type) {\n    const element = this.element;\n    if (!element) {\n      return;\n    }\n    this._pointerEvents = type;\n    this._repairStyle();\n  }\n  stop() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = undefined;\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Canvas.js?\n}");
 
 /***/ },
 
@@ -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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.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 _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\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_2__.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  constructor(engine, container) {\n    this.container = container;\n    this._cachedOpacityData = {\n      opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n      strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n    };\n    this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    this._cachedRotateData = {\n      sin: 0,\n      cos: 0\n    };\n    this._cachedTransform = {\n      a: 1,\n      b: 0,\n      c: 0,\n      d: 1\n    };\n    this._calcPosition = (position, zIndex) => {\n      let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n        posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n      const container = this.container,\n        plugins = Array.from(container.plugins),\n        outModes = this.options.move.outModes,\n        radius = this.getRadius(),\n        canvasSize = container.canvas.size,\n        abortController = new AbortController(),\n        {\n          signal\n        } = 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_1__.calcExactPositionOrRandomFromSize)({\n            size: canvasSize,\n            position: posVec\n          }),\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 plugins) {\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_2__.tryCountIncrement;\n        posVec = undefined;\n      }\n      return posVec;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside) {\n        return res;\n      }\n      const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n          right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._fixHorizontal = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.x,\n        maxCoord: this.container.canvas.size.width,\n        setCb: value => pos.x += value,\n        radius\n      });\n    };\n    this._fixVertical = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.y,\n        maxCoord: this.container.canvas.size.height,\n        setCb: value => pos.y += value,\n        radius\n      });\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      const backFactor = this.roll.horizontal && this.roll.vertical ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor,\n        backSum = this.roll.horizontal ? Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.none,\n        rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n      if (!rolled) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n      const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.inside;\n          break;\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.outside;\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\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,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n    shapeDrawer?.particleDestroy?.(this);\n    for (const plugin of container.plugins) {\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_4__.EventType.particleDestroyed, {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const plugin of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getAngle() {\n    return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n  }\n  getOpacity() {\n    const zIndexOptions = this.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n      zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n      opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n      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_9__.getHslFromAnimation)(this.strokeColor));\n  }\n  getTransformData(externalTransform) {\n    const rotateData = this.getRotateData(),\n      rotating = this.isRotating;\n    this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n    this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n    this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n    this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_7__.ParticleOutType.normal;\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      reduceDuplicates = particlesOptions.reduceDuplicates,\n      effectType = particlesOptions.effect.type,\n      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,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          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,\n          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_2__.randomColorValue) {\n      const availableEffects = [...this.container.effectDrawers.keys()];\n      this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n    }\n    if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableShapes = [...this.container.shapeDrawers.keys()];\n      this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.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_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\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    this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.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.effectDrawers.get(this.effect);\n      if (!effectDrawer) {\n        effectDrawer = this._engine.getEffectDrawer(this.effect);\n        if (effectDrawer) {\n          container.effectDrawers.set(this.effect, effectDrawer);\n        }\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    if (this.shape) {\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n      if (!shapeDrawer) {\n        shapeDrawer = this._engine.getShapeDrawer(this.shape);\n        if (shapeDrawer) {\n          container.shapeDrawers.set(this.shape, shapeDrawer);\n        }\n      }\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.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\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}\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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"./dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.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 _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"./dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"./dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"./dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"./dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"./dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"./dist/browser/Utils/OptionsUtils.js\");\n\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_2__.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  constructor(engine, container) {\n    this.container = container;\n    this._cachedOpacityData = {\n      opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n      strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n    };\n    this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    this._cachedRotateData = {\n      sin: 0,\n      cos: 0\n    };\n    this._cachedTransform = {\n      a: 1,\n      b: 0,\n      c: 0,\n      d: 1\n    };\n    this._calcPosition = (position, zIndex) => {\n      let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n        posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n      const container = this.container,\n        plugins = Array.from(container.plugins),\n        outModes = this.options.move.outModes,\n        radius = this.getRadius(),\n        canvasSize = container.canvas.size,\n        abortController = new AbortController(),\n        {\n          signal\n        } = 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_1__.calcExactPositionOrRandomFromSize)({\n            size: canvasSize,\n            position: posVec\n          }),\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 plugins) {\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_2__.tryCountIncrement;\n        posVec = undefined;\n      }\n      return posVec;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside) {\n        return res;\n      }\n      const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n          right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._fixHorizontal = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.x,\n        maxCoord: this.container.canvas.size.width,\n        setCb: value => pos.x += value,\n        radius\n      });\n    };\n    this._fixVertical = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.y,\n        maxCoord: this.container.canvas.size.height,\n        setCb: value => pos.y += value,\n        radius\n      });\n    };\n    this._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_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n      const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.inside;\n          break;\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.outside;\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\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,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n    shapeDrawer?.particleDestroy?.(this);\n    for (const plugin of container.plugins) {\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_4__.EventType.particleDestroyed, {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const plugin of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getAngle() {\n    return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n  }\n  getOpacity() {\n    const zIndexOptions = this.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n      zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n      opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n      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_9__.getHslFromAnimation)(this.strokeColor));\n  }\n  getTransformData(externalTransform) {\n    const rotateData = this.getRotateData(),\n      rotating = this.isRotating;\n    this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n    this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n    this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n    this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_7__.ParticleOutType.normal;\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      reduceDuplicates = particlesOptions.reduceDuplicates,\n      effectType = particlesOptions.effect.type,\n      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,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          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,\n          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_2__.randomColorValue) {\n      const availableEffects = [...this.container.effectDrawers.keys()];\n      this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n    }\n    if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableShapes = [...this.container.shapeDrawers.keys()];\n      this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.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_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\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    this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.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.effectDrawers.get(this.effect);\n      if (!effectDrawer) {\n        effectDrawer = this._engine.getEffectDrawer(this.effect);\n        if (effectDrawer) {\n          container.effectDrawers.set(this.effect, effectDrawer);\n        }\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    if (this.shape) {\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n      if (!shapeDrawer) {\n        shapeDrawer = this._engine.getShapeDrawer(this.shape);\n        if (shapeDrawer) {\n          container.shapeDrawers.set(this.shape, shapeDrawer);\n        }\n      }\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.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      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_2__.doublePI,\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.doublePI : normalizedAngle;\n      return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n    }\n    if (this.roll.horizontal) {\n      const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n    }\n    if (this.roll.vertical) {\n      const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 

package/esm/Core/Canvas.js

@@ -1,4 +1,4 @@
-import { clear, clearDrawPlugin, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage, } from "../Utils/CanvasUtils.js";
+import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
 import { defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
@@ -194,11 +194,6 @@ export class Canvas {
         }
         this.canvasClear();
     }
-    clearDrawPlugin(plugin, delta) {
-        this.draw(ctx => {
-            clearDrawPlugin(ctx, plugin, delta);
-        });
-    }
     destroy() {
         this.stop();
         if (this._generated) {
@@ -241,6 +236,11 @@ export class Canvas {
         colorStyles.fill = fill;
         colorStyles.stroke = stroke;
         this.draw((context) => {
+            for (const plugin of container.plugins) {
+                if (plugin.drawParticleSetup) {
+                    plugin.drawParticleSetup(context, particle, delta);
+                }
+            }
             this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
             drawParticle({
                 container,
@@ -252,8 +252,13 @@ export class Canvas {
                 opacity: opacity,
                 transform,
             });
+            this._applyPostDrawUpdaters(particle);
+            for (const plugin of container.plugins) {
+                if (plugin.drawParticleCleanup) {
+                    plugin.drawParticleCleanup(context, particle, delta);
+                }
+            }
         });
-        this._applyPostDrawUpdaters(particle);
     }
     drawParticlePlugin(plugin, particle, delta) {
         this.draw(ctx => {
@@ -264,19 +269,20 @@ export class Canvas {
         const { particles, plugins } = this.container;
         this.clear();
         particles.update(delta);
-        for (const plugin of plugins.values()) {
-            this.drawPlugin(plugin, delta);
-        }
-        this.draw(() => {
-            particles.drawParticles(delta);
-        });
-        for (const plugin of plugins.values()) {
-            this.clearDrawPlugin(plugin, delta);
-        }
-    }
-    drawPlugin(plugin, delta) {
         this.draw(ctx => {
-            drawPlugin(ctx, plugin, delta);
+            for (const plugin of plugins) {
+                plugin.drawSettingsSetup?.(ctx, delta);
+            }
+            for (const plugin of plugins) {
+                plugin.draw?.(ctx, delta);
+            }
+            particles.drawParticles(delta);
+            for (const plugin of plugins) {
+                plugin.clearDraw?.(ctx, delta);
+            }
+            for (const plugin of plugins) {
+                plugin.drawSettingsCleanup?.(ctx, delta);
+            }
         });
     }
     init() {