tsparticles 1.34.1 → 1.35.0

package/Utils/CanvasUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawEllipse = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.drawGrabLine = exports.gradient = exports.drawConnectLine = exports.drawLinkTriangle = exports.drawLinkLine = exports.clear = exports.paintBase = void 0;
+exports.alterHsl = exports.drawEllipse = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.drawGrabLine = exports.gradient = exports.drawConnectLine = exports.drawLinkTriangle = exports.drawLinkLine = exports.clear = exports.paintBase = void 0;
 const NumberUtils_1 = require("./NumberUtils");
 const ColorUtils_1 = require("./ColorUtils");
 const Enums_1 = require("../Enums");
@@ -30,7 +30,7 @@ function clear(context, dimension) {
 exports.clear = clear;
 function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
     let drawn = false;
-    if (NumberUtils_1.getDistance(begin, end) <= maxDistance) {
+    if ((0, NumberUtils_1.getDistance)(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
     }
@@ -41,7 +41,7 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
             x: end.x - canvasSize.width,
             y: end.y,
         };
-        const d1 = NumberUtils_1.getDistances(begin, endNE);
+        const d1 = (0, NumberUtils_1.getDistances)(begin, endNE);
         if (d1.distance <= maxDistance) {
             const yi = begin.y - (d1.dy / d1.dx) * begin.x;
             pi1 = { x: 0, y: yi };
@@ -52,7 +52,7 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
                 x: end.x,
                 y: end.y - canvasSize.height,
             };
-            const d2 = NumberUtils_1.getDistances(begin, endSW);
+            const d2 = (0, NumberUtils_1.getDistances)(begin, endSW);
             if (d2.distance <= maxDistance) {
                 const yi = begin.y - (d2.dy / d2.dx) * begin.x;
                 const xi = -yi / (d2.dy / d2.dx);
@@ -64,7 +64,7 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
                     x: end.x - canvasSize.width,
                     y: end.y - canvasSize.height,
                 };
-                const d3 = NumberUtils_1.getDistances(begin, endSE);
+                const d3 = (0, NumberUtils_1.getDistances)(begin, endSE);
                 if (d3.distance <= maxDistance) {
                     const yi = begin.y - (d3.dy / d3.dx) * begin.x;
                     const xi = -yi / (d3.dy / d3.dx);
@@ -86,12 +86,12 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
     if (backgroundMask) {
         context.globalCompositeOperation = composite;
     }
-    context.strokeStyle = ColorUtils_1.getStyleFromRgb(colorLine, opacity);
+    context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(colorLine, opacity);
     if (shadow.enable) {
-        const shadowColor = ColorUtils_1.colorToRgb(shadow.color);
+        const shadowColor = (0, ColorUtils_1.colorToRgb)(shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
-            context.shadowColor = ColorUtils_1.getStyleFromRgb(shadowColor);
+            context.shadowColor = (0, ColorUtils_1.getStyleFromRgb)(shadowColor);
         }
     }
     context.stroke();
@@ -102,7 +102,7 @@ function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite,
     if (backgroundMask) {
         context.globalCompositeOperation = composite;
     }
-    context.fillStyle = ColorUtils_1.getStyleFromRgb(colorTriangle, opacityTriangle);
+    context.fillStyle = (0, ColorUtils_1.getStyleFromRgb)(colorTriangle, opacityTriangle);
     context.fill();
 }
 exports.drawLinkTriangle = drawLinkTriangle;
@@ -124,37 +124,41 @@ function gradient(context, p1, p2, opacity) {
     }
     const sourcePos = p1.getPosition();
     const destPos = p2.getPosition();
-    const midRgb = ColorUtils_1.colorMix(color1, color2, p1.getRadius(), p2.getRadius());
+    const midRgb = (0, ColorUtils_1.colorMix)(color1, color2, p1.getRadius(), p2.getRadius());
     const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
-    grad.addColorStop(0, ColorUtils_1.getStyleFromHsl(color1, opacity));
-    grad.addColorStop(gradStop > 1 ? 1 : gradStop, ColorUtils_1.getStyleFromRgb(midRgb, opacity));
-    grad.addColorStop(1, ColorUtils_1.getStyleFromHsl(color2, opacity));
+    grad.addColorStop(0, (0, ColorUtils_1.getStyleFromHsl)(color1, opacity));
+    grad.addColorStop(gradStop > 1 ? 1 : gradStop, (0, ColorUtils_1.getStyleFromRgb)(midRgb, opacity));
+    grad.addColorStop(1, (0, ColorUtils_1.getStyleFromHsl)(color2, opacity));
     return grad;
 }
 exports.gradient = gradient;
 function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.save();
     drawLine(context, begin, end);
-    context.strokeStyle = ColorUtils_1.getStyleFromRgb(colorLine, opacity);
+    context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(colorLine, opacity);
     context.lineWidth = width;
     context.stroke();
     context.restore();
 }
 exports.drawGrabLine = drawGrabLine;
 function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const pos = particle.getPosition();
     const tiltOptions = particle.options.tilt;
     const rollOptions = particle.options.roll;
     context.save();
     if (tiltOptions.enable || rollOptions.enable) {
-        context.setTransform(rollOptions.enable ? Math.cos(particle.rollAngle) : 1, tiltOptions.enable ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tiltOptions.enable ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollOptions.enable ? Math.sin(particle.rollAngle) : 1, pos.x, pos.y);
+        const roll = rollOptions.enable && particle.roll;
+        const tilt = tiltOptions.enable && particle.tilt;
+        const rollHorizontal = roll && (rollOptions.mode === Enums_1.RollMode.horizontal || rollOptions.mode === Enums_1.RollMode.both);
+        const rollVertical = roll && (rollOptions.mode === Enums_1.RollMode.vertical || rollOptions.mode === Enums_1.RollMode.both);
+        context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
     }
     else {
         context.translate(pos.x, pos.y);
     }
     context.beginPath();
