@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/umd/Utils/ColorUtils.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./NumberUtils.js", "../Core/Utils/Constants.js", "./TypeUtils.js", "../Enums/AnimationStatus.js", "./Utils.js"], factory);
+        define(["require", "exports", "./MathUtils.js", "../Core/Utils/Constants.js", "./TypeUtils.js", "../Enums/AnimationStatus.js", "./Utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -28,7 +28,7 @@
     exports.getHslAnimationFromHsl = getHslAnimationFromHsl;
     exports.updateColorValue = updateColorValue;
     exports.updateColor = updateColor;
-    const NumberUtils_js_1 = require("./NumberUtils.js");
+    const MathUtils_js_1 = require("./MathUtils.js");
     const Constants_js_1 = require("../Core/Utils/Constants.js");
     const TypeUtils_js_1 = require("./TypeUtils.js");
     const AnimationStatus_js_1 = require("../Enums/AnimationStatus.js");
@@ -38,10 +38,11 @@
             return;
         }
         for (const manager of engine.colorManagers.values()) {
-            if (input.startsWith(manager.stringPrefix)) {
+            if (manager.accepts(input)) {
                 return manager.parseString(input);
             }
         }
+        return undefined;
     }
     function rangeColorToRgb(engine, input, index, useIndex = true) {
         if (!input) {
@@ -52,8 +53,12 @@
             return colorToRgb(engine, color.value, index, useIndex);
         }
         if ((0, TypeUtils_js_1.isArray)(color.value)) {
+            const value = (0, Utils_js_1.itemFromArray)(color.value, index, useIndex);
+            if (!value) {
+                return;
+            }
             return rangeColorToRgb(engine, {
-                value: (0, Utils_js_1.itemFromArray)(color.value, index, useIndex),
+                value,
             });
         }
         for (const manager of engine.colorManagers.values()) {
@@ -62,6 +67,7 @@
                 return res;
             }
         }
+        return undefined;
     }
     function colorToRgb(engine, input, index, useIndex = true) {
         if (!input) {
@@ -72,8 +78,12 @@
             return color.value === Constants_js_1.randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
         }
         if ((0, TypeUtils_js_1.isArray)(color.value)) {
+            const value = (0, Utils_js_1.itemFromArray)(color.value, index, useIndex);
+            if (!value) {
+                return;
+            }
             return colorToRgb(engine, {
-                value: (0, Utils_js_1.itemFromArray)(color.value, index, useIndex),
+                value,
             });
         }
         for (const manager of engine.colorManagers.values()) {
@@ -82,6 +92,7 @@
                 return res;
             }
         }
+        return undefined;
     }
     function colorToHsl(engine, color, index, useIndex = true) {
         const rgb = colorToRgb(engine, color, index, useIndex);
@@ -99,10 +110,15 @@
         };
         if (max !== min) {
             res.s = res.l < Constants_js_1.half ? (max - min) / (max + min) : (max - min) / (Constants_js_1.double - max - min);
-            res.h =
-                r1 === max
-                    ? (g1 - b1) / (max - min)
-                    : (res.h = g1 === max ? Constants_js_1.double + (b1 - r1) / (max - min) : Constants_js_1.double * Constants_js_1.double + (r1 - g1) / (max - min));
+            if (r1 === max) {
+                res.h = (g1 - b1) / (max - min);
+            }
+            else if (g1 === max) {
+                res.h = Constants_js_1.double + (b1 - r1) / (max - min);
+            }
+            else {
+                res.h = Constants_js_1.double * Constants_js_1.double + (r1 - g1) / (max - min);
+            }
         }
         res.l *= Constants_js_1.lMax;
         res.s *= Constants_js_1.sMax;
