@tsparticles/engine 3.0.2 → 3.1.0

package/cjs/Utils/NumberUtils.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseAlpha = exports.calcExactPositionOrRandomFromSizeRanged = exports.calcExactPositionOrRandomFromSize = exports.calcPositionOrRandomFromSizeRanged = exports.calcPositionOrRandomFromSize = exports.calcPositionFromSize = exports.collisionVelocity = exports.getParticleBaseVelocity = exports.getParticleDirectionAngle = exports.getDistance = exports.getDistances = exports.setRangeValue = exports.getRangeMax = exports.getRangeMin = exports.getRangeValue = exports.randomInRange = exports.mix = exports.clamp = exports.getRandom = exports.setRandom = exports.getEasing = exports.addEasing = void 0;
+exports.parseAlpha = exports.calcExactPositionOrRandomFromSizeRanged = exports.calcExactPositionOrRandomFromSize = exports.calcPositionOrRandomFromSizeRanged = exports.calcPositionOrRandomFromSize = exports.calcPositionFromSize = exports.collisionVelocity = exports.getParticleBaseVelocity = exports.getParticleDirectionAngle = exports.degToRad = exports.getDistance = exports.getDistances = exports.setRangeValue = exports.getRangeMax = exports.getRangeMin = exports.getRangeValue = exports.randomInRange = exports.mix = exports.clamp = exports.getRandom = exports.setRandom = exports.getEasing = exports.addEasing = void 0;
 const Vector_js_1 = require("../Core/Utils/Vector.js");
 const Utils_js_1 = require("./Utils.js");
+const Constants_js_1 = require("../Core/Utils/Constants.js");
 let _random = Math.random;
-const easings = new Map();
+const easings = new Map(), double = 2, doublePI = Math.PI * double;
 function addEasing(name, easing) {
     if (easings.get(name)) {
         return;
@@ -13,7 +14,7 @@ function addEasing(name, easing) {
 }
 exports.addEasing = addEasing;
 function getEasing(name) {
-    return easings.get(name) || ((value) => value);
+    return easings.get(name) ?? ((value) => value);
 }
 exports.getEasing = getEasing;
 function setRandom(rnd = Math.random) {
@@ -21,7 +22,8 @@ function setRandom(rnd = Math.random) {
 }
 exports.setRandom = setRandom;
 function getRandom() {
-    return clamp(_random(), 0, 1 - 1e-16);
+    const min = 0, max = 1;
+    return clamp(_random(), min, max - Number.EPSILON);
 }
 exports.getRandom = getRandom;
 function clamp(num, min, max) {
@@ -33,10 +35,10 @@ function mix(comp1, comp2, weight1, weight2) {
 }
 exports.mix = mix;
 function randomInRange(r) {
-    const max = getRangeMax(r);
+    const max = getRangeMax(r), minOffset = 0;
     let min = getRangeMin(r);
     if (max === min) {
-        min = 0;
+        min = minOffset;
     }
     return getRandom() * (max - min) + min;
 }
@@ -67,41 +69,47 @@ function setRangeValue(source, value) {
 }
 exports.setRangeValue = setRangeValue;
 function getDistances(pointA, pointB) {
-    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
-    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** 2 + dy ** 2) };
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y, squareExp = 2;
+    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** squareExp + dy ** squareExp) };
 }
 exports.getDistances = getDistances;
 function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;
 }
 exports.getDistance = getDistance;
