@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/browser/Utils/CanvasUtils.js

@@ -1,6 +1,11 @@
-import { defaultAngle, defaultTransform, identity, lFactor, minStrokeWidth, originPoint, } from "../Core/Utils/Constants.js";
+import { defaultTransform, identity, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
-import { getStyleFromRgb } from "./ColorUtils.js";
+export function clearDrawPlugin(context, plugin, delta) {
+    if (!plugin.clearDraw) {
+        return;
+    }
+    plugin.clearDraw(context, delta);
+}
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -23,26 +28,16 @@ export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, rotating = !!angle, transformData = {
+    }, rotating = particle.isRotating, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
         b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
         c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
         d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    if (backgroundMask) {
-        context.globalCompositeOperation = composite;
-    }
-    const shadowColor = particle.shadowColor;
-    if (shadow.enable && shadowColor) {
-        context.shadowBlur = shadow.blur;
-        context.shadowColor = getStyleFromRgb(shadowColor);
-        context.shadowOffsetX = shadow.offset.x;
-        context.shadowOffsetY = shadow.offset.y;
-    }
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
@@ -61,28 +56,52 @@ export function drawParticle(data) {
         transformData,
         strokeWidth,
     };
+    drawBeforeEffect(drawData);
+    drawShapeBeforeDraw(drawData);
     drawShape(drawData);
     drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
-    context.globalCompositeOperation = "source-over";
+    drawAfterEffect(drawData);
     context.resetTransform();
 }
