@tsparticles/engine 3.0.3 → 3.2.0

package/esm/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,8 +1,6 @@
 import { OptionsColor } from "../OptionsColor.js";
 export class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {
@@ -12,6 +10,9 @@ export class BackgroundMaskCover {
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);
         }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;
         }

package/esm/Options/Classes/ManualParticle.js

@@ -1,4 +1,5 @@
 import { deepExtend } from "../../Utils/Utils.js";
+const defaultPosition = 50;
 export class ManualParticle {
     load(data) {
         if (!data) {
@@ -6,8 +7,8 @@ export class ManualParticle {
         }
         if (data.position) {
             this.position = {
-                x: data.position.x ?? 50,
-                y: data.position.y ?? 50,
+                x: data.position.x ?? defaultPosition,
+                y: data.position.y ?? defaultPosition,
                 mode: data.position.mode ?? "percent",
             };
         }

package/esm/Options/Classes/Options.js

@@ -53,6 +53,9 @@ export class Options {
         if (data.clear !== undefined) {
             this.clear = data.clear;
         }
+        if (data.key !== undefined) {
+            this.key = data.key;
+        }
         if (data.name !== undefined) {
             this.name = data.name;
         }

package/esm/Utils/CanvasUtils.js

@@ -1,4 +1,5 @@
 import { getStyleFromRgb } from "./ColorUtils.js";
+const origin = { x: 0, y: 0 };
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -7,29 +8,28 @@ export function drawLine(context, begin, end) {
 }
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-    context.fillRect(0, 0, dimension.width, dimension.height);
+    context.fillRect(origin.x, origin.y, dimension.width, dimension.height);
 }
 export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(image, 0, 0, dimension.width, dimension.height);
+    context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);
     context.globalAlpha = 1;
 }
 export function clear(context, dimension) {
-    context.clearRect(0, 0, dimension.width, dimension.height);
+    context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
-export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;
-    const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {
+export async function drawParticle(data) {
+    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, transformData = {
-        a: rotateData.cos * (transform.a ?? 1),
-        b: rotateData.sin * (transform.b ?? 1),
-        c: -rotateData.sin * (transform.c ?? 1),
-        d: rotateData.cos * (transform.d ?? 1),
+    }, defaultTransformFactor = 1, transformData = {
+        a: rotateData.cos * (transform.a ?? defaultTransformFactor),
+        b: rotateData.sin * (transform.b ?? defaultTransformFactor),
+        c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
+        d: rotateData.cos * (transform.d ?? defaultTransformFactor),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (backgroundMask) {
@@ -45,29 +45,28 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? 0;
+    const minStrokeWidth = 0, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    const drawData = { container, context, particle, radius, opacity, delta, transformData };
-    context.beginPath();
-    drawShape(drawData);
-    if (particle.shapeClose) {
-        context.closePath();
-    }
-    if (strokeWidth > 0) {
-        context.stroke();
-    }
-    if (particle.shapeFill) {
-        context.fill();
-    }
-    drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
+    const drawData = {
+        container,
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        transformData,
+        strokeWidth,
+    };
+    await drawShape(drawData);
+    await drawShapeAfterDraw(drawData);
+    await drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
-    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.resetTransform();
 }
-export function drawEffect(data) {
+export async function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -76,7 +75,7 @@ export function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -86,8 +85,8 @@ export function drawEffect(data) {
         transformData: { ...transformData },
     });
 }
-export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+export async function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
     }
@@ -95,7 +94,8 @@ export function drawShape(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    context.beginPath();
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -104,17 +104,26 @@ export function drawShape(data) {
         pixelRatio: container.retina.pixelRatio,
         transformData: { ...transformData },
     });
+    if (particle.shapeClose) {
+        context.closePath();
+    }
+    if (strokeWidth > minStrokeWidth) {
+        context.stroke();
+    }
+    if (particle.shapeFill) {
+        context.fill();
+    }
 }
-export function drawShapeAfterDraw(data) {
+export async function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
     const drawer = container.shapeDrawers.get(particle.shape);
-    if (!drawer || !drawer.afterDraw) {
+    if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
+    await drawer.afterDraw({
         context,
         particle,
         radius,
@@ -124,22 +133,23 @@ export function drawShapeAfterDraw(data) {
         transformData: { ...transformData },
     });
 }
-export function drawPlugin(context, plugin, delta) {
+export async function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    plugin.draw(context, delta);
+    await plugin.draw(context, delta);
 }
-export function drawParticlePlugin(context, plugin, particle, delta) {
+export async function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    plugin.drawParticle(context, particle, delta);
+    await plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
+    const lFactor = 1;
     return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === "darken" ? -1 : 1) * value,
+        l: color.l + (type === "darken" ? -lFactor : lFactor) * value,
     };
 }

package/esm/Utils/ColorUtils.js

@@ -1,5 +1,6 @@
-import { getRandom, getRangeValue, mix, randomInRange, setRangeValue } from "./NumberUtils.js";
+import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
 import { isArray, isString, itemFromArray } from "./Utils.js";
+import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
@@ -12,13 +13,15 @@ function stringToRgba(input) {
     }
     const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexFixed = input.replace(shorthandRegex, (_, r, g, b, a) => {
         return r + r + g + g + b + b + (a !== undefined ? a + a : "");
-    }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed);
+    }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed), radix = 16, defaultAlpha = 1, alphaFactor = 0xff;
     return result
         ? {
-            a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1,
-            b: parseInt(result[3], 16),
-            g: parseInt(result[2], 16),
-            r: parseInt(result[1], 16),
+            a: result[4] !== undefined
+                ? parseInt(result[4], radix) / alphaFactor
+                : defaultAlpha,
+            b: parseInt(result[3], radix),
+            g: parseInt(result[2], radix),
+            r: parseInt(result[1], radix),
         }
         : undefined;
 }