+function degToRad(degrees) {
+    const PIDeg = 180;
+    return (degrees * Math.PI) / PIDeg;
+}
+exports.degToRad = degToRad;
 function getParticleDirectionAngle(direction, position, center) {
     if ((0, Utils_js_1.isNumber)(direction)) {
-        return (direction * Math.PI) / 180;
+        return degToRad(direction);
     }
+    const empty = 0, half = 0.5, quarter = 0.25, threeQuarter = half + quarter;
     switch (direction) {
         case "top":
-            return -Math.PI * 0.5;
+            return -Math.PI * half;
         case "top-right":
-            return -Math.PI * 0.25;
+            return -Math.PI * quarter;
         case "right":
-            return 0;
+            return empty;
         case "bottom-right":
-            return Math.PI * 0.25;
+            return Math.PI * quarter;
         case "bottom":
-            return Math.PI * 0.5;
+            return Math.PI * half;
         case "bottom-left":
-            return Math.PI * 0.75;
+            return Math.PI * threeQuarter;
         case "left":
             return Math.PI;
         case "top-left":
-            return -Math.PI * 0.75;
+            return -Math.PI * threeQuarter;
         case "inside":
             return Math.atan2(center.y - position.y, center.x - position.x);
         case "outside":
             return Math.atan2(position.y - center.y, position.x - center.x);
         default:
-            return getRandom() * Math.PI * 2;
+            return getRandom() * doublePI;
     }
 }
 exports.getParticleDirectionAngle = getParticleDirectionAngle;
@@ -113,22 +121,23 @@ function getParticleBaseVelocity(direction) {
 }
 exports.getParticleBaseVelocity = getParticleBaseVelocity;
 function collisionVelocity(v1, v2, m1, m2) {
-    return Vector_js_1.Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * 2 * m2) / (m1 + m2), v1.y);
+    const double = 2;
+    return Vector_js_1.Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
 }
 exports.collisionVelocity = collisionVelocity;
 function calcPositionFromSize(data) {
-    return data.position && data.position.x !== undefined && data.position.y !== undefined
+    return data.position?.x !== undefined && data.position.y !== undefined
         ? {
-            x: (data.position.x * data.size.width) / 100,
-            y: (data.position.y * data.size.height) / 100,
+            x: (data.position.x * data.size.width) / Constants_js_1.percentDenominator,
+            y: (data.position.y * data.size.height) / Constants_js_1.percentDenominator,
         }
         : undefined;
 }
 exports.calcPositionFromSize = calcPositionFromSize;
 function calcPositionOrRandomFromSize(data) {
     return {
-        x: ((data.position?.x ?? getRandom() * 100) * data.size.width) / 100,
-        y: ((data.position?.y ?? getRandom() * 100) * data.size.height) / 100,
+        x: ((data.position?.x ?? getRandom() * Constants_js_1.percentDenominator) * data.size.width) / Constants_js_1.percentDenominator,
+        y: ((data.position?.y ?? getRandom() * Constants_js_1.percentDenominator) * data.size.height) / Constants_js_1.percentDenominator,
     };
 }
 exports.calcPositionOrRandomFromSize = calcPositionOrRandomFromSize;
@@ -156,6 +165,10 @@ function calcExactPositionOrRandomFromSizeRanged(data) {
 }
 exports.calcExactPositionOrRandomFromSizeRanged = calcExactPositionOrRandomFromSizeRanged;
 function parseAlpha(input) {
-    return input ? (input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input)) : 1;
+    const defaultAlpha = 1;
+    if (!input) {
+        return defaultAlpha;
+    }
+    return input.endsWith("%") ? parseFloat(input) / Constants_js_1.percentDenominator : parseFloat(input);
 }
 exports.parseAlpha = parseAlpha;

package/cjs/Utils/RgbColorManager.js

@@ -27,13 +27,13 @@ class RgbColorManager {
         if (!input.startsWith(this.stringPrefix)) {
             return;
         }
-        const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), radix = 10, minLength = 4, defaultAlpha = 1;
         return result
             ? {
-                a: result.length > 4 ? (0, NumberUtils_js_1.parseAlpha)(result[5]) : 1,
-                b: parseInt(result[3], 10),
-                g: parseInt(result[2], 10),
-                r: parseInt(result[1], 10),
+                a: result.length > minLength ? (0, NumberUtils_js_1.parseAlpha)(result[5]) : defaultAlpha,
+                b: parseInt(result[3], radix),
+                g: parseInt(result[2], radix),
+                r: parseInt(result[1], radix),
             }
             : undefined;
     }

