@tsparticles/engine 3.2.2 → 3.3.0

package/esm/Core/Particles.js

@@ -1,5 +1,6 @@
 import { getLogger, getPosition } from "../Utils/Utils.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
+import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Ranges.js";
@@ -16,7 +17,7 @@ export class Particles {
                 this._pool.push(particle);
             }
         };
-        this._applyDensity = async (options, manualCount, group) => {
+        this._applyDensity = (options, manualCount, group) => {
             const numberOptions = options.number;
             if (!options.number.density?.enable) {
                 if (group === undefined) {
@@ -35,7 +36,7 @@ export class Particles {
                 this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
             }
             if (particlesCount < particlesNumber) {
-                await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
             else if (particlesCount > particlesNumber) {
                 this.removeQuantity(particlesCount - particlesNumber, group);
@@ -49,14 +50,13 @@ export class Particles {
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
             return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
         };
-        this._pushParticle = async (position, overrideOptions, group, initializer) => {
+        this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
                 let particle = this._pool.pop();
                 if (!particle) {
-                    const { Particle } = await import("./Particle.js");
                     particle = new Particle(this._engine, this._container);
                 }
-                await particle.init(this._nextId, position, overrideOptions, group);
+                particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
                     canAdd = initializer(particle);
@@ -117,13 +117,13 @@ export class Particles {
     get count() {
         return this._array.length;
     }
-    async addManualParticles() {
+    addManualParticles() {
         const container = this._container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            await this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
+            this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
         }
     }
-    async addParticle(position, overrideOptions, group, initializer) {
+    addParticle(position, overrideOptions, group, initializer) {
         const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             if (limitOptions.mode === "delete") {
@@ -138,7 +138,7 @@ export class Particles {
                 }
             }
         }
-        return await this._pushParticle(position, overrideOptions, group, initializer);
+        return this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
@@ -151,15 +151,15 @@ export class Particles {
         this.movers = [];
         this.updaters = [];
     }
-    async draw(delta) {
+    draw(delta) {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
-        await this.update(delta);
+        this.update(delta);
         for (const [, plugin] of container.plugins) {
-            await canvas.drawPlugin(plugin, delta);
+            canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
-            await p.draw(delta);
+            p.draw(delta);
         }
     }
     filter(condition) {
@@ -188,17 +188,17 @@ export class Particles {
                 break;
             }
         }
-        await this.addManualParticles();
+        this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
-                    await this.addParticle(undefined, groupOptions, group);
+                    this.addParticle(undefined, groupOptions, group);
                 }
             }
             for (let i = this.count; i < particlesOptions.number.value; i++) {
-                await this.addParticle();
+                this.addParticle();
             }
         }
     }
@@ -211,18 +211,18 @@ export class Particles {
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
         for (const [, pathGenerator] of container.pathGenerators) {
-            await pathGenerator.init(container);
+            pathGenerator.init(container);
         }
     }
-    async push(nb, mouse, overrideOptions, group) {
+    push(nb, mouse, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            await this.addParticle(mouse?.position, overrideOptions, group);
+            this.addParticle(mouse?.position, overrideOptions, group);
         }
     }
     async redraw() {
         this.clear();
         await this.init();
-        await this.draw({ value: 0, factor: 0 });
+        this.draw({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
@@ -243,12 +243,12 @@ export class Particles {
         const defaultIndex = 0;
         this.removeAt(defaultIndex, quantity, group);
     }
-    async setDensity() {
+    setDensity() {
         const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
         for (const group in groups) {
-            await this._applyDensity(groups[group], manualCount, group);
+            this._applyDensity(groups[group], manualCount, group);
         }
-        await this._applyDensity(options.particles, options.manualParticles.length);
+        this._applyDensity(options.particles, options.manualParticles.length);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -257,14 +257,14 @@ export class Particles {
     setResizeFactor(factor) {
         this._resizeFactor = factor;
     }
-    async update(delta) {
+    update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
         for (const [, pathGenerator] of container.pathGenerators) {
             pathGenerator.update();
         }
         for (const [, plugin] of container.plugins) {
-            await plugin.update?.(delta);
+            plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
         for (const particle of this._array) {
@@ -284,7 +284,7 @@ export class Particles {
             }
             for (const mover of this.movers) {
                 if (mover.isEnabled(particle)) {
-                    await mover.move(particle, delta);
+                    mover.move(particle, delta);
                 }
             }
             if (particle.destroyed) {
@@ -307,13 +307,13 @@ export class Particles {
             }
             this._addToPool(...particlesToDelete);
         }
-        await this._interactionManager.externalInteract(delta);
+        this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
             for (const updater of this.updaters) {
-                await updater.update(particle, delta);
+                updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                await this._interactionManager.particlesInteract(particle, delta);
+                this._interactionManager.particlesInteract(particle, delta);
             }
         }
         delete this._resizeFactor;

package/esm/Core/Utils/InteractionManager.js

@@ -6,10 +6,10 @@ export class InteractionManager {
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
-    async externalInteract(delta) {
+    externalInteract(delta) {
         for (const interactor of this._externalInteractors) {
             if (interactor.isEnabled()) {
-                await interactor.interact(delta);
+                interactor.interact(delta);
             }
         }
     }
@@ -34,13 +34,13 @@ export class InteractionManager {
             interactor.init();
         }
     }
-    async particlesInteract(particle, delta) {
+    particlesInteract(particle, delta) {
         for (const interactor of this._externalInteractors) {
             interactor.clear(particle, delta);
         }
         for (const interactor of this._particleInteractors) {
             if (interactor.isEnabled(particle)) {
-                await interactor.interact(particle, delta);
+                interactor.interact(particle, delta);
             }
         }
     }

package/esm/Utils/CanvasUtils.js

@@ -21,7 +21,7 @@ export function paintImage(context, dimension, image, opacity) {
 export function clear(context, dimension) {
     context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
-export async function drawParticle(data) {
+export function drawParticle(data) {
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
@@ -60,13 +60,13 @@ export async function drawParticle(data) {
         transformData,
         strokeWidth,
     };
-    await drawShape(drawData);
-    await drawShapeAfterDraw(drawData);
-    await drawEffect(drawData);
+    drawShape(drawData);
+    drawShapeAfterDraw(drawData);
+    drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.resetTransform();
 }
-export async function drawEffect(data) {
+export function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -75,7 +75,7 @@ export async function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    await drawer.draw({
+    drawer.draw({
         context,
         particle,
         radius,
@@ -85,7 +85,7 @@ export async function drawEffect(data) {
         transformData: { ...transformData },
     });
 }
-export async function drawShape(data) {
+export function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
@@ -95,7 +95,7 @@ export async function drawShape(data) {
         return;
     }
     context.beginPath();
-    await drawer.draw({
+    drawer.draw({
         context,
         particle,
         radius,
@@ -114,7 +114,7 @@ export async function drawShape(data) {
         context.fill();
     }
 }
-export async function drawShapeAfterDraw(data) {
+export function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
@@ -123,7 +123,7 @@ export async function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    await drawer.afterDraw({
+    drawer.afterDraw({
         context,
         particle,
         radius,
@@ -133,17 +133,17 @@ export async function drawShapeAfterDraw(data) {
         transformData: { ...transformData },
     });
 }
-export async function drawPlugin(context, plugin, delta) {
+export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    await plugin.draw(context, delta);
+    plugin.draw(context, delta);
 }
-export async function drawParticlePlugin(context, plugin, particle, delta) {
+export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    await plugin.drawParticle(context, particle, delta);
+    plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
     const lFactor = 1;

package/package.json

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

package/report.html

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

package/tsparticles.engine.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.2.2
+ * tsParticles Engine v3.3.0
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -36,7 +36,7 @@ return /******/ (() => { // webpackBootstrap
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Engine: () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/EventDispatcher.js */ \"./dist/browser/Utils/EventDispatcher.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n\n\n\n\nasync function getItemsFromInitializer(container, map, initializers, force = false) {\n  let res = map.get(container);\n  if (!res || force) {\n    res = await Promise.all([...initializers.values()].map(t => t(container)));\n    map.set(container, res);\n  }\n  return res;\n}\nasync function getDataFromUrl(data) {\n  const url = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(data.url, data.index);\n  if (!url) {\n    return data.fallback;\n  }\n  const response = await fetch(url);\n  if (response.ok) {\n    return await response.json();\n  }\n  (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} ${response.status} while retrieving config file`);\n  return data.fallback;\n}\nclass Engine {\n  constructor() {\n    this._configs = new Map();\n    this._domArray = [];\n    this._eventDispatcher = new _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_2__.EventDispatcher();\n    this._initialized = false;\n    this.plugins = [];\n    this._initializers = {\n      interactors: new Map(),\n      movers: new Map(),\n      updaters: new Map()\n    };\n    this.interactors = new Map();\n    this.movers = new Map();\n    this.updaters = new Map();\n    this.presets = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this.pathGenerators = new Map();\n  }\n  get configs() {\n    const res = {};\n    for (const [name, config] of this._configs) {\n      res[name] = config;\n    }\n    return res;\n  }\n  get version() {\n    return \"3.2.2\";\n  }\n  addConfig(config) {\n    const key = config.key ?? config.name ?? \"default\";\n    this._configs.set(key, config);\n    this._eventDispatcher.dispatchEvent(\"configAdded\", {\n      data: {\n        name: key,\n        config\n      }\n    });\n  }\n  async addEffect(effect, drawer, refresh = true) {\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(effect, type => {\n      if (!this.getEffectDrawer(type)) {\n        this.effectDrawers.set(type, drawer);\n      }\n    });\n    await this.refresh(refresh);\n  }\n  addEventListener(type, listener) {\n    this._eventDispatcher.addEventListener(type, listener);\n  }\n  async addInteractor(name, interactorInitializer, refresh = true) {\n    this._initializers.interactors.set(name, interactorInitializer);\n    await this.refresh(refresh);\n  }\n  async addMover(name, moverInitializer, refresh = true) {\n    this._initializers.movers.set(name, moverInitializer);\n    await this.refresh(refresh);\n  }\n  async addParticleUpdater(name, updaterInitializer, refresh = true) {\n    this._initializers.updaters.set(name, updaterInitializer);\n    await this.refresh(refresh);\n  }\n  async addPathGenerator(name, generator, refresh = true) {\n    if (!this.getPathGenerator(name)) {\n      this.pathGenerators.set(name, generator);\n    }\n    await this.refresh(refresh);\n  }\n  async addPlugin(plugin, refresh = true) {\n    if (!this.getPlugin(plugin.id)) {\n      this.plugins.push(plugin);\n    }\n    await this.refresh(refresh);\n  }\n  async addPreset(preset, options, override = false, refresh = true) {\n    if (override || !this.getPreset(preset)) {\n      this.presets.set(preset, options);\n    }\n    await this.refresh(refresh);\n  }\n  async addShape(shape, drawer, refresh = true) {\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shape, type => {\n      if (!this.getShapeDrawer(type)) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    });\n    await this.refresh(refresh);\n  }\n  clearPlugins(container) {\n    this.updaters.delete(container);\n    this.movers.delete(container);\n    this.interactors.delete(container);\n  }\n  dispatchEvent(type, args) {\n    this._eventDispatcher.dispatchEvent(type, args);\n  }\n  dom() {\n    return this._domArray;\n  }\n  domItem(index) {\n    const dom = this.dom(),\n      item = dom[index];\n    if (!item || item.destroyed) {\n      const deleteCount = 1;\n      dom.splice(index, deleteCount);\n      return;\n    }\n    return item;\n  }\n  async getAvailablePlugins(container) {\n    const res = new Map();\n    for (const plugin of this.plugins) {\n      if (plugin.needsPlugin(container.actualOptions)) {\n        res.set(plugin.id, await plugin.getPlugin(container));\n      }\n    }\n    return res;\n  }\n  getEffectDrawer(type) {\n    return this.effectDrawers.get(type);\n  }\n  async getInteractors(container, force = false) {\n    return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);\n  }\n  async getMovers(container, force = false) {\n    return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);\n  }\n  getPathGenerator(type) {\n    return this.pathGenerators.get(type);\n  }\n  getPlugin(plugin) {\n    return this.plugins.find(t => t.id === plugin);\n  }\n  getPreset(preset) {\n    return this.presets.get(preset);\n  }\n  getShapeDrawer(type) {\n    return this.shapeDrawers.get(type);\n  }\n  getSupportedEffects() {\n    return this.effectDrawers.keys();\n  }\n  getSupportedShapes() {\n    return this.shapeDrawers.keys();\n  }\n  async getUpdaters(container, force = false) {\n    return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);\n  }\n  init() {\n    if (this._initialized) {\n      return;\n    }\n    this._initialized = true;\n  }\n  async load(params) {\n    const randomFactor = 10000,\n      id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_3__.getRandom)() * randomFactor)}`,\n      {\n        index,\n        url\n      } = params,\n      options = url ? await getDataFromUrl({\n        fallback: params.options,\n        url,\n        index\n      }) : params.options;\n    let domContainer = params.element ?? document.getElementById(id);\n    if (!domContainer) {\n      domContainer = document.createElement(\"div\");\n      domContainer.id = id;\n      document.body.append(domContainer);\n    }\n    const currentOptions = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(options, index),\n      dom = this.dom(),\n      oldIndex = dom.findIndex(v => v.id.description === id),\n      minIndex = 0;\n    if (oldIndex >= minIndex) {\n      const old = this.domItem(oldIndex);\n      if (old && !old.destroyed) {\n        old.destroy();\n        const deleteCount = 1;\n        dom.splice(oldIndex, deleteCount);\n      }\n    }\n    let canvasEl;\n    if (domContainer.tagName.toLowerCase() === \"canvas\") {\n      canvasEl = domContainer;\n      canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"false\";\n    } else {\n      const existingCanvases = domContainer.getElementsByTagName(\"canvas\");\n      if (existingCanvases.length) {\n        const firstIndex = 0;\n        canvasEl = existingCanvases[firstIndex];\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"false\";\n      } else {\n        canvasEl = document.createElement(\"canvas\");\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"true\";\n        domContainer.appendChild(canvasEl);\n      }\n    }\n    if (!canvasEl.style.width) {\n      canvasEl.style.width = \"100%\";\n    }\n    if (!canvasEl.style.height) {\n      canvasEl.style.height = \"100%\";\n    }\n    const {\n        Container\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_Core_Container_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Container.js */ \"./dist/browser/Core/Container.js\")),\n      newItem = new Container(this, id, currentOptions);\n    if (oldIndex >= minIndex) {\n      const deleteCount = 0;\n      dom.splice(oldIndex, deleteCount, newItem);\n    } else {\n      dom.push(newItem);\n    }\n    newItem.canvas.loadCanvas(canvasEl);\n    await newItem.start();\n    return newItem;\n  }\n  loadOptions(options, sourceOptions) {\n    for (const plugin of this.plugins) {\n      plugin.loadOptions(options, sourceOptions);\n    }\n  }\n  loadParticlesOptions(container, options, ...sourceOptions) {\n    const updaters = this.updaters.get(container);\n    if (!updaters) {\n      return;\n    }\n    for (const updater of updaters) {\n      updater.loadOptions?.(options, ...sourceOptions);\n    }\n  }\n  async refresh(refresh = true) {\n    if (!refresh) {\n      return;\n    }\n    await Promise.all(this.dom().map(t => t.refresh()));\n  }\n  removeEventListener(type, listener) {\n    this._eventDispatcher.removeEventListener(type, listener);\n  }\n  setOnClickHandler(callback) {\n    const dom = this.dom();\n    if (!dom.length) {\n      throw new Error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} can only set click handlers after calling tsParticles.load()`);\n    }\n    for (const domItem of dom) {\n      domItem.addClickHandler(callback);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Engine.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Engine: () => (/* binding */ Engine)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"./dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"./dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/EventDispatcher.js */ \"./dist/browser/Utils/EventDispatcher.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"./dist/browser/Utils/NumberUtils.js\");\n\n\n\n\nasync function getItemsFromInitializer(container, map, initializers, force = false) {\n  let res = map.get(container);\n  if (!res || force) {\n    res = await Promise.all([...initializers.values()].map(t => t(container)));\n    map.set(container, res);\n  }\n  return res;\n}\nasync function getDataFromUrl(data) {\n  const url = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(data.url, data.index);\n  if (!url) {\n    return data.fallback;\n  }\n  const response = await fetch(url);\n  if (response.ok) {\n    return await response.json();\n  }\n  (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} ${response.status} while retrieving config file`);\n  return data.fallback;\n}\nclass Engine {\n  constructor() {\n    this._configs = new Map();\n    this._domArray = [];\n    this._eventDispatcher = new _Utils_EventDispatcher_js__WEBPACK_IMPORTED_MODULE_2__.EventDispatcher();\n    this._initialized = false;\n    this.plugins = [];\n    this._initializers = {\n      interactors: new Map(),\n      movers: new Map(),\n      updaters: new Map()\n    };\n    this.interactors = new Map();\n    this.movers = new Map();\n    this.updaters = new Map();\n    this.presets = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this.pathGenerators = new Map();\n  }\n  get configs() {\n    const res = {};\n    for (const [name, config] of this._configs) {\n      res[name] = config;\n    }\n    return res;\n  }\n  get version() {\n    return \"3.3.0\";\n  }\n  addConfig(config) {\n    const key = config.key ?? config.name ?? \"default\";\n    this._configs.set(key, config);\n    this._eventDispatcher.dispatchEvent(\"configAdded\", {\n      data: {\n        name: key,\n        config\n      }\n    });\n  }\n  async addEffect(effect, drawer, refresh = true) {\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(effect, type => {\n      if (!this.getEffectDrawer(type)) {\n        this.effectDrawers.set(type, drawer);\n      }\n    });\n    await this.refresh(refresh);\n  }\n  addEventListener(type, listener) {\n    this._eventDispatcher.addEventListener(type, listener);\n  }\n  async addInteractor(name, interactorInitializer, refresh = true) {\n    this._initializers.interactors.set(name, interactorInitializer);\n    await this.refresh(refresh);\n  }\n  async addMover(name, moverInitializer, refresh = true) {\n    this._initializers.movers.set(name, moverInitializer);\n    await this.refresh(refresh);\n  }\n  async addParticleUpdater(name, updaterInitializer, refresh = true) {\n    this._initializers.updaters.set(name, updaterInitializer);\n    await this.refresh(refresh);\n  }\n  async addPathGenerator(name, generator, refresh = true) {\n    if (!this.getPathGenerator(name)) {\n      this.pathGenerators.set(name, generator);\n    }\n    await this.refresh(refresh);\n  }\n  async addPlugin(plugin, refresh = true) {\n    if (!this.getPlugin(plugin.id)) {\n      this.plugins.push(plugin);\n    }\n    await this.refresh(refresh);\n  }\n  async addPreset(preset, options, override = false, refresh = true) {\n    if (override || !this.getPreset(preset)) {\n      this.presets.set(preset, options);\n    }\n    await this.refresh(refresh);\n  }\n  async addShape(shape, drawer, refresh = true) {\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shape, type => {\n      if (!this.getShapeDrawer(type)) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    });\n    await this.refresh(refresh);\n  }\n  clearPlugins(container) {\n    this.updaters.delete(container);\n    this.movers.delete(container);\n    this.interactors.delete(container);\n  }\n  dispatchEvent(type, args) {\n    this._eventDispatcher.dispatchEvent(type, args);\n  }\n  dom() {\n    return this._domArray;\n  }\n  domItem(index) {\n    const dom = this.dom(),\n      item = dom[index];\n    if (!item || item.destroyed) {\n      const deleteCount = 1;\n      dom.splice(index, deleteCount);\n      return;\n    }\n    return item;\n  }\n  async getAvailablePlugins(container) {\n    const res = new Map();\n    for (const plugin of this.plugins) {\n      if (plugin.needsPlugin(container.actualOptions)) {\n        res.set(plugin.id, await plugin.getPlugin(container));\n      }\n    }\n    return res;\n  }\n  getEffectDrawer(type) {\n    return this.effectDrawers.get(type);\n  }\n  async getInteractors(container, force = false) {\n    return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);\n  }\n  async getMovers(container, force = false) {\n    return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);\n  }\n  getPathGenerator(type) {\n    return this.pathGenerators.get(type);\n  }\n  getPlugin(plugin) {\n    return this.plugins.find(t => t.id === plugin);\n  }\n  getPreset(preset) {\n    return this.presets.get(preset);\n  }\n  getShapeDrawer(type) {\n    return this.shapeDrawers.get(type);\n  }\n  getSupportedEffects() {\n    return this.effectDrawers.keys();\n  }\n  getSupportedShapes() {\n    return this.shapeDrawers.keys();\n  }\n  async getUpdaters(container, force = false) {\n    return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);\n  }\n  init() {\n    if (this._initialized) {\n      return;\n    }\n    this._initialized = true;\n  }\n  async load(params) {\n    const randomFactor = 10000,\n      id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_3__.getRandom)() * randomFactor)}`,\n      {\n        index,\n        url\n      } = params,\n      options = url ? await getDataFromUrl({\n        fallback: params.options,\n        url,\n        index\n      }) : params.options;\n    let domContainer = params.element ?? document.getElementById(id);\n    if (!domContainer) {\n      domContainer = document.createElement(\"div\");\n      domContainer.id = id;\n      document.body.append(domContainer);\n    }\n    const currentOptions = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(options, index),\n      dom = this.dom(),\n      oldIndex = dom.findIndex(v => v.id.description === id),\n      minIndex = 0;\n    if (oldIndex >= minIndex) {\n      const old = this.domItem(oldIndex);\n      if (old && !old.destroyed) {\n        old.destroy();\n        const deleteCount = 1;\n        dom.splice(oldIndex, deleteCount);\n      }\n    }\n    let canvasEl;\n    if (domContainer.tagName.toLowerCase() === \"canvas\") {\n      canvasEl = domContainer;\n      canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"false\";\n    } else {\n      const existingCanvases = domContainer.getElementsByTagName(\"canvas\");\n      if (existingCanvases.length) {\n        const firstIndex = 0;\n        canvasEl = existingCanvases[firstIndex];\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"false\";\n      } else {\n        canvasEl = document.createElement(\"canvas\");\n        canvasEl.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.generatedAttribute] = \"true\";\n        domContainer.appendChild(canvasEl);\n      }\n    }\n    if (!canvasEl.style.width) {\n      canvasEl.style.width = \"100%\";\n    }\n    if (!canvasEl.style.height) {\n      canvasEl.style.height = \"100%\";\n    }\n    const {\n        Container\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_Core_Container_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Container.js */ \"./dist/browser/Core/Container.js\")),\n      newItem = new Container(this, id, currentOptions);\n    if (oldIndex >= minIndex) {\n      const deleteCount = 0;\n      dom.splice(oldIndex, deleteCount, newItem);\n    } else {\n      dom.push(newItem);\n    }\n    newItem.canvas.loadCanvas(canvasEl);\n    await newItem.start();\n    return newItem;\n  }\n  loadOptions(options, sourceOptions) {\n    for (const plugin of this.plugins) {\n      plugin.loadOptions(options, sourceOptions);\n    }\n  }\n  loadParticlesOptions(container, options, ...sourceOptions) {\n    const updaters = this.updaters.get(container);\n    if (!updaters) {\n      return;\n    }\n    for (const updater of updaters) {\n      updater.loadOptions?.(options, ...sourceOptions);\n    }\n  }\n  async refresh(refresh = true) {\n    if (!refresh) {\n      return;\n    }\n    await Promise.all(this.dom().map(t => t.refresh()));\n  }\n  removeEventListener(type, listener) {\n    this._eventDispatcher.removeEventListener(type, listener);\n  }\n  setOnClickHandler(callback) {\n    const dom = this.dom();\n    if (!dom.length) {\n      throw new Error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.errorPrefix} can only set click handlers after calling tsParticles.load()`);\n    }\n    for (const domItem of dom) {\n      domItem.addClickHandler(callback);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Core/Engine.js?");
 
 /***/ }),
 
@@ -616,7 +616,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*******************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   alterHsl: () => (/* binding */ alterHsl),\n/* harmony export */   clear: () => (/* binding */ clear),\n/* harmony export */   drawEffect: () => (/* binding */ drawEffect),\n/* harmony export */   drawLine: () => (/* binding */ drawLine),\n/* harmony export */   drawParticle: () => (/* binding */ drawParticle),\n/* harmony export */   drawParticlePlugin: () => (/* binding */ drawParticlePlugin),\n/* harmony export */   drawPlugin: () => (/* binding */ drawPlugin),\n/* harmony export */   drawShape: () => (/* binding */ drawShape),\n/* harmony export */   drawShapeAfterDraw: () => (/* binding */ drawShapeAfterDraw),\n/* harmony export */   paintBase: () => (/* binding */ paintBase),\n/* harmony export */   paintImage: () => (/* binding */ paintImage)\n/* harmony export */ });\n/* harmony import */ var _ColorUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\nconst origin = {\n  x: 0,\n  y: 0\n};\nfunction drawLine(context, begin, end) {\n  context.beginPath();\n  context.moveTo(begin.x, begin.y);\n  context.lineTo(end.x, end.y);\n  context.closePath();\n}\nfunction paintBase(context, dimension, baseColor) {\n  context.fillStyle = baseColor ?? \"rgba(0,0,0,0)\";\n  context.fillRect(origin.x, origin.y, dimension.width, dimension.height);\n}\nfunction paintImage(context, dimension, image, opacity) {\n  if (!image) {\n    return;\n  }\n  context.globalAlpha = opacity;\n  context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);\n  context.globalAlpha = 1;\n}\nfunction clear(context, dimension) {\n  context.clearRect(origin.x, origin.y, dimension.width, dimension.height);\n}\nasync function drawParticle(data) {\n  const {\n      container,\n      context,\n      particle,\n      delta,\n      colorStyles,\n      backgroundMask,\n      composite,\n      radius,\n      opacity,\n      shadow,\n      transform\n    } = data,\n    pos = particle.getPosition(),\n    defaultAngle = 0,\n    angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle),\n    rotateData = {\n      sin: Math.sin(angle),\n      cos: Math.cos(angle)\n    },\n    defaultTransformFactor = 1,\n    transformData = {\n      a: rotateData.cos * (transform.a ?? defaultTransformFactor),\n      b: rotateData.sin * (transform.b ?? defaultTransformFactor),\n      c: -rotateData.sin * (transform.c ?? defaultTransformFactor),\n      d: rotateData.cos * (transform.d ?? defaultTransformFactor)\n    };\n  context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);\n  if (backgroundMask) {\n    context.globalCompositeOperation = composite;\n  }\n  const shadowColor = particle.shadowColor;\n  if (shadow.enable && shadowColor) {\n    context.shadowBlur = shadow.blur;\n    context.shadowColor = (0,_ColorUtils_js__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowColor);\n    context.shadowOffsetX = shadow.offset.x;\n    context.shadowOffsetY = shadow.offset.y;\n  }\n  if (colorStyles.fill) {\n    context.fillStyle = colorStyles.fill;\n  }\n  const minStrokeWidth = 0,\n    strokeWidth = particle.strokeWidth ?? minStrokeWidth;\n  context.lineWidth = strokeWidth;\n  if (colorStyles.stroke) {\n    context.strokeStyle = colorStyles.stroke;\n  }\n  const drawData = {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData,\n    strokeWidth\n  };\n  await drawShape(drawData);\n  await drawShapeAfterDraw(drawData);\n  await drawEffect(drawData);\n  context.globalCompositeOperation = \"source-over\";\n  context.resetTransform();\n}\nasync function drawEffect(data) {\n  const {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData\n  } = data;\n  if (!particle.effect) {\n    return;\n  }\n  const drawer = container.effectDrawers.get(particle.effect);\n  if (!drawer) {\n    return;\n  }\n  await drawer.draw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n}\nasync function drawShape(data) {\n  const {\n      container,\n      context,\n      particle,\n      radius,\n      opacity,\n      delta,\n      strokeWidth,\n      transformData\n    } = data,\n    minStrokeWidth = 0;\n  if (!particle.shape) {\n    return;\n  }\n  const drawer = container.shapeDrawers.get(particle.shape);\n  if (!drawer) {\n    return;\n  }\n  context.beginPath();\n  await drawer.draw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n  if (particle.shapeClose) {\n    context.closePath();\n  }\n  if (strokeWidth > minStrokeWidth) {\n    context.stroke();\n  }\n  if (particle.shapeFill) {\n    context.fill();\n  }\n}\nasync function drawShapeAfterDraw(data) {\n  const {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData\n  } = data;\n  if (!particle.shape) {\n    return;\n  }\n  const drawer = container.shapeDrawers.get(particle.shape);\n  if (!drawer?.afterDraw) {\n    return;\n  }\n  await drawer.afterDraw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n}\nasync function drawPlugin(context, plugin, delta) {\n  if (!plugin.draw) {\n    return;\n  }\n  await plugin.draw(context, delta);\n}\nasync function drawParticlePlugin(context, plugin, particle, delta) {\n  if (!plugin.drawParticle) {\n    return;\n  }\n  await plugin.drawParticle(context, particle, delta);\n}\nfunction alterHsl(color, type, value) {\n  const lFactor = 1;\n  return {\n    h: color.h,\n    s: color.s,\n    l: color.l + (type === \"darken\" ? -lFactor : lFactor) * value\n  };\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Utils/CanvasUtils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   alterHsl: () => (/* binding */ alterHsl),\n/* harmony export */   clear: () => (/* binding */ clear),\n/* harmony export */   drawEffect: () => (/* binding */ drawEffect),\n/* harmony export */   drawLine: () => (/* binding */ drawLine),\n/* harmony export */   drawParticle: () => (/* binding */ drawParticle),\n/* harmony export */   drawParticlePlugin: () => (/* binding */ drawParticlePlugin),\n/* harmony export */   drawPlugin: () => (/* binding */ drawPlugin),\n/* harmony export */   drawShape: () => (/* binding */ drawShape),\n/* harmony export */   drawShapeAfterDraw: () => (/* binding */ drawShapeAfterDraw),\n/* harmony export */   paintBase: () => (/* binding */ paintBase),\n/* harmony export */   paintImage: () => (/* binding */ paintImage)\n/* harmony export */ });\n/* harmony import */ var _ColorUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ColorUtils.js */ \"./dist/browser/Utils/ColorUtils.js\");\n\nconst origin = {\n  x: 0,\n  y: 0\n};\nfunction drawLine(context, begin, end) {\n  context.beginPath();\n  context.moveTo(begin.x, begin.y);\n  context.lineTo(end.x, end.y);\n  context.closePath();\n}\nfunction paintBase(context, dimension, baseColor) {\n  context.fillStyle = baseColor ?? \"rgba(0,0,0,0)\";\n  context.fillRect(origin.x, origin.y, dimension.width, dimension.height);\n}\nfunction paintImage(context, dimension, image, opacity) {\n  if (!image) {\n    return;\n  }\n  context.globalAlpha = opacity;\n  context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);\n  context.globalAlpha = 1;\n}\nfunction clear(context, dimension) {\n  context.clearRect(origin.x, origin.y, dimension.width, dimension.height);\n}\nfunction drawParticle(data) {\n  const {\n      container,\n      context,\n      particle,\n      delta,\n      colorStyles,\n      backgroundMask,\n      composite,\n      radius,\n      opacity,\n      shadow,\n      transform\n    } = data,\n    pos = particle.getPosition(),\n    defaultAngle = 0,\n    angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle),\n    rotateData = {\n      sin: Math.sin(angle),\n      cos: Math.cos(angle)\n    },\n    defaultTransformFactor = 1,\n    transformData = {\n      a: rotateData.cos * (transform.a ?? defaultTransformFactor),\n      b: rotateData.sin * (transform.b ?? defaultTransformFactor),\n      c: -rotateData.sin * (transform.c ?? defaultTransformFactor),\n      d: rotateData.cos * (transform.d ?? defaultTransformFactor)\n    };\n  context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);\n  if (backgroundMask) {\n    context.globalCompositeOperation = composite;\n  }\n  const shadowColor = particle.shadowColor;\n  if (shadow.enable && shadowColor) {\n    context.shadowBlur = shadow.blur;\n    context.shadowColor = (0,_ColorUtils_js__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowColor);\n    context.shadowOffsetX = shadow.offset.x;\n    context.shadowOffsetY = shadow.offset.y;\n  }\n  if (colorStyles.fill) {\n    context.fillStyle = colorStyles.fill;\n  }\n  const minStrokeWidth = 0,\n    strokeWidth = particle.strokeWidth ?? minStrokeWidth;\n  context.lineWidth = strokeWidth;\n  if (colorStyles.stroke) {\n    context.strokeStyle = colorStyles.stroke;\n  }\n  const drawData = {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData,\n    strokeWidth\n  };\n  drawShape(drawData);\n  drawShapeAfterDraw(drawData);\n  drawEffect(drawData);\n  context.globalCompositeOperation = \"source-over\";\n  context.resetTransform();\n}\nfunction drawEffect(data) {\n  const {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData\n  } = data;\n  if (!particle.effect) {\n    return;\n  }\n  const drawer = container.effectDrawers.get(particle.effect);\n  if (!drawer) {\n    return;\n  }\n  drawer.draw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n}\nfunction drawShape(data) {\n  const {\n      container,\n      context,\n      particle,\n      radius,\n      opacity,\n      delta,\n      strokeWidth,\n      transformData\n    } = data,\n    minStrokeWidth = 0;\n  if (!particle.shape) {\n    return;\n  }\n  const drawer = container.shapeDrawers.get(particle.shape);\n  if (!drawer) {\n    return;\n  }\n  context.beginPath();\n  drawer.draw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n  if (particle.shapeClose) {\n    context.closePath();\n  }\n  if (strokeWidth > minStrokeWidth) {\n    context.stroke();\n  }\n  if (particle.shapeFill) {\n    context.fill();\n  }\n}\nfunction drawShapeAfterDraw(data) {\n  const {\n    container,\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    transformData\n  } = data;\n  if (!particle.shape) {\n    return;\n  }\n  const drawer = container.shapeDrawers.get(particle.shape);\n  if (!drawer?.afterDraw) {\n    return;\n  }\n  drawer.afterDraw({\n    context,\n    particle,\n    radius,\n    opacity,\n    delta,\n    pixelRatio: container.retina.pixelRatio,\n    transformData: {\n      ...transformData\n    }\n  });\n}\nfunction drawPlugin(context, plugin, delta) {\n  if (!plugin.draw) {\n    return;\n  }\n  plugin.draw(context, delta);\n}\nfunction drawParticlePlugin(context, plugin, particle, delta) {\n  if (!plugin.drawParticle) {\n    return;\n  }\n  plugin.drawParticle(context, particle, delta);\n}\nfunction alterHsl(color, type, value) {\n  const lFactor = 1;\n  return {\n    h: color.h,\n    s: color.s,\n    l: color.l + (type === \"darken\" ? -lFactor : lFactor) * value\n  };\n}\n\n//# sourceURL=webpack://@tsparticles/engine/./dist/browser/Utils/CanvasUtils.js?");
 
 /***/ }),
 
@@ -880,7 +880,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 				var scripts = document.getElementsByTagName("script");
 /******/ 				if(scripts.length) {
 /******/ 					var i = scripts.length - 1;
-/******/ 					while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src;
+/******/ 					while (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src;
 /******/ 				}
 /******/ 			}
 /******/ 		}