@@ -71,26 +74,26 @@ export function rangeColorToHsl(color, index, useIndex = true) {
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export function rgbToHsl(color) {
-    const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
-        h: 0,
-        l: (max + min) * 0.5,
-        s: 0,
+    const rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, half = 0.5, double = 2, r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
+        h: hMin,
+        l: (max + min) * half,
+        s: sMin,
     };
     if (max !== min) {
-        res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - 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 ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min));
+                : (res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min));
     }
-    res.l *= 100;
-    res.s *= 100;
-    res.h *= 60;
-    if (res.h < 0) {
-        res.h += 360;
+    res.l *= lMax;
+    res.s *= sMax;
+    res.h *= hPhase;
+    if (res.h < hMin) {
+        res.h += hMax;
     }
-    if (res.h >= 360) {
-        res.h -= 360;
+    if (res.h >= hMax) {
+        res.h -= hMax;
     }
     return res;
 }
@@ -101,29 +104,33 @@ export function stringToRgb(input) {
     return stringToRgba(input);
 }
 export function hslToRgb(hsl) {
-    const h = ((hsl.h % 360) + 360) % 360, s = Math.max(0, Math.min(100, hsl.s)), l = Math.max(0, Math.min(100, hsl.l)), hNormalized = h / 360, sNormalized = s / 100, lNormalized = l / 100;
-    if (s === 0) {
-        const grayscaleValue = Math.round(lNormalized * 255);
+    const hMax = 360, sMax = 100, lMax = 100, sMin = 0, lMin = 0, 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, rgbFactor = 255, triple = 3;
+    if (s === sMin) {
+        const grayscaleValue = Math.round(lNormalized * rgbFactor);
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    const channel = (temp1, temp2, temp3) => {
-        if (temp3 < 0) {
-            temp3 += 1;
+    const half = 0.5, double = 2, channel = (temp1, temp2, temp3) => {
+        const temp3Min = 0, temp3Max = 1, sextuple = 6;
+        if (temp3 < temp3Min) {
+            temp3++;
         }
-        if (temp3 > 1) {
-            temp3 -= 1;
+        if (temp3 > temp3Max) {
+            temp3--;
         }
-        if (temp3 * 6 < 1) {
-            return temp1 + (temp2 - temp1) * 6 * temp3;
+        if (temp3 * sextuple < temp3Max) {
+            return temp1 + (temp2 - temp1) * sextuple * temp3;
         }
-        if (temp3 * 2 < 1) {
+        if (temp3 * double < temp3Max) {
             return temp2;
         }
-        if (temp3 * 3 < 2) {
-            return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+        if (temp3 * triple < temp3Max * double) {
+            const temp3Offset = double / triple;
+            return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
         }
         return temp1;
-    }, temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = 2 * lNormalized - temp1, red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)), green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)), blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+    }, sNormalizedOffset = 1, temp1 = lNormalized < half
+        ? lNormalized * (sNormalizedOffset + sNormalized)
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseNumerator = 1, 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));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
@@ -136,18 +143,20 @@ export function hslaToRgba(hsla) {
     };
 }
 export function getRandomRgbColor(min) {
-    const fixedMin = min ?? 0;
+    const defaultMin = 0, fixedMin = min ?? defaultMin, rgbMax = 256;
     return {
-        b: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-        g: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-        r: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
+        b: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+        g: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+        r: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
     };
 }
 export function getStyleFromRgb(color, opacity) {
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
+    const defaultOpacity = 1;
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
 }
 export function getStyleFromHsl(color, opacity) {
-    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
+    const defaultOpacity = 1;
+    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
@@ -238,21 +247,91 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
+    const defaultVelocity = 0, decayOffset = 1, defaultLoops = 0, defaultTime = 0;
     if (colorValue.enable) {
-        colorValue.velocity = (getRangeValue(colorAnimation.speed) / 100) * reduceFactor;
-        colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
+        colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
+        colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
         colorValue.status = "increasing";
-        colorValue.loops = 0;
+        colorValue.loops = defaultLoops;
         colorValue.maxLoops = getRangeValue(colorAnimation.count);
-        colorValue.time = 0;
-        colorValue.delayTime = getRangeValue(colorAnimation.delay) * 1000;
+        colorValue.time = defaultTime;
+        colorValue.delayTime = getRangeValue(colorAnimation.delay) * millisecondsToSeconds;
         if (!colorAnimation.sync) {
             colorValue.velocity *= getRandom();
             colorValue.value *= getRandom();
         }
         colorValue.initialValue = colorValue.value;
+        colorValue.offset = setRangeValue(colorAnimation.offset);
     }
     else {
-        colorValue.velocity = 0;
+        colorValue.velocity = defaultVelocity;
+    }
+}
+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 ||
+        ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
+        return;
+    }
+    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;
+    }
+    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);
+    if (!decrease || data.status === "increasing") {
+        data.value += velocity;
+        if (data.value > max) {
+            if (!data.loops) {
+                data.loops = 0;
+            }
+            data.loops++;
+            if (decrease) {
+                data.status = "decreasing";
+            }
+            else {
+                data.value -= max;
+            }
+        }
+    }
+    else {
+        data.value -= velocity;
+        const minValue = 0;
+        if (data.value < minValue) {
+            if (!data.loops) {
+                data.loops = 0;
+            }
+            data.loops++;
+            data.status = "increasing";
+        }
+    }
+    if (data.velocity && decay !== identity) {
+        data.velocity *= decay;
+    }
+    data.value = clamp(data.value, min, max);
+}
+export function updateColor(color, delta) {
+    if (!color) {
+        return;
+    }
+    const { h, s, l } = color;
+    const ranges = {
+        h: { min: 0, max: 360 },
+        s: { min: 0, max: 100 },
+        l: { min: 0, max: 100 },
+    };
+    if (h) {
+        updateColorValue(h, ranges.h, false, delta);
+    }
+    if (s) {
+        updateColorValue(s, ranges.s, true, delta);
+    }
+    if (l) {
+        updateColorValue(l, ranges.l, true, delta);
     }
 }