-    const angle = particle.rotate.value + (particle.options.rotate.path ? particle.velocity.angle : 0);
+    const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
     if (angle !== 0) {
         context.rotate(angle);
     }
@@ -164,7 +168,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
     const shadowColor = particle.shadowColor;
     if (shadow.enable && shadowColor) {
         context.shadowBlur = shadow.blur;
-        context.shadowColor = ColorUtils_1.getStyleFromRgb(shadowColor);
+        context.shadowColor = (0, ColorUtils_1.getStyleFromRgb)(shadowColor);
         context.shadowOffsetX = shadow.offset.x;
         context.shadowOffsetY = shadow.offset.y;
     }
@@ -174,11 +178,11 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
             ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, ColorUtils_1.getStyleFromHsl({
+            fillGradient.addColorStop(color.stop, (0, ColorUtils_1.getStyleFromHsl)({
                 h: color.value.h.value,
                 s: color.value.s.value,
                 l: color.value.l.value,
-            }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+            }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
         }
         context.fillStyle = fillGradient;
     }
@@ -188,12 +192,12 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
         }
     }
     const stroke = particle.stroke;
-    context.lineWidth = particle.strokeWidth;
+    context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
     if (strokeColorValue) {
         context.strokeStyle = strokeColorValue;
     }
     drawShape(container, context, particle, radius, opacity, delta);
-    if (stroke.width > 0) {
+    if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
         context.stroke();
     }
     if (particle.close) {
@@ -204,7 +208,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
     }
     context.restore();
     context.save();
-    if (tiltOptions.enable) {
+    if (tiltOptions.enable && particle.tilt) {
         context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
     }
     else {
@@ -262,7 +266,7 @@ exports.drawParticlePlugin = drawParticlePlugin;
 function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
     const pos = particle.getPosition();
     if (fillColorValue) {
-        context.strokeStyle = ColorUtils_1.getStyleFromHsl(fillColorValue, opacity);
+        context.strokeStyle = (0, ColorUtils_1.getStyleFromHsl)(fillColorValue, opacity);
     }
     if (width === 0) {
         return;
@@ -274,3 +278,11 @@ function drawEllipse(context, particle, fillColorValue, radius, opacity, width,
     context.stroke();
 }
 exports.drawEllipse = drawEllipse;
+function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === Enums_1.AlterType.darken ? -1 : 1) * value,
+    };
+}
+exports.alterHsl = alterHsl;

package/Utils/Circle.js

