@tsparticles/engine 3.0.0-beta.2 → 3.0.0-beta.4

package/esm/Utils/CanvasUtils.js

@@ -5,13 +5,6 @@ export function drawLine(context, begin, end) {
     context.lineTo(end.x, end.y);
     context.closePath();
 }
-export function drawTriangle(context, p1, p2, p3) {
-    context.beginPath();
-    context.moveTo(p1.x, p1.y);
-    context.lineTo(p2.x, p2.y);
-    context.lineTo(p3.x, p3.y);
-    context.closePath();
-}
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(0, 0, dimension.width, dimension.height);
@@ -39,7 +32,6 @@ export function drawParticle(data) {
         d: rotateData.cos * (transform.d ?? 1),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    context.beginPath();
     if (backgroundMask) {
         context.globalCompositeOperation = composite;
     }
@@ -58,39 +50,55 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    context.beginPath();
+    drawShape(drawData);
+    if (particle.shapeClose) {
+        context.closePath();
+    }
     if (strokeWidth > 0) {
         context.stroke();
     }
-    if (particle.close) {
-        context.closePath();
-    }
-    if (particle.fill) {
+    if (particle.shapeFill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterDraw(drawData);
+    drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
-export function drawShape(container, context, particle, radius, opacity, delta) {
+export function drawEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect);
+    if (!drawer) {
+        return;
+    }
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+}
+export function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
+    const drawer = container.shapeDrawers.get(particle.shape);
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
-export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+export function drawShapeAfterDraw(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
-    if (!drawer || !drawer.afterEffect) {
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/esm/Utils/ColorUtils.js

@@ -4,24 +4,6 @@ const randomColorValue = "random", midColorValue = "mid", colorManagers = new Ma
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
-    }
-    if (t > 1) {
-        t -= 1;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
-    }
-    if (t < 1 / 2) {
-        return q;
-    }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
-    }
-    return p;
-}
 function stringToRgba(input) {
     for (const [, manager] of colorManagers) {
         if (input.startsWith(manager.stringPrefix)) {
@@ -91,7 +73,7 @@ export function rangeColorToHsl(color, index, useIndex = true) {
 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) / 2,
+        l: (max + min) * 0.5,
         s: 0,
     };
     if (max !== min) {
@@ -119,26 +101,30 @@ export function stringToRgb(input) {
     return stringToRgba(input);
 }
 export function hslToRgb(hsl) {
-    const result = { b: 0, g: 0, r: 0 }, hslPercent = {
-        h: hsl.h / 360,
-        l: hsl.l / 100,
-        s: hsl.s / 100,
-    };
-    if (!hslPercent.s) {
-        result.r = result.g = result.b = hslPercent.l;
+    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);
+        return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    else {
-        const q = hslPercent.l < 0.5
-            ? hslPercent.l * (1 + hslPercent.s)
-            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
-        result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
-        result.g = hue2rgb(p, q, hslPercent.h);
-        result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
-    }
-    result.r = Math.floor(result.r * 255);
-    result.g = Math.floor(result.g * 255);
-    result.b = Math.floor(result.b * 255);
-    return result;
+    const channel = (temp1, temp2, temp3) => {
+        if (temp3 < 0) {
+            temp3 += 1;
+        }
+        if (temp3 > 1) {
+            temp3 -= 1;
+        }
+        if (temp3 * 6 < 1) {
+            return temp1 + (temp2 - temp1) * 6 * temp3;
+        }
+        if (temp3 * 2 < 1) {
+            return temp2;
+        }
+        if (temp3 * 3 < 2) {
+            return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+        }
+        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));
+    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
     const rgbResult = hslToRgb(hsla);

package/esm/Utils/NumberUtils.js

@@ -1,5 +1,5 @@
-import { isBoolean, isNumber } from "./Utils.js";
 import { Vector } from "../Core/Utils/Vector.js";
+import { isNumber } from "./Utils.js";
 let _random = Math.random;
 const easings = new Map();
 export function addEasing(name, easing) {
@@ -52,15 +52,6 @@ export function setRangeValue(source, value) {
         }
         : setRangeValue(min, max);
 }
-export function getValue(options) {
-    const random = options.random, { enable, minimumValue } = isBoolean(random)
-        ? {
-            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) };
@@ -74,21 +65,21 @@ export function getParticleDirectionAngle(direction, position, center) {
     }
     switch (direction) {
         case "top":
-            return -Math.PI / 2;
+            return -Math.PI * 0.5;
         case "top-right":
-            return -Math.PI / 4;
+            return -Math.PI * 0.25;
         case "right":
             return 0;
         case "bottom-right":
-            return Math.PI / 4;
+            return Math.PI * 0.25;
         case "bottom":
-            return Math.PI / 2;
+            return Math.PI * 0.5;
         case "bottom-left":
-            return (3 * Math.PI) / 4;
+            return Math.PI * 0.75;
         case "left":
             return Math.PI;
         case "top-left":
-            return (-3 * Math.PI) / 4;
+            return -Math.PI * 0.75;
         case "inside":
             return Math.atan2(center.y - position.y, center.x - position.x);
         case "outside":

package/esm/Utils/Utils.js

@@ -1,4 +1,4 @@
-import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, } from "./NumberUtils.js";
+import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
 import { Vector } from "../Core/Utils/Vector.js";
 const _logger = {
     debug: console.debug,
@@ -27,8 +27,8 @@ function rectSideBounce(data) {
         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)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -52,6 +52,12 @@ export function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
+export function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
 export function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
@@ -161,7 +167,7 @@ export function circleBounceDataFromParticle(p) {
         radius: p.getRadius(),
         mass: p.getMass(),
         velocity: p.velocity,
-        factor: Vector.create(getValue(p.options.bounce.horizontal), getValue(p.options.bounce.vertical)),
+        factor: Vector.create(getRangeValue(p.options.bounce.horizontal.value), getRangeValue(p.options.bounce.vertical.value)),
     };
 }
 export function circleBounce(p1, p2) {
@@ -176,7 +182,7 @@ export function circleBounce(p1, p2) {
     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({
+    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
             min: bounds.left,
             max: bounds.right,
@@ -194,7 +200,7 @@ export function rectBounce(particle, divBounds) {
             max: divBounds.bottom,
         },
         velocity: particle.velocity.x,
-        factor: getValue(particle.options.bounce.horizontal),
+        factor: getRangeValue(bounceOptions.horizontal.value),
     });
     if (resH.bounced) {
         if (resH.velocity !== undefined) {
@@ -222,7 +228,7 @@ export function rectBounce(particle, divBounds) {
             max: divBounds.right,
         },
         velocity: particle.velocity.y,
-        factor: getValue(particle.options.bounce.vertical),
+        factor: getRangeValue(bounceOptions.vertical.value),
     });
     if (resV.bounced) {
         if (resV.velocity !== undefined) {

package/esm/export-types.js

@@ -10,12 +10,12 @@ export * from "./Core/Interfaces/IDelta.js";
 export * from "./Core/Interfaces/IDimension.js";
 export * from "./Core/Interfaces/IDistance.js";
 export * from "./Core/Interfaces/IDrawParticleParams.js";
+export * from "./Core/Interfaces/IEffectDrawer.js";
 export * from "./Core/Interfaces/IExternalInteractor.js";
 export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
 export * from "./Core/Interfaces/IMouseData.js";
 export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticle.js";
 export * from "./Core/Interfaces/IParticleColorStyle.js";
 export * from "./Core/Interfaces/IParticleHslAnimation.js";
 export * from "./Core/Interfaces/IParticleLife.js";
@@ -30,6 +30,7 @@ export * from "./Core/Interfaces/IPlugin.js";
 export * from "./Core/Interfaces/IPositionFromSizeParams.js";
 export * from "./Core/Interfaces/IRangeValue.js";
 export * from "./Core/Interfaces/IRectSideResult.js";
+export * from "./Core/Interfaces/IShapeDrawData.js";
 export * from "./Core/Interfaces/IShapeDrawer.js";
 export * from "./Core/Interfaces/IShapeValues.js";
 export * from "./Core/Interfaces/ISlowParticleData.js";
@@ -62,6 +63,7 @@ export * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisions.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js";
+export * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export * from "./Options/Interfaces/Particles/IParticlesOptions.js";
 export * from "./Options/Interfaces/Particles/IShadow.js";
 export * from "./Options/Interfaces/Particles/IStroke.js";
@@ -76,6 +78,7 @@ export * from "./Options/Interfaces/Particles/Move/ISpin.js";
 export * from "./Options/Interfaces/Particles/Move/IMoveTrail.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesDensity.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesNumber.js";
+export * from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacity.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js";
 export * from "./Options/Interfaces/Particles/Shape/IShape.js";
@@ -93,5 +96,4 @@ export * from "./Types/PathOptions.js";
 export * from "./Types/RangeValue.js";
 export * from "./Types/RecursivePartial.js";
 export * from "./Types/ShapeData.js";
-export * from "./Types/ShapeDrawerFunctions.js";
 export * from "./Types/SingleOrMultiple.js";

package/esm/exports.js

@@ -11,10 +11,8 @@ export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
 export * from "./Enums/Modes/AnimationMode.js";
-export * from "./Enums/Modes/ClickMode.js";
-export * from "./Enums/Modes/DivMode.js";
-export * from "./Enums/Modes/HoverMode.js";
 export * from "./Enums/Modes/CollisionMode.js";
+export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
 export * from "./Enums/Modes/ThemeMode.js";
@@ -69,6 +67,7 @@ export * from "./Options/Classes/Particles/Move/Path/MovePath.js";
 export * from "./Options/Classes/Particles/Move/Spin.js";
 export * from "./Options/Classes/Particles/Move/MoveTrail.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
+export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
 export * from "./Options/Classes/Particles/Opacity/Opacity.js";
 export * from "./Options/Classes/Particles/Opacity/OpacityAnimation.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {