@tsparticles/engine 3.0.2 → 3.1.0

package/browser/Core/Container.js

@@ -1,19 +1,20 @@
+import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
-import { errorPrefix } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
 }
-function initDelta(value, fpsLimit = 60, smooth = false) {
+const defaultFps = 60;
+function initDelta(value, fpsLimit = defaultFps, smooth = false) {
     return {
         value,
-        factor: smooth ? 60 / fpsLimit : (60 * value) / 1000,
+        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds,
     };
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -31,14 +32,19 @@ export class Container {
                 if (entry.target !== this.interactivity.element) {
                     continue;
                 }
-                (entry.isIntersecting ? this.play : this.pause)();
+                if (entry.isIntersecting) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
             }
         };
         this._nextFrame = async (timestamp) => {
             try {
                 if (!this._smooth &&
                     this._lastFrameTime !== undefined &&
-                    timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
+                    timestamp < this._lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
@@ -46,7 +52,7 @@ export class Container {
                 const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                 this.addLifeTime(delta.value);
                 this._lastFrameTime = timestamp;
-                if (delta.value > 1000) {
+                if (delta.value > millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
@@ -129,8 +135,8 @@ export class Container {
             const mouseEvent = e, pos = {
                 x: mouseEvent.offsetX || mouseEvent.clientX,
                 y: mouseEvent.offsetY || mouseEvent.clientY,
-            };
-            clickOrTouchHandler(e, pos, 1);
+            }, radius = 1;
+            clickOrTouchHandler(e, pos, radius);
         };
         const touchStartHandler = () => {
             if (!guardCheck(this)) {
@@ -151,16 +157,17 @@ export class Container {
             }
             if (touched && !touchMoved) {
                 const touchEvent = e;
-                let lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+                const lengthOffset = 1;
+                let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
                 if (!lastTouch) {
-                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
+                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
                     if (!lastTouch) {
                         return;
                     }
                 }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : 0),
-                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : 0),
+                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, minCoordinate = 0, pos = {
+                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
                 };
                 clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
             }
@@ -202,10 +209,10 @@ export class Container {
         this.particles.destroy();
         this.canvas.destroy();
         for (const [, effectDrawer] of this.effectDrawers) {
-            effectDrawer.destroy && effectDrawer.destroy(this);
+            effectDrawer.destroy?.(this);
         }
         for (const [, shapeDrawer] of this.shapeDrawers) {
-            shapeDrawer.destroy && shapeDrawer.destroy(this);
+            shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
             this.effectDrawers.delete(key);
@@ -215,9 +222,10 @@ export class Container {
         }
         this._engine.clearPlugins(this);
         this.destroyed = true;
-        const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this);
-        if (idx >= 0) {
-            mainArr.splice(idx, 1);
+        const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this), minIndex = 0;
+        if (idx >= minIndex) {
+            const deleteCount = 1;
+            mainArr.splice(idx, deleteCount);
         }
         this._engine.dispatchEvent("containerDestroyed", { container: this });
     }
@@ -226,13 +234,14 @@ export class Container {
             return;
         }
         let refreshTime = force;
-        this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
+        const frame = async (timestamp) => {
             if (refreshTime) {
                 this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             await this._nextFrame(timestamp);
-        });
+        };
+        this._drawAnimationFrame = requestAnimationFrame((timestamp) => void frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -256,7 +265,7 @@ export class Container {
         }
         this.particles.handleClickMode(mode);
         for (const [, plugin] of this.plugins) {
-            plugin.handleClickMode && plugin.handleClickMode(mode);
+            plugin.handleClickMode?.(mode);
         }
     }
     async init() {
@@ -289,25 +298,26 @@ export class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this._duration = getRangeValue(this.actualOptions.duration) * 1000;
-        this._delay = getRangeValue(this.actualOptions.delay) * 1000;
+        this._duration = getRangeValue(this.actualOptions.duration) * millisecondsToSeconds;
+        this._delay = getRangeValue(this.actualOptions.delay) * millisecondsToSeconds;
         this._lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+        const defaultFpsLimit = 120, minFpsLimit = 0;
+        this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
         this._smooth = this.actualOptions.smooth;
         for (const [, drawer] of this.effectDrawers) {
-            drawer.init && (await drawer.init(this));
+            await drawer.init?.(this);
         }
         for (const [, drawer] of this.shapeDrawers) {
-            drawer.init && (await drawer.init(this));
+            await drawer.init?.(this);
         }
         for (const [, plugin] of this.plugins) {
-            plugin.init && (await plugin.init());
+            await plugin.init?.();
         }
         this._engine.dispatchEvent("containerInit", { container: this });
         this.particles.init();
         this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
-            plugin.particlesSetup && plugin.particlesSetup();
+            plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent("particlesSetup", { container: this });
     }
@@ -330,7 +340,7 @@ export class Container {
             return;
         }
         for (const [, plugin] of this.plugins) {
-            plugin.pause && plugin.pause();
+            plugin.pause?.();
         }
         if (!this.pageHidden) {
             this._paused = true;
@@ -357,7 +367,7 @@ export class Container {
             }
         }
         this._engine.dispatchEvent("containerPlay", { container: this });
-        this.draw(needsUpdate || false);
+        this.draw(needsUpdate ?? false);
     }
     async refresh() {
         if (!guardCheck(this)) {
@@ -382,18 +392,19 @@ export class Container {
         await this.init();
         this.started = true;
         await new Promise((resolve) => {
-            this._delayTimeout = setTimeout(async () => {
+            const start = async () => {
                 this._eventListeners.addListeners();
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
                 for (const [, plugin] of this.plugins) {
-                    plugin.start && (await plugin.start());
+                    await plugin.start?.();
                 }
                 this._engine.dispatchEvent("containerStarted", { container: this });
                 this.play();
                 resolve();
-            }, this._delay);
+            };
+            this._delayTimeout = setTimeout(() => void start(), this._delay);
         });
     }
     stop() {
@@ -414,7 +425,7 @@ export class Container {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
-            plugin.stop && plugin.stop();
+            plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {
             this.plugins.delete(key);

package/browser/Core/Engine.js

@@ -51,16 +51,18 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.2";
+        return "3.1.0";
     }
     addConfig(config) {
-        const name = config.name ?? "default";
-        this._configs.set(name, config);
-        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+        const key = config.key ?? config.name ?? "default";
+        this._configs.set(key, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name: key, config } });
     }
     async addEffect(effect, drawer, refresh = true) {
         executeOnSingleOrMultiple(effect, (type) => {
-            !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+            if (!this.getEffectDrawer(type)) {
+                this.effectDrawers.set(type, drawer);
+            }
         });
         await this.refresh(refresh);
     }
@@ -80,20 +82,28 @@ export class Engine {
         await this.refresh(refresh);
     }
     async addPathGenerator(name, generator, refresh = true) {
-        !this.getPathGenerator(name) && this.pathGenerators.set(name, generator);
+        if (!this.getPathGenerator(name)) {
+            this.pathGenerators.set(name, generator);
+        }
         await this.refresh(refresh);
     }
     async addPlugin(plugin, refresh = true) {
-        !this.getPlugin(plugin.id) && this.plugins.push(plugin);
+        if (!this.getPlugin(plugin.id)) {
+            this.plugins.push(plugin);
+        }
         await this.refresh(refresh);
     }
     async addPreset(preset, options, override = false, refresh = true) {
-        (override || !this.getPreset(preset)) && this.presets.set(preset, options);
+        if (override || !this.getPreset(preset)) {
+            this.presets.set(preset, options);
+        }
         await this.refresh(refresh);
     }
     async addShape(shape, drawer, refresh = true) {
         executeOnSingleOrMultiple(shape, (type) => {
-            !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
+            if (!this.getShapeDrawer(type)) {
+                this.shapeDrawers.set(type, drawer);
+            }
         });
         await this.refresh(refresh);
     }
@@ -111,7 +121,8 @@ export class Engine {
     domItem(index) {
         const dom = this.dom(), item = dom[index];
         if (!item || item.destroyed) {
-            dom.splice(index, 1);
+            const deleteCount = 1;
+            dom.splice(index, deleteCount);
             return;
         }
         return item;
@@ -119,7 +130,9 @@ export class Engine {
     getAvailablePlugins(container) {
         const res = new Map();
         for (const plugin of this.plugins) {
-            plugin.needsPlugin(container.actualOptions) && res.set(plugin.id, plugin.getPlugin(container));
+            if (plugin.needsPlugin(container.actualOptions)) {
+                res.set(plugin.id, plugin.getPlugin(container));
+            }
         }
         return res;
     }
@@ -160,19 +173,20 @@ export class Engine {
         this._initialized = true;
     }
     async load(params) {
-        const id = params.id ?? `tsparticles${Math.floor(getRandom() * 10000)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+        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;
         let domContainer = params.element ?? document.getElementById(id);
         if (!domContainer) {
             domContainer = document.createElement("div");
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
-        if (oldIndex >= 0) {
+        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id), minIndex = 0;
+        if (oldIndex >= minIndex) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
                 old.destroy();
-                dom.splice(oldIndex, 1);
+                const deleteCount = 1;
+                dom.splice(oldIndex, deleteCount);
             }
         }
         let canvasEl;
@@ -183,7 +197,8 @@ export class Engine {
         else {
             const existingCanvases = domContainer.getElementsByTagName("canvas");
             if (existingCanvases.length) {
-                canvasEl = existingCanvases[0];
+                const firstIndex = 0;
+                canvasEl = existingCanvases[firstIndex];
                 canvasEl.dataset[generatedAttribute] = "false";
             }
             else {
@@ -199,8 +214,9 @@ export class Engine {
             canvasEl.style.height = "100%";
         }
         const newItem = new Container(this, id, currentOptions);
-        if (oldIndex >= 0) {
-            dom.splice(oldIndex, 0, newItem);
+        if (oldIndex >= minIndex) {
+            const deleteCount = 0;
+            dom.splice(oldIndex, deleteCount, newItem);
         }
         else {
             dom.push(newItem);
@@ -220,14 +236,14 @@ export class Engine {
             return;
         }
         for (const updater of updaters) {
-            updater.loadOptions && updater.loadOptions(options, ...sourceOptions);
+            updater.loadOptions?.(options, ...sourceOptions);
         }
     }
     async refresh(refresh = true) {
         if (!refresh) {
             return;
         }
-        this.dom().forEach((t) => t.refresh());
+        await Promise.allSettled(this.dom().map((t) => t.refresh()));
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);

package/browser/Core/Particle.js

@@ -1,12 +1,13 @@
-import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
+import { calcExactPositionOrRandomFromSize, clamp, degToRad, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.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 { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
 import { Vector } from "./Utils/Vector.js";
 import { Vector3d } from "./Utils/Vector3d.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
-import { errorPrefix } from "./Utils/Constants.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
+const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2;
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     if (!effectData) {
@@ -31,7 +32,7 @@ function fixOutMode(data) {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;
     }
-    const diameter = data.radius * 2;
+    const diameter = data.radius * double;
     if (data.coord > data.maxCoord - diameter) {
         data.setCb(-data.radius);
     }
@@ -42,7 +43,7 @@ function fixOutMode(data) {
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
-        this._calcPosition = (container, position, zIndex, tryCount = 0) => {
+        this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
             for (const [, plugin] of container.plugins) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
@@ -76,7 +77,8 @@ export class Particle {
             fixVertical(outModes.top ?? outModes.default);
             fixVertical(outModes.bottom ?? outModes.default);
             if (this._checkOverlap(pos, tryCount)) {
-                return this._calcPosition(container, undefined, zIndex, tryCount + 1);
+                const increment = 1;
+                return this._calcPosition(container, undefined, zIndex, tryCount + increment);
             }
             return pos;
         };
@@ -85,9 +87,9 @@ export class Particle {
             if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
                 return res;
             }
-            const rad = (Math.PI / 180) * getRangeValue(moveOptions.angle.value), radOffset = (Math.PI / 180) * getRangeValue(moveOptions.angle.offset), range = {
-                left: radOffset - rad * 0.5,
-                right: radOffset + rad * 0.5,
+            const rad = degToRad(getRangeValue(moveOptions.angle.value)), radOffset = degToRad(getRangeValue(moveOptions.angle.offset)), range = {
+                left: radOffset - rad * half,
+                right: radOffset + rad * half,
             };
             if (!moveOptions.straight) {
                 res.angle += randomInRange(setRangeValue(range.left, range.right));
@@ -97,7 +99,7 @@ export class Particle {
             }
             return res;
         };
-        this._checkOverlap = (pos, tryCount = 0) => {
+        this._checkOverlap = (pos, tryCount = defaultRetryCount) => {
             const collisionsOptions = this.options.collisions, radius = this.getRadius();
             if (!collisionsOptions.enable) {
                 return false;
@@ -106,8 +108,8 @@ export class Particle {
             if (overlapOptions.enable) {
                 return false;
             }
-            const retries = overlapOptions.retries;
-            if (retries >= 0 && tryCount > retries) {
+            const retries = overlapOptions.retries, minRetries = 0;
+            if (retries >= minRetries && tryCount > retries) {
                 throw new Error(`${errorPrefix} particle is overlapping and can't be placed`);
             }
             return !!this.container.particles.find((particle) => getDistance(pos, particle.position) < radius + particle.getRadius());
@@ -116,7 +118,7 @@ export class Particle {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI * 0.5 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+            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;
             if (!rolled) {
                 return color;
             }
@@ -129,13 +131,13 @@ export class Particle {
             return color;
         };
         this._initPosition = (position) => {
-            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
-            this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value), minZ = 0;
+            this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
             this.initialPosition = this.position.copy();
-            const canvasSize = container.canvas.size;
+            const canvasSize = container.canvas.size, defaultRadius = 0;
             this.moveCenter = {
                 ...getPosition(this.options.move.center, canvasSize),
-                radius: this.options.move.center.radius ?? 0,
+                radius: this.options.move.center.radius ?? defaultRadius,
                 mode: this.options.move.center.mode ?? "percent",
             };
             this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
@@ -160,14 +162,14 @@ export class Particle {
         this.bubble.inRange = false;
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
-        shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
+        shapeDrawer?.particleDestroy?.(this);
         for (const [, plugin] of container.plugins) {
-            plugin.particleDestroyed && plugin.particleDestroyed(this, override);
+            plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
-            updater.particleDestroyed && updater.particleDestroyed(this, override);
+            updater.particleDestroyed?.(this, override);
         }
-        pathGenerator && pathGenerator.reset(this);
+        pathGenerator?.reset(this);
         this._engine.dispatchEvent("particleDestroyed", {
             container: this.container,
             data: {
@@ -186,7 +188,7 @@ export class Particle {
         return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
     }
     getMass() {
-        return this.getRadius() ** 2 * Math.PI * 0.5;
+        return this.getRadius() ** squareExp * Math.PI * half;
     }
     getPosition() {
         return {
@@ -225,14 +227,14 @@ export class Particle {
         this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
         const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
         if (overrideOptions) {
-            if (overrideOptions.effect && overrideOptions.effect.type) {
+            if (overrideOptions.effect?.type) {
                 const overrideEffectType = overrideOptions.effect.type, effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
                 if (effect) {
                     this.effect = effect;
                     effectOptions.load(overrideOptions.effect);
                 }
             }
-            if (overrideOptions.shape && overrideOptions.shape.type) {
+            if (overrideOptions.shape?.type) {
                 const overrideShapeType = overrideOptions.shape.type, shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
                 if (shape) {
                     this.shape = shape;
@@ -261,7 +263,7 @@ export class Particle {
         this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
         this.options = particlesOptions;
         const pathOptions = this.options.move.path;
-        this.pathDelay = getRangeValue(pathOptions.delay.value) * 1000;
+        this.pathDelay = getRangeValue(pathOptions.delay.value) * millisecondsToSeconds;
         if (pathOptions.generator) {
             this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -280,7 +282,8 @@ export class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+        const decayOffset = 1;
+        this.moveDecay = decayOffset - getRangeValue(this.options.move.decay);
         const particles = container.particles;
         particles.setLastZIndex(this.position.z);
         this.zIndexFactor = this.position.z / container.zLayers;
@@ -292,7 +295,7 @@ export class Particle {
                 container.effectDrawers.set(this.effect, effectDrawer);
             }
         }
-        if (effectDrawer && effectDrawer.loadEffect) {
+        if (effectDrawer?.loadEffect) {
             effectDrawer.loadEffect(this);
         }
         let shapeDrawer = container.shapeDrawers.get(this.shape);
@@ -302,7 +305,7 @@ export class Particle {
                 container.shapeDrawers.set(this.shape, shapeDrawer);
             }
         }
-        if (shapeDrawer && shapeDrawer.loadShape) {
+        if (shapeDrawer?.loadShape) {
             shapeDrawer.loadShape(this);
         }
         const sideCountFunc = shapeDrawer?.getSidesCount;
@@ -315,16 +318,12 @@ export class Particle {
             updater.init(this);
         }
         for (const mover of particles.movers) {
-            mover.init && mover.init(this);
-        }
-        if (effectDrawer && effectDrawer.particleInit) {
-            effectDrawer.particleInit(container, this);
-        }
-        if (shapeDrawer && shapeDrawer.particleInit) {
-            shapeDrawer.particleInit(container, this);
+            mover.init?.(this);
         }
+        effectDrawer?.particleInit?.(container, this);
+        shapeDrawer?.particleInit?.(container, this);
         for (const [, plugin] of container.plugins) {
-            plugin.particleCreated && plugin.particleCreated(this);
+            plugin.particleCreated?.(this);
         }
     }
     isInsideCanvas() {
@@ -339,7 +338,7 @@ export class Particle {
     }
     reset() {
         for (const updater of this.container.particles.updaters) {
-            updater.reset && updater.reset(this);
+            updater.reset?.(this);
         }
     }
 }