@tsparticles/engine 3.7.1 → 3.8.1

package/esm/Core/Engine.js

@@ -1,4 +1,4 @@
-import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
+import { canvasFirstIndex, canvasTag, errorPrefix, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
 import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
 import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
@@ -24,7 +24,7 @@ async function getDataFromUrl(data) {
     getLogger().error(`${errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
 }
-const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", getCanvasFromContainer = (domContainer) => {
+const getCanvasFromContainer = (domContainer) => {
     let canvasEl;
     if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
         canvasEl = domContainer;
@@ -35,8 +35,7 @@ const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", ge
     else {
         const existingCanvases = domContainer.getElementsByTagName(canvasTag);
         if (existingCanvases.length) {
-            const firstIndex = 0;
-            canvasEl = existingCanvases[firstIndex];
+            canvasEl = existingCanvases[canvasFirstIndex];
             canvasEl.dataset[generatedAttribute] = generatedFalse;
         }
         else {
@@ -97,7 +96,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.7.1";
+        return "3.8.1";
     }
     async addColorManager(manager, refresh = true) {
         this.colorManagers.set(manager.key, manager);
@@ -165,6 +164,12 @@ export class Engine {
         }
         await this.refresh(refresh);
     }
+    checkVersion(pluginVersion) {
+        if (this.version === pluginVersion) {
+            return;
+        }
+        throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
+    }
     clearPlugins(container) {
         this.updaters.delete(container);
         this.movers.delete(container);
@@ -230,17 +235,16 @@ export class Engine {
     item(index) {
         const { items } = this, item = items[index];
         if (!item || item.destroyed) {
-            const deleteCount = 1;
-            items.splice(index, deleteCount);
+            items.splice(index, removeDeleteCount);
             return;
         }
         return item;
     }
     async load(params) {
-        const randomFactor = 10000, id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * randomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
-        const currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), minIndex = 0, newItem = new Container(this, id, currentOptions);
-        if (oldIndex >= minIndex) {
-            const old = this.item(oldIndex), one = 1, none = 0, deleteCount = old ? one : none;
+        const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+        const currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+        if (oldIndex >= loadMinIndex) {
+            const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
                 old.destroy(false);
             }

package/esm/Core/Particle.js

@@ -1,7 +1,7 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
+import { decayOffset, defaultRadius, defaultRetryCount, double, errorPrefix, half, millisecondsToSeconds, minRetries, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
-import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
@@ -11,7 +11,6 @@ import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
 import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2, randomString = "random";
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     if (!effectData) {
@@ -81,8 +80,7 @@ export class Particle {
             fixVertical(outModes.top ?? outModes.default);
             fixVertical(outModes.bottom ?? outModes.default);
             if (this._checkOverlap(pos, tryCount)) {
-                const increment = 1;
-                return this._calcPosition(container, undefined, zIndex, tryCount + increment);
+                return this._calcPosition(container, undefined, zIndex, tryCount + tryCountIncrement);
             }
             return pos;
         };
@@ -112,7 +110,7 @@ export class Particle {
             if (overlapOptions.enable) {
                 return false;
             }
-            const retries = overlapOptions.retries, minRetries = 0;
+            const retries = overlapOptions.retries;
             if (retries >= minRetries && tryCount > retries) {
                 throw new Error(`${errorPrefix} particle is overlapping and can't be placed`);
             }
@@ -122,7 +120,7 @@ export class Particle {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const rollFactor = 1, none = 0, backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;
+            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;
             if (!rolled) {
                 return color;
             }
@@ -135,10 +133,10 @@ export class Particle {
             return color;
         };
         this._initPosition = position => {
-            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value), minZ = 0;
+            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
             this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
             this.initialPosition = this.position.copy();
-            const canvasSize = container.canvas.size, defaultRadius = 0;
+            const canvasSize = container.canvas.size;
             this.moveCenter = {
                 ...getPosition(this.options.move.center, canvasSize),
                 radius: this.options.move.center.radius ?? defaultRadius,
@@ -246,11 +244,11 @@ export class Particle {
                 }
             }
         }
-        if (this.effect === randomString) {
+        if (this.effect === randomColorValue) {
             const availableEffects = [...this.container.effectDrawers.keys()];
             this.effect = availableEffects[Math.floor(Math.random() * availableEffects.length)];
         }
-        if (this.shape === randomString) {
+        if (this.shape === randomColorValue) {
             const availableShapes = [...this.container.shapeDrawers.keys()];
             this.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)];
         }
@@ -294,7 +292,6 @@ export class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        const decayOffset = 1;
         this.moveDecay = decayOffset - getRangeValue(this.options.move.decay);
         const particles = container.particles;
         particles.setLastZIndex(this.position.z);

package/esm/Core/Particles.js

@@ -1,3 +1,4 @@
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, errorPrefix, lengthOffset, manualCount, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
 import { getLogger, getPosition } from "../Utils/Utils.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
@@ -6,10 +7,8 @@ import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Ranges.js";
-import { errorPrefix } from "./Utils/Constants.js";
-const qTreeCapacity = 4, squareExp = 2, defaultRemoveQuantity = 1;
 const qTreeRectangle = (canvasSize) => {
-    const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
+    const { height, width } = canvasSize;
     return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
 export class Particles {
@@ -28,7 +27,7 @@ export class Particles {
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -43,9 +42,9 @@ export class Particles {
             }
         };
         this._initDensityFactor = densityOptions => {
-            const container = this._container, defaultFactor = 1;
+            const container = this._container;
             if (!container.canvas.element || !densityOptions.enable) {
-                return defaultFactor;
+                return defaultDensityFactor;
             }
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
             return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
@@ -84,7 +83,7 @@ export class Particles {
             if (!particle || particle.group !== group) {
                 return false;
             }
-            const zIdx = this._zArray.indexOf(particle), deleteCount = 1;
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, deleteCount);
             this._zArray.splice(zIdx, deleteCount);
             particle.destroy(override);
@@ -122,11 +121,11 @@ export class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode.delete: {
-                    const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
+                    const countToRemove = currentCount + countOffset - limit;
                     if (countToRemove > minCount) {
                         this.removeQuantity(countToRemove);
                     }
@@ -227,7 +226,6 @@ export class Particles {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
     }
     removeAt(index, quantity = defaultRemoveQuantity, group, override) {
-        const minIndex = 0;
         if (index < minIndex || index > this.count) {
             return;
         }
@@ -240,11 +238,10 @@ export class Particles {
         }
     }
     removeQuantity(quantity, group) {
-        const defaultIndex = 0;
-        this.removeAt(defaultIndex, quantity, group);
+        this.removeAt(minIndex, quantity, group);
     }
     setDensity() {
-        const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
+        const options = this._container.actualOptions, groups = options.particles.groups;
         for (const group in groups) {
             this._applyDensity(groups[group], manualCount, group);
         }
@@ -320,7 +317,6 @@ export class Particles {
         if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            const lengthOffset = 1;
             this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;
             this._needsSort = false;
         }

package/esm/Core/Retina.js

@@ -1,6 +1,6 @@
+import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { isSsr } from "../Utils/Utils.js";
-const defaultRatio = 1, defaultReduceFactor = 1;
 export class Retina {
     constructor(container) {
         this.container = container;

package/esm/Core/Utils/Constants.js

@@ -1,16 +1,10 @@
-export const generatedAttribute = "generated";
-export const mouseDownEvent = "pointerdown";
-export const mouseUpEvent = "pointerup";
-export const mouseLeaveEvent = "pointerleave";
-export const mouseOutEvent = "pointerout";
-export const mouseMoveEvent = "pointermove";
-export const touchStartEvent = "touchstart";
-export const touchEndEvent = "touchend";
-export const touchMoveEvent = "touchmove";
-export const touchCancelEvent = "touchcancel";
-export const resizeEvent = "resize";
-export const visibilityChangeEvent = "visibilitychange";
-export const errorPrefix = "tsParticles - Error";
-export const percentDenominator = 100;
-export const halfRandom = 0.5;
-export const millisecondsToSeconds = 1000;
+export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", errorPrefix = "tsParticles - Error", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+    x: 0,
+    y: 0,
+    z: 0,
+}, defaultTransform = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, rgbFactor = 255, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;

package/esm/Core/Utils/EventListeners.js

@@ -1,8 +1,7 @@
+import { double, lengthOffset, millisecondsToSeconds, minCoordinate, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchDelay, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
 import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
-import { millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
 import { InteractivityDetect } from "../../Enums/InteractivityDetect.js";
 import { isBoolean } from "../../Utils/TypeUtils.js";
-const double = 2;
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -35,7 +34,6 @@ export class EventListeners {
                 executeOnSingleOrMultiple(onClick.mode, mode => this.container.handleClickMode(mode));
             }
             if (e.type === "touchend") {
-                const touchDelay = 500;
                 setTimeout(() => this._mouseTouchFinish(), touchDelay);
             }
         };
@@ -77,8 +75,7 @@ export class EventListeners {
             this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * millisecondsToSeconds);
         };
         this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions;
-            const interactivityEl = container.interactivity.element;
+            const handlers = this._handlers, container = this.container, options = container.actualOptions, interactivityEl = container.interactivity.element;
             if (!interactivityEl) {
                 return;
             }
@@ -259,10 +256,10 @@ export class EventListeners {
             else {
                 this._canPush = e.type !== "touchmove";
                 if (canvasEl) {
-                    const touchEvent = e, lengthOffset = 1, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect(), defaultCoordinate = 0;
+                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
                     pos = {
-                        x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),
-                        y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate),
+                        x: lastTouch.clientX - (canvasRect.left ?? minCoordinate),
+                        y: lastTouch.clientY - (canvasRect.top ?? minCoordinate),
                     };
                 }
             }

package/esm/Core/Utils/QuadTree.js

@@ -1,6 +1,6 @@
 import { Circle, Rectangle } from "./Ranges.js";
+import { double, half, subdivideCount } from "./Constants.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
-const half = 0.5, double = 2, subdivideCount = 4;
 export class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;

package/esm/Core/Utils/Ranges.js

@@ -1,6 +1,6 @@
 import { RangeType } from "../../Types/RangeType.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
-const squareExp = 2;
+import { squareExp } from "./Constants.js";
 export class BaseRange {
     constructor(x, y, type) {
         this.position = {

package/esm/Core/Utils/Vectors.js

@@ -1,10 +1,5 @@
-import { errorPrefix } from "./Constants.js";
+import { errorPrefix, inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
 import { isNumber } from "../../Utils/TypeUtils.js";
-const origin = {
-    x: 0,
-    y: 0,
-    z: 0,
-}, squareExp = 2, inverseFactorNumerator = 1.0;
 export class Vector3d {
     constructor(xOrCoords, y, z) {
         this._updateFromAngle = (angle, length) => {
@@ -15,19 +10,19 @@ export class Vector3d {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
-            this.z = coords3d.z ? coords3d.z : origin.z;
+            this.z = coords3d.z ? coords3d.z : originPoint.z;
         }
         else if (xOrCoords !== undefined && y !== undefined) {
             this.x = xOrCoords;
             this.y = y;
-            this.z = z ?? origin.z;
+            this.z = z ?? originPoint.z;
         }
         else {
             throw new Error(`${errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {
-        return Vector3d.create(origin.x, origin.y, origin.z);
+        return Vector3d.create(originPoint.x, originPoint.y, originPoint.z);
     }
     get angle() {
         return Math.atan2(this.y, this.x);
@@ -84,19 +79,19 @@ export class Vector3d {
         this.z *= n;
     }
     normalize() {
-        const length = this.length, noLength = 0;
-        if (length != noLength) {
+        const length = this.length;
+        if (length != none) {
             this.multTo(inverseFactorNumerator / length);
         }
     }
     rotate(angle) {
-        return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), origin.z);
+        return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), originPoint.z);
     }
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
         const v3d = c;
-        this.z = v3d.z ? v3d.z : origin.z;
+        this.z = v3d.z ? v3d.z : originPoint.z;
     }
     sub(v) {
         return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
@@ -109,10 +104,10 @@ export class Vector3d {
 }
 export class Vector extends Vector3d {
     constructor(xOrCoords, y) {
-        super(xOrCoords, y, origin.z);
+        super(xOrCoords, y, originPoint.z);
     }
     static get origin() {
-        return Vector.create(origin.x, origin.y);
+        return Vector.create(originPoint.x, originPoint.y);
     }
     static clone(source) {
         return Vector.create(source.x, source.y);

package/esm/Options/Classes/ManualParticle.js

@@ -1,7 +1,7 @@
 import { PixelMode } from "../../Enums/Modes/PixelMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
 import { isNull } from "../../Utils/TypeUtils.js";
-const defaultPosition = 50;
+import { manualDefaultPosition } from "../../Core/Utils/Constants.js";
 export class ManualParticle {
     load(data) {
         if (isNull(data)) {
@@ -9,8 +9,8 @@ export class ManualParticle {
         }
         if (data.position) {
             this.position = {
-                x: data.position.x ?? defaultPosition,
-                y: data.position.y ?? defaultPosition,
+                x: data.position.x ?? manualDefaultPosition,
+                y: data.position.y ?? manualDefaultPosition,
                 mode: data.position.mode ?? PixelMode.percent,
             };
         }

package/esm/Utils/CanvasUtils.js

@@ -1,11 +1,6 @@
+import { defaultAngle, defaultTransform, identity, lFactor, minStrokeWidth, originPoint, } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
 import { getStyleFromRgb } from "./ColorUtils.js";
-const origin = { x: 0, y: 0 }, defaultTransform = {
-    a: 1,
-    b: 0,
-    c: 0,
-    d: 1,
-};
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -14,24 +9,24 @@ export function drawLine(context, begin, end) {
 }
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-    context.fillRect(origin.x, origin.y, dimension.width, dimension.height);
+    context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);
+    context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
     context.globalAlpha = 1;
 }
 export function clear(context, dimension) {
-    context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
+    context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
+    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, rotating = !!angle, identity = 1, transformData = {
+    }, rotating = !!angle, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
         b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
         c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
@@ -51,7 +46,7 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const minStrokeWidth = 0, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -92,7 +87,7 @@ export function drawEffect(data) {
     });
 }
 export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
+    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -152,7 +147,6 @@ export function drawParticlePlugin(context, plugin, particle, delta) {
     plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
-    const lFactor = 1;
     return {
         h: color.h,
         s: color.s,

package/esm/Utils/ColorUtils.js

@@ -1,9 +1,8 @@
 import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbFactor, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
-import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
-const randomColorValue = "random", midColorValue = "mid";
 function stringToRgba(engine, input) {
     if (!input) {
         return;
@@ -63,7 +62,7 @@ export function rangeColorToHsl(engine, color, index, useIndex = true) {
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export function rgbToHsl(color) {
-    const rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, half = 0.5, double = 2, r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
+    const r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
         h: hMin,
         l: (max + min) * half,
         s: sMin,
@@ -93,13 +92,13 @@ export function stringToRgb(engine, input) {
     return stringToRgba(engine, input);
 }
 export function hslToRgb(hsl) {
-    const hMax = 360, sMax = 100, lMax = 100, sMin = 0, lMin = 0, h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax, rgbFactor = 255, triple = 3;
+    const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
     if (s === sMin) {
         const grayscaleValue = Math.round(lNormalized * rgbFactor);
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    const half = 0.5, double = 2, channel = (temp1, temp2, temp3) => {
-        const temp3Min = 0, temp3Max = 1, sextuple = 6;
+    const channel = (temp1, temp2, temp3) => {
+        const temp3Min = 0, temp3Max = 1;
         if (temp3 < temp3Min) {
             temp3++;
         }
@@ -117,9 +116,9 @@ export function hslToRgb(hsl) {
             return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
         }
         return temp1;
-    }, sNormalizedOffset = 1, temp1 = lNormalized < half
+    }, temp1 = lNormalized < half
         ? lNormalized * (sNormalizedOffset + sNormalized)
-        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseNumerator = 1, phaseThird = phaseNumerator / triple, red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
@@ -132,19 +131,17 @@ export function hslaToRgba(hsla) {
     };
 }
 export function getRandomRgbColor(min) {
-    const defaultMin = 0, fixedMin = min ?? defaultMin, rgbMax = 256;
+    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity;
     return {
-        b: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
-        g: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
-        r: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+        b: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        g: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        r: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
     };
 }
 export function getStyleFromRgb(color, opacity) {
-    const defaultOpacity = 1;
     return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
 }
 export function getStyleFromHsl(color, opacity) {
-    const defaultOpacity = 1;
     return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
 }
 export function colorMix(color1, color2, size1, size2) {
@@ -236,7 +233,6 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
-    const defaultVelocity = 0, decayOffset = 1, defaultLoops = 0, defaultTime = 0;
     if (colorValue.enable) {
         colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
@@ -308,8 +304,7 @@ export function updateColor(color, delta) {
     if (!color) {
         return;
     }
-    const { h, s, l } = color;
-    const ranges = {
+    const { h, s, l } = color, ranges = {
         h: { min: 0, max: 360 },
         s: { min: 0, max: 100 },
         l: { min: 0, max: 100 },

package/esm/Utils/EventDispatcher.js

@@ -1,3 +1,4 @@
+import { deleteCount, minIndex } from "../Core/Utils/Constants.js";
 export class EventDispatcher {
     constructor() {
         this._listeners = new Map();
@@ -31,11 +32,10 @@ export class EventDispatcher {
         if (!arr) {
             return;
         }
-        const length = arr.length, idx = arr.indexOf(listener), minIndex = 0;
+        const length = arr.length, idx = arr.indexOf(listener);
         if (idx < minIndex) {
             return;
         }
-        const deleteCount = 1;
         if (length === deleteCount) {
             this._listeners.delete(type);
         }

package/esm/Utils/NumberUtils.js

@@ -1,12 +1,12 @@
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
+import { double, doublePI, empty, half, percentDenominator, quarter, threeQuarter } from "../Core/Utils/Constants.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
-import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
 const _animationLoop = {
     nextFrame: (cb) => requestAnimationFrame(cb),
     cancel: (idx) => cancelAnimationFrame(idx),
-}, double = 2, doublePI = Math.PI * double;
+};
 export function setRandom(rnd = Math.random) {
     _random = rnd;
 }
@@ -74,7 +74,6 @@ export function getParticleDirectionAngle(direction, position, center) {
     if (isNumber(direction)) {
         return degToRad(direction);
     }
-    const empty = 0, half = 0.5, quarter = 0.25, threeQuarter = half + quarter;
     switch (direction) {
         case MoveDirection.top:
             return -Math.PI * half;
@@ -107,7 +106,6 @@ export function getParticleBaseVelocity(direction) {
     return baseVelocity;
 }
 export function collisionVelocity(v1, v2, m1, m2) {
-    const double = 2;
     return Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
 }
 export function calcPositionFromSize(data) {