tsparticles 2.6.0 → 2.7.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.6.0
+ * v2.7.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -741,13 +741,13 @@ function rectBounce(particle, divBounds) {
   }
 }
 function executeOnSingleOrMultiple(obj, callback) {
-  return obj instanceof Array ? obj.map(item => callback(item)) : callback(obj);
+  return obj instanceof Array ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
 }
 function itemFromSingleOrMultiple(obj, index, useIndex) {
   return obj instanceof Array ? itemFromArray(obj, index, useIndex) : obj;
 }
 function findItemFromSingleOrMultiple(obj, callback) {
-  return obj instanceof Array ? obj.find(t => callback(t)) : callback(obj) ? obj : undefined;
+  return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/ColorUtils.js
 
@@ -1019,10 +1019,13 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
     colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
     colorValue.status = "increasing";
+    colorValue.loops = 0;
+    colorValue.maxLoops = getRangeValue(colorAnimation.count);
     if (!colorAnimation.sync) {
       colorValue.velocity *= getRandom();
       colorValue.value *= getRandom();
     }
+    colorValue.initialValue = colorValue.value;
   } else {
     colorValue.velocity = 0;
   }
@@ -1050,7 +1053,7 @@ function clear(context, dimension) {
   context.clearRect(0, 0, dimension.width, dimension.height);
 }
 function drawParticle(data) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const {
     container,
     context,
@@ -1091,13 +1094,13 @@ function drawParticle(data) {
   if (colorStyles.fill) {
     context.fillStyle = colorStyles.fill;
   }
-  const stroke = particle.stroke;
-  context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
+  const strokeWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
+  context.lineWidth = strokeWidth;
   if (colorStyles.stroke) {
     context.strokeStyle = colorStyles.stroke;
   }
   drawShape(container, context, particle, radius, opacity, delta);
-  if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
+  if (strokeWidth > 0) {
     context.stroke();
   }
   if (particle.close) {
@@ -1255,12 +1258,12 @@ class Canvas {
       return;
     }
     this.draw(ctx => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d;
       const options = this.container.actualOptions,
         zIndexOptions = particle.options.zIndex,
         zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate,
         opacity = (_c = (_a = particle.bubble.opacity) !== null && _a !== void 0 ? _a : (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1,
-        strokeOpacity = (_e = (_d = particle.stroke) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : opacity,
+        strokeOpacity = (_d = particle.strokeOpacity) !== null && _d !== void 0 ? _d : opacity,
         zOpacity = opacity * zOpacityFactor,
         zStrokeOpacity = strokeOpacity * zOpacityFactor,
         transform = {},
@@ -2834,7 +2837,7 @@ class Move {
     this.attract.load(data.attract);
     this.center.load(data.center);
     if (data.decay !== undefined) {
-      this.decay = data.decay;
+      this.decay = setRangeValue(data.decay);
     }
     if (data.direction !== undefined) {
       this.direction = data.direction;
@@ -2991,8 +2994,20 @@ class Opacity extends ValueWithRandom {
 class ParticlesDensity {
   constructor() {
     this.enable = false;
-    this.area = 800;
-    this.factor = 1000;
+    this.width = 1920;
+    this.height = 1080;
+  }
+  get area() {
+    return this.width;
+  }
+  set area(value) {
+    this.width = value;
+  }
+  get factor() {
+    return this.height;
+  }
+  set factor(value) {
+    this.height = value;
   }
   get value_area() {
     return this.area;
@@ -3001,19 +3016,20 @@ class ParticlesDensity {
     this.area = value;
   }
   load(data) {
-    var _a;
+    var _a, _b, _c;
     if (!data) {
       return;
     }
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
-    const area = (_a = data.area) !== null && _a !== void 0 ? _a : data.value_area;
-    if (area !== undefined) {
-      this.area = area;
+    const width = (_b = (_a = data.width) !== null && _a !== void 0 ? _a : data.area) !== null && _b !== void 0 ? _b : data.value_area;
+    if (width !== undefined) {
+      this.width = width;
     }
-    if (data.factor !== undefined) {
-      this.factor = data.factor;
+    const height = (_c = data.height) !== null && _c !== void 0 ? _c : data.factor;
+    if (height !== undefined) {
+      this.height = height;
     }
   }
 }
@@ -3246,6 +3262,7 @@ class Size extends ValueWithRandom {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Stroke.js
 
+
 class Stroke {
   constructor() {
     this.width = 0;
@@ -3258,10 +3275,10 @@ class Stroke {
       this.color = AnimatableColor.create(this.color, data.color);
     }
     if (data.width !== undefined) {
-      this.width = data.width;
+      this.width = setRangeValue(data.width);
     }
     if (data.opacity !== undefined) {
-      this.opacity = data.opacity;
+      this.opacity = setRangeValue(data.opacity);
     }
   }
 }
@@ -3678,22 +3695,8 @@ class Particle {
     container.canvas.drawParticle(this, delta);
   }
   getFillColor() {
-    var _a, _b;
-    const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
-    if (color && this.roll && (this.backColor || this.roll.alter)) {
-      const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1,
-        backSum = this.roll.horizontal ? Math.PI / 2 : 0,
-        rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
-      if (rolled) {
-        if (this.backColor) {
-          return this.backColor;
-        }
-        if (this.roll.alter) {
-          return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
-        }
-      }
-    }
-    return color;
+    var _a;
+    return this._getRollColor((_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color));
   }
   getMass() {
     return this.getRadius() ** 2 * Math.PI / 2;
@@ -3710,8 +3713,8 @@ class Particle {
     return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
   }
   getStrokeColor() {
-    var _a, _b;
-    return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
+    var _a;
+    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;
@@ -3788,7 +3791,7 @@ class Particle {
           this.size.status = "increasing";
           break;
         case "random":
-          this.size.value = randomInRange(this.size) * pxRatio;
+          this.size.value = randomInRange(this.size);
           this.size.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
           break;
         case "max":
@@ -3798,6 +3801,7 @@ class Particle {
           break;
       }
     }
+    this.size.initialValue = this.size.value;
     this.bubble = {
       inRange: false
     };
@@ -3966,6 +3970,25 @@ class Particle {
     }
     return overlaps;
   }
+  _getRollColor(color) {
+    var _a;
+    if (!color || !this.roll || !this.backColor && !this.roll.alter) {
+      return color;
+    }
+    const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1,
+      backSum = this.roll.horizontal ? Math.PI / 2 : 0,
+      rolled = Math.floor((((_a = this.roll.angle) !== null && _a !== void 0 ? _a : 0) + backSum) / (Math.PI / backFactor)) % 2;
+    if (!rolled) {
+      return color;
+    }
+    if (this.backColor) {
+      return this.backColor;
+    }
+    if (this.roll.alter) {
+      return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
+    }
+    return color;
+  }
   _loadShapeData(shapeOptions, reduceDuplicates) {
     const shapeData = shapeOptions.options[this.shape];
     if (shapeData) {
@@ -5049,6 +5072,7 @@ class Loader {
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Plugins.js
+
 function getItemsFromInitializer(container, map, initializers, force = false) {
   let res = map.get(container);
   if (!res || force) {
@@ -5097,10 +5121,12 @@ class Plugins {
       this.presets.set(presetKey, options);
     }
   }
-  addShapeDrawer(type, drawer) {
-    if (!this.getShapeDrawer(type)) {
-      this.drawers.set(type, drawer);
-    }
+  addShapeDrawer(types, drawer) {
+    executeOnSingleOrMultiple(types, type => {
+      if (!this.getShapeDrawer(type)) {
+        this.drawers.set(type, drawer);
+      }
+    });
   }
   destroy(container) {
     this.updaters.delete(container);
@@ -5547,6 +5573,10 @@ tsParticles.init();
 
 
 
+
+
+
+
 
 
 
@@ -7421,11 +7451,33 @@ async function loadBaseMover(engine) {
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/esm/CircleDrawer.js
 class CircleDrawer {
   draw(context, particle, radius) {
-    context.arc(0, 0, radius, 0, Math.PI * 2, false);
+    if (!particle.circleRange) {
+      particle.circleRange = {
+        min: 0,
+        max: Math.PI * 2
+      };
+    }
+    const circleRange = particle.circleRange;
+    context.arc(0, 0, radius, circleRange.min, circleRange.max, false);
   }
   getSidesCount() {
     return 12;
   }
+  particleInit(container, particle) {
+    var _a;
+    const shapeData = particle.shapeData,
+      angle = (_a = shapeData === null || shapeData === void 0 ? void 0 : shapeData.angle) !== null && _a !== void 0 ? _a : {
+        max: 360,
+        min: 0
+      };
+    particle.circleRange = typeof angle !== "object" ? {
+      min: 0,
+      max: angle * Math.PI / 180
+    } : {
+      min: angle.min * Math.PI / 180,
+      max: angle.max * Math.PI / 180
+    };
+  }
 }
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/esm/index.js
 
@@ -7437,7 +7489,7 @@ async function loadCircleShape(engine) {
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
   var _a, _b;
   const colorValue = value;
-  if (!colorValue || !valueAnimation.enable) {
+  if (!colorValue || !valueAnimation.enable || colorValue.loops !== undefined && colorValue.maxLoops !== undefined && colorValue.maxLoops > 0 && colorValue.loops >= colorValue.maxLoops) {
     return;
   }
   const offset = randomInRange(valueAnimation.offset),
@@ -7445,13 +7497,23 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
     decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
   if (!decrease || colorValue.status === "increasing") {
     colorValue.value += velocity;
-    if (decrease && colorValue.value > max) {
-      colorValue.status = "decreasing";
-      colorValue.value -= colorValue.value % max;
+    if (colorValue.value > max) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
+      if (decrease) {
+        colorValue.status = "decreasing";
+        colorValue.value -= colorValue.value % max;
+      }
     }
   } else {
     colorValue.value -= velocity;
     if (colorValue.value < 0) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
       colorValue.status = "increasing";
       colorValue.value += colorValue.value;
     }
@@ -7466,14 +7528,17 @@ function updateColorValue(delta, value, valueAnimation, max, decrease) {
 function updateColor(particle, delta) {
   var _a, _b, _c;
   const animationOptions = particle.options.color.animation;
-  if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
-    updateColorValue(delta, particle.color.h, animationOptions.h, 360, false);
+  const h = (_a = particle.color) === null || _a === void 0 ? void 0 : _a.h,
+    s = (_b = particle.color) === null || _b === void 0 ? void 0 : _b.s,
+    l = (_c = particle.color) === null || _c === void 0 ? void 0 : _c.l;
+  if (h) {
+    updateColorValue(delta, h, animationOptions.h, 360, false);
   }
-  if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
-    updateColorValue(delta, particle.color.s, animationOptions.s, 100, true);
+  if (s) {
+    updateColorValue(delta, s, animationOptions.s, 100, true);
   }
-  if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
-    updateColorValue(delta, particle.color.l, animationOptions.l, 100, true);
+  if (l) {
+    updateColorValue(delta, l, animationOptions.l, 100, true);
   }
 }
 class ColorUpdater {
@@ -9305,9 +9370,7 @@ class ImageDrawer {
 ;// CONCATENATED MODULE: ../../shapes/image/dist/esm/index.js
 
 async function loadImageShape(engine) {
-  const imageDrawer = new ImageDrawer();
-  await engine.addShape("image", imageDrawer);
-  await engine.addShape("images", imageDrawer);
+  await engine.addShape(["image", "images"], new ImageDrawer());
 }
 ;// CONCATENATED MODULE: ../../updaters/life/dist/esm/Options/Classes/LifeDelay.js
 
@@ -9581,6 +9644,7 @@ class OpacityUpdater {
         particle.opacity.velocity *= getRandom();
       }
     }
+    particle.opacity.initialValue = particle.opacity.value;
   }
   isEnabled(particle) {
     var _a, _b, _c, _d;
@@ -10682,14 +10746,15 @@ async function loadParticlesLinksInteraction(engine) {
 
 
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/esm/PolygonDrawerBase.js
+
 class PolygonDrawerBase {
   draw(context, particle, radius) {
-    const start = this.getCenter(particle, radius);
-    const side = this.getSidesData(particle, radius);
-    const sideCount = side.count.numerator * side.count.denominator;
-    const decimalSides = side.count.numerator / side.count.denominator;
-    const interiorAngleDegrees = 180 * (decimalSides - 2) / decimalSides;
-    const interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180;
+    const start = this.getCenter(particle, radius),
+      side = this.getSidesData(particle, radius),
+      sideCount = side.count.numerator * side.count.denominator,
+      decimalSides = side.count.numerator / side.count.denominator,
+      interiorAngleDegrees = 180 * (decimalSides - 2) / decimalSides,
+      interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180;
     if (!context) {
       return;
     }
@@ -10704,24 +10769,22 @@ class PolygonDrawerBase {
   }
   getSidesCount(particle) {
     var _a, _b;
-    const polygon = particle.shapeData;
-    return (_b = (_a = polygon === null || polygon === void 0 ? void 0 : polygon.sides) !== null && _a !== void 0 ? _a : polygon === null || polygon === void 0 ? void 0 : polygon.nb_sides) !== null && _b !== void 0 ? _b : 5;
+    const polygon = particle.shapeData,
+      sides = Math.round(getRangeValue((_b = (_a = polygon === null || polygon === void 0 ? void 0 : polygon.sides) !== null && _a !== void 0 ? _a : polygon === null || polygon === void 0 ? void 0 : polygon.nb_sides) !== null && _b !== void 0 ? _b : 5));
+    return sides;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/esm/PolygonDrawer.js
 
 class PolygonDrawer extends PolygonDrawerBase {
   getCenter(particle, radius) {
-    const sides = this.getSidesCount(particle);
     return {
-      x: -radius / (sides / 3.5),
+      x: -radius / (particle.sides / 3.5),
       y: -radius / (2.66 / 3.5)
     };
   }
   getSidesData(particle, radius) {
-    var _a, _b;
-    const polygon = particle.shapeData;
-    const sides = (_b = (_a = polygon === null || polygon === void 0 ? void 0 : polygon.sides) !== null && _a !== void 0 ? _a : polygon === null || polygon === void 0 ? void 0 : polygon.nb_sides) !== null && _b !== void 0 ? _b : 5;
+    const sides = particle.sides;
     return {
       count: {
         denominator: 1,
@@ -10868,16 +10931,15 @@ class SquareDrawer {
 
 async function loadSquareShape(engine) {
   const drawer = new SquareDrawer();
-  await engine.addShape("edge", drawer);
-  await engine.addShape("square", drawer);
+  await engine.addShape(["edge", "square"], drawer);
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/esm/StarDrawer.js
+
 class StarDrawer {
   draw(context, particle, radius) {
     var _a;
-    const star = particle.shapeData,
-      sides = this.getSidesCount(particle),
-      inset = (_a = star === null || star === void 0 ? void 0 : star.inset) !== null && _a !== void 0 ? _a : 2;
+    const sides = particle.sides,
+      inset = (_a = particle.starInset) !== null && _a !== void 0 ? _a : 2;
     context.moveTo(0, 0 - radius);
     for (let i = 0; i < sides; i++) {
       context.rotate(Math.PI / sides);
@@ -10889,7 +10951,13 @@ class StarDrawer {
   getSidesCount(particle) {
     var _a, _b;
     const star = particle.shapeData;
-    return (_b = (_a = star === null || star === void 0 ? void 0 : star.sides) !== null && _a !== void 0 ? _a : star === null || star === void 0 ? void 0 : star.nb_sides) !== null && _b !== void 0 ? _b : 5;
+    return Math.round(getRangeValue((_b = (_a = star === null || star === void 0 ? void 0 : star.sides) !== null && _a !== void 0 ? _a : star === null || star === void 0 ? void 0 : star.nb_sides) !== null && _b !== void 0 ? _b : 5));
+  }
+  particleInit(container, particle) {
+    var _a;
+    const star = particle.shapeData,
+      inset = getRangeValue((_a = star === null || star === void 0 ? void 0 : star.inset) !== null && _a !== void 0 ? _a : 2);
+    particle.starInset = inset;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/esm/index.js
@@ -10902,7 +10970,7 @@ async function loadStarShape(engine) {
 function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max, decrease) {
   var _a, _b;
   const colorValue = value;
-  if (!colorValue || !colorValue.enable) {
+  if (!colorValue || !colorValue.enable || colorValue.loops !== undefined && colorValue.maxLoops !== undefined && colorValue.maxLoops > 0 && colorValue.loops >= colorValue.maxLoops) {
     return;
   }
   const offset = randomInRange(valueAnimation.offset),
@@ -10910,13 +10978,23 @@ function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max,
     decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
   if (!decrease || colorValue.status === "increasing") {
     colorValue.value += velocity;
-    if (decrease && colorValue.value > max) {
-      colorValue.status = "decreasing";
-      colorValue.value -= colorValue.value % max;
+    if (colorValue.value > max) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
+      if (decrease) {
+        colorValue.status = "decreasing";
+        colorValue.value -= colorValue.value % max;
+      }
     }
   } else {
     colorValue.value -= velocity;
     if (colorValue.value < 0) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
       colorValue.status = "increasing";
       colorValue.value += colorValue.value;
     }
@@ -10929,22 +11007,20 @@ function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max,
   }
 }
 function updateStrokeColor(particle, delta) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+  if (!particle.strokeColor || !particle.strokeAnimation) {
     return;
   }
-  const animationOptions = particle.stroke.color.animation,
-    h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+  const h = particle.strokeColor.h;
   if (h) {
-    StrokeColorUpdater_updateColorValue(delta, h, animationOptions.h, 360, false);
+    StrokeColorUpdater_updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
   }
-  const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+  const s = particle.strokeColor.s;
   if (s) {
-    StrokeColorUpdater_updateColorValue(delta, s, animationOptions.s, 100, true);
+    StrokeColorUpdater_updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
   }
-  const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+  const l = particle.strokeColor.l;
   if (l) {
-    StrokeColorUpdater_updateColorValue(delta, l, animationOptions.l, 100, true);
+    StrokeColorUpdater_updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
   }
 }
 class StrokeColorUpdater {
@@ -10952,19 +11028,21 @@ class StrokeColorUpdater {
     this.container = container;
   }
   init(particle) {
-    var _a, _b;
+    var _a, _b, _c;
     const container = this.container;
-    particle.stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-    particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-    const strokeHslColor = (_a = rangeColorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+    const stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+    particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
+    particle.strokeOpacity = getRangeValue((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+    particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+    const strokeHslColor = (_c = rangeColorToHsl(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
     if (strokeHslColor) {
-      particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+      particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
     }
   }
   isEnabled(particle) {
-    var _a, _b, _c, _d;
-    const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
-    return !particle.destroyed && !particle.spawning && !!color && (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable || ((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable);
+    var _a, _b, _c;
+    const color = particle.strokeAnimation;
+    return !particle.destroyed && !particle.spawning && !!color && (((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable || ((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable);
   }
   update(particle, delta) {
     if (!this.isEnabled(particle)) {
@@ -11034,10 +11112,7 @@ class TextDrawer {
 ;// CONCATENATED MODULE: ../../shapes/text/dist/esm/index.js
 
 async function loadTextShape(engine) {
-  const drawer = new TextDrawer();
-  for (const type of validTypes) {
-    await engine.addShape(type, drawer);
-  }
+  await engine.addShape(validTypes, new TextDrawer());
 }
 ;// CONCATENATED MODULE: ../slim/dist/esm/index.js