@tsparticles/engine 3.0.0-alpha.0

package/browser/Utils/NumberUtils.js

@@ -0,0 +1,149 @@
+import { Vector } from "../Core/Utils/Vector";
+let _random = Math.random;
+const easings = new Map();
+export function addEasing(name, easing) {
+    if (!easings.get(name)) {
+        easings.set(name, easing);
+    }
+}
+export function getEasing(name) {
+    return easings.get(name) || ((value) => value);
+}
+export function setRandom(rnd = Math.random) {
+    _random = rnd;
+}
+export function getRandom() {
+    return clamp(_random(), 0, 1 - 1e-16);
+}
+export function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+export function mix(comp1, comp2, weight1, weight2) {
+    return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
+}
+export function randomInRange(r) {
+    const max = getRangeMax(r);
+    let min = getRangeMin(r);
+    if (max === min) {
+        min = 0;
+    }
+    return getRandom() * (max - min) + min;
+}
+export function getRangeValue(value) {
+    return typeof value === "number" ? value : randomInRange(value);
+}
+export function getRangeMin(value) {
+    return typeof value === "number" ? value : value.min;
+}
+export function getRangeMax(value) {
+    return typeof value === "number" ? value : value.max;
+}
+export function setRangeValue(source, value) {
+    if (source === value || (value === undefined && typeof source === "number")) {
+        return source;
+    }
+    const min = getRangeMin(source), max = getRangeMax(source);
+    return value !== undefined
+        ? {
+            min: Math.min(min, value),
+            max: Math.max(max, value),
+        }
+        : setRangeValue(min, max);
+}
+export function getValue(options) {
+    const random = options.random, { enable, minimumValue } = typeof random === "boolean"
+        ? {
+            enable: random,
+            minimumValue: 0,
+        }
+        : random;
+    return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
+}
+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) };
+}
+export function getDistance(pointA, pointB) {
+    return getDistances(pointA, pointB).distance;
+}
+export function getParticleDirectionAngle(direction, position, center) {
+    if (typeof direction === "number") {
+        return (direction * Math.PI) / 180;
+    }
+    else {
+        switch (direction) {
+            case "top":
+                return -Math.PI / 2;
+            case "top-right":
+                return -Math.PI / 4;
+            case "right":
+                return 0;
+            case "bottom-right":
+                return Math.PI / 4;
+            case "bottom":
+                return Math.PI / 2;
+            case "bottom-left":
+                return (3 * Math.PI) / 4;
+            case "left":
+                return Math.PI;
+            case "top-left":
+                return (-3 * Math.PI) / 4;
+            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;
+        }
+    }
+}
+export function getParticleBaseVelocity(direction) {
+    const baseVelocity = Vector.origin;
+    baseVelocity.length = 1;
+    baseVelocity.angle = 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);
+}
+export function calcPositionFromSize(data) {
+    return data.position && data.position.x !== undefined && data.position.y !== undefined
+        ? {
+            x: (data.position.x * data.size.width) / 100,
+            y: (data.position.y * data.size.height) / 100,
+        }
+        : undefined;
+}
+export function calcPositionOrRandomFromSize(data) {
+    var _a, _b, _c, _d;
+    return {
+        x: (((_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * 100) * data.size.width) / 100,
+        y: (((_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * 100) * data.size.height) / 100,
+    };
+}
+export function calcPositionOrRandomFromSizeRanged(data) {
+    var _a, _b;
+    const position = {
+        x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
+    };
+    return calcPositionOrRandomFromSize({ size: data.size, position });
+}
+export function calcExactPositionOrRandomFromSize(data) {
+    var _a, _b, _c, _d;
+    return {
+        x: (_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * data.size.width,
+        y: (_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * data.size.height,
+    };
+}
+export function calcExactPositionOrRandomFromSizeRanged(data) {
+    var _a, _b;
+    const position = {
+        x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
+    };
+    return calcExactPositionOrRandomFromSize({ size: data.size, position });
+}
+export function parseAlpha(input) {
+    return input ? (input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input)) : 1;
+}

package/browser/Utils/OptionsUtils.js

@@ -0,0 +1,11 @@
+import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
+export function loadOptions(options, ...sourceOptionsArr) {
+    for (const sourceOptions of sourceOptionsArr) {
+        options.load(sourceOptions);
+    }
+}
+export function loadParticlesOptions(engine, container, ...sourceOptionsArr) {
+    const options = new ParticlesOptions(engine, container);
+    loadOptions(options, ...sourceOptionsArr);
+    return options;
+}

package/browser/Utils/RgbColorManager.js

@@ -0,0 +1,39 @@
+import { getRangeValue, parseAlpha } from "./NumberUtils";
+export class RgbColorManager {
+    constructor() {
+        this.key = "rgb";
+        this.stringPrefix = "rgb";
+    }
+    handleColor(color) {
+        var _a;
+        const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+        if (rgbColor.r !== undefined) {
+            return rgbColor;
+        }
+    }
+    handleRangeColor(color) {
+        var _a;
+        const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+        if (rgbColor.r !== undefined) {
+            return {
+                r: getRangeValue(rgbColor.r),
+                g: getRangeValue(rgbColor.g),
+                b: getRangeValue(rgbColor.b),
+            };
+        }
+    }
+    parseString(input) {
+        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);
+        return result
+            ? {
+                a: result.length > 4 ? parseAlpha(result[5]) : 1,
+                b: parseInt(result[3], 10),
+                g: parseInt(result[2], 10),
+                r: parseInt(result[1], 10),
+            }
+            : undefined;
+    }
+}

package/browser/Utils/Utils.js

@@ -0,0 +1,247 @@
+import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, } from "./NumberUtils";
+import { Vector } from "../Core/Utils/Vector";
+function rectSideBounce(pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor) {
+    const res = { bounced: false };
+    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) / 2 && velocity > 0) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0)) {
+        res.velocity = velocity * -factor;
+        res.bounced = true;
+    }
+    return res;
+}
+function checkSelector(element, selectors) {
+    const res = executeOnSingleOrMultiple(selectors, (selector) => {
+        return element.matches(selector);
+    });
+    return res instanceof Array ? res.some((t) => t) : res;
+}
+export function isSsr() {
+    return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
+}
+export function hasMatchMedia() {
+    return !isSsr() && typeof matchMedia !== "undefined";
+}
+export function safeMatchMedia(query) {
+    if (!hasMatchMedia()) {
+        return;
+    }
+    return matchMedia(query);
+}
+export function animate() {
+    return isSsr()
+        ? (callback) => setTimeout(callback)
+        : (callback) => (requestAnimationFrame || setTimeout)(callback);
+}
+export function cancelAnimation() {
+    return isSsr()
+        ? (handle) => clearTimeout(handle)
+        : (handle) => (cancelAnimationFrame || clearTimeout)(handle);
+}
+export function isInArray(value, array) {
+    return value === array || (array instanceof Array && array.indexOf(value) > -1);
+}
+export async function loadFont(font, weight) {
+    try {
+        await document.fonts.load(`${weight !== null && weight !== void 0 ? weight : "400"} 36px '${font !== null && font !== void 0 ? font : "Verdana"}'`);
+    }
+    catch (_a) {
+    }
+}
+export function arrayRandomIndex(array) {
+    return Math.floor(getRandom() * array.length);
+}
+export function itemFromArray(array, index, useIndex = true) {
+    return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
+}
+export function isPointInside(point, size, offset, radius, direction) {
+    return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction);
+}
+export function areBoundsInside(bounds, size, offset, direction) {
+    let inside = true;
+    if (!direction || direction === "bottom") {
+        inside = bounds.top < size.height + offset.x;
+    }
+    if (inside && (!direction || direction === "left")) {
+        inside = bounds.right > offset.x;
+    }
+    if (inside && (!direction || direction === "right")) {
+        inside = bounds.left < size.width + offset.y;
+    }
+    if (inside && (!direction || direction === "top")) {
+        inside = bounds.bottom > offset.y;
+    }
+    return inside;
+}
+export function calculateBounds(point, radius) {
+    return {
+        bottom: point.y + radius,
+        left: point.x - radius,
+        right: point.x + radius,
+        top: point.y - radius,
+    };
+}
+export function deepExtend(destination, ...sources) {
+    for (const source of sources) {
+        if (source === undefined || source === null) {
+            continue;
+        }
+        if (typeof source !== "object") {
+            destination = source;
+            continue;
+        }
+        const sourceIsArray = Array.isArray(source);
+        if (sourceIsArray && (typeof destination !== "object" || !destination || !Array.isArray(destination))) {
+            destination = [];
+        }
+        else if (!sourceIsArray && (typeof destination !== "object" || !destination || Array.isArray(destination))) {
+            destination = {};
+        }
+        for (const key in source) {
+            if (key === "__proto__") {
+                continue;
+            }
+            const sourceDict = source, value = sourceDict[key], isObject = typeof value === "object", destDict = destination;
+            destDict[key] =
+                isObject && Array.isArray(value)
+                    ? value.map((v) => deepExtend(destDict[key], v))
+                    : deepExtend(destDict[key], value);
+        }
+    }
+    return destination;
+}
+export function isDivModeEnabled(mode, divs) {
+    return !!findItemFromSingleOrMultiple(divs, (t) => t.enable && isInArray(mode, t.mode));
+}
+export function divModeExecute(mode, divs, callback) {
+    executeOnSingleOrMultiple(divs, (div) => {
+        const divMode = div.mode, divEnabled = div.enable;
+        if (divEnabled && isInArray(mode, divMode)) {
+            singleDivModeExecute(div, callback);
+        }
+    });
+}
+export function singleDivModeExecute(div, callback) {
+    const selectors = div.selectors;
+    executeOnSingleOrMultiple(selectors, (selector) => {
+        callback(selector, div);
+    });
+}
+export function divMode(divs, element) {
+    if (!element || !divs) {
+        return;
+    }
+    return findItemFromSingleOrMultiple(divs, (div) => {
+        return checkSelector(element, div.selectors);
+    });
+}
+export function circleBounceDataFromParticle(p) {
+    return {
+        position: p.getPosition(),
+        radius: p.getRadius(),
+        mass: p.getMass(),
+        velocity: p.velocity,
+        factor: Vector.create(getValue(p.options.bounce.horizontal), getValue(p.options.bounce.vertical)),
+    };
+}
+export function circleBounce(p1, p2) {
+    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = getDistances(pos2, pos1);
+    if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+        return;
+    }
+    const angle = -Math.atan2(yDist, xDist), m1 = p1.mass, m2 = p2.mass, u1 = p1.velocity.rotate(angle), u2 = p2.velocity.rotate(angle), v1 = collisionVelocity(u1, u2, m1, m2), v2 = collisionVelocity(u2, u1, m1, m2), vFinal1 = v1.rotate(-angle), vFinal2 = v2.rotate(-angle);
+    p1.velocity.x = vFinal1.x * p1.factor.x;
+    p1.velocity.y = vFinal1.y * p1.factor.y;
+    p2.velocity.x = vFinal2.x * p2.factor.x;
+    p2.velocity.y = vFinal2.y * p2.factor.y;
+}
+export function rectBounce(particle, divBounds) {
+    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), resH = rectSideBounce({
+        min: bounds.left,
+        max: bounds.right,
+    }, {
+        min: bounds.top,
+        max: bounds.bottom,
+    }, {
+        min: divBounds.left,
+        max: divBounds.right,
+    }, {
+        min: divBounds.top,
+        max: divBounds.bottom,
+    }, particle.velocity.x, getValue(particle.options.bounce.horizontal));
+    if (resH.bounced) {
+        if (resH.velocity !== undefined) {
+            particle.velocity.x = resH.velocity;
+        }
+        if (resH.position !== undefined) {
+            particle.position.x = resH.position;
+        }
+    }
+    const resV = rectSideBounce({
+        min: bounds.top,
+        max: bounds.bottom,
+    }, {
+        min: bounds.left,
+        max: bounds.right,
+    }, {
+        min: divBounds.top,
+        max: divBounds.bottom,
+    }, {
+        min: divBounds.left,
+        max: divBounds.right,
+    }, particle.velocity.y, getValue(particle.options.bounce.vertical));
+    if (resV.bounced) {
+        if (resV.velocity !== undefined) {
+            particle.velocity.y = resV.velocity;
+        }
+        if (resV.position !== undefined) {
+            particle.position.y = resV.position;
+        }
+    }
+}
+export function executeOnSingleOrMultiple(obj, callback) {
+    return obj instanceof Array ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+}
+export function itemFromSingleOrMultiple(obj, index, useIndex) {
+    return obj instanceof Array ? itemFromArray(obj, index, useIndex) : obj;
+}
+export function findItemFromSingleOrMultiple(obj, callback) {
+    return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+}
+export function initParticleNumericAnimationValue(options, pxRatio) {
+    const valueRange = options.value, animationOptions = options.animation;
+    const res = {
+        enable: options.animation.enable,
+        value: getRangeValue(options.value) * pxRatio,
+        max: getRangeMax(valueRange) * pxRatio,
+        min: getRangeMin(valueRange) * pxRatio,
+        loops: 0,
+        maxLoops: getRangeValue(options.animation.count),
+    };
+    if (animationOptions.enable) {
+        res.status = "increasing";
+        res.decay = 1 - getRangeValue(animationOptions.decay);
+        switch (animationOptions.startValue) {
+            case "min":
+                res.value = res.min;
+                res.status = "increasing";
+                break;
+            case "random":
+                res.value = randomInRange(res);
+                res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+                break;
+            case "max":
+            default:
+                res.value = res.max;
+                res.status = "decreasing";
+                break;
+        }
+    }
+    res.initialValue = res.value;
+    return res;
+}

