tsparticles 1.42.4 → 1.43.0

package/browser/Updaters/Angle/AngleUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateAngle(particle, delta) {
     var _a;
     const rotate = particle.rotate;

package/browser/Updaters/Color/ColorUpdater.js

@@ -1,4 +1,5 @@
-import { colorToHsl, getHslAnimationFromHsl, randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl } from "../../Utils/ColorUtils";
+import { randomInRange } from "../../Utils/NumberUtils";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
     const colorValue = value;

package/browser/Updaters/Life/LifeUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue, randomInRange, setRangeValue } from "../../Utils";
+import { getRangeValue, randomInRange, setRangeValue } from "../../Utils/NumberUtils";
 export class LifeUpdater {
     constructor(container) {
         this.container = container;

package/browser/Updaters/Opacity/OpacityUpdater.js

@@ -1,4 +1,4 @@
-import { clamp, getRangeMax, getRangeMin, getRangeValue, randomInRange } from "../../Utils";
+import { clamp, getRangeMax, getRangeMin, getRangeValue, randomInRange } from "../../Utils/NumberUtils";
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.opacity.animation.destroy) {
         case "max" /* max */:

package/browser/Updaters/OutModes/OutOfCanvasUpdater.js

@@ -1,5 +1,5 @@
 import { bounceHorizontal, bounceVertical } from "./Utils";
-import { calculateBounds, isPointInside } from "../../Utils";
+import { calculateBounds, isPointInside } from "../../Utils/Utils";
 export class OutOfCanvasUpdater {
     constructor(container) {
         this.container = container;

package/browser/Updaters/OutModes/Utils.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 export function bounceHorizontal(data) {
     if (!(data.outMode === "bounce" /* bounce */ ||
         data.outMode === "bounce-horizontal" /* bounceHorizontal */ ||

package/browser/Updaters/Roll/RollUpdater.js

@@ -1,4 +1,5 @@
-import { colorToHsl, getRangeValue } from "../../Utils";
+import { colorToHsl } from "../../Utils/ColorUtils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateRoll(particle, delta) {
     const roll = particle.options.roll;
     if (!particle.roll || !roll.enable) {

package/browser/Updaters/Size/SizeUpdater.js

@@ -1,4 +1,4 @@
-import { clamp } from "../../Utils";
+import { clamp } from "../../Utils/NumberUtils";
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.size.animation.destroy) {
         case "max" /* max */:

package/browser/Updaters/StrokeColor/StrokeColorUpdater.js

@@ -1,4 +1,6 @@
-import { colorToHsl, getHslAnimationFromHsl, itemFromArray, randomInRange } from "../../Utils";
+import { colorToHsl, getHslAnimationFromHsl } from "../../Utils/ColorUtils";
+import { itemFromArray } from "../../Utils/Utils";
+import { randomInRange } from "../../Utils/NumberUtils";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a;
     const colorValue = value;

package/browser/Updaters/Tilt/TiltUpdater.js

@@ -1,4 +1,4 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
 function updateTilt(particle, delta) {
     var _a;
     if (!particle.tilt) {

package/browser/Updaters/Twinkle/TwinkleUpdater.js

@@ -0,0 +1,19 @@
+import { colorToHsl, getStyleFromHsl } from "../../Utils/ColorUtils";
+import { getRangeValue } from "../../Utils/NumberUtils";
+export class TwinkleUpdater {
+    getColorStyles(particle, context, radius, opacity) {
+        const pOptions = particle.options, twinkle = pOptions.twinkle.particles, twinkling = twinkle.enable && Math.random() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleRgb = colorToHsl(twinkle.color), twinkleStyle = twinkleRgb ? getStyleFromHsl(twinkleRgb, twinklingOpacity) : undefined, res = {}, needsTwinkle = twinkling && twinkleStyle;
+        res.fill = needsTwinkle ? twinkleStyle : undefined;
+        res.stroke = needsTwinkle ? twinkleStyle : undefined;
+        return res;
+    }
+    init() {
+        // do nothing
+    }
+    isEnabled(particle) {
+        return particle.options.twinkle.particles.enable;
+    }
+    update() {
+        // do nothing
+    }
+}

package/browser/Updaters/Twinkle/index.js

@@ -0,0 +1,4 @@
+import { TwinkleUpdater } from "./TwinkleUpdater";
+export async function loadTwinkleUpdater(engine) {
+    await engine.addParticleUpdater("tilt", () => new TwinkleUpdater());
+}

package/browser/Updaters/Wobble/WobbleUpdater.js

@@ -1,4 +1,9 @@
-import { getRangeValue } from "../../Utils";
+import { getRangeValue } from "../../Utils/NumberUtils";
+/**
+ * Updates particle wobbling values
+ * @param particle the particle to update
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 function updateWobble(particle, delta) {
     var _a;
     const wobble = particle.options.wobble;
@@ -15,10 +20,21 @@ function updateWobble(particle, delta) {
     particle.position.x += distance * Math.cos(particle.wobble.angle);
     particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
 }
+/**
+ * The Wobble updater plugin
+ */
 export class WobbleUpdater {
+    /**
+     * The Wobble updater plugin constructor, assigns the container using the plugin
+     * @param container the container using the plugin
+     */
     constructor(container) {
         this.container = container;
     }
+    /**
+     * Initializing the particle for wobble animation
+     * @param particle the particle to init
+     */
     init(particle) {
         const wobbleOpt = particle.options.wobble;
         if (wobbleOpt.enable) {
@@ -35,9 +51,18 @@ export class WobbleUpdater {
         }
         particle.retina.wobbleDistance = getRangeValue(wobbleOpt.distance) * this.container.retina.pixelRatio;
     }
+    /**
+     * Checks if the given particle needs the wobble animation
+     * @param particle
+     */
     isEnabled(particle) {
         return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
     }
+    /**
+     * Updates the particle wobble animation
+     * @param particle the particle to update
+     * @param delta this variable contains the delta between the current frame and the previous frame
+     */
     update(particle, delta) {
         if (!this.isEnabled(particle)) {
             return;

package/browser/Utils/CanvasUtils.js

@@ -1,11 +1,25 @@
 import { colorMix, colorToRgb, getStyleFromHsl, getStyleFromRgb } from "./ColorUtils";
 import { getDistance, getDistances } from "./NumberUtils";
+/**
+ * Draws a line between two points using canvas API in the given context.
+ * @hidden
+ * @param context - The canvas context to draw on.
+ * @param begin - The begin point of the line.
+ * @param end - The end point of the line.
+ */
 function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
     context.lineTo(end.x, end.y);
     context.closePath();
 }
+/**
+ * Draws a triangle with three points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param p1 - The first point of the triangle.
+ * @param p2 - The second point of the triangle.
+ * @param p3 - The third point of the triangle.
+ */
 function drawTriangle(context, p1, p2, p3) {
     context.beginPath();
     context.moveTo(p1.x, p1.y);
@@ -13,15 +27,41 @@ function drawTriangle(context, p1, p2, p3) {
     context.lineTo(p3.x, p3.y);
     context.closePath();
 }
+/**
+ * Fills a rectangle with the given color for the whole canvas.
+ * @param context - The canvas context to draw on.
+ * @param dimension - The dimension of the rectangle.
+ * @param baseColor - The base color of the rectangle, if not specified a transparent color will be used.
+ */
 export function paintBase(context, dimension, baseColor) {
     context.save();
     context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
     context.fillRect(0, 0, dimension.width, dimension.height);
     context.restore();
 }
+/**
+ * Clears the canvas.
+ * @param context - The canvas context to clear.
+ * @param dimension - The dimension of the canvas.
+ */
 export function clear(context, dimension) {
     context.clearRect(0, 0, dimension.width, dimension.height);
 }
+/**
+ * Draws a line between two particles using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param begin - The begin point of the line.
+ * @param end - The end point of the line.
+ * @param maxDistance - The maximum distance of the line.
+ * @param canvasSize - The dimension of the canvas.
+ * @param warp - If enabled, the line will be warped.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the line in the canvas.
+ * @param composite - The composite value to use for blending the line in the canvas.
+ * @param colorLine - The color of the line.
+ * @param opacity - The opacity of the line.
+ * @param shadow - The shadow of the line.
+ */
 export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
     // this.ctx.lineCap = "round"; /* performance issue */
     /* path */
@@ -31,13 +71,11 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
         drawn = true;
     }
     else if (warp) {
-        let pi1;
-        let pi2;
+        let pi1, pi2;
         const endNE = {
             x: end.x - canvasSize.width,
             y: end.y,
-        };
-        const d1 = getDistances(begin, endNE);
+        }, d1 = getDistances(begin, endNE);
         if (d1.distance <= maxDistance) {
             const yi = begin.y - (d1.dy / d1.dx) * begin.x;
             pi1 = { x: 0, y: yi };
@@ -47,11 +85,9 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
             const endSW = {
                 x: end.x,
                 y: end.y - canvasSize.height,
-            };
-            const d2 = getDistances(begin, endSW);
+            }, d2 = getDistances(begin, endSW);
             if (d2.distance <= maxDistance) {
-                const yi = begin.y - (d2.dy / d2.dx) * begin.x;
-                const xi = -yi / (d2.dy / d2.dx);
+                const yi = begin.y - (d2.dy / d2.dx) * begin.x, xi = -yi / (d2.dy / d2.dx);
                 pi1 = { x: xi, y: 0 };
                 pi2 = { x: xi, y: canvasSize.height };
             }
@@ -59,11 +95,9 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
                 const endSE = {
                     x: end.x - canvasSize.width,
                     y: end.y - canvasSize.height,
-                };
-                const d3 = getDistances(begin, endSE);
+                }, d3 = getDistances(begin, endSE);
                 if (d3.distance <= maxDistance) {
-                    const yi = begin.y - (d3.dy / d3.dx) * begin.x;
-                    const xi = -yi / (d3.dy / d3.dx);
+                    const yi = begin.y - (d3.dy / d3.dx) * begin.x, xi = -yi / (d3.dy / d3.dx);
                     pi1 = { x: xi, y: yi };
                     pi2 = { x: pi1.x + canvasSize.width, y: pi1.y + canvasSize.height };
                 }
@@ -92,6 +126,17 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
     }
     context.stroke();
 }
+/**
+ * Draws a triangle between three particles using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param pos1 - The first position of the triangle.
+ * @param pos2 - The second position of the triangle.
+ * @param pos3 - The third position of the triangle.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the triangle in the canvas.
+ * @param composite - The composite value to use for blending the triangle in the canvas.
+ * @param colorTriangle - The color of the triangle.
+ * @param opacityTriangle - The opacity of the triangle.
+ */
 export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
     // this.ctx.lineCap = "round"; /* performance issue */
     /* path */
@@ -102,6 +147,14 @@ export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, comp
     context.fillStyle = getStyleFromRgb(colorTriangle, opacityTriangle);
     context.fill();
 }
+/**
+ * Draws a line connecting two points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param lineStyle - The style of the line.
+ * @param begin - The first position of the line.
+ * @param end - The second position of the line.
+ */
 export function drawConnectLine(context, width, lineStyle, begin, end) {
     context.save();
     drawLine(context, begin, end);
@@ -110,22 +163,33 @@ export function drawConnectLine(context, width, lineStyle, begin, end) {
     context.stroke();
     context.restore();
 }
+/**
+ * Creates a gradient using two particles colors and opacity.
+ * @param context - The canvas context to draw on.
+ * @param p1 - The first particle.
+ * @param p2 - The second particle.
+ * @param opacity - The opacity of the gradient.
+ */
 export function gradient(context, p1, p2, opacity) {
-    const gradStop = Math.floor(p2.getRadius() / p1.getRadius());
-    const color1 = p1.getFillColor();
-    const color2 = p2.getFillColor();
+    const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
     if (!color1 || !color2) {
         return;
     }
-    const sourcePos = p1.getPosition();
-    const destPos = p2.getPosition();
-    const midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius());
-    const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+    const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
     grad.addColorStop(0, getStyleFromHsl(color1, opacity));
     grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
     grad.addColorStop(1, getStyleFromHsl(color2, opacity));
     return grad;
 }
+/**
+ * Draws a grab line between two points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param begin - The first position of the line.
+ * @param end - The second position of the line.
+ * @param colorLine - The color of the line.
+ * @param opacity - The opacity of the line.
+ */
 export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.save();
     drawLine(context, begin, end);
@@ -134,17 +198,25 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.stroke();
     context.restore();
 }
-export function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-    var _a, _b, _c, _d, _e, _f;
-    const pos = particle.getPosition();
-    const tiltOptions = particle.options.tilt;
-    const rollOptions = particle.options.roll;
+/**
+ * Draws the particle using canvas API in the given context.
+ * @param container - The container of the particle.
+ * @param context - The canvas context to draw on.
+ * @param particle - The particle to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ * @param colorStyles - The color styles value.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the particle in the canvas.
+ * @param composite - The composite value to use for blending the particle in the canvas.
+ * @param radius - The radius of the particle.
+ * @param opacity - The opacity of the particle.
+ * @param shadow - The shadow of the particle.
+ */
+export function drawParticle(container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow) {
+    var _a, _b, _c, _d;
+    const pos = particle.getPosition(), tiltOptions = particle.options.tilt, rollOptions = particle.options.roll;
     context.save();
     if (tiltOptions.enable || rollOptions.enable) {
-        const roll = rollOptions.enable && particle.roll;
-        const tilt = tiltOptions.enable && particle.tilt;
-        const rollHorizontal = roll && (rollOptions.mode === "horizontal" /* horizontal */ || rollOptions.mode === "both" /* both */);
-        const rollVertical = roll && (rollOptions.mode === "vertical" /* vertical */ || rollOptions.mode === "both" /* both */);
+        const roll = rollOptions.enable && particle.roll, tilt = tiltOptions.enable && particle.tilt, rollHorizontal = roll && (rollOptions.mode === "horizontal" /* horizontal */ || rollOptions.mode === "both" /* both */), rollVertical = roll && (rollOptions.mode === "vertical" /* vertical */ || rollOptions.mode === "both" /* both */);
         context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
     }
     else {
@@ -165,32 +237,16 @@ export function drawParticle(container, context, particle, delta, fillColorValue
         context.shadowOffsetX = shadow.offset.x;
         context.shadowOffsetY = shadow.offset.y;
     }
-    if (gradient) {
-        const gradientAngle = gradient.angle.value;
-        const fillGradient = gradient.type === "radial" /* radial */
-            ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
-            : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, getStyleFromHsl({
-                h: color.value.h.value,
-                s: color.value.s.value,
-                l: color.value.l.value,
-            }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
-        }
-        context.fillStyle = fillGradient;
-    }
-    else {
-        if (fillColorValue) {
-            context.fillStyle = fillColorValue;
-        }
+    if (colorStyles.fill) {
+        context.fillStyle = colorStyles.fill;
     }
     const stroke = particle.stroke;
-    context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
-    if (strokeColorValue) {
-        context.strokeStyle = strokeColorValue;
+    context.lineWidth = (_c = particle.strokeWidth) !== null && _c !== void 0 ? _c : 0;
+    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 (((_d = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _d !== void 0 ? _d : 0) > 0) {
         context.stroke();
     }
     if (particle.close) {
@@ -216,6 +272,15 @@ export function drawParticle(container, context, particle, delta, fillColorValue
     drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
     context.restore();
 }
+/**
+ * Draws the particle shape using the plugin's shape renderer.
+ * @param container The container of the particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawShape(container, context, particle, radius, opacity, delta) {
     if (!particle.shape) {
         return;
@@ -226,6 +291,15 @@ export function drawShape(container, context, particle, radius, opacity, delta)
     }
     drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
 }
+/**
+ * Draws the particle effect after the plugin's shape renderer.
+ * @param container The container of the particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
     if (!particle.shape) {
         return;
@@ -236,6 +310,12 @@ export function drawShapeAfterEffect(container, context, particle, radius, opaci
     }
     drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
 }
+/**
+ * Draws the given plugin in the canvas.
+ * @param context The canvas context.
+ * @param plugin The plugin to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
@@ -244,27 +324,53 @@ export function drawPlugin(context, plugin, delta) {
     plugin.draw(context, delta);
     context.restore();
 }
+/**
+ * Draws the given particle plugin in the canvas.
+ * @param context The canvas context.
+ * @param plugin The particle plugin to draw.
+ * @param particle The particle to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawParticlePlugin(context, plugin, particle, delta) {
-    if (plugin.drawParticle !== undefined) {
-        context.save();
-        plugin.drawParticle(context, particle, delta);
-        context.restore();
+    if (!plugin.drawParticle) {
+        return;
     }
+    context.save();
+    plugin.drawParticle(context, particle, delta);
+    context.restore();
 }
+/**
+ * Draws an ellipse for the given particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param fillColorValue The particle fill color.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param width The width of the particle.
+ * @param rotation The rotation of the particle.
+ * @param start The start angle of the particle.
+ * @param end The end angle of the particle.
+ */
 export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+    if (width <= 0) {
+        return;
+    }
     const pos = particle.getPosition();
     if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
     }
-    if (width === 0) {
-        return;
-    }
     context.lineWidth = width;
     const rotationRadian = (rotation * Math.PI) / 180;
     context.beginPath();
     context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
     context.stroke();
 }
+/**
+ * Alters HSL values for enlighten or darken the given color.
+ * @param color The color to enlighten or darken.
+ * @param type The type of alteration.
+ * @param value The value of the alteration.
+ */
 export function alterHsl(color, type, value) {
     return {
         h: color.h,