tsparticles 2.7.1 → 3.0.0-alpha.0

package/tsparticles.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v2.7.1
+ * v3.0.0-alpha.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -59,6 +59,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   "AnimatableColor": () => (/* reexport */ AnimatableColor),
   "AnimationOptions": () => (/* reexport */ AnimationOptions),
+  "AnimationValueWithRandom": () => (/* reexport */ AnimationValueWithRandom),
   "Background": () => (/* reexport */ Background),
   "BackgroundMask": () => (/* reexport */ BackgroundMask),
   "BackgroundMaskCover": () => (/* reexport */ BackgroundMaskCover),
@@ -85,6 +86,7 @@ __webpack_require__.d(__webpack_exports__, {
   "MoveGravity": () => (/* reexport */ MoveGravity),
   "MovePath": () => (/* reexport */ MovePath),
   "MoveTrail": () => (/* reexport */ MoveTrail),
+  "MoveTrailFill": () => (/* reexport */ MoveTrailFill),
   "Opacity": () => (/* reexport */ Opacity),
   "OpacityAnimation": () => (/* reexport */ OpacityAnimation),
   "Options": () => (/* reexport */ Options),
@@ -99,6 +101,8 @@ __webpack_require__.d(__webpack_exports__, {
   "ParticlesOptions": () => (/* reexport */ ParticlesOptions),
   "Point": () => (/* reexport */ Point),
   "Range": () => (/* reexport */ Range),
+  "RangedAnimationOptions": () => (/* reexport */ RangedAnimationOptions),
+  "RangedAnimationValueWithRandom": () => (/* reexport */ RangedAnimationValueWithRandom),
   "Rectangle": () => (/* reexport */ Rectangle),
   "ResizeEvent": () => (/* reexport */ ResizeEvent),
   "Responsive": () => (/* reexport */ Responsive),
@@ -132,6 +136,7 @@ __webpack_require__.d(__webpack_exports__, {
   "circleBounceDataFromParticle": () => (/* reexport */ circleBounceDataFromParticle),
   "clamp": () => (/* reexport */ clamp),
   "clear": () => (/* reexport */ clear),
+  "clearCanvas": () => (/* reexport */ clearCanvas),
   "collisionVelocity": () => (/* reexport */ collisionVelocity),
   "colorMix": () => (/* reexport */ colorMix),
   "colorToHsl": () => (/* reexport */ colorToHsl),
@@ -149,6 +154,7 @@ __webpack_require__.d(__webpack_exports__, {
   "executeOnSingleOrMultiple": () => (/* reexport */ executeOnSingleOrMultiple),
   "findItemFromSingleOrMultiple": () => (/* reexport */ findItemFromSingleOrMultiple),
   "generatedAttribute": () => (/* reexport */ generatedAttribute),
+  "getContext": () => (/* reexport */ getContext),
   "getDistance": () => (/* reexport */ getDistance),
   "getDistances": () => (/* reexport */ getDistances),
   "getEasing": () => (/* reexport */ getEasing),
@@ -169,6 +175,7 @@ __webpack_require__.d(__webpack_exports__, {
   "hasMatchMedia": () => (/* reexport */ hasMatchMedia),
   "hslToRgb": () => (/* reexport */ hslToRgb),
   "hslaToRgba": () => (/* reexport */ hslaToRgba),
+  "initParticleNumericAnimationValue": () => (/* reexport */ initParticleNumericAnimationValue),
   "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled),
   "isInArray": () => (/* reexport */ isInArray),
   "isPointInside": () => (/* reexport */ isPointInside),
@@ -186,7 +193,7 @@ __webpack_require__.d(__webpack_exports__, {
   "mouseMoveEvent": () => (/* reexport */ mouseMoveEvent),
   "mouseOutEvent": () => (/* reexport */ mouseOutEvent),
   "mouseUpEvent": () => (/* reexport */ mouseUpEvent),
-  "paintBase": () => (/* reexport */ paintBase),
+  "paintCanvas": () => (/* reexport */ paintCanvas),
   "parseAlpha": () => (/* reexport */ parseAlpha),
   "randomInRange": () => (/* reexport */ randomInRange),
   "rangeColorToHsl": () => (/* reexport */ rangeColorToHsl),
@@ -208,50 +215,6 @@ __webpack_require__.d(__webpack_exports__, {
   "visibilityChangeEvent": () => (/* reexport */ visibilityChangeEvent)
 });
 
-;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/EventDispatcher.js
-class EventDispatcher {
-  constructor() {
-    this._listeners = new Map();
-  }
-  addEventListener(type, listener) {
-    var _a;
-    this.removeEventListener(type, listener);
-    if (!this._listeners.get(type)) {
-      this._listeners.set(type, []);
-    }
-    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
-  }
-  dispatchEvent(type, args) {
-    var _a;
-    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args));
-  }
-  hasEventListener(type) {
-    return !!this._listeners.get(type);
-  }
-  removeAllEventListeners(type) {
-    if (!type) {
-      this._listeners = new Map();
-    } else {
-      this._listeners.delete(type);
-    }
-  }
-  removeEventListener(type, listener) {
-    const arr = this._listeners.get(type);
-    if (!arr) {
-      return;
-    }
-    const length = arr.length,
-      idx = arr.indexOf(listener);
-    if (idx < 0) {
-      return;
-    }
-    if (length === 1) {
-      this._listeners.delete(type);
-    } else {
-      arr.splice(idx, 1);
-    }
-  }
-}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Vector3d.js
 class Vector3d {
   constructor(xOrCoords, y, z) {
@@ -749,6 +712,39 @@ function itemFromSingleOrMultiple(obj, index, useIndex) {
 function findItemFromSingleOrMultiple(obj, callback) {
   return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
 }
+function initParticleNumericAnimationValue(options, pxRatio) {
+  const valueRange = options.value,
+    animationOptions = options.animation;
+  const res = {
+    enable: options.animation.enable,
+    value: getRangeValue(options.value) * pxRatio,
+    max: getRangeMax(valueRange) * pxRatio,
+    min: getRangeMin(valueRange) * pxRatio,
+    loops: 0,
+    maxLoops: getRangeValue(options.animation.count)
+  };
+  if (animationOptions.enable) {
+    res.status = "increasing";
+    res.decay = 1 - getRangeValue(animationOptions.decay);
+    switch (animationOptions.startValue) {
+      case "min":
+        res.value = res.min;
+        res.status = "increasing";
+        break;
+      case "random":
+        res.value = randomInRange(res);
+        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        break;
+      case "max":
+      default:
+        res.value = res.max;
+        res.status = "decreasing";
+        break;
+    }
+  }
+  res.initialValue = res.value;
+  return res;
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/ColorUtils.js
 
 
@@ -1032,6 +1028,49 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/CanvasUtils.js
 
+function paintBase(context, dimension, baseColor) {
+  context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
+  context.fillRect(0, 0, dimension.width, dimension.height);
+}
+function paintImage(context, dimension, image, opacity) {
+  if (!image) {
+    return;
+  }
+  context.globalAlpha = opacity;
+  context.drawImage(image, 0, 0, dimension.width, dimension.height);
+  context.globalAlpha = 1;
+}
+function getContext(canvas) {
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Error tsParticles - No canvas context found");
+  }
+  return context;
+}
+function clearCanvas(context, size, options, trailFill, coverColorStyle) {
+  if (options.backgroundMask.enable) {
+    paintCanvas(context, size, options, coverColorStyle);
+  } else {
+    const trail = options.particles.move.trail;
+    if (trail.enable && trail.length > 0 && trailFill) {
+      if (trailFill.color) {
+        paintBase(context, size, getStyleFromRgb(trailFill.color, trailFill.opacity));
+      } else if (trailFill.image) {
+        paintImage(context, size, trailFill.image, trailFill.opacity);
+      }
+    } else {
+      clear(context, size);
+    }
+  }
+}
+function paintCanvas(context, size, options, coverColorStyle) {
+  if (options.backgroundMask.enable && coverColorStyle) {
+    clear(context, size);
+    paintBase(context, size, coverColorStyle);
+  } else {
+    paintBase(context, size);
+  }
+}
 function drawLine(context, begin, end) {
   context.beginPath();
   context.moveTo(begin.x, begin.y);
@@ -1045,10 +1084,6 @@ function drawTriangle(context, p1, p2, p3) {
   context.lineTo(p3.x, p3.y);
   context.closePath();
 }
-function paintBase(context, dimension, baseColor) {
-  context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
-  context.fillRect(0, 0, dimension.width, dimension.height);
-}
 function clear(context, dimension) {
   context.clearRect(0, 0, dimension.width, dimension.height);
 }
@@ -1202,17 +1237,9 @@ class Canvas {
     return this.container.actualOptions.fullScreen.enable;
   }
   clear() {
-    const options = this.container.actualOptions,
-      trail = options.particles.move.trail;
-    if (options.backgroundMask.enable) {
-      this.paint();
-    } else if (trail.enable && trail.length > 0 && this._trailFillColor) {
-      this._paintBase(getStyleFromRgb(this._trailFillColor, 1 / trail.length));
-    } else {
-      this.draw(ctx => {
-        clear(ctx, this.size);
-      });
-    }
+    this.draw(ctx => {
+      clearCanvas(ctx, this.size, this.container.actualOptions, this._trailFill, this._coverColorStyle);
+    });
   }
   destroy() {
     var _a, _b;
@@ -1298,63 +1325,28 @@ class Canvas {
       drawPlugin(ctx, plugin, delta);
     });
   }
-  init() {
+  async init() {
     var _a;
-    this.resize();
+    this._resize();
     this._initStyle();
     this._initCover();
-    this._initTrail();
-    this.initBackground();
+    try {
+      await this._initTrail();
+    } catch (e) {
+      console.error(e);
+    }
+    this._initBackground();
     if (this.element) {
       (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, {
         attributes: true
       });
     }
-    this.initUpdaters();
-    this.initPlugins();
-    this.paint();
-  }
-  initBackground() {
-    const options = this.container.actualOptions,
-      background = options.background,
-      element = this.element,
-      elementStyle = element === null || element === void 0 ? void 0 : element.style;
-    if (!elementStyle) {
-      return;
-    }
-    if (background.color) {
-      const color = rangeColorToRgb(background.color);
-      elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
-    } else {
-      elementStyle.backgroundColor = "";
-    }
-    elementStyle.backgroundImage = background.image || "";
-    elementStyle.backgroundPosition = background.position || "";
-    elementStyle.backgroundRepeat = background.repeat || "";
-    elementStyle.backgroundSize = background.size || "";
-  }
-  initPlugins() {
-    this._resizePlugins = [];
-    for (const [, plugin] of this.container.plugins) {
-      if (plugin.resize) {
-        this._resizePlugins.push(plugin);
-      }
-      if (plugin.particleFillColor || plugin.particleStrokeColor) {
-        this._colorPlugins.push(plugin);
-      }
-    }
-  }
-  initUpdaters() {
-    this._preDrawUpdaters = [];
-    this._postDrawUpdaters = [];
-    for (const updater of this.container.particles.updaters) {
-      if (updater.afterDraw) {
-        this._postDrawUpdaters.push(updater);
-      }
-      if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
-        this._preDrawUpdaters.push(updater);
-      }
-    }
+    this._initUpdaters();
+    this._initPlugins();
+    this._paint();
+    this.container.updateActualOptions();
+    this._resize();
+    this._initBackground();
   }
   loadCanvas(canvas) {
     var _a, _b;
@@ -1367,53 +1359,18 @@ class Canvas {
     this._originalStyle = deepExtend({}, this.element.style);
     this.size.height = canvas.offsetHeight;
     this.size.width = canvas.offsetWidth;
-    this._context = this.element.getContext("2d");
+    this._context = getContext(canvas);
     (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this.element, {
       attributes: true
     });
     this.container.retina.init();
-    this.initBackground();
-  }
-  paint() {
-    const options = this.container.actualOptions;
-    this.draw(ctx => {
-      if (options.backgroundMask.enable && options.backgroundMask.cover) {
-        clear(ctx, this.size);
-        this._paintBase(this._coverColorStyle);
-      } else {
-        this._paintBase();
-      }
-    });
-  }
-  resize() {
-    if (!this.element) {
-      return;
-    }
-    const container = this.container,
-      pxRatio = container.retina.pixelRatio,
-      size = container.canvas.size,
-      newSize = {
-        width: this.element.offsetWidth * pxRatio,
-        height: this.element.offsetHeight * pxRatio
-      };
-    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
-      return;
-    }
-    const oldSize = Object.assign({}, size);
-    this.element.width = size.width = this.element.offsetWidth * pxRatio;
-    this.element.height = size.height = this.element.offsetHeight * pxRatio;
-    if (this.container.started) {
-      this.resizeFactor = {
-        width: size.width / oldSize.width,
-        height: size.height / oldSize.height
-      };
-    }
+    this._initBackground();
   }
   async windowResize() {
     if (!this.element) {
       return;
     }
-    this.resize();
+    this._resize();
     const container = this.container,
       needsRefresh = container.updateActualOptions();
     container.particles.setDensity();
@@ -1474,6 +1431,25 @@ class Canvas {
     }
     return [fColor, sColor];
   }
+  _initBackground() {
+    const options = this.container.actualOptions,
+      background = options.background,
+      element = this.element,
+      elementStyle = element === null || element === void 0 ? void 0 : element.style;
+    if (!elementStyle) {
+      return;
+    }
+    if (background.color) {
+      const color = rangeColorToRgb(background.color);
+      elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
+    } else {
+      elementStyle.backgroundColor = "";
+    }
+    elementStyle.backgroundImage = background.image || "";
+    elementStyle.backgroundPosition = background.position || "";
+    elementStyle.backgroundRepeat = background.repeat || "";
+    elementStyle.backgroundSize = background.size || "";
+  }
   _initCover() {
     const options = this.container.actualOptions,
       cover = options.backgroundMask.cover,
@@ -1489,6 +1465,17 @@ class Canvas {
       this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
     }
   }
+  _initPlugins() {
+    this._resizePlugins = [];
+    for (const [, plugin] of this.container.plugins) {
+      if (plugin.resize) {
+        this._resizePlugins.push(plugin);
+      }
+      if (plugin.particleFillColor || plugin.particleStrokeColor) {
+        this._colorPlugins.push(plugin);
+      }
+    }
+  }
   _initStyle() {
     const element = this.element,
       options = this.container.actualOptions;
@@ -1512,20 +1499,58 @@ class Canvas {
       element.style.setProperty(key, value, "important");
     }
   }
-  _initTrail() {
+  async _initTrail() {
     const options = this.container.actualOptions,
       trail = options.particles.move.trail,
-      fillColor = rangeColorToRgb(trail.fillColor);
-    if (fillColor) {
+      trailFill = trail.fill;
+    if (!trail.enable) {
+      return;
+    }
+    if (trailFill.color) {
+      const fillColor = rangeColorToRgb(trailFill.color);
+      if (!fillColor) {
+        return;
+      }
       const trail = options.particles.move.trail;
-      this._trailFillColor = Object.assign(Object.assign({}, fillColor), {
-        a: 1 / trail.length
+      this._trailFill = {
+        color: Object.assign({}, fillColor),
+        opacity: 1 / trail.length
+      };
+    } else {
+      await new Promise((resolve, reject) => {
+        if (!trailFill.image) {
+          return;
+        }
+        const img = document.createElement("img");
+        img.addEventListener("load", () => {
+          this._trailFill = {
+            image: img,
+            opacity: 1 / trail.length
+          };
+          resolve();
+        });
+        img.addEventListener("error", evt => {
+          reject(evt.error);
+        });
+        img.src = trailFill.image;
       });
     }
   }
-  _paintBase(baseColor) {
+  _initUpdaters() {
+    this._preDrawUpdaters = [];
+    this._postDrawUpdaters = [];
+    for (const updater of this.container.particles.updaters) {
+      if (updater.afterDraw) {
+        this._postDrawUpdaters.push(updater);
+      }
+      if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+        this._preDrawUpdaters.push(updater);
+      }
+    }
+  }
+  _paint() {
     this.draw(ctx => {
-      paintBase(ctx, this.size, baseColor);
+      paintCanvas(ctx, this.size, this.container.actualOptions, this._coverColorStyle);
     });
   }
   _repairStyle() {
@@ -1536,7 +1561,7 @@ class Canvas {
     }
     (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this._initStyle();
-    this.initBackground();
+    this._initBackground();
     (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(element, {
       attributes: true
     });
@@ -1554,6 +1579,30 @@ class Canvas {
     element.style.width = originalStyle.width;
     element.style.height = originalStyle.height;
   }
+  _resize() {
+    if (!this.element) {
+      return;
+    }
+    const container = this.container,
+      pxRatio = container.retina.pixelRatio,
+      size = container.canvas.size,
+      newSize = {
+        width: this.element.offsetWidth * pxRatio,
+        height: this.element.offsetHeight * pxRatio
+      };
+    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
+      return;
+    }
+    const oldSize = Object.assign({}, size);
+    this.element.width = size.width = this.element.offsetWidth * pxRatio;
+    this.element.height = size.height = this.element.offsetHeight * pxRatio;
+    if (this.container.started) {
+      this.resizeFactor = {
+        width: size.width / oldSize.width,
+        height: size.height / oldSize.height
+      };
+    }
+  }
   _setFullScreenStyle() {
     const element = this.element;
     if (!element) {
@@ -2470,6 +2519,55 @@ class CollisionsOverlap {
     }
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/AnimationOptions.js
+
+class AnimationOptions {
+  constructor() {
+    this.count = 0;
+    this.enable = false;
+    this.speed = 1;
+    this.decay = 0;
+    this.sync = false;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.count !== undefined) {
+      this.count = setRangeValue(data.count);
+    }
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
+    if (data.speed !== undefined) {
+      this.speed = setRangeValue(data.speed);
+    }
+    if (data.decay !== undefined) {
+      this.decay = setRangeValue(data.decay);
+    }
+    if (data.sync !== undefined) {
+      this.sync = data.sync;
+    }
+  }
+}
+class RangedAnimationOptions extends AnimationOptions {
+  constructor() {
+    super();
+    this.startValue = "random";
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.minimumValue !== undefined) {
+      this.minimumValue = data.minimumValue;
+    }
+    if (data.startValue !== undefined) {
+      this.startValue = data.startValue;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Random.js
 class Random {
   constructor() {
@@ -2491,6 +2589,8 @@ class Random {
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/ValueWithRandom.js
 
 
+
+
 class ValueWithRandom {
   constructor() {
     this.random = new Random();
@@ -2510,6 +2610,44 @@ class ValueWithRandom {
     }
   }
 }
+class AnimationValueWithRandom extends ValueWithRandom {
+  constructor() {
+    super();
+    this.animation = new AnimationOptions();
+  }
+  get anim() {
+    return this.animation;
+  }
+  set anim(value) {
+    this.animation = value;
+  }
+  load(data) {
+    var _a;
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+    if (animation !== undefined) {
+      this.animation.load(animation);
+    }
+  }
+}
+class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+  constructor() {
+    super();
+    this.animation = new RangedAnimationOptions();
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.animation !== undefined) {
+      this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js
 
 class ParticlesBounceFactor extends ValueWithRandom {
@@ -2704,14 +2842,36 @@ class MovePath {
     }
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Move/MoveTrailFill.js
+
+class MoveTrailFill {
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.color !== undefined) {
+      this.color = OptionsColor.create(this.color, data.color);
+    }
+    if (data.image !== undefined) {
+      this.image = data.image;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Move/MoveTrail.js
 
 class MoveTrail {
   constructor() {
     this.enable = false;
     this.length = 10;
-    this.fillColor = new OptionsColor();
-    this.fillColor.value = "#000000";
+    this.fill = new MoveTrailFill();
+  }
+  get fillColor() {
+    return this.fill.color;
+  }
+  set fillColor(value) {
+    this.fill.load({
+      color: value
+    });
   }
   load(data) {
     if (!data) {
@@ -2720,7 +2880,11 @@ class MoveTrail {
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
-    this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+    if (data.fill !== undefined || data.fillColor !== undefined) {
+      this.fill.load(data.fill || {
+        color: data.fillColor
+      });
+    }
     if (data.length !== undefined) {
       this.length = data.length;
     }
@@ -2888,47 +3052,13 @@ class Move {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/AnimationOptions.js
-
-class AnimationOptions {
-  constructor() {
-    this.count = 0;
-    this.enable = false;
-    this.speed = 1;
-    this.decay = 0;
-    this.sync = false;
-  }
-  load(data) {
-    if (!data) {
-      return;
-    }
-    if (data.count !== undefined) {
-      this.count = setRangeValue(data.count);
-    }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    if (data.speed !== undefined) {
-      this.speed = setRangeValue(data.speed);
-    }
-    if (data.decay !== undefined) {
-      this.decay = setRangeValue(data.decay);
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
-  }
-}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Opacity/OpacityAnimation.js
 
-class OpacityAnimation extends AnimationOptions {
+class OpacityAnimation extends RangedAnimationOptions {
   constructor() {
     super();
     this.destroy = "none";
-    this.enable = false;
     this.speed = 2;
-    this.startValue = "random";
-    this.sync = false;
   }
   get opacity_min() {
     return this.minimumValue;
@@ -2937,34 +3067,22 @@ class OpacityAnimation extends AnimationOptions {
     this.minimumValue = value;
   }
   load(data) {
-    var _a;
+    if ((data === null || data === void 0 ? void 0 : data.opacity_min) !== undefined && data.minimumValue === undefined) {
+      data.minimumValue = data.opacity_min;
+    }
+    super.load(data);
     if (!data) {
       return;
     }
-    super.load(data);
     if (data.destroy !== undefined) {
       this.destroy = data.destroy;
     }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.opacity_min;
-    if (data.speed !== undefined) {
-      this.speed = data.speed;
-    }
-    if (data.startValue !== undefined) {
-      this.startValue = data.startValue;
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Opacity/Opacity.js
 
 
-
-class Opacity extends ValueWithRandom {
+class Opacity extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new OpacityAnimation();
@@ -2977,18 +3095,6 @@ class Opacity extends ValueWithRandom {
   set anim(value) {
     this.animation = value;
   }
-  load(data) {
-    var _a;
-    if (!data) {
-      return;
-    }
-    super.load(data);
-    const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
-    if (animation !== undefined) {
-      this.animation.load(animation);
-      this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
-    }
-  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Number/ParticlesDensity.js
 class ParticlesDensity {
@@ -3099,106 +3205,37 @@ class Shadow {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Shape/Shape.js
 
-const charKey = "character",
-  charAltKey = "char",
-  imageKey = "image",
-  imageAltKey = "images",
-  polygonKey = "polygon",
-  polygonAltKey = "star";
 class Shape {
   constructor() {
     this.options = {};
     this.type = "circle";
   }
-  get character() {
-    var _a;
-    return (_a = this.options[charKey]) !== null && _a !== void 0 ? _a : this.options[charAltKey];
-  }
-  set character(value) {
-    this.options[charAltKey] = this.options[charKey] = value;
-  }
-  get custom() {
-    return this.options;
-  }
-  set custom(value) {
-    this.options = value;
-  }
-  get image() {
-    var _a;
-    return (_a = this.options[imageKey]) !== null && _a !== void 0 ? _a : this.options[imageAltKey];
-  }
-  set image(value) {
-    this.options[imageAltKey] = this.options[imageKey] = value;
-  }
-  get images() {
-    return this.image;
-  }
-  set images(value) {
-    this.image = value;
-  }
-  get polygon() {
-    var _a;
-    return (_a = this.options[polygonKey]) !== null && _a !== void 0 ? _a : this.options[polygonAltKey];
-  }
-  set polygon(value) {
-    this.options[polygonAltKey] = this.options[polygonKey] = value;
-  }
-  get stroke() {
-    return [];
-  }
-  set stroke(_value) {}
   load(data) {
-    var _a, _b, _c;
+    var _a;
     if (!data) {
       return;
     }
-    const options = (_a = data.options) !== null && _a !== void 0 ? _a : data.custom;
+    const options = data.options;
     if (options !== undefined) {
       for (const shape in options) {
         const item = options[shape];
         if (item) {
-          this.options[shape] = deepExtend((_b = this.options[shape]) !== null && _b !== void 0 ? _b : {}, item);
+          this.options[shape] = deepExtend((_a = this.options[shape]) !== null && _a !== void 0 ? _a : {}, item);
         }
       }
     }
-    this.loadShape(data.character, charKey, charAltKey, true);
-    this.loadShape(data.polygon, polygonKey, polygonAltKey, false);
-    this.loadShape((_c = data.image) !== null && _c !== void 0 ? _c : data.images, imageKey, imageAltKey, true);
     if (data.type !== undefined) {
       this.type = data.type;
     }
   }
-  loadShape(item, mainKey, altKey, altOverride) {
-    var _a, _b;
-    if (!item) {
-      return;
-    }
-    const isArray = item instanceof Array;
-    const emptyValue = isArray ? [] : {},
-      mainDifferentValues = isArray !== this.options[mainKey] instanceof Array,
-      altDifferentValues = isArray !== this.options[altKey] instanceof Array;
-    if (mainDifferentValues) {
-      this.options[mainKey] = emptyValue;
-    }
-    if (altDifferentValues && altOverride) {
-      this.options[altKey] = emptyValue;
-    }
-    this.options[mainKey] = deepExtend((_a = this.options[mainKey]) !== null && _a !== void 0 ? _a : emptyValue, item);
-    if (!this.options[altKey] || altOverride) {
-      this.options[altKey] = deepExtend((_b = this.options[altKey]) !== null && _b !== void 0 ? _b : emptyValue, item);
-    }
-  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Size/SizeAnimation.js
 
-class SizeAnimation extends AnimationOptions {
+class SizeAnimation extends RangedAnimationOptions {
   constructor() {
     super();
     this.destroy = "none";
-    this.enable = false;
     this.speed = 5;
-    this.startValue = "random";
-    this.sync = false;
   }
   get size_min() {
     return this.minimumValue;
@@ -3207,34 +3244,22 @@ class SizeAnimation extends AnimationOptions {
     this.minimumValue = value;
   }
   load(data) {
-    var _a;
+    if ((data === null || data === void 0 ? void 0 : data.size_min) !== undefined && data.minimumValue === undefined) {
+      data.minimumValue = data.size_min;
+    }
     super.load(data);
     if (!data) {
       return;
     }
-    if (data.destroy !== undefined) {
-      this.destroy = data.destroy;
-    }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.size_min;
-    if (data.speed !== undefined) {
-      this.speed = data.speed;
-    }
-    if (data.startValue !== undefined) {
-      this.startValue = data.startValue;
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
+    if (data.destroy !== undefined) {
+      this.destroy = data.destroy;
     }
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Size/Size.js
 
 
-
-class Size extends ValueWithRandom {
+class Size extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new SizeAnimation();
@@ -3247,18 +3272,6 @@ class Size extends ValueWithRandom {
   set anim(value) {
     this.animation = value;
   }
-  load(data) {
-    var _a;
-    super.load(data);
-    if (!data) {
-      return;
-    }
-    const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
-    if (animation !== undefined) {
-      this.animation.load(animation);
-      this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
-    }
-  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Stroke.js
 
@@ -3340,7 +3353,7 @@ class ParticlesOptions {
     this.zIndex = new ZIndex();
   }
   load(data) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     if (!data) {
       return;
     }
@@ -3372,9 +3385,9 @@ class ParticlesOptions {
     if (data.interactivity !== undefined) {
       this.interactivity = deepExtend({}, data.interactivity);
     }
-    const strokeToLoad = (_e = data.stroke) !== null && _e !== void 0 ? _e : (_f = data.shape) === null || _f === void 0 ? void 0 : _f.stroke;
-    if (strokeToLoad) {
-      this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
+    const stroke = data.stroke;
+    if (stroke) {
+      this.stroke = executeOnSingleOrMultiple(stroke, t => {
         const tmp = new Stroke();
         tmp.load(t);
         return tmp;
@@ -3438,6 +3451,7 @@ class Options {
     this.fpsLimit = 120;
     this.interactivity = new Interactivity(engine, container);
     this.manualParticles = [];
+    this.name = "default";
     this.particles = loadParticlesOptions(this._engine, this._container);
     this.pauseOnBlur = true;
     this.pauseOnOutsideViewport = true;
@@ -3717,7 +3731,7 @@ class Particle {
     return this._getRollColor((_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor));
   }
   init(id, position, overrideOptions, group) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const container = this.container,
       engine = this._engine;
     this.id = id;
@@ -3769,39 +3783,8 @@ class Particle {
         this.pathGenerator.init(container);
       }
     }
-    const zIndexValue = getRangeValue(this.options.zIndex.value);
     container.retina.initParticle(this);
-    const sizeOptions = this.options.size,
-      sizeRange = sizeOptions.value,
-      sizeAnimation = sizeOptions.animation;
-    this.size = {
-      enable: sizeOptions.animation.enable,
-      value: getRangeValue(sizeOptions.value) * container.retina.pixelRatio,
-      max: getRangeMax(sizeRange) * pxRatio,
-      min: getRangeMin(sizeRange) * pxRatio,
-      loops: 0,
-      maxLoops: getRangeValue(sizeOptions.animation.count)
-    };
-    if (sizeAnimation.enable) {
-      this.size.status = "increasing";
-      this.size.decay = 1 - getRangeValue(sizeAnimation.decay);
-      switch (sizeAnimation.startValue) {
-        case "min":
-          this.size.value = this.size.min;
-          this.size.status = "increasing";
-          break;
-        case "random":
-          this.size.value = randomInRange(this.size);
-          this.size.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
-          break;
-        case "max":
-        default:
-          this.size.value = this.size.max;
-          this.size.status = "decreasing";
-          break;
-      }
-    }
-    this.size.initialValue = this.size.value;
+    this.size = initParticleNumericAnimationValue(this.options.size, pxRatio);
     this.bubble = {
       inRange: false
     };
@@ -3809,30 +3792,10 @@ class Particle {
       inRange: false,
       factor: 1
     };
-    this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
-    this.initialPosition = this.position.copy();
-    const canvasSize = container.canvas.size,
-      moveCenter = Object.assign({}, this.options.move.center),
-      isCenterPercent = moveCenter.mode === "percent";
-    this.moveCenter = {
-      x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
-      y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
-      radius: (_f = this.options.move.center.radius) !== null && _f !== void 0 ? _f : 0,
-      mode: (_g = this.options.move.center.mode) !== null && _g !== void 0 ? _g : "percent"
-    };
-    this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
-    switch (this.options.move.direction) {
-      case "inside":
-        this.outType = "inside";
-        break;
-      case "outside":
-        this.outType = "outside";
-        break;
-    }
+    this._initPosition(position);
     this.initialVelocity = this._calculateVelocity();
     this.velocity = this.initialVelocity.copy();
     this.moveDecay = 1 - getRangeValue(this.options.move.decay);
-    this.offset = Vector.origin;
     const particles = container.particles;
     particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
     particles.lastZIndex = this.position.z;
@@ -3858,13 +3821,13 @@ class Particle {
       updater.init(this);
     }
     for (const mover of container.particles.movers) {
-      (_h = mover.init) === null || _h === void 0 ? void 0 : _h.call(mover, this);
+      (_f = mover.init) === null || _f === void 0 ? void 0 : _f.call(mover, this);
     }
     if (drawer === null || drawer === void 0 ? void 0 : drawer.particleInit) {
       drawer.particleInit(container, this);
     }
     for (const [, plugin] of container.plugins) {
-      (_j = plugin.particleCreated) === null || _j === void 0 ? void 0 : _j.call(plugin, this);
+      (_g = plugin.particleCreated) === null || _g === void 0 ? void 0 : _g.call(plugin, this);
     }
   }
   isInsideCanvas() {
@@ -3989,6 +3952,32 @@ class Particle {
     }
     return color;
   }
+  _initPosition(position) {
+    var _a, _b;
+    const container = this.container,
+      zIndexValue = getRangeValue(this.options.zIndex.value);
+    this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+    this.initialPosition = this.position.copy();
+    const canvasSize = container.canvas.size,
+      moveCenter = Object.assign({}, this.options.move.center),
+      isCenterPercent = moveCenter.mode === "percent";
+    this.moveCenter = {
+      x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
+      y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
+      radius: (_a = this.options.move.center.radius) !== null && _a !== void 0 ? _a : 0,
+      mode: (_b = this.options.move.center.mode) !== null && _b !== void 0 ? _b : "percent"
+    };
+    this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
+    switch (this.options.move.direction) {
+      case "inside":
+        this.outType = "inside";
+        break;
+      case "outside":
+        this.outType = "outside";
+        break;
+    }
+    this.offset = Vector.origin;
+  }
   _loadShapeData(shapeOptions, reduceDuplicates) {
     const shapeData = shapeOptions.options[this.shape];
     if (shapeData) {
@@ -4288,8 +4277,8 @@ class Particles {
       }
       particle.destroy(override);
       this.array.splice(i--, 1);
-      const zIdx = this.zArray.indexOf(particle);
-      this.zArray.splice(zIdx, 1);
+      const idx = this.zArray.indexOf(particle);
+      this.zArray.splice(idx, 1);
       this.pool.push(particle);
       deleted++;
       this._engine.dispatchEvent("particleRemoved", {
@@ -4711,10 +4700,7 @@ class Container {
       this.plugins.set(id, plugin);
     }
     this.retina.init();
-    this.canvas.init();
-    this.updateActualOptions();
-    this.canvas.initBackground();
-    this.canvas.resize();
+    await this.canvas.init();
     this.zLayers = this.actualOptions.zLayers;
     this.duration = getRangeValue(this.actualOptions.duration) * 1000;
     this._delay = getRangeValue(this.actualOptions.delay) * 1000;
@@ -4917,158 +4903,48 @@ class Container {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Loader.js
-
-
-
-
-async function getDataFromUrl(jsonUrl, index) {
-  const url = itemFromSingleOrMultiple(jsonUrl, index);
-  if (!url) {
-    return;
-  }
-  const response = await fetch(url);
-  if (response.ok) {
-    return response.json();
-  }
-  console.error(`tsParticles - Error ${response.status} while retrieving config file`);
-}
-class Loader {
-  constructor(engine) {
-    this._engine = engine;
+;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/EventDispatcher.js
+class EventDispatcher {
+  constructor() {
+    this._listeners = new Map();
   }
-  load(tagId, options, index) {
-    const params = {
-      index,
-      remote: false
-    };
-    if (typeof tagId === "string") {
-      params.tagId = tagId;
-    } else {
-      params.options = tagId;
-    }
-    if (typeof options === "number") {
-      params.index = options;
-    } else {
-      params.options = options !== null && options !== void 0 ? options : params.options;
+  addEventListener(type, listener) {
+    var _a;
+    this.removeEventListener(type, listener);
+    if (!this._listeners.get(type)) {
+      this._listeners.set(type, []);
     }
-    return this.loadOptions(params);
+    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
   }
-  async loadJSON(tagId, jsonUrl, index) {
-    let url, id;
-    if (typeof jsonUrl === "number" || jsonUrl === undefined) {
-      url = tagId;
-    } else {
-      id = tagId;
-      url = jsonUrl;
-    }
-    return this.loadRemoteOptions({
-      tagId: id,
-      url,
-      index,
-      remote: true
-    });
+  dispatchEvent(type, args) {
+    var _a;
+    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args));
   }
-  async loadOptions(params) {
-    var _a, _b, _c;
-    const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(getRandom() * 10000)}`,
-      {
-        index,
-        url: jsonUrl,
-        remote
-      } = params,
-      options = remote ? await getDataFromUrl(jsonUrl, index) : params.options;
-    let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
-    if (!domContainer) {
-      domContainer = document.createElement("div");
-      domContainer.id = tagId;
-      (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
-    }
-    const currentOptions = itemFromSingleOrMultiple(options, index),
-      dom = this._engine.dom(),
-      oldIndex = dom.findIndex(v => v.id === tagId);
-    if (oldIndex >= 0) {
-      const old = this._engine.domItem(oldIndex);
-      if (old && !old.destroyed) {
-        old.destroy();
-        dom.splice(oldIndex, 1);
-      }
-    }
-    let canvasEl;
-    if (domContainer.tagName.toLowerCase() === "canvas") {
-      canvasEl = domContainer;
-      canvasEl.dataset[generatedAttribute] = "false";
-    } else {
-      const existingCanvases = domContainer.getElementsByTagName("canvas");
-      if (existingCanvases.length) {
-        canvasEl = existingCanvases[0];
-        canvasEl.dataset[generatedAttribute] = "false";
-      } else {
-        canvasEl = document.createElement("canvas");
-        canvasEl.dataset[generatedAttribute] = "true";
-        domContainer.appendChild(canvasEl);
-      }
-    }
-    if (!canvasEl.style.width) {
-      canvasEl.style.width = "100%";
-    }
-    if (!canvasEl.style.height) {
-      canvasEl.style.height = "100%";
-    }
-    const newItem = new Container(this._engine, tagId, currentOptions);
-    if (oldIndex >= 0) {
-      dom.splice(oldIndex, 0, newItem);
+  hasEventListener(type) {
+    return !!this._listeners.get(type);
+  }
+  removeAllEventListeners(type) {
+    if (!type) {
+      this._listeners = new Map();
     } else {
-      dom.push(newItem);
+      this._listeners.delete(type);
     }
-    newItem.canvas.loadCanvas(canvasEl);
-    await newItem.start();
-    return newItem;
   }
-  async loadRemoteOptions(params) {
-    return this.loadOptions(params);
-  }
-  async set(id, domContainer, options, index) {
-    const params = {
-      index,
-      remote: false
-    };
-    if (typeof id === "string") {
-      params.tagId = id;
-    } else {
-      params.element = id;
+  removeEventListener(type, listener) {
+    const arr = this._listeners.get(type);
+    if (!arr) {
+      return;
     }
-    if (domContainer instanceof HTMLElement) {
-      params.element = domContainer;
-    } else {
-      params.options = domContainer;
+    const length = arr.length,
+      idx = arr.indexOf(listener);
+    if (idx < 0) {
+      return;
     }
-    if (typeof options === "number") {
-      params.index = options;
+    if (length === 1) {
+      this._listeners.delete(type);
     } else {
-      params.options = options !== null && options !== void 0 ? options : params.options;
+      arr.splice(idx, 1);
     }
-    return this.loadOptions(params);
-  }
-  async setJSON(id, domContainer, jsonUrl, index) {
-    let url, newId, newIndex, element;
-    if (id instanceof HTMLElement) {
-      element = id;
-      url = domContainer;
-      newIndex = jsonUrl;
-    } else {
-      newId = id;
-      element = domContainer;
-      url = jsonUrl;
-      newIndex = index;
-    }
-    return this.loadRemoteOptions({
-      tagId: newId,
-      url,
-      index: newIndex,
-      element,
-      remote: true
-    });
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Plugins.js
@@ -5188,14 +5064,46 @@ class Plugins {
 
 
 
+
+
+
+async function getDataFromUrl(data) {
+  const url = itemFromSingleOrMultiple(data.url, data.index);
+  if (!url) {
+    return data.fallback;
+  }
+  const response = await fetch(url);
+  if (response.ok) {
+    return response.json();
+  }
+  console.error(`tsParticles - Error ${response.status} while retrieving config file`);
+  return data.fallback;
+}
 class Engine {
   constructor() {
+    this._configs = new Map();
     this._domArray = [];
     this._eventDispatcher = new EventDispatcher();
-    this._initialized = false;
-    this._loader = new Loader(this);
     this.plugins = new Plugins(this);
   }
+  get configs() {
+    const res = {};
+    for (const [name, config] of this._configs) {
+      res[name] = config;
+    }
+    return res;
+  }
+  addConfig(nameOrConfig, config) {
+    var _a;
+    if (typeof nameOrConfig === "string") {
+      if (config) {
+        config.name = nameOrConfig;
+        this._configs.set(nameOrConfig, config);
+      }
+    } else {
+      this._configs.set((_a = nameOrConfig.name) !== null && _a !== void 0 ? _a : "default", nameOrConfig);
+    }
+  }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
   }
@@ -5252,19 +5160,64 @@ class Engine {
     }
     dom.splice(index, 1);
   }
-  init() {
-    if (!this._initialized) {
-      this._initialized = true;
+  async load(params) {
+    var _a, _b, _c;
+    const id = (_a = params.id) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(getRandom() * 10000)}`,
+      {
+        index,
+        url
+      } = params,
+      options = url ? await getDataFromUrl({
+        fallback: params.options,
+        index,
+        url: url
+      }) : params.options;
+    let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(id);
+    if (!domContainer) {
+      domContainer = document.createElement("div");
+      domContainer.id = id;
+      (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
     }
-  }
-  async load(tagId, options) {
-    return this._loader.load(tagId, options);
-  }
-  async loadFromArray(tagId, options, index) {
-    return this._loader.load(tagId, options, index);
-  }
-  async loadJSON(tagId, pathConfigJson, index) {
-    return this._loader.loadJSON(tagId, pathConfigJson, index);
+    const currentOptions = itemFromSingleOrMultiple(options, index),
+      dom = this.dom(),
+      oldIndex = dom.findIndex(v => v.id === id);
+    if (oldIndex >= 0) {
+      const old = this.domItem(oldIndex);
+      if (old && !old.destroyed) {
+        old.destroy();
+        dom.splice(oldIndex, 1);
+      }
+    }
+    let canvasEl;
+    if (domContainer.tagName.toLowerCase() === "canvas") {
+      canvasEl = domContainer;
+      canvasEl.dataset[generatedAttribute] = "false";
+    } else {
+      const existingCanvases = domContainer.getElementsByTagName("canvas");
+      if (existingCanvases.length) {
+        canvasEl = existingCanvases[0];
+        canvasEl.dataset[generatedAttribute] = "false";
+      } else {
+        canvasEl = document.createElement("canvas");
+        canvasEl.dataset[generatedAttribute] = "true";
+        domContainer.appendChild(canvasEl);
+      }
+    }
+    if (!canvasEl.style.width) {
+      canvasEl.style.width = "100%";
+    }
+    if (!canvasEl.style.height) {
+      canvasEl.style.height = "100%";
+    }
+    const newItem = new Container(this, id, currentOptions);
+    if (oldIndex >= 0) {
+      dom.splice(oldIndex, 0, newItem);
+    } else {
+      dom.push(newItem);
+    }
+    newItem.canvas.loadCanvas(canvasEl);
+    await newItem.start();
+    return newItem;
   }
   async refresh() {
     for (const instance of this.dom()) {
@@ -5274,16 +5227,10 @@ class Engine {
   removeEventListener(type, listener) {
     this._eventDispatcher.removeEventListener(type, listener);
   }
-  async set(id, element, options) {
-    return this._loader.set(id, element, options);
-  }
-  async setJSON(id, element, pathConfigJson, index) {
-    return this._loader.setJSON(id, element, pathConfigJson, index);
-  }
   setOnClickHandler(callback) {
     const dom = this.dom();
     if (!dom.length) {
-      throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
+      throw new Error("Can only set click handlers after calling tsParticles.load()");
     }
     for (const domItem of dom) {
       domItem.addClickHandler(callback);
@@ -5397,7 +5344,14 @@ const rgbColorManager = new RgbColorManager(),
 addColorManager(rgbColorManager);
 addColorManager(hslColorManager);
 const tsParticles = new Engine();
-tsParticles.init();
+
+
+
+
+
+
+
+
 
 
 
@@ -7088,10 +7042,16 @@ async function loadRollUpdater(engine) {
 ;// CONCATENATED MODULE: ../pjs/dist/esm/index.js
 const initPjs = engine => {
   const particlesJS = (tagId, options) => {
-    return engine.load(tagId, options);
+    return engine.load({
+      id: tagId,
+      options: options
+    });
   };
   particlesJS.load = (tagId, pathConfigJson, callback) => {
-    engine.loadJSON(tagId, pathConfigJson).then(container => {
+    engine.load({
+      id: tagId,
+      url: pathConfigJson
+    }).then(container => {
       if (container) {
         callback(container);
       }
@@ -9608,42 +9568,14 @@ class OpacityUpdater {
   }
   init(particle) {
     const opacityOptions = particle.options.opacity;
-    particle.opacity = {
-      enable: opacityOptions.animation.enable,
-      max: getRangeMax(opacityOptions.value),
-      min: getRangeMin(opacityOptions.value),
-      value: getRangeValue(opacityOptions.value),
-      loops: 0,
-      maxLoops: getRangeValue(opacityOptions.animation.count)
-    };
+    particle.opacity = initParticleNumericAnimationValue(opacityOptions, 1);
     const opacityAnimation = opacityOptions.animation;
     if (opacityAnimation.enable) {
-      particle.opacity.decay = 1 - getRangeValue(opacityAnimation.decay);
-      particle.opacity.status = "increasing";
-      const opacityRange = opacityOptions.value;
-      particle.opacity.min = getRangeMin(opacityRange);
-      particle.opacity.max = getRangeMax(opacityRange);
-      switch (opacityAnimation.startValue) {
-        case "min":
-          particle.opacity.value = particle.opacity.min;
-          particle.opacity.status = "increasing";
-          break;
-        case "random":
-          particle.opacity.value = randomInRange(particle.opacity);
-          particle.opacity.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
-          break;
-        case "max":
-        default:
-          particle.opacity.value = particle.opacity.max;
-          particle.opacity.status = "decreasing";
-          break;
-      }
       particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * this.container.retina.reduceFactor;
       if (!opacityAnimation.sync) {
         particle.opacity.velocity *= getRandom();
       }
     }
-    particle.opacity.initialValue = particle.opacity.value;
   }
   isEnabled(particle) {
     var _a, _b, _c, _d;