tsparticles 1.41.4 → 1.42.0

package/tsparticles.js

@@ -1352,7 +1352,7 @@
     function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
       colorValue.enable = colorAnimation.enable;
       if (colorValue.enable) {
-        colorValue.velocity = colorAnimation.speed / 100 * reduceFactor;
+        colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
         if (colorAnimation.sync) {
           return;
         }
@@ -2302,7 +2302,7 @@
         }
         const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor, moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio, maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = sizeFactor * slowFactor * (delta.factor || 1) / diffFactor, moveSpeed = baseSpeed * speedFactor;
         this.applyPath(particle, delta);
-        const gravityOptions = moveOptions.gravity;
+        const gravityOptions = particle.gravity;
         const gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
         if (gravityOptions.enable && moveSpeed) {
           particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (60 * moveSpeed);
@@ -2316,7 +2316,7 @@
         }
         const velocity = particle.velocity.mult(moveSpeed);
         const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
-        if (gravityOptions.enable && gravityOptions.maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
+        if (gravityOptions.enable && maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
           velocity.y = gravityFactor * maxSpeed;
           if (moveSpeed) {
             particle.velocity.y = velocity.y / moveSpeed;
@@ -2825,10 +2825,7 @@
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
-        const oldSize = {
-          width: size.width,
-          height: size.height
-        };
+        const oldSize = Object.assign({}, size);
         size.width = this.element.offsetWidth * pxRatio;
         size.height = this.element.offsetHeight * pxRatio;
         this.element.width = size.width;
@@ -2887,7 +2884,7 @@
         const zIndexOptions = particle.options.zIndex;
         const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
         const radius = particle.getRadius();
-        const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+        const opacity = twinkling ? getRangeValue(twinkle.opacity) : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
         const zOpacity = opacity * zOpacityFactor;
         const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;
@@ -3905,7 +3902,7 @@
           return;
         }
         if (data.count !== undefined) {
-          this.count = data.count;
+          this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
@@ -3914,7 +3911,7 @@
           this.offset = setRangeValue(data.offset);
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -4062,13 +4059,13 @@
           return;
         }
         if (data.count !== undefined) {
-          this.count = data.count;
+          this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -4088,13 +4085,13 @@
           return;
         }
         if (data.count !== undefined) {
-          this.count = data.count;
+          this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -4420,7 +4417,7 @@
           return;
         }
         if (data.distance !== undefined) {
-          this.distance = data.distance;
+          this.distance = setRangeValue(data.distance);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
@@ -4445,10 +4442,10 @@
           return;
         }
         if (data.offset !== undefined) {
-          this.offset = data.offset;
+          this.offset = setRangeValue(data.offset);
         }
         if (data.value !== undefined) {
-          this.value = data.value;
+          this.value = setRangeValue(data.value);
         }
       }
     }
@@ -4464,7 +4461,7 @@
           return;
         }
         if (data.acceleration !== undefined) {
-          this.acceleration = data.acceleration;
+          this.acceleration = setRangeValue(data.acceleration);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
@@ -4473,7 +4470,7 @@
           this.inverse = data.inverse;
         }
         if (data.maxSpeed !== undefined) {
-          this.maxSpeed = data.maxSpeed;
+          this.maxSpeed = setRangeValue(data.maxSpeed);
         }
       }
     }
@@ -4688,13 +4685,13 @@
           return;
         }
         if (data.count !== undefined) {
-          this.count = data.count;
+          this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -4798,13 +4795,13 @@
           this.enable = data.enable;
         }
         if (data.opacity !== undefined) {
-          this.opacity = data.opacity;
+          this.opacity = setRangeValue(data.opacity);
         }
         if (data.width !== undefined) {
-          this.width = data.width;
+          this.width = setRangeValue(data.width);
         }
         if (data.radius !== undefined) {
-          this.radius = data.radius;
+          this.radius = setRangeValue(data.radius);
         }
         if (data.color !== undefined) {
           this.color = OptionsColor.create(this.color, data.color);
@@ -4885,16 +4882,16 @@
           this.enabled = data.enabled;
         }
         if (data.distance !== undefined) {
-          this.distance = data.distance;
+          this.distance = setRangeValue(data.distance);
         }
         if (data.duration !== undefined) {
-          this.duration = data.duration;
+          this.duration = setRangeValue(data.duration);
         }
         if (data.factor !== undefined) {
-          this.factor = data.factor;
+          this.factor = setRangeValue(data.factor);
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
       }
     }
