tsparticles 1.42.2 → 1.43.0

package/README.md

@@ -7,7 +7,7 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 
 [![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)
 
-[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
+[![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 
 [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
 

package/browser/Core/Canvas.js

@@ -1,5 +1,7 @@
-import { clear, colorToHsl, colorToRgb, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getRangeValue, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
-import { Constants } from "./Utils";
+import { clear, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, gradient, paintBase, } from "../Utils/CanvasUtils";
+import { colorToHsl, colorToRgb, getStyleFromHsl, getStyleFromRgb } from "../Utils/ColorUtils";
+import { Constants } from "./Utils/Constants";
+import { deepExtend } from "../Utils/Utils";
 /**
  * Canvas manager
  * @category Core
@@ -75,8 +77,7 @@ export class Canvas {
      * Clears the canvas content
      */
     clear() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
+        const options = this.container.actualOptions, trail = options.particles.move.trail;
         if (options.backgroundMask.enable) {
             this.paint();
         }
@@ -93,9 +94,8 @@ export class Canvas {
         if (!this.element) {
             return;
         }
-        const container = this.container;
         this.resize();
-        const needsRefresh = container.updateActualOptions();
+        const container = this.container, needsRefresh = container.updateActualOptions();
         /* density particles enabled */
         container.particles.setDensity();
         for (const [, plugin] of container.plugins) {
@@ -114,14 +114,19 @@ export class Canvas {
         if (!this.element) {
             return;
         }
-        const container = this.container;
-        const pxRatio = container.retina.pixelRatio;
-        const size = container.canvas.size;
+        const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
             this.resizeFactor = {
                 width: size.width / oldSize.width,
@@ -136,8 +141,7 @@ export class Canvas {
             if (!lineStyle) {
                 return;
             }
-            const pos1 = p1.getPosition();
-            const pos2 = p2.getPosition();
+            const pos1 = p1.getPosition(), pos2 = p2.getPosition();
             drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
         });
     }
@@ -154,51 +158,45 @@ export class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const pfColor = particle.getFillColor();
-        const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+        const radius = particle.getRadius();
+        if (radius <= 0) {
+            return;
+        }
+        const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
         if (!pfColor && !psColor) {
             return;
         }
         let [fColor, sColor] = this.getPluginParticleColors(particle);
-        const pOptions = particle.options;
-        const twinkle = pOptions.twinkle.particles;
-        const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
         if (!fColor || !sColor) {
-            const twinkleRgb = colorToHsl(twinkle.color);
             if (!fColor) {
-                fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
+                fColor = pfColor ? pfColor : undefined;
             }
             if (!sColor) {
-                sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
+                sColor = psColor ? psColor : undefined;
             }
         }
-        const options = this.container.actualOptions;
-        const zIndexOptions = particle.options.zIndex;
-        const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
-        const radius = particle.getRadius();
-        const opacity = twinkling
-            ? getRangeValue(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 options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, 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, strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor;
+        const colorStyles = {
+            fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
+        };
+        colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
         this.draw((ctx) => {
-            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
-            const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-            const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
-            if (radius <= 0) {
-                return;
-            }
-            const container = this.container;
+            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, container = this.container;
             for (const updater of container.particles.updaters) {
                 if (updater.beforeDraw) {
                     updater.beforeDraw(particle);
                 }
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
             }
-            drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+            drawParticle(container, ctx, particle, delta, colorStyles, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow);
             for (const updater of container.particles.updaters) {
                 if (updater.afterDraw) {
                     updater.afterDraw(particle);
@@ -217,10 +215,7 @@ export class Canvas {
         });
     }
     initBackground() {
-        const options = this.container.actualOptions;
-        const background = options.background;
-        const element = this.element;
-        const elementStyle = element === null || element === void 0 ? void 0 : element.style;
+        const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
         if (!elementStyle) {
             return;
         }
@@ -243,10 +238,7 @@ export class Canvas {
         return cb(this.context);
     }
     initCover() {
-        const options = this.container.actualOptions;
-        const cover = options.backgroundMask.cover;
-        const color = cover.color;
-        const coverRgb = colorToRgb(color);
+        const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = colorToRgb(color);
         if (coverRgb) {
             const coverColor = {
                 r: coverRgb.r,
@@ -255,13 +247,10 @@ export class Canvas {
                 a: cover.opacity,
             };
             this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
-            console.log(this.coverColorStyle);
         }
     }
     initTrail() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
-        const fillColor = colorToRgb(trail.fillColor);
+        const options = this.container.actualOptions, trail = options.particles.move.trail, fillColor = colorToRgb(trail.fillColor);
         if (fillColor) {
             const trail = options.particles.move.trail;
             this.trailFillColor = {
@@ -273,8 +262,7 @@ export class Canvas {
         }
     }
     getPluginParticleColors(particle) {
-        let fColor;
-        let sColor;
+        let fColor, sColor;
         for (const [, plugin] of this.container.plugins) {
             if (!fColor && plugin.particleFillColor) {
                 fColor = colorToHsl(plugin.particleFillColor(particle));
@@ -329,8 +317,7 @@ export class Canvas {
     }
     lineStyle(p1, p2) {
         return this.draw((ctx) => {
-            const options = this.container.actualOptions;
-            const connectOptions = options.interactivity.modes.connect;
+            const options = this.container.actualOptions, connectOptions = options.interactivity.modes.connect;
             return gradient(ctx, p1, p2, connectOptions.links.opacity);
         });
     }

package/browser/Core/Container.js

@@ -14,12 +14,15 @@ var _Container_engine;
  * [[include:Container.md]]
  * @packageDocumentation
  */
-import { EventListeners, FrameManager, Vector } from "./Utils";
-import { animate, cancelAnimation, getRangeValue } from "../Utils";
+import { animate, cancelAnimation } from "../Utils/Utils";
 import { Canvas } from "./Canvas";
+import { EventListeners } from "./Utils/EventListeners";
+import { FrameManager } from "./Utils/FrameManager";
 import { Options } from "../Options/Classes/Options";
 import { Particles } from "./Particles";
 import { Retina } from "./Retina";
+import { Vector } from "./Utils/Vector";
+import { getRangeValue } from "../Utils/NumberUtils";
 /**
  * The object loaded into an HTML element, it'll contain options loaded and all data to let everything working
  * [[include:Container.md]]
@@ -75,9 +78,6 @@ export class Container {
                 inside: false,
             },
         };
-        this.bubble = {};
-        this.repulse = { particles: [] };
-        this.attract = { particles: [] };
         this.plugins = new Map();
         this.drawers = new Map();
         this.density = 1;
@@ -330,8 +330,7 @@ export class Container {
             if (this.destroyed) {
                 return;
             }
-            const mouseEvent = e;
-            const pos = {
+            const mouseEvent = e, pos = {
                 x: mouseEvent.offsetX || mouseEvent.clientX,
                 y: mouseEvent.offsetY || mouseEvent.clientY,
             };
@@ -364,8 +363,7 @@ export class Container {
                         return;
                     }
                 }
-                const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                const pos = {
+                const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), pos = {
                     x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
                     y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0),
                 };
@@ -389,6 +387,14 @@ export class Container {
         el.addEventListener("touchend", touchEndHandler);
         el.addEventListener("touchcancel", touchCancelHandler);
     }
+    handleClickMode(mode) {
+        this.particles.handleClickMode(mode);
+        for (const [, plugin] of this.plugins) {
+            if (plugin.handleClickMode) {
+                plugin.handleClickMode(mode);
+            }
+        }
+    }
     updateActualOptions() {
         this.actualOptions.responsive = [];
         const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);

package/browser/Core/Loader.js

@@ -10,9 +10,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Loader_engine;
-import { Constants } from "./Utils";
+import { Constants } from "./Utils/Constants";
 import { Container } from "./Container";
-import { itemFromArray } from "../Utils";
+import { itemFromArray } from "../Utils/Utils";
+/**
+ * Default fetch error catcher
+ * @param statusCode the fecth status code error
+ */
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
     console.error("Error tsParticles - File config not found");
@@ -22,7 +26,15 @@ function fetchError(statusCode) {
  * @category Core
  */
 export class Loader {
+    /**
+     * Loader constructor, assigns the engine
+     * @param engine the engine containing this Loader instance
+     */
     constructor(engine) {
+        /**
+         * The engine containing this Loader instance
+         * @private
+         */
         _Loader_engine.set(this, void 0);
         __classPrivateFieldSet(this, _Loader_engine, engine, "f");
     }
@@ -44,10 +56,13 @@ export class Loader {
         }
         dom.splice(index, 1);
     }
+    /**
+     * Starts an animation in a container, starting from the given options
+     * @param params all the parameters required for loading options in the current animation
+     */
     async loadOptions(params) {
         var _a, _b, _c;
-        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`;
-        const { options, index } = params;
+        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`, { options, index } = params;
         /* elements */
         let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
         if (!domContainer) {
@@ -55,9 +70,7 @@ export class Loader {
             domContainer.id = tagId;
             (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-        const dom = this.dom();
-        const oldIndex = dom.findIndex((v) => v.id === tagId);
+        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options, dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
@@ -100,9 +113,12 @@ export class Loader {
         await newItem.start();
         return newItem;
     }
+    /**
+     * Starts an animation in a container, starting from the given remote options
+     * @param params all the parameters required for loading a remote url into options in the current animation
+     */
     async loadRemoteOptions(params) {
-        const { url: jsonUrl, index } = params;
-        const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+        const { url: jsonUrl, index } = params, url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
         if (!url) {
             return;
         }
@@ -219,7 +235,7 @@ export class Loader {
      */
     setOnClickHandler(callback) {
         const dom = this.dom();
-        if (dom.length === 0) {
+        if (!dom.length) {
             throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
         }
         for (const domItem of dom) {

package/browser/Core/Particle.js

@@ -10,18 +10,27 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Particle_engine;
-import { Vector, Vector3d } from "./Utils";
-import { alterHsl, clamp, colorToRgb, deepExtend, getDistance, getHslFromAnimation, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, isInArray, itemFromArray, randomInRange, setRangeValue, } from "../Utils";
+import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";
+import { colorToRgb, getHslFromAnimation } from "../Utils/ColorUtils";
+import { deepExtend, isInArray, itemFromArray } from "../Utils/Utils";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import { Shape } from "../Options/Classes/Particles/Shape/Shape";
+import { Vector } from "./Utils/Vector";
+import { Vector3d } from "./Utils/Vector3d";
+import { alterHsl } from "../Utils/CanvasUtils";
+/**
+ * fixes out mode, calling the given callback if needed
+ * @param data
+ */
 const fixOutMode = (data) => {
-    if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
-        if (data.coord > data.maxCoord - data.radius * 2) {
-            data.setCb(-data.radius);
-        }
-        else if (data.coord < data.radius * 2) {
-            data.setCb(data.radius);
-        }
+    if (!(isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes))) {
+        return;
+    }
+    if (data.coord > data.maxCoord - data.radius * 2) {
+        data.setCb(-data.radius);
+    }
+    else if (data.coord < data.radius * 2) {
+        data.setCb(data.radius);
     }
 };
 /**
@@ -30,10 +39,14 @@ const fixOutMode = (data) => {
  */
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.id = id;
         this.container = container;
         this.group = group;
+        /**
+         * Gets the particle containing engine instance
+         * @private
+         */
         _Particle_engine.set(this, void 0);
         __classPrivateFieldSet(this, _Particle_engine, engine, "f");
         this.fill = true;
@@ -47,12 +60,9 @@ export class Particle {
             maxDistance: {},
         };
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio;
-        const mainOptions = container.actualOptions;
-        const particlesOptions = new ParticlesOptions();
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = new ParticlesOptions();
         particlesOptions.load(mainOptions.particles);
-        const shapeType = particlesOptions.shape.type;
-        const reduceDuplicates = particlesOptions.reduceDuplicates;
+        const shapeType = particlesOptions.shape.type, reduceDuplicates = particlesOptions.reduceDuplicates;
         this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
         if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
             if (overrideOptions.shape.type) {
@@ -159,22 +169,6 @@ export class Particle {
         }
         this.life = this.loadLife();
         this.spawning = this.life.delay > 0;
-        if (this.options.move.spin.enable) {
-            const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : { x: 50, y: 50 };
-            const spinCenter = {
-                x: (spinPos.x / 100) * container.canvas.size.width,
-                y: (spinPos.y / 100) * container.canvas.size.height,
-            };
-            const pos = this.getPosition();
-            const distance = getDistance(pos, spinCenter);
-            this.spin = {
-                center: spinCenter,
-                direction: this.velocity.x >= 0 ? "clockwise" /* clockwise */ : "counter-clockwise" /* counterClockwise */,
-                angle: this.velocity.angle,
-                radius: distance,
-                acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration),
-            };
-        }
         this.shadowColor = colorToRgb(this.options.shadow.color);
         for (const updater of container.particles.updaters) {
             if (updater.init) {
@@ -194,8 +188,7 @@ export class Particle {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
     isInsideCanvas() {
-        const radius = this.getRadius();
-        const canvasSize = this.container.canvas.size;
+        const radius = this.getRadius(), canvasSize = this.container.canvas.size;
         return (this.position.x >= -radius &&
             this.position.y >= -radius &&
             this.position.y <= canvasSize.height + radius &&
@@ -283,18 +276,19 @@ export class Particle {
         }
     }
     calcPosition(container, position, zIndex, tryCount = 0) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         for (const [, plugin] of container.plugins) {
             const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
             if (pluginPos !== undefined) {
                 return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
             }
         }
-        const canvasSize = container.canvas.size;
-        const pos = Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
-        const radius = this.getRadius();
+        const canvasSize = container.canvas.size, exactPosition = calcExactPositionOrRandomFromSize({
+            size: canvasSize,
+            position: position,
+        }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), 
         /* check position  - into the canvas */
-        const outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
+        outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
             fixOutMode({
                 outMode,
                 checkModes: ["bounce" /* bounce */, "bounce-horizontal" /* bounceHorizontal */],
@@ -313,18 +307,17 @@ export class Particle {
                 radius,
             });
         };
-        fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
-        fixHorizontal((_d = outModes.right) !== null && _d !== void 0 ? _d : outModes.default);
-        fixVertical((_e = outModes.top) !== null && _e !== void 0 ? _e : outModes.default);
-        fixVertical((_f = outModes.bottom) !== null && _f !== void 0 ? _f : outModes.default);
+        fixHorizontal((_a = outModes.left) !== null && _a !== void 0 ? _a : outModes.default);
+        fixHorizontal((_b = outModes.right) !== null && _b !== void 0 ? _b : outModes.default);
+        fixVertical((_c = outModes.top) !== null && _c !== void 0 ? _c : outModes.default);
+        fixVertical((_d = outModes.bottom) !== null && _d !== void 0 ? _d : outModes.default);
         if (this.checkOverlap(pos, tryCount)) {
             return this.calcPosition(container, undefined, zIndex, tryCount + 1);
         }
         return pos;
     }
     checkOverlap(pos, tryCount = 0) {
-        const collisionsOptions = this.options.collisions;
-        const radius = this.getRadius();
+        const collisionsOptions = this.options.collisions, radius = this.getRadius();
         if (!collisionsOptions.enable) {
             return false;
         }
@@ -365,10 +358,7 @@ export class Particle {
         }
     }
     loadLife() {
-        const container = this.container;
-        const particlesOptions = this.options;
-        const lifeOptions = particlesOptions.life;
-        const life = {
+        const container = this.container, particlesOptions = this.options, lifeOptions = particlesOptions.life, life = {
             delay: container.retina.reduceFactor
                 ? ((getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random())) /
                     container.retina.reduceFactor) *