@@ -124,7 +140,7 @@
     function hslToRgb(hsl) {
         const h = ((hsl.h % Constants_js_1.hMax) + Constants_js_1.hMax) % Constants_js_1.hMax, s = Math.max(Constants_js_1.sMin, Math.min(Constants_js_1.sMax, hsl.s)), l = Math.max(Constants_js_1.lMin, Math.min(Constants_js_1.lMax, hsl.l)), hNormalized = h / Constants_js_1.hMax, sNormalized = s / Constants_js_1.sMax, lNormalized = l / Constants_js_1.lMax;
         if (s === Constants_js_1.sMin) {
-            const grayscaleValue = Math.round(lNormalized * Constants_js_1.rgbFactor);
+            const grayscaleValue = Math.round(lNormalized * Constants_js_1.rgbMax);
             return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
         }
         const channel = (temp1, temp2, temp3) => {
@@ -148,7 +164,7 @@
             return temp1;
         }, temp1 = lNormalized < Constants_js_1.half
             ? lNormalized * (Constants_js_1.sNormalizedOffset + sNormalized)
-            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = Constants_js_1.double * lNormalized - temp1, phaseThird = Constants_js_1.phaseNumerator / Constants_js_1.triple, red = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = Constants_js_1.double * lNormalized - temp1, phaseThird = Constants_js_1.phaseNumerator / Constants_js_1.triple, red = Math.min(Constants_js_1.rgbMax, Constants_js_1.rgbMax * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(Constants_js_1.rgbMax, Constants_js_1.rgbMax * channel(temp2, temp1, hNormalized)), blue = Math.min(Constants_js_1.rgbMax, Constants_js_1.rgbMax * channel(temp2, temp1, hNormalized - phaseThird));
         return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
     }
     function hslaToRgba(hsla) {
@@ -161,31 +177,43 @@
         };
     }
     function getRandomRgbColor(min) {
-        const fixedMin = min ?? Constants_js_1.defaultRgbMin, fixedMax = Constants_js_1.rgbMax + Constants_js_1.identity;
+        const fixedMin = min ?? Constants_js_1.defaultRgbMin, fixedMax = Constants_js_1.rgbMax + Constants_js_1.identity, getRgbInRangeValue = () => Math.floor((0, MathUtils_js_1.getRandomInRange)(fixedMin, fixedMax));
         return {
-            b: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
-            g: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
-            r: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
+            b: getRgbInRangeValue(),
+            g: getRgbInRangeValue(),
+            r: getRgbInRangeValue(),
         };
     }
-    function getStyleFromRgb(color, opacity) {
-        return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? Constants_js_1.defaultOpacity})`;
+    function getStyleFromRgb(color, hdr, opacity) {
+        return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+    }
+    function getHdrStyleFromRgb(color, opacity) {
+        return `color(display-p3 ${(color.r / Constants_js_1.rgbMax).toString()} ${(color.g / Constants_js_1.rgbMax).toString()} ${(color.b / Constants_js_1.rgbMax).toString()} / ${(opacity ?? Constants_js_1.defaultOpacity).toString()})`;
+    }
+    function getSdrStyleFromRgb(color, opacity) {
+        return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? Constants_js_1.defaultOpacity).toString()})`;
     }
-    function getStyleFromHsl(color, opacity) {
-        return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? Constants_js_1.defaultOpacity})`;
+    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 ?? Constants_js_1.defaultOpacity).toString()})`;
     }
     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 {
-            b: (0, NumberUtils_js_1.mix)(rgb1.b, rgb2.b, size1, size2),
-            g: (0, NumberUtils_js_1.mix)(rgb1.g, rgb2.g, size1, size2),
-            r: (0, NumberUtils_js_1.mix)(rgb1.r, rgb2.r, size1, size2),
+            b: (0, MathUtils_js_1.mix)(rgb1.b, rgb2.b, size1, size2),
+            g: (0, MathUtils_js_1.mix)(rgb1.g, rgb2.g, size1, size2),
+            r: (0, MathUtils_js_1.mix)(rgb1.r, rgb2.r, size1, size2),
         };
     }
     function getLinkColor(p1, p2, linkColor) {
@@ -207,6 +235,7 @@
         else {
             return linkColor;
         }
+        return undefined;
     }
     function getLinkRandomColor(engine, optColor, blink, consent) {
         const color = (0, TypeUtils_js_1.isString)(optColor) ? optColor : optColor.value;
@@ -264,19 +293,19 @@
     function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.enable = colorAnimation.enable;
         if (colorValue.enable) {
-            colorValue.velocity = ((0, NumberUtils_js_1.getRangeValue)(colorAnimation.speed) / Constants_js_1.percentDenominator) * reduceFactor;
-            colorValue.decay = Constants_js_1.decayOffset - (0, NumberUtils_js_1.getRangeValue)(colorAnimation.decay);
+            colorValue.velocity = ((0, MathUtils_js_1.getRangeValue)(colorAnimation.speed) / Constants_js_1.percentDenominator) * reduceFactor;
+            colorValue.decay = Constants_js_1.decayOffset - (0, MathUtils_js_1.getRangeValue)(colorAnimation.decay);
             colorValue.status = AnimationStatus_js_1.AnimationStatus.increasing;
             colorValue.loops = Constants_js_1.defaultLoops;
-            colorValue.maxLoops = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.count);
+            colorValue.maxLoops = (0, MathUtils_js_1.getRangeValue)(colorAnimation.count);
             colorValue.time = Constants_js_1.defaultTime;
-            colorValue.delayTime = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.delay) * Constants_js_1.millisecondsToSeconds;
+            colorValue.delayTime = (0, MathUtils_js_1.getRangeValue)(colorAnimation.delay) * Constants_js_1.millisecondsToSeconds;
             if (!colorAnimation.sync) {
-                colorValue.velocity *= (0, NumberUtils_js_1.getRandom)();
-                colorValue.value *= (0, NumberUtils_js_1.getRandom)();
+                colorValue.velocity *= (0, MathUtils_js_1.getRandom)();
+                colorValue.value *= (0, MathUtils_js_1.getRandom)();
             }
             colorValue.initialValue = colorValue.value;