@@ -4911,7 +4908,7 @@
           this.enable = data.enable;
         }
         if (data.value !== undefined) {
-          this.value = data.value;
+          this.value = setRangeValue(data.value);
         }
       }
     }
@@ -4957,7 +4954,7 @@
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -5213,7 +5210,7 @@
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
           this.sync = data.sync;
@@ -5262,7 +5259,7 @@
           this.frequency = data.frequency;
         }
         if (data.opacity !== undefined) {
-          this.opacity = data.opacity;
+          this.opacity = setRangeValue(data.opacity);
         }
       }
     }
@@ -5697,6 +5694,7 @@
         this.retina = {
           maxDistance: {}
         };
+        this.ignoresResizeRatio = true;
         const pxRatio = container.retina.pixelRatio;
         const mainOptions = container.actualOptions;
         const particlesOptions = new ParticlesOptions;
@@ -5736,7 +5734,7 @@
           max: getRangeMax(sizeRange) * pxRatio,
           min: getRangeMin(sizeRange) * pxRatio,
           loops: 0,
-          maxLoops: sizeOptions.animation.count
+          maxLoops: getRangeValue(sizeOptions.animation.count)
         };
         const sizeAnimation = sizeOptions.animation;
         if (sizeAnimation.enable) {
@@ -5770,6 +5768,12 @@
         this.initialVelocity = this.calculateVelocity();
         this.velocity = this.initialVelocity.copy();
         this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+        const gravityOptions = this.options.move.gravity;
+        this.gravity = {
+          enable: gravityOptions.enable,
+          acceleration: getRangeValue(gravityOptions.acceleration),
+          inverse: gravityOptions.inverse
+        };
         this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
         this.offset = Vector.origin;
@@ -5977,12 +5981,7 @@
         return overlaps;
       }
       calculateVelocity() {
-        const baseVelocity = getParticleBaseVelocity(this.direction);
-        const res = baseVelocity.copy();
-        const moveOptions = this.options.move;
-        const rad = Math.PI / 180 * moveOptions.angle.value;
-        const radOffset = Math.PI / 180 * moveOptions.angle.offset;
-        const range = {
+        const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move, 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
         };
@@ -6132,10 +6131,11 @@
         }
         for (const particle of this.array) {
           const resizeFactor = container.canvas.resizeFactor;
-          if (resizeFactor) {
+          if (resizeFactor && !particle.ignoresResizeRatio) {
             particle.position.x *= resizeFactor.width;
             particle.position.y *= resizeFactor.height;
           }
+          particle.ignoresResizeRatio = false;
           particle.bubble.inRange = false;
           for (const [, plugin] of this.container.plugins) {
             if (particle.destroyed) {
@@ -6371,13 +6371,13 @@
           container.canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles;
-        this.attractDistance = particles.move.attract.distance * ratio;
+        this.attractDistance = getRangeValue(particles.move.attract.distance) * ratio;
         this.linksDistance = particles.links.distance * ratio;
         this.linksWidth = particles.links.width * ratio;
-        this.sizeAnimationSpeed = particles.size.animation.speed * ratio;
-        this.maxSpeed = particles.move.gravity.maxSpeed * ratio;
+        this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
+        this.maxSpeed = getRangeValue(particles.move.gravity.maxSpeed) * ratio;
         if (particles.orbit.radius !== undefined) {
-          this.orbitRadius = particles.orbit.radius * this.container.retina.pixelRatio;
+          this.orbitRadius = getRangeValue(particles.orbit.radius) * this.container.retina.pixelRatio;
         }
         const modes = options.interactivity.modes;
         this.connectModeDistance = modes.connect.distance * ratio;
@@ -6397,19 +6397,19 @@
         const ratio = this.pixelRatio;
         const moveDistance = options.move.distance;
         const props = particle.retina;
-        props.attractDistance = options.move.attract.distance * ratio;
+        props.attractDistance = getRangeValue(options.move.attract.distance) * ratio;
         props.linksDistance = options.links.distance * ratio;
         props.linksWidth = options.links.width * ratio;
         props.moveDrift = getRangeValue(options.move.drift) * ratio;
         props.moveSpeed = getRangeValue(options.move.speed) * ratio;
-        props.sizeAnimationSpeed = options.size.animation.speed * ratio;
+        props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
         if (particle.spin) {
           props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
         }
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        props.maxSpeed = options.move.gravity.maxSpeed * ratio;
+        props.maxSpeed = getRangeValue(options.move.gravity.maxSpeed) * ratio;
       }
       handleMotionChange(mediaQuery) {
         const options = this.container.actualOptions;
@@ -7163,10 +7163,13 @@
           this.opacity = data.opacity;
         }
         if (data.position !== undefined) {
-          this.position = {
-            x: data.position.x,
-            y: data.position.y
-          };
+          this.position = {};
+          if (data.position.x !== undefined) {
+            this.position.x = setRangeValue(data.position.x);
+          }
+          if (data.position.y !== undefined) {
+            this.position.y = setRangeValue(data.position.y);
+          }
         }
         if (data.size !== undefined) {
           this.size.load(data.size);
@@ -7271,7 +7274,7 @@
         var _a, _b;
         const container = this.container;
         const percentPosition = this.options.position;
-        return Vector.create(((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width, ((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height);
+        return Vector.create(getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width, getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height);
       }
       updateParticlePosition(particle, v) {
         var _a;
@@ -7618,10 +7621,13 @@
           this.shape = data.shape;
         }
         if (data.position !== undefined) {
-          this.position = {
-            x: data.position.x,
-            y: data.position.y
-          };
+          this.position = {};
+          if (data.position.x) {
+            this.position.x = setRangeValue(data.position.x);
+          }
+          if (data.position.y) {
+            this.position.y = setRangeValue(data.position.y);
+          }
         }
         if (data.spawnColor !== undefined) {
           if (this.spawnColor === undefined) {
@@ -7649,8 +7655,8 @@
     var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
     class EmitterInstance {
       constructor(engine, emitters, container, options, position) {
-        var _a, _b, _c, _d, _e, _f;
-        var _g;
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _h;
         this.emitters = emitters;
         this.container = container;
         _EmitterInstance_firstSpawn.set(this, void 0);
@@ -7668,21 +7674,22 @@
           this.options.load(options);
         }
         this.spawnDelay = ((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1e3 / this.container.retina.reduceFactor;
+        this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
         this.name = this.options.name;
-        this.shape = (_b = EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _b === void 0 ? void 0 : _b.getShape(this.options.shape);
+        this.shape = (_c = EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
         this.fill = this.options.fill;
         EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
         EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
         let particlesOptions = deepExtend({}, this.options.particles);
         particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : particlesOptions = {};
-        (_c = particlesOptions.move) !== null && _c !== void 0 ? _c : particlesOptions.move = {};
-        (_d = (_g = particlesOptions.move).direction) !== null && _d !== void 0 ? _d : _g.direction = this.options.direction;
+        (_d = particlesOptions.move) !== null && _d !== void 0 ? _d : particlesOptions.move = {};
+        (_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : _h.direction = this.options.direction;
         if (this.options.spawnColor) {
           this.spawnColor = colorToHsl(this.options.spawnColor);
         }
         this.paused = !this.options.autoPlay;
         this.particlesOptions = particlesOptions;
-        this.size = (_e = this.options.size) !== null && _e !== void 0 ? _e : (() => {
+        this.size = (_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
           const size = new EmitterSize;
           size.load({
             height: 0,
@@ -7691,7 +7698,7 @@
           });
           return size;
         })();
-        this.lifeCount = (_f = this.options.life.count) !== null && _f !== void 0 ? _f : -1;
+        this.lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
         this.immortal = this.lifeCount <= 0;
         this.play();
       }
@@ -7826,8 +7833,8 @@
         const container = this.container;
         const percentPosition = this.options.position;
         return {
-          x: ((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width,
-          y: ((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height
+          x: getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width,
+          y: getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height
         };
       }
       emit() {
@@ -7875,7 +7882,7 @@
         const colorOffset = randomInRange(animation.offset);
         const delay = getRangeValue(this.options.rate.delay);
         const emitFactor = 1e3 * delay / container.retina.reduceFactor;
-        const colorSpeed = (_a = animation.speed) !== null && _a !== void 0 ? _a : 0;
+        const colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
         return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * 3.6) % maxValue;
       }
     }
@@ -8924,17 +8931,17 @@
             const alterType = Math.random() >= .5 ? "darken" : "enlighten";
             particle.roll.alter = {
               type: alterType,
-              value: alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value
+              value: getRangeValue(alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value)
             };
           } else if (rollOpt.darken.enable) {
             particle.roll.alter = {
               type: "darken",
-              value: rollOpt.darken.value
+              value: getRangeValue(rollOpt.darken.value)
             };
           } else if (rollOpt.enlighten.enable) {
             particle.roll.alter = {
               type: "enlighten",
-              value: rollOpt.enlighten.value
+              value: getRangeValue(rollOpt.enlighten.value)
             };
           }
         } else {
@@ -9015,7 +9022,7 @@
         }
         const rotateAnimation = particle.options.rotate.animation;
         if (rotateAnimation.enable) {
-          particle.rotate.velocity = rotateAnimation.speed / 360 * this.container.retina.reduceFactor;
+          particle.rotate.velocity = getRangeValue(rotateAnimation.speed) / 360 * this.container.retina.reduceFactor;
           if (!rotateAnimation.sync) {
             particle.rotate.velocity *= Math.random();
           }
@@ -9998,7 +10005,7 @@
           min: getRangeMin(opacityOptions.value),
           value: getRangeValue(opacityOptions.value),
           loops: 0,
-          maxLoops: opacityOptions.animation.count
+          maxLoops: getRangeValue(opacityOptions.animation.count)
         };
         const opacityAnimation = opacityOptions.animation;
         if (opacityAnimation.enable) {
@@ -10023,7 +10030,7 @@
             particle.opacity.status = 1;
             break;
           }
-          particle.opacity.velocity = opacityAnimation.speed / 100 * this.container.retina.reduceFactor;
+          particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * this.container.retina.reduceFactor;
           if (!opacityAnimation.sync) {
             particle.opacity.velocity *= Math.random();
           }
@@ -10551,7 +10558,7 @@
             const twinkling = Math.random() < twinkleFreq;
             if (twinkling && twinkleRgb !== undefined) {
               colorLine = twinkleRgb;
-              opacity = twinkle.opacity;
+              opacity = getRangeValue(twinkle.opacity);
             }
           }
           if (!colorLine) {
@@ -10989,7 +10996,7 @@
         }
         const tiltAnimation = particle.options.tilt.animation;
         if (tiltAnimation.enable) {
-          particle.tilt.velocity = tiltAnimation.speed / 360 * this.container.retina.reduceFactor;
+          particle.tilt.velocity = getRangeValue(tiltAnimation.speed) / 360 * this.container.retina.reduceFactor;
           if (!tiltAnimation.sync) {
             particle.tilt.velocity *= Math.random();
           }