package/esm/Utils/EventDispatcher.js

@@ -13,7 +13,7 @@ export class EventDispatcher {
     }
     dispatchEvent(type, args) {
         const listeners = this._listeners.get(type);
-        listeners && listeners.forEach((handler) => handler(args));
+        listeners?.forEach((handler) => handler(args));
     }
     hasEventListener(type) {
         return !!this._listeners.get(type);
@@ -31,15 +31,16 @@ export class EventDispatcher {
         if (!arr) {
             return;
         }
-        const length = arr.length, idx = arr.indexOf(listener);
-        if (idx < 0) {
+        const length = arr.length, idx = arr.indexOf(listener), minIndex = 0;
+        if (idx < minIndex) {
             return;
         }
-        if (length === 1) {
+        const deleteCount = 1;
+        if (length === deleteCount) {
             this._listeners.delete(type);
         }
         else {
-            arr.splice(idx, 1);
+            arr.splice(idx, deleteCount);
         }
     }
 }

package/esm/Utils/HslColorManager.js

@@ -25,13 +25,13 @@ export class HslColorManager {
         if (!input.startsWith("hsl")) {
             return;
         }
-        const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), minLength = 4, defaultAlpha = 1, radix = 10;
         return result
             ? hslaToRgba({
-                a: result.length > 4 ? parseAlpha(result[5]) : 1,
-                h: parseInt(result[1], 10),
-                l: parseInt(result[3], 10),
-                s: parseInt(result[2], 10),
+                a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
+                h: parseInt(result[1], radix),
+                l: parseInt(result[3], radix),
+                s: parseInt(result[2], radix),
             })
             : undefined;
     }

package/esm/Utils/NumberUtils.js

@@ -1,7 +1,8 @@
 import { Vector } from "../Core/Utils/Vector.js";
 import { isNumber } from "./Utils.js";
+import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
-const easings = new Map();
+const easings = new Map(), double = 2, doublePI = Math.PI * double;
 export function addEasing(name, easing) {
     if (easings.get(name)) {
         return;
@@ -9,13 +10,14 @@ export function addEasing(name, easing) {
     easings.set(name, easing);
 }
 export function getEasing(name) {
-    return easings.get(name) || ((value) => value);
+    return easings.get(name) ?? ((value) => value);
 }
 export function setRandom(rnd = Math.random) {
     _random = rnd;
 }
 export function getRandom() {
-    return clamp(_random(), 0, 1 - 1e-16);
+    const min = 0, max = 1;
+    return clamp(_random(), min, max - Number.EPSILON);
 }
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
@@ -24,10 +26,10 @@ export function mix(comp1, comp2, weight1, weight2) {
     return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
 }
 export 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;
 }
@@ -53,39 +55,44 @@ export function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 export 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) };
 }
 export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;
 }
+export function degToRad(degrees) {
+    const PIDeg = 180;
+    return (degrees * Math.PI) / PIDeg;
+}
 export function getParticleDirectionAngle(direction, position, center) {
     if (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;
     }
 }
 export function getParticleBaseVelocity(direction) {
@@ -95,20 +102,21 @@ export function getParticleBaseVelocity(direction) {
     return baseVelocity;
 }
 export function collisionVelocity(v1, v2, m1, m2) {
-    return Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * 2 * m2) / (m1 + m2), v1.y);
+    const double = 2;
+    return Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
 }
 export 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) / percentDenominator,
+            y: (data.position.y * data.size.height) / percentDenominator,
         }
         : undefined;
 }
 export 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() * percentDenominator) * data.size.width) / percentDenominator,
+        y: ((data.position?.y ?? getRandom() * percentDenominator) * data.size.height) / percentDenominator,
     };
 }
 export function calcPositionOrRandomFromSizeRanged(data) {
@@ -132,5 +140,9 @@ export function calcExactPositionOrRandomFromSizeRanged(data) {
     return calcExactPositionOrRandomFromSize({ size: data.size, position });
 }
 export 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) / percentDenominator : parseFloat(input);
 }