@tsparticles/engine 3.0.0-beta.3 → 3.0.0-beta.5

package/tsparticles.engine.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.0.0-beta.3
+ * tsParticles Engine v3.0.0-beta.5
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -99,6 +99,7 @@ __webpack_require__.d(__webpack_exports__, {
   ParticlesDensity: () => (/* reexport */ ParticlesDensity),
   ParticlesInteractorBase: () => (/* reexport */ ParticlesInteractorBase),
   ParticlesNumber: () => (/* reexport */ ParticlesNumber),
+  ParticlesNumberLimit: () => (/* reexport */ ParticlesNumberLimit),
   ParticlesOptions: () => (/* reexport */ ParticlesOptions),
   Point: () => (/* reexport */ Point),
   Range: () => (/* reexport */ Range),
@@ -142,13 +143,13 @@ __webpack_require__.d(__webpack_exports__, {
   deepExtend: () => (/* reexport */ deepExtend),
   divMode: () => (/* reexport */ divMode),
   divModeExecute: () => (/* reexport */ divModeExecute),
+  drawEffect: () => (/* reexport */ drawEffect),
   drawLine: () => (/* reexport */ drawLine),
   drawParticle: () => (/* reexport */ drawParticle),
   drawParticlePlugin: () => (/* reexport */ drawParticlePlugin),
   drawPlugin: () => (/* reexport */ drawPlugin),
   drawShape: () => (/* reexport */ drawShape),
-  drawShapeAfterEffect: () => (/* reexport */ drawShapeAfterEffect),
-  drawTriangle: () => (/* reexport */ drawTriangle),
+  drawShapeAfterDraw: () => (/* reexport */ drawShapeAfterDraw),
   errorPrefix: () => (/* reexport */ errorPrefix),
   executeOnSingleOrMultiple: () => (/* reexport */ executeOnSingleOrMultiple),
   findItemFromSingleOrMultiple: () => (/* reexport */ findItemFromSingleOrMultiple),
@@ -172,7 +173,6 @@ __webpack_require__.d(__webpack_exports__, {
   getSize: () => (/* reexport */ getSize),
   getStyleFromHsl: () => (/* reexport */ getStyleFromHsl),
   getStyleFromRgb: () => (/* reexport */ getStyleFromRgb),
-  getValue: () => (/* reexport */ getValue),
   hasMatchMedia: () => (/* reexport */ hasMatchMedia),
   hslToRgb: () => (/* reexport */ hslToRgb),
   hslaToRgba: () => (/* reexport */ hslaToRgba),
@@ -411,17 +411,6 @@ function setRangeValue(source, value) {
     max: Math.max(max, value)
   } : setRangeValue(min, max);
 }
-function getValue(options) {
-  const random = options.random,
-    {
-      enable,
-      minimumValue
-    } = isBoolean(random) ? {
-      enable: random,
-      minimumValue: 0
-    } : random;
-  return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
-}
 function getDistances(pointA, pointB) {
   const dx = pointA.x - pointB.x,
     dy = pointA.y - pointB.y;
@@ -440,21 +429,21 @@ function getParticleDirectionAngle(direction, position, center) {
   }
   switch (direction) {
     case "top":
-      return -Math.PI / 2;
+      return -Math.PI * 0.5;
     case "top-right":
-      return -Math.PI / 4;
+      return -Math.PI * 0.25;
     case "right":
       return 0;
     case "bottom-right":
-      return Math.PI / 4;
+      return Math.PI * 0.25;
     case "bottom":
-      return Math.PI / 2;
+      return Math.PI * 0.5;
     case "bottom-left":
-      return 3 * Math.PI / 4;
+      return Math.PI * 0.75;
     case "left":
       return Math.PI;
     case "top-left":
-      return -3 * Math.PI / 4;
+      return -Math.PI * 0.75;
     case "inside":
       return Math.atan2(center.y - position.y, center.x - position.x);
     case "outside":
@@ -550,7 +539,7 @@ function rectSideBounce(data) {
   if (pOtherSide.min < rectOtherSide.min || pOtherSide.min > rectOtherSide.max || pOtherSide.max < rectOtherSide.min || pOtherSide.max > rectOtherSide.max) {
     return res;
   }
-  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0) {
+  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0) {
     res.velocity = velocity * -factor;
     res.bounced = true;
   }
@@ -686,7 +675,7 @@ function circleBounceDataFromParticle(p) {
     radius: p.getRadius(),
     mass: p.getMass(),
     velocity: p.velocity,
-    factor: Vector.create(getValue(p.options.bounce.horizontal), getValue(p.options.bounce.vertical))
+    factor: Vector.create(getRangeValue(p.options.bounce.horizontal.value), getRangeValue(p.options.bounce.vertical.value))
   };
 }
 function circleBounce(p1, p2) {
@@ -720,6 +709,7 @@ function rectBounce(particle, divBounds) {
   const pPos = particle.getPosition(),
     size = particle.getRadius(),
     bounds = calculateBounds(pPos, size),
+    bounceOptions = particle.options.bounce,
     resH = rectSideBounce({
       pSide: {
         min: bounds.left,
@@ -738,7 +728,7 @@ function rectBounce(particle, divBounds) {
         max: divBounds.bottom
       },
       velocity: particle.velocity.x,
-      factor: getValue(particle.options.bounce.horizontal)
+      factor: getRangeValue(bounceOptions.horizontal.value)
     });
   if (resH.bounced) {
     if (resH.velocity !== undefined) {
@@ -766,7 +756,7 @@ function rectBounce(particle, divBounds) {
       max: divBounds.right
     },
     velocity: particle.velocity.y,
-    factor: getValue(particle.options.bounce.vertical)
+    factor: getRangeValue(bounceOptions.vertical.value)
   });
   if (resV.bounced) {
     if (resV.velocity !== undefined) {
@@ -893,24 +883,6 @@ const randomColorValue = "random",
 function addColorManager(manager) {
   colorManagers.set(manager.key, manager);
 }
-function hue2rgb(p, q, t) {
-  if (t < 0) {
-    t += 1;
-  }
-  if (t > 1) {
-    t -= 1;
-  }
-  if (t < 1 / 6) {
-    return p + (q - p) * 6 * t;
-  }
-  if (t < 1 / 2) {
-    return q;
-  }
-  if (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
-  }
-  return p;
-}
 function stringToRgba(input) {
   for (const [, manager] of colorManagers) {
     if (input.startsWith(manager.stringPrefix)) {
@@ -990,7 +962,7 @@ function rgbToHsl(color) {
     min = Math.min(r1, g1, b1),
     res = {
       h: 0,
-      l: (max + min) / 2,
+      l: (max + min) * 0.5,
       s: 0
     };
   if (max !== min) {
@@ -1015,29 +987,48 @@ function stringToRgb(input) {
   return stringToRgba(input);
 }
 function hslToRgb(hsl) {
-  const result = {
-      b: 0,
-      g: 0,
-      r: 0
-    },
-    hslPercent = {
-      h: hsl.h / 360,
-      l: hsl.l / 100,
-      s: hsl.s / 100
+  const h = (hsl.h % 360 + 360) % 360,
+    s = Math.max(0, Math.min(100, hsl.s)),
+    l = Math.max(0, Math.min(100, hsl.l)),
+    hNormalized = h / 360,
+    sNormalized = s / 100,
+    lNormalized = l / 100;
+  if (s === 0) {
+    const grayscaleValue = Math.round(lNormalized * 255);
+    return {
+      r: grayscaleValue,
+      g: grayscaleValue,
+      b: grayscaleValue
     };
-  if (!hslPercent.s) {
-    result.r = result.g = result.b = hslPercent.l;
-  } else {
-    const q = hslPercent.l < 0.5 ? hslPercent.l * (1 + hslPercent.s) : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s,
-      p = 2 * hslPercent.l - q;
-    result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
-    result.g = hue2rgb(p, q, hslPercent.h);
-    result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
   }
-  result.r = Math.floor(result.r * 255);
-  result.g = Math.floor(result.g * 255);
-  result.b = Math.floor(result.b * 255);
-  return result;
+  const channel = (temp1, temp2, temp3) => {
+      if (temp3 < 0) {
+        temp3 += 1;
+      }
+      if (temp3 > 1) {
+        temp3 -= 1;
+      }
+      if (temp3 * 6 < 1) {
+        return temp1 + (temp2 - temp1) * 6 * temp3;
+      }
+      if (temp3 * 2 < 1) {
+        return temp2;
+      }
+      if (temp3 * 3 < 2) {
+        return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+      }
+      return temp1;
+    },
+    temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized,
+    temp2 = 2 * lNormalized - temp1,
+    red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)),
+    green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)),
+    blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+  return {
+    r: Math.round(red),
+    g: Math.round(green),
+    b: Math.round(blue)
+  };
 }
 function hslaToRgba(hsla) {
   const rgbResult = hslToRgb(hsla);
@@ -1171,13 +1162,6 @@ function drawLine(context, begin, end) {
   context.lineTo(end.x, end.y);
   context.closePath();
 }
-function drawTriangle(context, p1, p2, p3) {
-  context.beginPath();
-  context.moveTo(p1.x, p1.y);
-  context.lineTo(p2.x, p2.y);
-  context.lineTo(p3.x, p3.y);
-  context.closePath();
-}
 function paintBase(context, dimension, baseColor) {
   context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
   context.fillRect(0, 0, dimension.width, dimension.height);
@@ -1220,7 +1204,6 @@ function drawParticle(data) {
       d: rotateData.cos * (transform.d ?? 1)
     };
   context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-  context.beginPath();
   if (backgroundMask) {
     context.globalCompositeOperation = composite;
   }
@@ -1247,20 +1230,47 @@ function drawParticle(data) {
     opacity,
     delta
   };
+  context.beginPath();
   drawShape(drawData);
+  if (particle.shapeClose) {
+    context.closePath();
+  }
   if (strokeWidth > 0) {
     context.stroke();
   }
-  if (particle.close) {
-    context.closePath();
-  }
-  if (particle.fill) {
+  if (particle.shapeFill) {
     context.fill();
   }
-  drawShapeAfterEffect(drawData);
+  drawShapeAfterDraw(drawData);
+  drawEffect(drawData);
   context.globalCompositeOperation = "source-over";
   context.setTransform(1, 0, 0, 1, 0, 0);
 }
+function drawEffect(data) {
+  const {
+    container,
+    context,
+    particle,
+    radius,
+    opacity,
+    delta
+  } = data;
+  if (!particle.effect) {
+    return;
+  }
+  const drawer = container.effectDrawers.get(particle.effect);
+  if (!drawer) {
+    return;
+  }
+  drawer.draw({
+    context,
+    particle,
+    radius,
+    opacity,
+    delta,
+    pixelRatio: container.retina.pixelRatio
+  });
+}
 function drawShape(data) {
   const {
     container,
@@ -1273,7 +1283,7 @@ function drawShape(data) {
   if (!particle.shape) {
     return;
   }
-  const drawer = container.drawers.get(particle.shape);
+  const drawer = container.shapeDrawers.get(particle.shape);
   if (!drawer) {
     return;
   }
@@ -1286,7 +1296,7 @@ function drawShape(data) {
     pixelRatio: container.retina.pixelRatio
   });
 }
-function drawShapeAfterEffect(data) {
+function drawShapeAfterDraw(data) {
   const {
     container,
     context,
@@ -1298,11 +1308,11 @@ function drawShapeAfterEffect(data) {
   if (!particle.shape) {
     return;
   }
-  const drawer = container.drawers.get(particle.shape);
-  if (!drawer || !drawer.afterEffect) {
+  const drawer = container.shapeDrawers.get(particle.shape);
+  if (!drawer || !drawer.afterDraw) {
     return;
   }
-  drawer.afterEffect({
+  drawer.afterDraw({
     context,
     particle,
     radius,
@@ -1756,10 +1766,10 @@ class Canvas {
     this.element.width = size.width = this.element.offsetWidth * pxRatio;
     this.element.height = size.height = this.element.offsetHeight * pxRatio;
     if (this.container.started) {
-      this.resizeFactor = {
+      container.particles.setResizeFactor({
         width: size.width / oldSize.width,
         height: size.height / oldSize.height
-      };
+      });
     }
     return true;
   }
@@ -2229,10 +2239,10 @@ class BackgroundMask {
       this.composite = data.composite;
     }
     if (data.cover !== undefined) {
-      const cover = data.cover;
-      const color = isString(data.cover) ? {
-        color: data.cover
-      } : data.cover;
+      const cover = data.cover,
+        color = isString(data.cover) ? {
+          color: data.cover
+        } : data.cover;
       this.cover.load(cover.color !== undefined ? cover : {
         color: color
       });
@@ -2392,11 +2402,7 @@ class Events {
       });
     }
     this.onHover.load(data.onHover);
-    if (isBoolean(data.resize)) {
-      this.resize.enable = data.resize;
-    } else {
-      this.resize.load(data.resize);
-    }
+    this.resize.load(data.resize);
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Interactivity/Modes/Modes.js
@@ -2534,17 +2540,16 @@ class Theme {
     }
   }
 }
-;// CONCATENATED MODULE: ./dist/browser/Options/Classes/ColorAnimation.js
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/AnimationOptions.js
 
-class ColorAnimation {
+class AnimationOptions {
   constructor() {
     this.count = 0;
     this.enable = false;
-    this.offset = 0;
     this.speed = 1;
-    this.delay = 0;
     this.decay = 0;
-    this.sync = true;
+    this.delay = 0;
+    this.sync = false;
   }
   load(data) {
     if (!data) {
@@ -2556,9 +2561,6 @@ class ColorAnimation {
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
-    if (data.offset !== undefined) {
-      this.offset = setRangeValue(data.offset);
-    }
     if (data.speed !== undefined) {
       this.speed = setRangeValue(data.speed);
     }
@@ -2573,6 +2575,44 @@ class ColorAnimation {
     }
   }
 }
+class RangedAnimationOptions extends AnimationOptions {
+  constructor() {
+    super();
+    this.mode = "auto";
+    this.startValue = "random";
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
+    if (data.startValue !== undefined) {
+      this.startValue = data.startValue;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/ColorAnimation.js
+
+
+class ColorAnimation extends AnimationOptions {
+  constructor() {
+    super();
+    this.offset = 0;
+    this.sync = true;
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.offset !== undefined) {
+      this.offset = setRangeValue(data.offset);
+    }
+  }
+}
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/HslAnimation.js
 
 class HslAnimation {
@@ -2660,99 +2700,19 @@ class CollisionsOverlap {
     }
   }
 }
-;// CONCATENATED MODULE: ./dist/browser/Options/Classes/AnimationOptions.js
-
-class AnimationOptions {
-  constructor() {
-    this.count = 0;
-    this.enable = false;
-    this.speed = 1;
-    this.decay = 0;
-    this.delay = 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.delay !== undefined) {
-      this.delay = setRangeValue(data.delay);
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
-  }
-}
-class RangedAnimationOptions extends AnimationOptions {
-  constructor() {
-    super();
-    this.mode = "auto";
-    this.startValue = "random";
-  }
-  load(data) {
-    super.load(data);
-    if (!data) {
-      return;
-    }
-    if (data.mode !== undefined) {
-      this.mode = data.mode;
-    }
-    if (data.startValue !== undefined) {
-      this.startValue = data.startValue;
-    }
-  }
-}
-;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Random.js
-class Random {
-  constructor() {
-    this.enable = false;
-    this.minimumValue = 0;
-  }
-  load(data) {
-    if (!data) {
-      return;
-    }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    if (data.minimumValue !== undefined) {
-      this.minimumValue = data.minimumValue;
-    }
-  }
-}
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/ValueWithRandom.js
 
 
-
-
 class ValueWithRandom {
   constructor() {
-    this.random = new Random();
     this.value = 0;
   }
   load(data) {
     if (!data) {
       return;
     }
-    if (isBoolean(data.random)) {
-      this.random.enable = data.random;
-    } else {
-      this.random.load(data.random);
-    }
     if (data.value !== undefined) {
-      this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
+      this.value = setRangeValue(data.value);
     }
   }
 }
@@ -2786,7 +2746,6 @@ class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
 class ParticlesBounceFactor extends ValueWithRandom {
   constructor() {
     super();
-    this.random.minimumValue = 0.1;
     this.value = 1;
   }
 }
@@ -2837,6 +2796,39 @@ class Collisions {
     this.overlap.load(data.overlap);
   }
 }
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Effect/Effect.js
+
+class Effect {
+  constructor() {
+    this.close = true;
+    this.fill = true;
+    this.options = {};
+    this.type = [];
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    const options = data.options;
+    if (options !== undefined) {
+      for (const effect in options) {
+        const item = options[effect];
+        if (item) {
+          this.options[effect] = deepExtend(this.options[effect] ?? {}, item);
+        }
+      }
+    }
+    if (data.close !== undefined) {
+      this.close = data.close;
+    }
+    if (data.fill !== undefined) {
+      this.fill = data.fill;
+    }
+    if (data.type !== undefined) {
+      this.type = data.type;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Move/MoveAngle.js
 
 class MoveAngle {
@@ -3165,11 +3157,10 @@ class OpacityAnimation extends RangedAnimationOptions {
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Opacity/Opacity.js
 
 
-class Opacity extends ValueWithRandom {
+class Opacity extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new OpacityAnimation();
-    this.random.minimumValue = 0.1;
     this.value = 1;
   }
   load(data) {
@@ -3207,12 +3198,31 @@ class ParticlesDensity {
     }
   }
 }
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Number/ParticlesNumberLimit.js
+class ParticlesNumberLimit {
+  constructor() {
+    this.mode = "delete";
+    this.value = 0;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
+    if (data.value !== undefined) {
+      this.value = data.value;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Number/ParticlesNumber.js
 
+
 class ParticlesNumber {
   constructor() {
     this.density = new ParticlesDensity();
-    this.limit = 0;
+    this.limit = new ParticlesNumberLimit();
     this.value = 0;
   }
   load(data) {
@@ -3220,10 +3230,7 @@ class ParticlesNumber {
       return;
     }
     this.density.load(data.density);
-    const limit = data.limit;
-    if (limit !== undefined) {
-      this.limit = limit;
-    }
+    this.limit.load(data.limit);
     if (data.value !== undefined) {
       this.value = data.value;
     }
@@ -3318,11 +3325,10 @@ class SizeAnimation extends RangedAnimationOptions {
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Particles/Size/Size.js
 
 
-class Size extends ValueWithRandom {
+class Size extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new SizeAnimation();
-    this.random.minimumValue = 1;
     this.value = 3;
   }
   load(data) {
@@ -3396,6 +3402,7 @@ class ZIndex extends ValueWithRandom {
 
 
 
+
 class ParticlesOptions {
   constructor(engine, container) {
     this._engine = engine;
@@ -3404,6 +3411,7 @@ class ParticlesOptions {
     this.collisions = new Collisions();
     this.color = new AnimatableColor();
     this.color.value = "#fff";
+    this.effect = new Effect();
     this.groups = {};
     this.move = new Move();
     this.number = new ParticlesNumber();
@@ -3419,22 +3427,26 @@ class ParticlesOptions {
     if (!data) {
       return;
     }
-    this.bounce.load(data.bounce);
-    this.color.load(AnimatableColor.create(this.color, data.color));
     if (data.groups !== undefined) {
-      for (const group in data.groups) {
+      for (const group of Object.keys(data.groups)) {
+        if (!Object.hasOwn(data.groups, group)) {
+          continue;
+        }
         const item = data.groups[group];
         if (item !== undefined) {
           this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
         }
       }
     }
-    this.move.load(data.move);
-    this.number.load(data.number);
-    this.opacity.load(data.opacity);
     if (data.reduceDuplicates !== undefined) {
       this.reduceDuplicates = data.reduceDuplicates;
     }
+    this.bounce.load(data.bounce);
+    this.color.load(AnimatableColor.create(this.color, data.color));
+    this.effect.load(data.effect);
+    this.move.load(data.move);
+    this.number.load(data.number);
+    this.opacity.load(data.opacity);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -3693,6 +3705,16 @@ class InteractionManager {
 
 
 
+function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
+  const effectData = effectOptions.options[effect];
+  if (!effectData) {
+    return;
+  }
+  return deepExtend({
+    close: effectOptions.close,
+    fill: effectOptions.fill
+  }, itemFromSingleOrMultiple(effectData, id, reduceDuplicates));
+}
 function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
   const shapeData = shapeOptions.options[shape];
   if (!shapeData) {
@@ -3771,8 +3793,8 @@ class Particle {
       const rad = Math.PI / 180 * getRangeValue(moveOptions.angle.value),
         radOffset = Math.PI / 180 * getRangeValue(moveOptions.angle.offset),
         range = {
-          left: radOffset - rad / 2,
-          right: radOffset + rad / 2
+          left: radOffset - rad * 0.5,
+          right: radOffset + rad * 0.5
         };
       if (!moveOptions.straight) {
         res.angle += randomInRange(setRangeValue(range.left, range.right));
@@ -3803,7 +3825,7 @@ class Particle {
         return color;
       }
       const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1,
-        backSum = this.roll.horizontal ? Math.PI / 2 : 0,
+        backSum = this.roll.horizontal ? Math.PI * 0.5 : 0,
         rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
       if (!rolled) {
         return color;
@@ -3849,20 +3871,16 @@ class Particle {
     this.bubble.inRange = false;
     this.slow.inRange = false;
     const container = this.container,
-      pathGenerator = this.pathGenerator;
+      pathGenerator = this.pathGenerator,
+      shapeDrawer = container.shapeDrawers.get(this.shape);
+    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
     for (const [, plugin] of container.plugins) {
-      if (plugin.particleDestroyed) {
-        plugin.particleDestroyed(this, override);
-      }
+      plugin.particleDestroyed && plugin.particleDestroyed(this, override);
     }
     for (const updater of container.particles.updaters) {
-      if (updater.particleDestroyed) {
-        updater.particleDestroyed(this, override);
-      }
-    }
-    if (pathGenerator) {
-      pathGenerator.reset(this);
+      updater.particleDestroyed && updater.particleDestroyed(this, override);
     }
+    pathGenerator && pathGenerator.reset(this);
   }
   draw(delta) {
     const container = this.container,
@@ -3876,7 +3894,7 @@ class Particle {
     return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
   }
   getMass() {
-    return this.getRadius() ** 2 * Math.PI / 2;
+    return this.getRadius() ** 2 * Math.PI * 0.5;
   }
   getPosition() {
     return {
@@ -3896,9 +3914,11 @@ class Particle {
       engine = this._engine;
     this.id = id;
     this.group = group;
-    this.fill = true;
+    this.effectClose = true;
+    this.effectFill = true;
+    this.shapeClose = true;
+    this.shapeFill = true;
     this.pathRotation = false;
-    this.close = true;
     this.lastPathTime = 0;
     this.destroyed = false;
     this.unbreakable = false;
@@ -3912,22 +3932,40 @@ class Particle {
     const pxRatio = container.retina.pixelRatio,
       mainOptions = container.actualOptions,
       particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles),
+      effectType = particlesOptions.effect.type,
       shapeType = particlesOptions.shape.type,
       {
         reduceDuplicates
       } = particlesOptions;
+    this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
     this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
-    const shapeOptions = particlesOptions.shape;
-    if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-      const overrideShapeType = overrideOptions.shape.type,
-        shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
-      if (shape) {
-        this.shape = shape;
-        shapeOptions.load(overrideOptions.shape);
+    const effectOptions = particlesOptions.effect,
+      shapeOptions = particlesOptions.shape;
+    if (overrideOptions) {
+      if (overrideOptions.effect && overrideOptions.effect.type) {
+        const overrideEffectType = overrideOptions.effect.type,
+          effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
+        if (effect) {
+          this.effect = effect;
+          effectOptions.load(overrideOptions.effect);
+        }
+      }
+      if (overrideOptions.shape && overrideOptions.shape.type) {
+        const overrideShapeType = overrideOptions.shape.type,
+          shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
+        if (shape) {
+          this.shape = shape;
+          shapeOptions.load(overrideOptions.shape);
+        }
       }
     }
+    this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
     this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
     particlesOptions.load(overrideOptions);
+    const effectData = this.effectData;
+    if (effectData) {
+      particlesOptions.load(effectData.particles);
+    }
     const shapeData = this.shapeData;
     if (shapeData) {
       particlesOptions.load(shapeData.particles);
@@ -3936,11 +3974,13 @@ class Particle {
     interactivity.load(container.actualOptions.interactivity);
     interactivity.load(particlesOptions.interactivity);
     this.interactivity = interactivity;
-    this.fill = shapeData?.fill ?? particlesOptions.shape.fill;
-    this.close = shapeData?.close ?? particlesOptions.shape.close;
+    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
+    this.effectClose = effectData?.close ?? particlesOptions.effect.close;
+    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
+    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
     this.options = particlesOptions;
     const pathOptions = this.options.move.path;
-    this.pathDelay = getValue(pathOptions.delay) * 1000;
+    this.pathDelay = getRangeValue(pathOptions.delay.value) * 1000;
     if (pathOptions.generator) {
       this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
       if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -3961,34 +4001,46 @@ class Particle {
     this.velocity = this.initialVelocity.copy();
     this.moveDecay = 1 - getRangeValue(this.options.move.decay);
     const particles = container.particles;
-    particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
-    particles.lastZIndex = this.position.z;
+    particles.setLastZIndex(this.position.z);
     this.zIndexFactor = this.position.z / container.zLayers;
     this.sides = 24;
-    let drawer = container.drawers.get(this.shape);
-    if (!drawer) {
-      drawer = this._engine.getShapeDrawer(this.shape);
-      if (drawer) {
-        container.drawers.set(this.shape, drawer);
+    let effectDrawer = container.effectDrawers.get(this.effect);
+    if (!effectDrawer) {
+      effectDrawer = this._engine.getEffectDrawer(this.effect);
+      if (effectDrawer) {
+        container.effectDrawers.set(this.effect, effectDrawer);
       }
     }
-    if (drawer && drawer.loadShape) {
-      drawer.loadShape(this);
+    if (effectDrawer && effectDrawer.loadEffect) {
+      effectDrawer.loadEffect(this);
+    }
+    let shapeDrawer = container.shapeDrawers.get(this.shape);
+    if (!shapeDrawer) {
+      shapeDrawer = this._engine.getShapeDrawer(this.shape);
+      if (shapeDrawer) {
+        container.shapeDrawers.set(this.shape, shapeDrawer);
+      }
     }
-    const sideCountFunc = drawer?.getSidesCount;
+    if (shapeDrawer && shapeDrawer.loadShape) {
+      shapeDrawer.loadShape(this);
+    }
+    const sideCountFunc = shapeDrawer?.getSidesCount;
     if (sideCountFunc) {
       this.sides = sideCountFunc(this);
     }
     this.spawning = false;
     this.shadowColor = rangeColorToRgb(this.options.shadow.color);
-    for (const updater of container.particles.updaters) {
+    for (const updater of particles.updaters) {
       updater.init(this);
     }
-    for (const mover of container.particles.movers) {
+    for (const mover of particles.movers) {
       mover.init && mover.init(this);
     }
-    if (drawer && drawer.particleInit) {
-      drawer.particleInit(container, this);
+    if (effectDrawer && effectDrawer.particleInit) {
+      effectDrawer.particleInit(container, this);
+    }
+    if (shapeDrawer && shapeDrawer.particleInit) {
+      shapeDrawer.particleInit(container, this);
     }
     for (const [, plugin] of container.plugins) {
       plugin.particleCreated && plugin.particleCreated(this);
@@ -4115,7 +4167,7 @@ class QuadTree {
           capacity
         } = this;
       for (let i = 0; i < 4; i++) {
-        this._subs.push(new QuadTree(new Rectangle(x + width / 2 * (i % 2), y + height / 2 * (Math.round(i / 2) - i % 2), width / 2, height / 2), capacity));
+        this._subs.push(new QuadTree(new Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - i % 2), width * 0.5, height * 0.5), capacity));
       }
       this._divided = true;
     };
@@ -4171,21 +4223,36 @@ class QuadTree {
 
 const qTreeCapacity = 4;
 const qTreeRectangle = canvasSize => {
-  return new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2);
+  const {
+      height,
+      width
+    } = canvasSize,
+    posOffset = -0.25,
+    sizeFactor = 1.5;
+  return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
 class Particles {
   constructor(engine, container) {
     this._applyDensity = (options, manualCount, group) => {
+      const numberOptions = options.number;
       if (!options.number.density?.enable) {
+        if (group === undefined) {
+          this._limit = numberOptions.limit.value;
+        } else {
+          this._groupLimits.set(group, numberOptions.limit.value);
+        }
         return;
       }
-      const numberOptions = options.number,
-        densityFactor = this._initDensityFactor(numberOptions.density),
+      const densityFactor = this._initDensityFactor(numberOptions.density),
         optParticlesNumber = numberOptions.value,
-        optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber,
+        optParticlesLimit = numberOptions.limit.value > 0 ? numberOptions.limit.value : optParticlesNumber,
         particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,
         particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
-      this.limit = numberOptions.limit * densityFactor;
+      if (group === undefined) {
+        this._limit = numberOptions.limit.value * densityFactor;
+      } else {
+        this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+      }
       if (particlesCount < particlesNumber) {
         this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
       } else if (particlesCount > particlesNumber) {
@@ -4203,7 +4270,7 @@ class Particles {
     };
     this._pushParticle = (position, overrideOptions, group, initializer) => {
       try {
-        let particle = this.pool.pop();
+        let particle = this._pool.pop();
         if (particle) {
           particle.init(this._nextId, position, overrideOptions, group);
         } else {
@@ -4240,7 +4307,7 @@ class Particles {
       const zIdx = this._zArray.indexOf(particle);
       this._array.splice(index, 1);
       this._zArray.splice(zIdx, 1);
-      this.pool.push(particle);
+      this._pool.push(particle);
       this._engine.dispatchEvent("particleRemoved", {
         container: this._container,
         data: {
@@ -4254,10 +4321,11 @@ class Particles {
     this._nextId = 0;
     this._array = [];
     this._zArray = [];
-    this.pool = [];
-    this.limit = 0;
-    this.needsSort = false;
-    this.lastZIndex = 0;
+    this._pool = [];
+    this._limit = 0;
+    this._groupLimits = new Map();
+    this._needsSort = false;
+    this._lastZIndex = 0;
     this._interactionManager = new InteractionManager(engine, container);
     const canvasSize = container.canvas.size;
     this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -4275,19 +4343,22 @@ class Particles {
     }
   }
   addParticle(position, overrideOptions, group, initializer) {
-    this.pushing = true;
-    const container = this._container,
-      options = container.actualOptions,
-      limit = options.particles.number.limit;
+    const limitOptions = this._container.actualOptions.particles.number.limit,
+      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,
+      currentCount = this.count;
     if (limit > 0) {
-      const countToRemove = this.count + 1 - limit;
-      if (countToRemove > 0) {
-        this.removeQuantity(countToRemove);
+      if (limitOptions.mode === "delete") {
+        const countToRemove = currentCount + 1 - limit;
+        if (countToRemove > 0) {
+          this.removeQuantity(countToRemove);
+        }
+      } else if (limitOptions.mode === "wait") {
+        if (currentCount >= limit) {
+          return;
+        }
       }
     }
-    const res = this._pushParticle(position, overrideOptions, group, initializer);
-    this.pushing = false;
-    return res;
+    return this._pushParticle(position, overrideOptions, group, initializer);
   }
   clear() {
     this._array = [];
@@ -4326,8 +4397,8 @@ class Particles {
   init() {
     const container = this._container,
       options = container.actualOptions;
-    this.lastZIndex = 0;
-    this.needsSort = false;
+    this._lastZIndex = 0;
+    this._needsSort = false;
     let handled = false;
     this.updaters = this._engine.getUpdaters(container, true);
     this._interactionManager.init();
@@ -4394,6 +4465,13 @@ class Particles {
     }
     this._applyDensity(options.particles, options.manualParticles.length);
   }
+  setLastZIndex(zIndex) {
+    this._lastZIndex = zIndex;
+    this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+  }
+  setResizeFactor(factor) {
+    this._resizeFactor = factor;
+  }
   async update(delta) {
     const container = this._container,
       particlesToDelete = new Set();
@@ -4402,10 +4480,10 @@ class Particles {
       pathGenerator.update();
     }
     for (const [, plugin] of container.plugins) {
-      plugin.update && plugin.update(delta);
+      plugin.update && (await plugin.update(delta));
     }
+    const resizeFactor = this._resizeFactor;
     for (const particle of this._array) {
-      const resizeFactor = container.canvas.resizeFactor;
       if (resizeFactor && !particle.ignoresResizeRatio) {
         particle.position.x *= resizeFactor.width;
         particle.position.y *= resizeFactor.height;
@@ -4433,7 +4511,7 @@ class Particles {
       const checkDelete = p => !particlesToDelete.has(p);
       this._array = this.filter(checkDelete);
       this._zArray = this._zArray.filter(checkDelete);
-      this.pool.push(...particlesToDelete);
+      this._pool.push(...particlesToDelete);
     }
     await this._interactionManager.externalInteract(delta);
     for (const particle of this._array) {
@@ -4444,12 +4522,12 @@ class Particles {
         await this._interactionManager.particlesInteract(particle, delta);
       }
     }
-    delete container.canvas.resizeFactor;
-    if (this.needsSort) {
+    delete this._resizeFactor;
+    if (this._needsSort) {
       const zArray = this._zArray;
       zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-      this.lastZIndex = zArray[zArray.length - 1].position.z;
-      this.needsSort = false;
+      this._lastZIndex = zArray[zArray.length - 1].position.z;
+      this._needsSort = false;
     }
   }
 }
@@ -4476,7 +4554,6 @@ class Retina {
     }
     const particles = options.particles,
       moveOptions = particles.move;
-    this.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
     this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
     this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
   }
@@ -4486,7 +4563,6 @@ class Retina {
       moveOptions = options.move,
       moveDistance = moveOptions.distance,
       props = particle.retina;
-    props.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
     props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
     props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
     props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
@@ -4535,14 +4611,14 @@ class Container {
     };
     this._nextFrame = async timestamp => {
       try {
-        if (!this.smooth && this.lastFrameTime !== undefined && timestamp < this.lastFrameTime + 1000 / this.fpsLimit) {
+        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
           this.draw(false);
           return;
         }
-        this.lastFrameTime ??= timestamp;
-        const delta = initDelta(timestamp - this.lastFrameTime, this.fpsLimit, this.smooth);
+        this._lastFrameTime ??= timestamp;
+        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
         this.addLifeTime(delta.value);
-        this.lastFrameTime = timestamp;
+        this._lastFrameTime = timestamp;
         if (delta.value > 1000) {
           this.draw(false);
           return;
@@ -4562,7 +4638,7 @@ class Container {
     this._engine = engine;
     this.id = Symbol(id);
     this.fpsLimit = 120;
-    this.smooth = false;
+    this._smooth = false;
     this._delay = 0;
     this._duration = 0;
     this._lifeTime = 0;
@@ -4570,7 +4646,7 @@ class Container {
     this.started = false;
     this.destroyed = false;
     this._paused = true;
-    this.lastFrameTime = 0;
+    this._lastFrameTime = 0;
     this.zLayers = 100;
     this.pageHidden = false;
     this._sourceOptions = sourceOptions;
@@ -4586,7 +4662,8 @@ class Container {
       }
     };
     this.plugins = new Map();
-    this.drawers = new Map();
+    this.effectDrawers = new Map();
+    this.shapeDrawers = new Map();
     this._options = loadContainerOptions(this._engine, this);
     this.actualOptions = loadContainerOptions(this._engine, this);
     this._eventListeners = new EventListeners(this);
@@ -4704,11 +4781,17 @@ class Container {
     this.stop();
     this.particles.destroy();
     this.canvas.destroy();
-    for (const [, drawer] of this.drawers) {
-      drawer.destroy && drawer.destroy(this);
+    for (const [, effectDrawer] of this.effectDrawers) {
+      effectDrawer.destroy && effectDrawer.destroy(this);
+    }
+    for (const [, shapeDrawer] of this.shapeDrawers) {
+      shapeDrawer.destroy && shapeDrawer.destroy(this);
     }
-    for (const key of this.drawers.keys()) {
-      this.drawers.delete(key);
+    for (const key of this.effectDrawers.keys()) {
+      this.effectDrawers.delete(key);
+    }
+    for (const key of this.shapeDrawers.keys()) {
+      this.shapeDrawers.delete(key);
     }
     this._engine.clearPlugins(this);
     this.destroyed = true;
@@ -4728,7 +4811,7 @@ class Container {
     let refreshTime = force;
     this._drawAnimationFrame = requestAnimationFrame(async timestamp => {
       if (refreshTime) {
-        this.lastFrameTime = undefined;
+        this._lastFrameTime = undefined;
         refreshTime = false;
       }
       await this._nextFrame(timestamp);
@@ -4763,11 +4846,18 @@ class Container {
     if (!guardCheck(this)) {
       return;
     }
+    const effects = this._engine.getSupportedEffects();
+    for (const type of effects) {
+      const drawer = this._engine.getEffectDrawer(type);
+      if (drawer) {
+        this.effectDrawers.set(type, drawer);
+      }
+    }
     const shapes = this._engine.getSupportedShapes();
     for (const type of shapes) {
       const drawer = this._engine.getShapeDrawer(type);
       if (drawer) {
-        this.drawers.set(type, drawer);
+        this.shapeDrawers.set(type, drawer);
       }
     }
     this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
@@ -4786,8 +4876,11 @@ class Container {
     this._delay = getRangeValue(this.actualOptions.delay) * 1000;
     this._lifeTime = 0;
     this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
-    this.smooth = this.actualOptions.smooth;
-    for (const [, drawer] of this.drawers) {
+    this._smooth = this.actualOptions.smooth;
+    for (const [, drawer] of this.effectDrawers) {
+      drawer.init && (await drawer.init(this));
+    }
+    for (const [, drawer] of this.shapeDrawers) {
       drawer.init && (await drawer.init(this));
     }
     for (const [, plugin] of this.plugins) {
@@ -4928,10 +5021,10 @@ class Container {
     this.actualOptions.responsive = [];
     const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
     this.actualOptions.setTheme(this._currentTheme);
-    if (this.responsiveMaxWidth === newMaxWidth) {
+    if (this._responsiveMaxWidth === newMaxWidth) {
       return false;
     }
-    this.responsiveMaxWidth = newMaxWidth;
+    this._responsiveMaxWidth = newMaxWidth;
     return true;
   }
 }
@@ -5022,7 +5115,8 @@ class Engine {
     this.movers = new Map();
     this.updaters = new Map();
     this.presets = new Map();
-    this.drawers = new Map();
+    this.effectDrawers = new Map();
+    this.shapeDrawers = new Map();
     this.pathGenerators = new Map();
   }
   get configs() {
@@ -5033,7 +5127,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.3";
+    return "3.0.0-beta.5";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5045,6 +5139,12 @@ class Engine {
       }
     });
   }
+  async addEffect(effect, drawer, refresh = true) {
+    executeOnSingleOrMultiple(effect, type => {
+      !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+    });
+    await this.refresh(refresh);
+  }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
   }
@@ -5074,7 +5174,7 @@ class Engine {
   }
   async addShape(shape, drawer, refresh = true) {
     executeOnSingleOrMultiple(shape, type => {
-      !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
+      !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
     });
     await this.refresh(refresh);
   }
@@ -5105,6 +5205,9 @@ class Engine {
     }
     return res;
   }
+  getEffectDrawer(type) {
+    return this.effectDrawers.get(type);
+  }
   getInteractors(container, force = false) {
     return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
   }
@@ -5121,10 +5224,13 @@ class Engine {
     return this.presets.get(preset);
   }
   getShapeDrawer(type) {
-    return this.drawers.get(type);
+    return this.shapeDrawers.get(type);
+  }
+  getSupportedEffects() {
+    return this.effectDrawers.keys();
   }
   getSupportedShapes() {
-    return this.drawers.keys();
+    return this.shapeDrawers.keys();
   }
   getUpdaters(container, force = false) {
     return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
@@ -5420,7 +5526,6 @@ class ParticlesInteractorBase {
 
 
 
-
 
 
 ;// CONCATENATED MODULE: ./dist/browser/index.js