package/browser/bundle.js

@@ -0,0 +1,97 @@
+import { Engine } from "./engine";
+import { HslColorManager } from "./Utils/HslColorManager";
+import { RgbColorManager } from "./Utils/RgbColorManager";
+import { addColorManager } from "./Utils/ColorUtils";
+const rgbColorManager = new RgbColorManager(), hslColorManager = new HslColorManager();
+addColorManager(rgbColorManager);
+addColorManager(hslColorManager);
+const tsParticles = new Engine();
+export * from "./Core/Utils/Circle";
+export * from "./Core/Utils/Constants";
+export * from "./Core/Utils/ExternalInteractorBase";
+export * from "./Core/Utils/ParticlesInteractorBase";
+export * from "./Core/Utils/Point";
+export * from "./Core/Utils/Range";
+export * from "./Core/Utils/Rectangle";
+export * from "./Core/Utils/Vector";
+export * from "./Core/Utils/Vector3d";
+export * from "./Enums/Directions/MoveDirection";
+export * from "./Enums/Directions/RotateDirection";
+export * from "./Enums/Directions/OutModeDirection";
+export * from "./Enums/Modes/ClickMode";
+export * from "./Enums/Modes/DivMode";
+export * from "./Enums/Modes/HoverMode";
+export * from "./Enums/Modes/CollisionMode";
+export * from "./Enums/Modes/OutMode";
+export * from "./Enums/Modes/SizeMode";
+export * from "./Enums/Modes/ThemeMode";
+export * from "./Enums/Modes/ResponsiveMode";
+export * from "./Enums/Types/AlterType";
+export * from "./Enums/Types/DestroyType";
+export * from "./Enums/Types/GradientType";
+export * from "./Enums/Types/InteractorType";
+export * from "./Enums/Types/ParticleOutType";
+export * from "./Enums/Types/StartValueType";
+export * from "./Enums/Types/DivType";
+export * from "./Enums/Types/EasingType";
+export * from "./Enums/AnimationStatus";
+export * from "./Enums/InteractivityDetect";
+export * from "./Options/Classes/AnimatableColor";
+export * from "./Options/Classes/AnimationOptions";
+export * from "./Options/Classes/Background/Background";
+export * from "./Options/Classes/BackgroundMask/BackgroundMask";
+export * from "./Options/Classes/BackgroundMask/BackgroundMaskCover";
+export * from "./Options/Classes/ColorAnimation";
+export * from "./Options/Classes/FullScreen/FullScreen";
+export * from "./Options/Classes/HslAnimation";
+export * from "./Options/Classes/Interactivity/Events/ClickEvent";
+export * from "./Options/Classes/Interactivity/Events/DivEvent";
+export * from "./Options/Classes/Interactivity/Events/ClickEvent";
+export * from "./Options/Classes/Interactivity/Events/DivEvent";
+export * from "./Options/Classes/Interactivity/Events/Events";
+export * from "./Options/Classes/Interactivity/Events/HoverEvent";
+export * from "./Options/Classes/Interactivity/Events/Parallax";
+export * from "./Options/Classes/Interactivity/Events/ResizeEvent";
+export * from "./Options/Classes/Interactivity/Interactivity";
+export * from "./Options/Classes/Interactivity/Modes/Modes";
+export * from "./Options/Classes/ManualParticle";
+export * from "./Options/Classes/Options";
+export * from "./Options/Classes/OptionsColor";
+export * from "./Options/Classes/Particles/Bounce/ParticlesBounce";
+export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor";
+export * from "./Options/Classes/Particles/Collisions/Collisions";
+export * from "./Options/Classes/Particles/Collisions/CollisionsAbsorb";
+export * from "./Options/Classes/Particles/Collisions/CollisionsOverlap";
+export * from "./Options/Classes/Particles/ParticlesOptions";
+export * from "./Options/Classes/Particles/Shadow";
+export * from "./Options/Classes/Particles/Stroke";
+export * from "./Options/Classes/Particles/Move/MoveAttract";
+export * from "./Options/Classes/Particles/Move/Move";
+export * from "./Options/Classes/Particles/Move/MoveAngle";
+export * from "./Options/Classes/Particles/Move/MoveCenter";
+export * from "./Options/Classes/Particles/Move/MoveGravity";
+export * from "./Options/Classes/Particles/Move/MoveTrail";
+export * from "./Options/Classes/Particles/Move/MoveTrailFill";
+export * from "./Options/Classes/Particles/Move/OutModes";
+export * from "./Options/Classes/Particles/Move/Path/MovePath";
+export * from "./Options/Classes/Particles/Move/Spin";
+export * from "./Options/Classes/Particles/Number/ParticlesNumber";
+export * from "./Options/Classes/Particles/Number/ParticlesDensity";
+export * from "./Options/Classes/Particles/Opacity/Opacity";
+export * from "./Options/Classes/Particles/Opacity/OpacityAnimation";
+export * from "./Options/Classes/Particles/Shape/Shape";
+export * from "./Options/Classes/Particles/Size/Size";
+export * from "./Options/Classes/Particles/Size/SizeAnimation";
+export * from "./Options/Classes/Particles/ZIndex/ZIndex";
+export * from "./Options/Classes/Responsive";
+export * from "./Options/Classes/Theme/Theme";
+export * from "./Options/Classes/Theme/ThemeDefault";
+export * from "./Options/Classes/ValueWithRandom";
+export * from "./Utils/CanvasUtils";
+export * from "./Utils/ColorUtils";
+export * from "./Utils/HslColorManager";
+export * from "./Utils/NumberUtils";
+export * from "./Utils/OptionsUtils";
+export * from "./Utils/RgbColorManager";
+export * from "./Utils/Utils";
+export { tsParticles };