package/cjs/Utils/Utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
+exports.updateAnimation = exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
 const NumberUtils_js_1 = require("./NumberUtils.js");
+const Constants_js_1 = require("../Core/Utils/Constants.js");
 const Vector_js_1 = require("../Core/Utils/Vector.js");
 const _logger = {
     debug: console.debug,
@@ -25,15 +26,15 @@ function getLogger() {
 }
 exports.getLogger = getLogger;
 function rectSideBounce(data) {
-    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data;
+    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data, half = 0.5, minVelocity = 0;
     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) * 0.5 && velocity > 0) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * half && velocity > minVelocity) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -75,7 +76,8 @@ function safeMutationObserver(callback) {
 }
 exports.safeMutationObserver = safeMutationObserver;
 function isInArray(value, array) {
-    return value === array || (isArray(array) && array.indexOf(value) > -1);
+    const invalidIndex = -1;
+    return value === array || (isArray(array) && array.indexOf(value) > invalidIndex);
 }
 exports.isInArray = isInArray;
 async function loadFont(font, weight) {
@@ -95,7 +97,8 @@ function itemFromArray(array, index, useIndex = true) {
 }
 exports.itemFromArray = itemFromArray;
 function isPointInside(point, size, offset, radius, direction) {
-    return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
+    const minRadius = 0;
+    return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
 exports.isPointInside = isPointInside;
 function areBoundsInside(bounds, size, offset, direction) {
@@ -194,8 +197,8 @@ function circleBounceDataFromParticle(p) {
 }
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 function circleBounce(p1, p2) {
-    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = (0, NumberUtils_js_1.getDistances)(pos2, pos1);
-    if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = (0, NumberUtils_js_1.getDistances)(pos2, pos1), minimumDistance = 0;
+    if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
         return;
     }
     const angle = -Math.atan2(yDist, xDist), m1 = p1.mass, m2 = p2.mass, u1 = p1.velocity.rotate(angle), u2 = p2.velocity.rotate(angle), v1 = (0, NumberUtils_js_1.collisionVelocity)(u1, u2, m1, m2), v2 = (0, NumberUtils_js_1.collisionVelocity)(u2, u1, m1, m2), vFinal1 = v1.rotate(-angle), vFinal2 = v2.rotate(-angle);
@@ -265,7 +268,8 @@ function rectBounce(particle, divBounds) {
 }
 exports.rectBounce = rectBounce;
 function executeOnSingleOrMultiple(obj, callback) {
-    return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+    const defaultIndex = 0;
+    return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
 exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
 function itemFromSingleOrMultiple(obj, index, useIndex) {
@@ -273,12 +277,16 @@ function itemFromSingleOrMultiple(obj, index, useIndex) {
 }
 exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
 function findItemFromSingleOrMultiple(obj, callback) {
-    return isArray(obj) ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+    if (isArray(obj)) {
+        return obj.find((t, index) => callback(t, index));
+    }
+    const defaultIndex = 0;
+    return callback(obj, defaultIndex) ? obj : undefined;
 }
 exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
 function initParticleNumericAnimationValue(options, pxRatio) {
     const valueRange = options.value, animationOptions = options.animation, res = {
-        delayTime: (0, NumberUtils_js_1.getRangeValue)(animationOptions.delay) * 1000,
+        delayTime: (0, NumberUtils_js_1.getRangeValue)(animationOptions.delay) * Constants_js_1.millisecondsToSeconds,
         enable: animationOptions.enable,
         value: (0, NumberUtils_js_1.getRangeValue)(options.value) * pxRatio,
         max: (0, NumberUtils_js_1.getRangeMax)(valueRange) * pxRatio,
@@ -286,9 +294,9 @@ function initParticleNumericAnimationValue(options, pxRatio) {
         loops: 0,
         maxLoops: (0, NumberUtils_js_1.getRangeValue)(animationOptions.count),
         time: 0,
-    };
+    }, decayOffset = 1;
     if (animationOptions.enable) {
-        res.decay = 1 - (0, NumberUtils_js_1.getRangeValue)(animationOptions.decay);
+        res.decay = decayOffset - (0, NumberUtils_js_1.getRangeValue)(animationOptions.decay);
         switch (animationOptions.mode) {
             case "increase":
                 res.status = "increasing";
@@ -297,7 +305,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
                 res.status = "decreasing";
                 break;
             case "random":
-                res.status = (0, NumberUtils_js_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? "increasing" : "decreasing";
                 break;
         }
         const autoStatus = animationOptions.mode === "auto";
@@ -318,7 +326,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
             default:
                 res.value = (0, NumberUtils_js_1.randomInRange)(res);
                 if (autoStatus) {
-                    res.status = (0, NumberUtils_js_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                    res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? "increasing" : "decreasing";
                 }
                 break;
         }
@@ -336,14 +344,14 @@ function getPositionOrSize(positionOrSize, canvasSize) {
     const isPosition = "x" in positionOrSize;
     if (isPosition) {
         return {
-            x: (positionOrSize.x / 100) * canvasSize.width,
-            y: (positionOrSize.y / 100) * canvasSize.height,
+            x: (positionOrSize.x / Constants_js_1.percentDenominator) * canvasSize.width,
+            y: (positionOrSize.y / Constants_js_1.percentDenominator) * canvasSize.height,
         };
     }
     else {
         return {
-            width: (positionOrSize.width / 100) * canvasSize.width,
-            height: (positionOrSize.height / 100) * canvasSize.height,
+            width: (positionOrSize.width / Constants_js_1.percentDenominator) * canvasSize.width,
+            height: (positionOrSize.height / Constants_js_1.percentDenominator) * canvasSize.height,
         };
     }
 }
@@ -379,3 +387,79 @@ function isArray(arg) {
     return Array.isArray(arg);
 }
 exports.isArray = isArray;
+function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+    switch (destroyType) {
+        case "max":
+            if (value >= maxValue) {
+                particle.destroy();
+            }
+            break;
+        case "min":
+            if (value <= minValue) {
+                particle.destroy();
+            }
+            break;
+    }
+}
+function updateAnimation(particle, data, changeDirection, destroyType, delta) {
+    const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minDecay = 1;
+    if (particle.destroyed ||
+        !data ||
+        !data.enable ||
+        ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
+        return;
+    }
+    const velocity = (data.velocity ?? minVelocity) * delta.factor, minValue = data.min, maxValue = data.max, decay = data.decay ?? minDecay;
+    if (!data.time) {
+        data.time = 0;
+    }
+    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+        data.time += delta.value;
+    }
+    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+        return;
+    }
+    switch (data.status) {
+        case "increasing":
+            if (data.value >= maxValue) {
+                if (changeDirection) {
+                    data.status = "decreasing";
+                }
+                else {
+                    data.value -= maxValue;
+                }
+                if (!data.loops) {
+                    data.loops = minLoops;
+                }
+                data.loops++;
+            }
+            else {
+                data.value += velocity;
+            }
+            break;
+        case "decreasing":
+            if (data.value <= minValue) {
+                if (changeDirection) {
+                    data.status = "increasing";
+                }
+                else {
+                    data.value += maxValue;
+                }
+                if (!data.loops) {
+                    data.loops = minLoops;
+                }
+                data.loops++;
+            }
+            else {
+                data.value -= velocity;
+            }
+    }
+    if (data.velocity && decay !== identity) {
+        data.velocity *= decay;
+    }
+    checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+    if (!particle.destroyed) {
+        data.value = (0, NumberUtils_js_1.clamp)(data.value, minValue, maxValue);
+    }
+}
+exports.updateAnimation = updateAnimation;

package/esm/Core/Canvas.js

@@ -3,9 +3,9 @@ import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { generatedAttribute } from "./Utils/Constants.js";
 function setTransformValue(factor, newFactor, key) {
-    const newValue = newFactor[key];
+    const newValue = newFactor[key], defaultValue = 1;
     if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? 1) * newValue;
+        factor[key] = (factor[key] ?? defaultValue) * newValue;
     }
 }
 export class Canvas {
@@ -13,7 +13,7 @@ export class Canvas {
         this.container = container;
         this._applyPostDrawUpdaters = (particle) => {
             for (const updater of this._postDrawUpdaters) {
-                updater.afterDraw && updater.afterDraw(particle);
+                updater.afterDraw?.(particle);
             }
         };
         this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
@@ -33,12 +33,12 @@ export class Canvas {
                         setTransformValue(transform, updaterTransform, key);
                     }
                 }
-                updater.beforeDraw && updater.beforeDraw(particle);
+                updater.beforeDraw?.(particle);
             }
         };
         this._applyResizePlugins = () => {
             for (const plugin of this._resizePlugins) {
-                plugin.resize && plugin.resize();
+                plugin.resize?.();
             }
         };
         this._getPluginParticleColors = (particle) => {
@@ -94,17 +94,17 @@ export class Canvas {
             if (!trail.enable) {
                 return;
             }
+            const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = rangeColorToRgb(trailFill.color);
                 if (!fillColor) {
                     return;
                 }
-                const trail = options.particles.move.trail;
                 this._trailFill = {
                     color: {
                         ...fillColor,
                     },
-                    opacity: 1 / trail.length,
+                    opacity,
                 };
             }
             else {
@@ -116,7 +116,7 @@ export class Canvas {
                     img.addEventListener("load", () => {
                         this._trailFill = {
                             image: img,
-                            opacity: 1 / trail.length,
+                            opacity,
                         };
                         resolve();
                     });
@@ -167,9 +167,9 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const priority = "important", style = element.style;
+            const priority = "important", style = element.style, radix = 10;
             style.setProperty("position", "fixed", priority);
-            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
             style.setProperty("top", "0", priority);
             style.setProperty("left", "0", priority);
             style.setProperty("width", "100%", priority);
@@ -190,11 +190,11 @@ export class Canvas {
         return this.container.actualOptions.fullScreen.enable;
     }
     clear() {
-        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
+        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill, minimumLength = 0;
         if (options.backgroundMask.enable) {
             this.paint();
         }
-        else if (trail.enable && trail.length > 0 && trailFill) {
+        else if (trail.enable && trail.length > minimumLength && trailFill) {
             if (trailFill.color) {
                 this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
             }
@@ -212,7 +212,7 @@ export class Canvas {
         this.stop();
         if (this._generated) {
             const element = this.element;
-            element && element.remove();
+            element?.remove();
         }
         else {
             this._resetOriginalStyle();
@@ -233,8 +233,8 @@ export class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const radius = particle.getRadius();
-        if (radius <= 0) {
+        const radius = particle.getRadius(), minimumSize = 0;
+        if (radius <= minimumSize) {
             return;
         }
         const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
@@ -249,7 +249,7 @@ export class Canvas {
             return;
         }
         this.draw((ctx) => {
-            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
+            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
@@ -262,7 +262,7 @@ export class Canvas {
                 colorStyles,
                 backgroundMask: options.backgroundMask.enable,
                 composite: options.backgroundMask.composite,
-                radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate,
+                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
                 opacity: zOpacity,
                 shadow: particle.options.shadow,
                 transform,
@@ -332,7 +332,7 @@ export class Canvas {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }
-            if (plugin.particleFillColor || plugin.particleStrokeColor) {
+            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this._colorPlugins.push(plugin);
             }
         }
@@ -344,7 +344,7 @@ export class Canvas {
             if (updater.afterDraw) {
                 this._postDrawUpdaters.push(updater);
             }
-            if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
                 this._preDrawUpdaters.push(updater);
             }
         }