-            colorValue.offset = (0, NumberUtils_js_1.setRangeValue)(colorAnimation.offset);
+            colorValue.offset = (0, MathUtils_js_1.setRangeValue)(colorAnimation.offset);
         }
         else {
             colorValue.velocity = Constants_js_1.defaultVelocity;
@@ -284,27 +313,22 @@
     }
     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 ? (0, NumberUtils_js_1.randomInRange)(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = (0, NumberUtils_js_1.getRangeMax)(range), min = (0, NumberUtils_js_1.getRangeMin)(range);
+        const offset = data.offset ? (0, MathUtils_js_1.randomInRangeValue)(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = (0, MathUtils_js_1.getRangeMax)(range), min = (0, MathUtils_js_1.getRangeMin)(range);
         if (!decrease || data.status === AnimationStatus_js_1.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_js_1.AnimationStatus.decreasing;
@@ -318,9 +342,7 @@
             data.value -= velocity;
             const minValue = 0;
             if (data.value < minValue) {
-                if (!data.loops) {
-                    data.loops = 0;
-                }
+                data.loops ??= 0;
                 data.loops++;
                 data.status = AnimationStatus_js_1.AnimationStatus.increasing;
             }
@@ -328,25 +350,19 @@
         if (data.velocity && decay !== identity) {
             data.velocity *= decay;
         }
-        data.value = (0, NumberUtils_js_1.clamp)(data.value, min, max);
+        data.value = (0, MathUtils_js_1.clamp)(data.value, min, max);
     }
     function updateColor(color, delta) {
         if (!color) {
             return;
         }
         const { h, s, l } = color, ranges = {
-            h: { min: 0, max: 360 },
-            s: { min: 0, max: 100 },
-            l: { min: 0, max: 100 },
+            h: { min: Constants_js_1.hMin, max: Constants_js_1.hMax },
+            s: { min: Constants_js_1.sMin, max: Constants_js_1.sMax },
+            l: { min: Constants_js_1.lMin, max: Constants_js_1.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/umd/Utils/EventDispatcher.js

@@ -26,7 +26,9 @@
         }
         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/umd/Utils/LogUtils.js

@@ -0,0 +1,36 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setLogger = setLogger;
+    exports.getLogger = getLogger;
+    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,
+    };
+    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;
+    }
+    function getLogger() {
+        return _logger;
+    }
+});

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

@@ -11,12 +11,13 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setRandom = setRandom;
     exports.getRandom = getRandom;
+    exports.getRandomInRange = getRandomInRange;
     exports.setAnimationFunctions = setAnimationFunctions;
     exports.animate = animate;
     exports.cancelAnimation = cancelAnimation;
     exports.clamp = clamp;
     exports.mix = mix;
-    exports.randomInRange = randomInRange;
+    exports.randomInRangeValue = randomInRangeValue;
     exports.getRangeValue = getRangeValue;
     exports.getRangeMin = getRangeMin;
     exports.getRangeMax = getRangeMax;
@@ -37,10 +38,13 @@
     const Constants_js_1 = require("../Core/Utils/Constants.js");
     const Vectors_js_1 = require("../Core/Utils/Vectors.js");
     const TypeUtils_js_1 = require("./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);
+        },
     };
     function setRandom(rnd = Math.random) {
         _random = rnd;
@@ -49,9 +53,14 @@
         const min = 0, max = 1;
         return clamp(_random(), min, max - Number.EPSILON);
     }
+    function getRandomInRange(min, max) {
+        return getRandom() * (max - min) + min;
+    }
     function setAnimationFunctions(nextFrame, cancel) {
         _animationLoop.nextFrame = (callback) => nextFrame(callback);
-        _animationLoop.cancel = (handle) => cancel(handle);
+        _animationLoop.cancel = (handle) => {
+            cancel(handle);
+        };
     }
     function animate(fn) {
         return _animationLoop.nextFrame(fn);
@@ -65,16 +74,16 @@
     function mix(comp1, comp2, weight1, weight2) {
         return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
     }
-    function randomInRange(r) {
+    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);
     }
     function getRangeValue(value) {
-        return (0, TypeUtils_js_1.isNumber)(value) ? value : randomInRange(value);
+        return (0, TypeUtils_js_1.isNumber)(value) ? value : randomInRangeValue(value);
     }
     function getRangeMin(value) {
         return (0, TypeUtils_js_1.isNumber)(value) ? value : value.min;
@@ -102,8 +111,7 @@
         return getDistances(pointA, pointB).distance;
     }
     function degToRad(degrees) {
-        const PIDeg = 180;
-        return (degrees * Math.PI) / PIDeg;
+        return degrees * degToRadFactor;
     }
     function getParticleDirectionAngle(direction, position, center) {
         if ((0, TypeUtils_js_1.isNumber)(direction)) {