-export function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+export function drawAfterEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
+    if (!drawFunc) {
+        return;
+    }
+    drawFunc({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawBeforeEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
     const drawer = container.effectDrawers.get(particle.effect);
-    if (!drawer) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawer.draw({
+    drawer.drawBefore({
         context,
         particle,
         radius,
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }
@@ -103,6 +122,8 @@ export function drawShape(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
     if (particle.shapeClose) {
@@ -116,7 +137,7 @@ export function drawShape(data) {
     }
 }
 export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -131,6 +152,29 @@ export function drawShapeAfterDraw(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawShapeBeforeDraw(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.shape) {
+        return;
+    }
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer?.beforeDraw) {
+        return;
+    }
+    drawer.beforeDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }

package/browser/Utils/ColorUtils.js

@@ -1,5 +1,5 @@
-import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
-import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbFactor, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
+import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
@@ -8,10 +8,11 @@ function stringToRgba(engine, input) {
         return;
     }
     for (const manager of engine.colorManagers.values()) {
-        if (input.startsWith(manager.stringPrefix)) {
+        if (manager.accepts(input)) {
             return manager.parseString(input);
         }
     }
+    return undefined;
 }
 export function rangeColorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
@@ -22,8 +23,12 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
         return colorToRgb(engine, color.value, index, useIndex);
     }
     if (isArray(color.value)) {
+        const value = itemFromArray(color.value, index, useIndex);
+        if (!value) {
+            return;
+        }
         return rangeColorToRgb(engine, {
-            value: itemFromArray(color.value, index, useIndex),
+            value,
         });
     }
     for (const manager of engine.colorManagers.values()) {
@@ -32,6 +37,7 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
             return res;
         }
     }
+    return undefined;
 }
 export function colorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
@@ -42,8 +48,12 @@ export function colorToRgb(engine, input, index, useIndex = true) {
         return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
     }
     if (isArray(color.value)) {
+        const value = itemFromArray(color.value, index, useIndex);
+        if (!value) {
+            return;
+        }
         return colorToRgb(engine, {
-            value: itemFromArray(color.value, index, useIndex),
+            value,
         });
     }
     for (const manager of engine.colorManagers.values()) {
@@ -52,6 +62,7 @@ export function colorToRgb(engine, input, index, useIndex = true) {
             return res;
         }
     }
+    return undefined;
 }
 export function colorToHsl(engine, color, index, useIndex = true) {
     const rgb = colorToRgb(engine, color, index, useIndex);
@@ -69,10 +80,15 @@ export function rgbToHsl(color) {
     };
     if (max !== min) {
         res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
-        res.h =
-            r1 === max
-                ? (g1 - b1) / (max - min)
-                : (res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min));
+        if (r1 === max) {
+            res.h = (g1 - b1) / (max - min);
+        }
+        else if (g1 === max) {
+            res.h = double + (b1 - r1) / (max - min);
+        }
+        else {
+            res.h = double * double + (r1 - g1) / (max - min);
+        }
     }
     res.l *= lMax;
     res.s *= sMax;
@@ -94,7 +110,7 @@ export function stringToRgb(engine, input) {
 export function hslToRgb(hsl) {
     const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
     if (s === sMin) {
-        const grayscaleValue = Math.round(lNormalized * rgbFactor);
+        const grayscaleValue = Math.round(lNormalized * rgbMax);
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
     const channel = (temp1, temp2, temp3) => {
@@ -118,7 +134,7 @@ export function hslToRgb(hsl) {
         return temp1;
     }, temp1 = lNormalized < half
         ? lNormalized * (sNormalizedOffset + sNormalized)
-        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized - phaseThird));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
@@ -131,25 +147,37 @@ export function hslaToRgba(hsla) {
     };
 }
 export function getRandomRgbColor(min) {
-    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity;
+    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
     return {
-        b: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
-        g: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
-        r: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        b: getRgbInRangeValue(),
+        g: getRgbInRangeValue(),
+        r: getRgbInRangeValue(),
     };
 }
-export function getStyleFromRgb(color, opacity) {
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
+export function getStyleFromRgb(color, hdr, opacity) {
+    return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+}
+function getHdrStyleFromRgb(color, opacity) {
+    return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity).toString()})`;
+}
+function getSdrStyleFromRgb(color, opacity) {
+    return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
-export function getStyleFromHsl(color, opacity) {
-    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
+export function getStyleFromHsl(color, hdr, opacity) {
+    return hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity);
+}
+function getHdrStyleFromHsl(color, opacity) {
+    return getHdrStyleFromRgb(hslToRgb(color), opacity);
+}
+function getSdrStyleFromHsl(color, opacity) {
+    return `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${(opacity ?? defaultOpacity).toString()})`;
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
-    if (rgb1.r === undefined) {
+    if (!Object.hasOwn(rgb1, "r")) {
         rgb1 = hslToRgb(color1);
     }
-    if (rgb2.r === undefined) {
+    if (!Object.hasOwn(rgb2, "r")) {
         rgb2 = hslToRgb(color2);
     }
     return {
@@ -177,6 +205,7 @@ export function getLinkColor(p1, p2, linkColor) {
     else {
         return linkColor;
     }
+    return undefined;
 }
 export function getLinkRandomColor(engine, optColor, blink, consent) {
     const color = isString(optColor) ? optColor : optColor.value;
@@ -254,27 +283,22 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
 }
 export function updateColorValue(data, range, decrease, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
-    if (!data ||
-        !data.enable ||
+    if (!data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
         return;
     }
-    if (!data.time) {
-        data.time = 0;
-    }
+    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;
     }
-    const offset = data.offset ? randomInRange(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
+    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
     if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
-            if (!data.loops) {
-                data.loops = 0;
-            }
+            data.loops ??= 0;
             data.loops++;
             if (decrease) {
                 data.status = AnimationStatus.decreasing;
@@ -288,9 +312,7 @@ export function updateColorValue(data, range, decrease, delta) {
         data.value -= velocity;
         const minValue = 0;
         if (data.value < minValue) {
-            if (!data.loops) {
-                data.loops = 0;
-            }
+            data.loops ??= 0;
             data.loops++;
             data.status = AnimationStatus.increasing;
         }
@@ -305,17 +327,11 @@ export function updateColor(color, delta) {
         return;
     }
     const { h, s, l } = color, ranges = {
-        h: { min: 0, max: 360 },
-        s: { min: 0, max: 100 },
-        l: { min: 0, max: 100 },
+        h: { min: hMin, max: hMax },
+        s: { min: sMin, max: sMax },
+        l: { min: lMin, max: lMax },
     };
-    if (h) {
-        updateColorValue(h, ranges.h, false, delta);
-    }
-    if (s) {
-        updateColorValue(s, ranges.s, true, delta);
-    }
-    if (l) {
-        updateColorValue(l, ranges.l, true, delta);
-    }
+    updateColorValue(h, ranges.h, false, delta);
+    updateColorValue(s, ranges.s, true, delta);
+    updateColorValue(l, ranges.l, true, delta);
 }

package/browser/Utils/EventDispatcher.js

@@ -14,7 +14,9 @@ export class EventDispatcher {
     }
     dispatchEvent(type, args) {
         const listeners = this._listeners.get(type);
-        listeners?.forEach(handler => handler(args));
+        listeners?.forEach(handler => {
+            handler(args);
+        });
     }
     hasEventListener(type) {
         return !!this._listeners.get(type);

package/browser/Utils/LogUtils.js

@@ -0,0 +1,22 @@
+const errorPrefix = "tsParticles - Error";
+const _logger = {
+    debug: console.debug,
+    error: (message, optionalParams) => {
+        console.error(`${errorPrefix} - ${message}`, optionalParams);
+    },
+    info: console.info,
+    log: console.log,
+    verbose: console.log,
+    warning: console.warn,
+};
+export function setLogger(logger) {
+    _logger.debug = logger.debug;
+    _logger.error = logger.error;
+    _logger.info = logger.info;
+    _logger.log = logger.log;
+    _logger.verbose = logger.verbose;
+    _logger.warning = logger.warning;
+}
+export function getLogger() {
+    return _logger;
+}

package/browser/Utils/{NumberUtils.js → MathUtils.js}

@@ -2,10 +2,13 @@ import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { double, doublePI, empty, half, percentDenominator, quarter, threeQuarter } from "../Core/Utils/Constants.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
+const piDeg = 180, degToRadFactor = Math.PI / piDeg;
 let _random = Math.random;
 const _animationLoop = {
     nextFrame: (cb) => requestAnimationFrame(cb),
-    cancel: (idx) => cancelAnimationFrame(idx),
+    cancel: (idx) => {
+        cancelAnimationFrame(idx);
+    },
 };
 export function setRandom(rnd = Math.random) {
     _random = rnd;
@@ -14,9 +17,14 @@ export function getRandom() {
     const min = 0, max = 1;
     return clamp(_random(), min, max - Number.EPSILON);
 }
+export function getRandomInRange(min, max) {
+    return getRandom() * (max - min) + min;
+}
 export function setAnimationFunctions(nextFrame, cancel) {
     _animationLoop.nextFrame = (callback) => nextFrame(callback);
-    _animationLoop.cancel = (handle) => cancel(handle);
+    _animationLoop.cancel = (handle) => {
+        cancel(handle);
+    };
 }
 export function animate(fn) {
     return _animationLoop.nextFrame(fn);
@@ -30,16 +38,16 @@ export function clamp(num, min, max) {
 export function mix(comp1, comp2, weight1, weight2) {
     return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
 }
-export function randomInRange(r) {
+export function randomInRangeValue(r) {
     const max = getRangeMax(r), minOffset = 0;
     let min = getRangeMin(r);
     if (max === min) {
         min = minOffset;
     }
-    return getRandom() * (max - min) + min;
+    return getRandomInRange(min, max);
 }
 export function getRangeValue(value) {
-    return isNumber(value) ? value : randomInRange(value);
+    return isNumber(value) ? value : randomInRangeValue(value);
 }
 export function getRangeMin(value) {
     return isNumber(value) ? value : value.min;
@@ -67,8 +75,7 @@ export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;
 }
 export function degToRad(degrees) {
-    const PIDeg = 180;
-    return (degrees * Math.PI) / PIDeg;
+    return degrees * degToRadFactor;
 }
 export function getParticleDirectionAngle(direction, position, center) {
     if (isNumber(direction)) {