@tsparticles/engine 3.0.3 → 3.2.0

package/browser/Core/Particles.js

@@ -1,11 +1,10 @@
 import { getLogger, getPosition } from "../Utils/Utils.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
-import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Rectangle.js";
 import { errorPrefix } from "./Utils/Constants.js";
-const qTreeCapacity = 4;
+const qTreeCapacity = 4, squareExp = 2, defaultRemoveQuantity = 1;
 const qTreeRectangle = (canvasSize) => {
     const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
     return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
@@ -17,7 +16,7 @@ export class Particles {
                 this._pool.push(particle);
             }
         };
-        this._applyDensity = (options, manualCount, group) => {
+        this._applyDensity = async (options, manualCount, group) => {
             const numberOptions = options.number;
             if (!options.number.density?.enable) {
                 if (group === undefined) {
@@ -28,7 +27,7 @@ export class Particles {
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > 0 ? 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, 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);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -36,29 +35,28 @@ export class Particles {
                 this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
             }
             if (particlesCount < particlesNumber) {
-                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+                await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
             else if (particlesCount > particlesNumber) {
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         };
         this._initDensityFactor = (densityOptions) => {
-            const container = this._container;
+            const container = this._container, defaultFactor = 1;
             if (!container.canvas.element || !densityOptions.enable) {
-                return 1;
+                return defaultFactor;
             }
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** 2);
+            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
         };
-        this._pushParticle = (position, overrideOptions, group, initializer) => {
+        this._pushParticle = async (position, overrideOptions, group, initializer) => {
             try {
                 let particle = this._pool.pop();
-                if (particle) {
-                    particle.init(this._nextId, position, overrideOptions, group);
-                }
-                else {
-                    particle = new Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                if (!particle) {
+                    const { Particle } = await import("./Particle.js");
+                    particle = new Particle(this._engine, this._container);
                 }
+                await particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
                     canAdd = initializer(particle);
@@ -79,7 +77,6 @@ export class Particles {
             }
             catch (e) {
                 getLogger().warning(`${errorPrefix} adding particle: ${e}`);
-                return;
             }
         };
         this._removeParticle = (index, group, override) => {
@@ -87,9 +84,9 @@ export class Particles {
             if (!particle || particle.group !== group) {
                 return false;
             }
-            const zIdx = this._zArray.indexOf(particle);
-            this._array.splice(index, 1);
-            this._zArray.splice(zIdx, 1);
+            const zIdx = this._zArray.indexOf(particle), deleteCount = 1;
+            this._array.splice(index, deleteCount);
+            this._zArray.splice(zIdx, deleteCount);
             particle.destroy(override);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
@@ -111,26 +108,27 @@ export class Particles {
         this._needsSort = false;
         this._lastZIndex = 0;
         this._interactionManager = new InteractionManager(engine, container);
+        this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
-        this.movers = this._engine.getMovers(container, true);
-        this.updaters = this._engine.getUpdaters(container, true);
+        this.movers = [];
+        this.updaters = [];
     }
     get count() {
         return this._array.length;
     }
-    addManualParticles() {
+    async addManualParticles() {
         const container = this._container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
+            await this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
         }
     }
-    addParticle(position, overrideOptions, group, initializer) {
-        const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;
-        if (limit > 0) {
+    async addParticle(position, overrideOptions, group, initializer) {
+        const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        if (limit > minLimit) {
             if (limitOptions.mode === "delete") {
-                const countToRemove = currentCount + 1 - limit;
-                if (countToRemove > 0) {
+                const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
+                if (countToRemove > minCount) {
                     this.removeQuantity(countToRemove);
                 }
             }
@@ -140,11 +138,12 @@ export class Particles {
                 }
             }
         }
-        return this._pushParticle(position, overrideOptions, group, initializer);
+        return await this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
         this._zArray = [];
+        this._pluginsInitialized = false;
     }
     destroy() {
         this._array = [];
@@ -157,10 +156,10 @@ export class Particles {
         canvas.clear();
         await this.update(delta);
         for (const [, plugin] of container.plugins) {
-            canvas.drawPlugin(plugin, delta);
+            await canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
-            p.draw(delta);
+            await p.draw(delta);
         }
     }
     filter(condition) {
@@ -175,13 +174,12 @@ export class Particles {
     handleClickMode(mode) {
         this._interactionManager.handleClickMode(mode);
     }
-    init() {
+    async init() {
         const container = this._container, options = container.actualOptions;
         this._lastZIndex = 0;
         this._needsSort = false;
+        await this.initPlugins();
         let handled = false;
-        this.updaters = this._engine.getUpdaters(container, true);
-        this._interactionManager.init();
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
                 handled = plugin.particlesInitialization();
@@ -190,55 +188,67 @@ export class Particles {
                 break;
             }
         }
-        this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
-            pathGenerator.init(container);
-        }
-        this.addManualParticles();
+        await this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
-                    this.addParticle(undefined, groupOptions, group);
+                    await this.addParticle(undefined, groupOptions, group);
                 }
             }
             for (let i = this.count; i < particlesOptions.number.value; i++) {
-                this.addParticle();
+                await this.addParticle();
             }
         }
     }
-    push(nb, mouse, overrideOptions, group) {
+    async initPlugins() {
+        if (this._pluginsInitialized) {
+            return;
+        }
+        const container = this._container;
+        this.movers = await this._engine.getMovers(container, true);
+        this.updaters = await this._engine.getUpdaters(container, true);
+        await this._interactionManager.init();
+        for (const [, pathGenerator] of container.pathGenerators) {
+            await pathGenerator.init(container);
+        }
+    }
+    async push(nb, mouse, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            this.addParticle(mouse?.position, overrideOptions, group);
+            await this.addParticle(mouse?.position, overrideOptions, group);
         }
     }
     async redraw() {
         this.clear();
-        this.init();
+        await this.init();
         await this.draw({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
     }
-    removeAt(index, quantity = 1, group, override) {
-        if (index < 0 || index > this.count) {
+    removeAt(index, quantity = defaultRemoveQuantity, group, override) {
+        const minIndex = 0;
+        if (index < minIndex || index > this.count) {
             return;
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            this._removeParticle(i--, group, override) && deleted++;
+            if (this._removeParticle(i--, group, override)) {
+                deleted++;
+            }
         }
     }
     removeQuantity(quantity, group) {
-        this.removeAt(0, quantity, group);
+        const defaultIndex = 0;
+        this.removeAt(defaultIndex, quantity, group);
     }
-    setDensity() {
-        const options = this._container.actualOptions, groups = options.particles.groups;
+    async setDensity() {
+        const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
         for (const group in groups) {
-            this._applyDensity(groups[group], 0, group);
+            await this._applyDensity(groups[group], manualCount, group);
         }
-        this._applyDensity(options.particles, options.manualParticles.length);
+        await this._applyDensity(options.particles, options.manualParticles.length);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -254,7 +264,7 @@ export class Particles {
             pathGenerator.update();
         }
         for (const [, plugin] of container.plugins) {
-            plugin.update && (await plugin.update(delta));
+            await plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
         for (const particle of this._array) {
@@ -265,15 +275,17 @@ export class Particles {
                 particle.initialPosition.y *= resizeFactor.height;
             }
             particle.ignoresResizeRatio = false;
-            await this._interactionManager.reset(particle);
+            this._interactionManager.reset(particle);
             for (const [, plugin] of this._container.plugins) {
                 if (particle.destroyed) {
                     break;
                 }
-                plugin.particleUpdate && plugin.particleUpdate(particle, delta);
+                plugin.particleUpdate?.(particle, delta);
             }
             for (const mover of this.movers) {
-                mover.isEnabled(particle) && mover.move(particle, delta);
+                if (mover.isEnabled(particle)) {
+                    await mover.move(particle, delta);
+                }
             }
             if (particle.destroyed) {
                 particlesToDelete.add(particle);
@@ -298,7 +310,7 @@ export class Particles {
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
             for (const updater of this.updaters) {
-                updater.update(particle, delta);
+                await updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
                 await this._interactionManager.particlesInteract(particle, delta);
@@ -308,7 +320,8 @@ export class Particles {
         if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            this._lastZIndex = zArray[zArray.length - 1].position.z;
+            const lengthOffset = 1;
+            this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;
             this._needsSort = false;
         }
     }

package/browser/Core/Retina.js

@@ -1,15 +1,16 @@
 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;
-        this.pixelRatio = 1;
-        this.reduceFactor = 1;
+        this.pixelRatio = defaultRatio;
+        this.reduceFactor = defaultReduceFactor;
     }
     init() {
         const container = this.container, options = container.actualOptions;
-        this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
-        this.reduceFactor = 1;
+        this.pixelRatio = !options.detectRetina || isSsr() ? defaultRatio : window.devicePixelRatio;
+        this.reduceFactor = defaultReduceFactor;
         const ratio = this.pixelRatio, canvas = container.canvas;
         if (canvas.element) {
             const element = canvas.element;

package/browser/Core/Utils/Circle.js

@@ -1,6 +1,7 @@
 import { Range } from "./Range.js";
 import { Rectangle } from "./Rectangle.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
+const squareExp = 2;
 export class Circle extends Range {
     constructor(x, y, radius) {
         super(x, y);
@@ -12,12 +13,12 @@ export class Circle extends Range {
     intersects(range) {
         const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
         if (range instanceof Circle) {
-            const rSum = r + range.radius, dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
+            const rSum = r + range.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
             return rSum > dist;
         }
         else if (range instanceof Rectangle) {
-            const { width, height } = range.size, edges = Math.pow(distPos.x - width, 2) + Math.pow(distPos.y - height, 2);
-            return (edges <= r ** 2 ||
+            const { width, height } = range.size, edges = Math.pow(distPos.x - width, squareExp) + Math.pow(distPos.y - height, squareExp);
+            return (edges <= r ** squareExp ||
                 (distPos.x <= r + width && distPos.y <= r + height) ||
                 distPos.x <= width ||
                 distPos.y <= height);

package/browser/Core/Utils/Constants.js

@@ -11,3 +11,6 @@ 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;

package/browser/Core/Utils/EventListeners.js

@@ -1,5 +1,6 @@
 import { executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
-import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
+import { millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
+const double = 2;
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -32,13 +33,14 @@ export class EventListeners {
                 executeOnSingleOrMultiple(onClick.mode, (mode) => this.container.handleClickMode(mode));
             }
             if (e.type === "touchend") {
-                setTimeout(() => this._mouseTouchFinish(), 500);
+                const touchDelay = 500;
+                setTimeout(() => this._mouseTouchFinish(), touchDelay);
             }
         };
         this._handleThemeChange = (e) => {
             const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
             if (theme && theme.default.auto) {
-                container.loadTheme(themeName);
+                void container.loadTheme(themeName);
             }
         };
         this._handleVisibilityChange = () => {
@@ -53,7 +55,7 @@ export class EventListeners {
             }
             else {
                 container.pageHidden = false;
-                if (container.getAnimationStatus()) {
+                if (container.animationStatus) {
                     container.play(true);
                 }
                 else {
@@ -61,15 +63,16 @@ export class EventListeners {
                 }
             }
         };
-        this._handleWindowResize = async () => {
+        this._handleWindowResize = () => {
             if (this._resizeTimeout) {
                 clearTimeout(this._resizeTimeout);
                 delete this._resizeTimeout;
             }
-            this._resizeTimeout = setTimeout(async () => {
+            const handleResize = async () => {
                 const canvas = this.container.canvas;
-                canvas && (await canvas.windowResize());
-            }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+                await canvas?.windowResize();
+            };
+            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;
@@ -155,12 +158,12 @@ export class EventListeners {
                 delete this._resizeObserver;
             }
             else if (!this._resizeObserver && add && canvasEl) {
-                this._resizeObserver = new ResizeObserver(async (entries) => {
+                this._resizeObserver = new ResizeObserver((entries) => {
                     const entry = entries.find((e) => e.target === canvasEl);
                     if (!entry) {
                         return;
                     }
-                    await this._handleWindowResize();
+                    this._handleWindowResize();
                 });
                 this._resizeObserver.observe(canvasEl);
             }
@@ -211,7 +214,7 @@ export class EventListeners {
         };
         this._mouseTouchMove = (e) => {
             const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
-            if (!interactivity || !interactivity.element) {
+            if (!interactivity?.element) {
                 return;
             }
             interactivity.mouse.inside = true;
@@ -233,8 +236,8 @@ export class EventListeners {
                     if (source && target && canvasEl) {
                         const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
                         pos = {
-                            x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
-                            y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                            x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top),
                         };
                     }
                     else {
@@ -254,10 +257,10 @@ export class EventListeners {
             else {
                 this._canPush = e.type !== "touchmove";
                 if (canvasEl) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvasEl.getBoundingClientRect();
+                    const touchEvent = e, lengthOffset = 1, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect(), defaultCoordinate = 0;
                     pos = {
-                        x: lastTouch.clientX - (canvasRect.left ?? 0),
-                        y: lastTouch.clientY - (canvasRect.top ?? 0),
+                        x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),
+                        y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate),
                     };
                 }
             }

package/browser/Core/Utils/ExternalInteractorBase.js

@@ -1,6 +1,6 @@
 export class ExternalInteractorBase {
     constructor(container) {
-        this.container = container;
         this.type = "external";
+        this.container = container;
     }
 }

package/browser/Core/Utils/InteractionManager.js

@@ -2,21 +2,24 @@ export class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = engine.getInteractors(this.container, true);
+        this._interactors = [];
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
     async externalInteract(delta) {
         for (const interactor of this._externalInteractors) {
-            interactor.isEnabled() && (await interactor.interact(delta));
+            if (interactor.isEnabled()) {
+                await interactor.interact(delta);
+            }
         }
     }
     handleClickMode(mode) {
         for (const interactor of this._externalInteractors) {
-            interactor.handleClickMode && interactor.handleClickMode(mode);
+            interactor.handleClickMode?.(mode);
         }
     }
-    init() {
+    async init() {
+        this._interactors = await this._engine.getInteractors(this.container, true);
         this._externalInteractors = [];
         this._particleInteractors = [];
         for (const interactor of this._interactors) {
@@ -36,15 +39,21 @@ export class InteractionManager {
             interactor.clear(particle, delta);
         }
         for (const interactor of this._particleInteractors) {
-            interactor.isEnabled(particle) && (await interactor.interact(particle, delta));
+            if (interactor.isEnabled(particle)) {
+                await interactor.interact(particle, delta);
+            }
         }
     }
-    async reset(particle) {
+    reset(particle) {
         for (const interactor of this._externalInteractors) {
-            interactor.isEnabled() && interactor.reset(particle);
+            if (interactor.isEnabled()) {
+                interactor.reset(particle);
+            }
         }
         for (const interactor of this._particleInteractors) {
-            interactor.isEnabled(particle) && interactor.reset(particle);
+            if (interactor.isEnabled(particle)) {
+                interactor.reset(particle);
+            }
         }
     }
 }

package/browser/Core/Utils/ParticlesInteractorBase.js

@@ -1,6 +1,6 @@
 export class ParticlesInteractorBase {
     constructor(container) {
-        this.container = container;
         this.type = "particles";
+        this.container = container;
     }
 }

package/browser/Core/Utils/QuadTree.js

@@ -1,14 +1,16 @@
 import { Circle } from "./Circle.js";
 import { Rectangle } from "./Rectangle.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
+const half = 0.5, double = 2, subdivideCount = 4;
 export class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;
         this.capacity = capacity;
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
-            for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - (i % 2)), width * 0.5, height * 0.5), capacity));
+            for (let i = 0; i < subdivideCount; i++) {
+                const fixedIndex = i % double;
+                this._subs.push(new QuadTree(new Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));
             }
             this._divided = true;
         };
@@ -30,7 +32,7 @@ export class QuadTree {
         return this._subs.some((sub) => sub.insert(point));
     }
     query(range, check, found) {
-        const res = found || [];
+        const res = found ?? [];
         if (!range.intersects(this.rectangle)) {
             return [];
         }

package/browser/Core/Utils/Vector.js

@@ -1,10 +1,15 @@
 import { Vector3d } from "./Vector3d.js";
+const origin = {
+    x: 0,
+    y: 0,
+    z: 0,
+};
 export class Vector extends Vector3d {
     constructor(xOrCoords, y) {
-        super(xOrCoords, y, 0);
+        super(xOrCoords, y, origin.z);
     }
     static get origin() {
-        return Vector.create(0, 0);
+        return Vector.create(origin.x, origin.y);
     }
     static clone(source) {
         return Vector.create(source.x, source.y);

package/browser/Core/Utils/Vector3d.js

@@ -1,5 +1,10 @@
 import { errorPrefix } from "./Constants.js";
 import { isNumber } from "../../Utils/Utils.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) => {
@@ -10,19 +15,19 @@ export class Vector3d {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
-            this.z = coords3d.z ? coords3d.z : 0;
+            this.z = coords3d.z ? coords3d.z : origin.z;
         }
         else if (xOrCoords !== undefined && y !== undefined) {
             this.x = xOrCoords;
             this.y = y;
-            this.z = z ?? 0;
+            this.z = z ?? origin.z;
         }
         else {
             throw new Error(`${errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {
-        return Vector3d.create(0, 0, 0);
+        return Vector3d.create(origin.x, origin.y, origin.z);
     }
     get angle() {
         return Math.atan2(this.y, this.x);
@@ -68,7 +73,7 @@ export class Vector3d {
         this.z /= n;
     }
     getLengthSq() {
-        return this.x ** 2 + this.y ** 2;
+        return this.x ** squareExp + this.y ** squareExp;
     }
     mult(n) {
         return Vector3d.create(this.x * n, this.y * n, this.z * n);
@@ -79,19 +84,19 @@ export class Vector3d {
         this.z *= n;
     }
     normalize() {
-        const length = this.length;
-        if (length != 0) {
-            this.multTo(1.0 / length);
+        const length = this.length, noLength = 0;
+        if (length != noLength) {
+            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), 0);
+        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);
     }
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
         const v3d = c;
-        this.z = v3d.z ? v3d.z : 0;
+        this.z = v3d.z ? v3d.z : origin.z;
     }
     sub(v) {
         return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -15,7 +15,7 @@ export class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
-            this.cover.load(cover.color !== undefined ? cover : { color: color });
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;