@@ -9,7 +9,7 @@ class Circle extends Range_1.Range {
         this.radius = radius;
     }
     contains(point) {
-        return NumberUtils_1.getDistance(point, this.position) <= this.radius;
+        return (0, NumberUtils_1.getDistance)(point, this.position) <= this.radius;
     }
     intersects(range) {
         const rect = range;

package/Utils/ColorUtils.js

@@ -95,7 +95,7 @@ function colorToRgb(input, index, useIndex = true) {
     }
     else {
         if (color.value instanceof Array) {
-            const colorSelected = Utils_1.itemFromArray(color.value, index, useIndex);
+            const colorSelected = (0, Utils_1.itemFromArray)(color.value, index, useIndex);
             res = colorToRgb({ value: colorSelected });
         }
         else {
@@ -346,9 +346,9 @@ exports.rgbaToHsva = rgbaToHsva;
 function getRandomRgbColor(min) {
     const fixedMin = min !== null && min !== void 0 ? min : 0;
     return {
-        b: Math.floor(NumberUtils_1.randomInRange(NumberUtils_1.setRangeValue(fixedMin, 256))),
-        g: Math.floor(NumberUtils_1.randomInRange(NumberUtils_1.setRangeValue(fixedMin, 256))),
-        r: Math.floor(NumberUtils_1.randomInRange(NumberUtils_1.setRangeValue(fixedMin, 256))),
+        b: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
+        g: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
+        r: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
     };
 }
 exports.getRandomRgbColor = getRandomRgbColor;
@@ -374,9 +374,9 @@ function colorMix(color1, color2, size1, size2) {
         rgb2 = hslToRgb(color2);
     }
     return {
-        b: NumberUtils_1.mix(rgb1.b, rgb2.b, size1, size2),
-        g: NumberUtils_1.mix(rgb1.g, rgb2.g, size1, size2),
-        r: NumberUtils_1.mix(rgb1.r, rgb2.r, size1, size2),
+        b: (0, NumberUtils_1.mix)(rgb1.b, rgb2.b, size1, size2),
+        g: (0, NumberUtils_1.mix)(rgb1.g, rgb2.g, size1, size2),
+        r: (0, NumberUtils_1.mix)(rgb1.r, rgb2.r, size1, size2),
     };
 }
 exports.colorMix = colorMix;

package/Utils/EventListeners.d.ts

@@ -11,6 +11,7 @@ export declare class EventListeners {
     private readonly mouseDownHandler;
     private readonly mouseUpHandler;
     private readonly visibilityChangeHandler;
+    private readonly themeChangeHandler;
     private readonly resizeHandler;
     private canPush;
     private resizeTimeout?;
@@ -26,5 +27,6 @@ export declare class EventListeners {
     private mouseTouchFinish;
     private mouseTouchClick;
     private doMouseTouchClick;
+    private handleThemeChange;
     private handleClickMode;
 }

package/Utils/EventListeners.js

@@ -34,6 +34,7 @@ class EventListeners {
         this.mouseUpHandler = (e) => this.mouseTouchClick(e);
         this.mouseDownHandler = () => this.mouseDown();
         this.visibilityChangeHandler = () => this.handleVisibilityChange();
+        this.themeChangeHandler = (e) => this.handleThemeChange(e);
         this.resizeHandler = () => this.handleWindowResize();
     }
     addListeners() {
@@ -59,6 +60,10 @@ class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
+        const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+        if (mediaMatch) {
+            manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+        }
         const interactivityEl = container.interactivity.element;
         if (!interactivityEl) {
             return;
@@ -280,6 +285,16 @@ class EventListeners {
             setTimeout(() => this.mouseTouchFinish(), 500);
         }
     }
+    handleThemeChange(e) {
+        const mediaEvent = e;
+        const themeName = mediaEvent.matches
+            ? this.container.options.defaultDarkTheme
+            : this.container.options.defaultLightTheme;
+        const theme = this.container.options.themes.find((theme) => theme.name === themeName);
+        if (theme && theme.default.auto) {
+            this.container.loadTheme(themeName);
+        }
+    }
     handleClickMode(mode) {
         const container = this.container;
         const options = container.actualOptions;
@@ -289,7 +304,7 @@ class EventListeners {
             case Enums_1.ClickMode.push: {
                 if (pushNb > 0) {
                     const pushOptions = options.interactivity.modes.push;
-                    const group = Utils_1.itemFromArray([undefined, ...pushOptions.groups]);
+                    const group = (0, Utils_1.itemFromArray)([undefined, ...pushOptions.groups]);
                     const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
                     container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
                 }

package/Utils/NumberUtils.js

@@ -104,13 +104,13 @@ exports.collisionVelocity = collisionVelocity;
 function calcEasing(value, type) {
     switch (type) {
         case Enums_1.EasingType.easeOutQuad:
-            return 1 - Math.pow((1 - value), 2);
+            return 1 - (1 - value) ** 2;
         case Enums_1.EasingType.easeOutCubic:
-            return 1 - Math.pow((1 - value), 3);
+            return 1 - (1 - value) ** 3;
         case Enums_1.EasingType.easeOutQuart:
-            return 1 - Math.pow((1 - value), 4);
+            return 1 - (1 - value) ** 4;
         case Enums_1.EasingType.easeOutQuint:
-            return 1 - Math.pow((1 - value), 5);
+            return 1 - (1 - value) ** 5;
         case Enums_1.EasingType.easeOutExpo:
             return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
         case Enums_1.EasingType.easeOutSine:

package/Utils/QuadTree.js

@@ -60,7 +60,7 @@ class QuadTree {
         }
         else {
             for (const p of this.points) {
-                if (!range.contains(p.position) && NumberUtils_1.getDistance(range.position, p.position) > p.particle.getRadius()) {
+                if (!range.contains(p.position) && (0, NumberUtils_1.getDistance)(range.position, p.position) > p.particle.getRadius()) {
                     continue;
                 }
                 res.push(p.particle);

package/Utils/Utils.d.ts

@@ -5,38 +5,13 @@ import type { SingleOrMultiple } from "../Types";
 import { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv";
 import { OutModeDirection } from "../Enums";
-declare type CSSOMString = string;
-declare type FontFaceLoadStatus = "unloaded" | "loading" | "loaded" | "error";
-declare type FontFaceSetStatus = "loading" | "loaded";
-interface FontFace {
-    family: CSSOMString;
-    style: CSSOMString;
-    weight: CSSOMString;
-    stretch: CSSOMString;
-    unicodeRange: CSSOMString;
-    variant: CSSOMString;
-    featureSettings: CSSOMString;
-    variationSettings: CSSOMString;
-    display: CSSOMString;
-    readonly status: FontFaceLoadStatus;
-    readonly loaded: Promise<FontFace>;
-    load(): Promise<FontFace>;
-}
-interface FontFaceSet {
-    readonly status: FontFaceSetStatus;
-    readonly ready: Promise<FontFaceSet>;
-    check(font: string, text?: string): boolean;
-    load(font: string, text?: string): Promise<FontFace[]>;
-}
 declare global {
-    interface Document {
-        fonts: FontFaceSet;
-    }
     interface Window {
         customRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+        webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
         customCancelRequestAnimationFrame: (handle: number) => void;
         webkitCancelRequestAnimationFrame: (handle: number) => void;
         mozCancelRequestAnimationFrame: (handle: number) => void;
@@ -62,4 +37,3 @@ export declare function divMode<T extends IModeDiv>(divs?: SingleOrMultiple<T>,
 export declare function circleBounceDataFromParticle(p: IParticle): ICircleBouncer;
 export declare function circleBounce(p1: ICircleBouncer, p2: ICircleBouncer): void;
 export declare function rectBounce(particle: IParticle, divBounds: IBounds): void;
-export {};

package/Utils/Utils.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.cancelAnimation = exports.animate = exports.isSsr = void 0;
 const Enums_1 = require("../Enums");
@@ -70,15 +61,13 @@ function isInArray(value, array) {
     return value === array || (array instanceof Array && array.indexOf(value) > -1);
 }
 exports.isInArray = isInArray;
-function loadFont(character) {
+async function loadFont(character) {
     var _a, _b;
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            yield document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
-        }
-        catch (_c) {
-        }
-    });
+    try {
+        await document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
+    }
+    catch (_c) {
+    }
 }
 exports.loadFont = loadFont;
 function arrayRandomIndex(array) {
@@ -206,7 +195,7 @@ function circleBounceDataFromParticle(p) {
         radius: p.getRadius(),
         mass: p.getMass(),
         velocity: p.velocity,
-        factor: Vector_1.Vector.create(NumberUtils_1.getValue(p.options.bounce.horizontal), NumberUtils_1.getValue(p.options.bounce.vertical)),
+        factor: Vector_1.Vector.create((0, NumberUtils_1.getValue)(p.options.bounce.horizontal), (0, NumberUtils_1.getValue)(p.options.bounce.vertical)),
     };
 }
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
@@ -223,8 +212,8 @@ function circleBounce(p1, p2) {
         const m2 = p2.mass;
         const u1 = p1.velocity.rotate(angle);
         const u2 = p2.velocity.rotate(angle);
-        const v1 = NumberUtils_1.collisionVelocity(u1, u2, m1, m2);
-        const v2 = NumberUtils_1.collisionVelocity(u2, u1, m1, m2);
+        const v1 = (0, NumberUtils_1.collisionVelocity)(u1, u2, m1, m2);
+        const v2 = (0, NumberUtils_1.collisionVelocity)(u2, u1, m1, m2);
         const vFinal1 = v1.rotate(-angle);
         const vFinal2 = v2.rotate(-angle);
         p1.velocity.x = vFinal1.x * p1.factor.x;
@@ -250,7 +239,7 @@ function rectBounce(particle, divBounds) {
     }, {
         min: divBounds.top,
         max: divBounds.bottom,
-    }, particle.velocity.x, NumberUtils_1.getValue(particle.options.bounce.horizontal));
+    }, particle.velocity.x, (0, NumberUtils_1.getValue)(particle.options.bounce.horizontal));
     if (resH.bounced) {
         if (resH.velocity !== undefined) {
             particle.velocity.x = resH.velocity;
@@ -271,7 +260,7 @@ function rectBounce(particle, divBounds) {
     }, {
         min: divBounds.left,
         max: divBounds.right,
-    }, particle.velocity.y, NumberUtils_1.getValue(particle.options.bounce.vertical));
+    }, particle.velocity.y, (0, NumberUtils_1.getValue)(particle.options.bounce.vertical));
     if (resV.bounced) {
         if (resV.velocity !== undefined) {
             particle.velocity.y = resV.velocity;

package/browser/Core/Canvas.d.ts

@@ -22,7 +22,6 @@ export declare class Canvas {
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;
     drawParticle(particle: Particle, delta: IDelta): void;
-    drawOrbit(particle: IParticle, type: string): void;
     drawPlugin(plugin: IContainerPlugin, delta: IDelta): void;
     drawParticlePlugin(plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
     initBackground(): void;

package/browser/Core/Canvas.js

@@ -1,6 +1,5 @@
-import { colorToHsl, colorToRgb, Constants, deepExtend, drawConnectLine, drawEllipse, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
+import { colorToHsl, colorToRgb, Constants, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
 import { clear } from "../Utils";
-import { OrbitType } from "../Enums";
 export class Canvas {
     constructor(container) {
         this.container = container;
@@ -122,7 +121,7 @@ export class Canvas {
             }
             const pos1 = p1.getPosition();
             const pos2 = p2.getPosition();
-            drawConnectLine(ctx, (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+            drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
         });
     }
     drawGrabLine(particle, lineColor, opacity, mousePos) {
@@ -130,11 +129,11 @@ export class Canvas {
         this.draw((ctx) => {
             var _a;
             const beginPos = particle.getPosition();
-            drawGrabLine(ctx, (_a = particle.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+            drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
         });
     }
     drawParticle(particle, delta) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         if (particle.spawning || particle.destroyed) {
             return;
         }
@@ -158,54 +157,36 @@ export class Canvas {
         }
         const options = this.container.actualOptions;
         const zIndexOptions = particle.options.zIndex;
-        const zOpacityFactor = Math.pow((1 - particle.zIndexFactor), zIndexOptions.opacityRate);
+        const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
         const radius = particle.getRadius();
-        const opacity = twinkling ? twinkle.opacity : (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : particle.opacity.value;
-        const strokeOpacity = (_c = particle.stroke.opacity) !== null && _c !== void 0 ? _c : opacity;
+        const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+        const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
         const zOpacity = opacity * zOpacityFactor;
         const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;
         if (!fillColorValue && !sColor) {
             return;
         }
-        const orbitOptions = particle.options.orbit;
         this.draw((ctx) => {
-            const zSizeFactor = Math.pow((1 - particle.zIndexFactor), zIndexOptions.sizeRate);
+            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
             const zStrokeOpacity = strokeOpacity * zOpacityFactor;
             const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
             if (radius <= 0) {
                 return;
             }
-            if (orbitOptions.enable) {
-                this.drawOrbit(particle, OrbitType.back);
+            const container = this.container;
+            for (const updater of container.particles.updaters) {
+                if (updater.beforeDraw) {
+                    updater.beforeDraw(particle);
+                }
             }
             drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
-            if (orbitOptions.enable) {
-                this.drawOrbit(particle, OrbitType.front);
+            for (const updater of container.particles.updaters) {
+                if (updater.afterDraw) {
+                    updater.afterDraw(particle);
+                }
             }
         });
     }
-    drawOrbit(particle, type) {
-        const container = this.container;
-        const orbitOptions = particle.options.orbit;
-        let start;
-        let end;
-        if (type === OrbitType.back) {
-            start = Math.PI / 2;
-            end = (Math.PI * 3) / 2;
-        }
-        else if (type === OrbitType.front) {
-            start = (Math.PI * 3) / 2;
-            end = Math.PI / 2;
-        }
-        else {
-            start = 0;
-            end = 2 * Math.PI;
-        }
-        this.draw((ctx) => {
-            var _a, _b, _c, _d;
-            drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), orbitOptions.opacity, orbitOptions.width, ((_d = particle.orbitRotation) !== null && _d !== void 0 ? _d : 0) * container.retina.pixelRatio, start, end);
-        });
-    }
     drawPlugin(plugin, delta) {
         this.draw((ctx) => {
             drawPlugin(ctx, plugin, delta);