tsparticles 1.41.0 → 1.41.4

package/Core/Container.js

@@ -115,12 +115,12 @@ class Container {
     }
     draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = (0, Utils_2.animate)()((timestamp) => {
+        this.drawAnimationFrame = (0, Utils_2.animate)()(async (timestamp) => {
             if (refreshTime) {
                 this.lastFrameTime = undefined;
                 refreshTime = false;
             }
-            this.drawer.nextFrame(timestamp);
+            await this.drawer.nextFrame(timestamp);
         });
     }
     getAnimationStatus() {

package/Core/Interfaces/IExternalInteractor.d.ts

@@ -2,5 +2,5 @@ import type { IDelta } from "./IDelta";
 import type { IInteractor } from "./IInteractor";
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
-    interact(delta: IDelta): void;
+    interact(delta: IDelta): Promise<void>;
 }

package/Core/Interfaces/IParticlesInteractor.d.ts

@@ -3,5 +3,5 @@ import type { IInteractor } from "./IInteractor";
 import type { Particle } from "../Particle";
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
-    interact(particle: Particle, delta: IDelta): void;
+    interact(particle: Particle, delta: IDelta): Promise<void>;
 }

package/Core/Particle.js

@@ -210,10 +210,10 @@ class Particle {
         return (this.getRadius() ** 2 * Math.PI) / 2;
     }
     getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : (0, Utils_2.getHslFromAnimation)(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-            const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+            const backFactor = this.options.roll.mode === "both" ? 2 : 1, backSum = this.options.roll.mode === "horizontal" ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
             if (rolled) {
                 if (this.backColor) {
                     return this.backColor;

package/Core/Particles.d.ts

@@ -26,11 +26,11 @@ export declare class Particles {
     private readonly mover;
     constructor(engine: Engine, container: Container);
     init(): void;
-    redraw(): void;
+    redraw(): Promise<void>;
     removeAt(index: number, quantity?: number, group?: string, override?: boolean): void;
     remove(particle: Particle, group?: string, override?: boolean): void;
-    update(delta: IDelta): void;
-    draw(delta: IDelta): void;
+    update(delta: IDelta): Promise<void>;
+    draw(delta: IDelta): Promise<void>;
     clear(): void;
     push(nb: number, mouse?: IMouseData, overrideOptions?: RecursivePartial<IParticles>, group?: string): void;
     addParticle(position?: ICoordinates, overrideOptions?: RecursivePartial<IParticles>, group?: string): Particle | undefined;

package/Core/Particles.js

@@ -75,10 +75,10 @@ class Particles {
         }
         container.pathGenerator.init(container);
     }
-    redraw() {
+    async redraw() {
         this.clear();
         this.init();
-        this.draw({ value: 0, factor: 0 });
+        await this.draw({ value: 0, factor: 0 });
     }
     removeAt(index, quantity = 1, group, override) {
         if (!(index >= 0 && index <= this.count)) {
@@ -100,7 +100,7 @@ class Particles {
     remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
     }
-    update(delta) {
+    async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -134,23 +134,23 @@ class Particles {
         for (const particle of particlesToDelete) {
             this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
             for (const updater of this.updaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                this.interactionManager.particlesInteract(particle, delta);
+                await this.interactionManager.particlesInteract(particle, delta);
             }
         }
         delete container.canvas.resizeFactor;
     }
-    draw(delta) {
+    async draw(delta) {
         const container = this.container;
         container.canvas.clear();
         const canvasSize = this.container.canvas.size;
         this.quadTree = new Utils_1.QuadTree(new Utils_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
             this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
             this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;

package/Core/Utils/ExternalInteractorBase.d.ts

@@ -6,7 +6,7 @@ export declare abstract class ExternalInteractorBase implements IExternalInterac
     protected readonly container: Container;
     protected constructor(container: Container);
     type: InteractorType;
-    abstract interact(delta: IDelta): void;
+    abstract interact(delta: IDelta): Promise<void>;
     abstract isEnabled(): boolean;
     abstract reset(particle: Particle): void;
 }

package/Core/Utils/FrameManager.d.ts

@@ -2,5 +2,5 @@ import type { Container } from "../Container";
 export declare class FrameManager {
     private readonly container;
     constructor(container: Container);
-    nextFrame(timestamp: DOMHighResTimeStamp): void;
+    nextFrame(timestamp: DOMHighResTimeStamp): Promise<void>;
 }

package/Core/Utils/FrameManager.js

@@ -5,7 +5,7 @@ class FrameManager {
     constructor(container) {
         this.container = container;
     }
-    nextFrame(timestamp) {
+    async nextFrame(timestamp) {
         var _a;
         try {
             const container = this.container;
@@ -26,7 +26,7 @@ class FrameManager {
                 container.draw(false);
                 return;
             }
-            container.particles.draw(delta);
+            await container.particles.draw(delta);
             if (container.duration > 0 && container.lifeTime > container.duration) {
                 container.destroy();
                 return;

package/Core/Utils/InteractionManager.d.ts

@@ -9,6 +9,6 @@ export declare class InteractionManager {
     private particleInteractors;
     constructor(engine: Engine, container: Container);
     init(): void;
-    externalInteract(delta: IDelta): void;
-    particlesInteract(particle: Particle, delta: IDelta): void;
+    externalInteract(delta: IDelta): Promise<void>;
+    particlesInteract(particle: Particle, delta: IDelta): Promise<void>;
 }

package/Core/Utils/InteractionManager.js

@@ -37,20 +37,20 @@ class InteractionManager {
             }
         }
     }
-    externalInteract(delta) {
+    async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
             if (interactor.isEnabled()) {
-                interactor.interact(delta);
+                await interactor.interact(delta);
             }
         }
     }
-    particlesInteract(particle, delta) {
+    async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
             interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
             if (interactor.isEnabled(particle)) {
-                interactor.interact(particle, delta);
+                await interactor.interact(particle, delta);
             }
         }
     }

package/Core/Utils/ParticlesInteractorBase.d.ts

@@ -6,7 +6,7 @@ export declare abstract class ParticlesInteractorBase implements IParticlesInter
     protected readonly container: Container;
     protected constructor(container: Container);
     type: InteractorType;
-    abstract interact(particle: Particle, delta: IDelta): void;
+    abstract interact(particle: Particle, delta: IDelta): Promise<void>;
     abstract isEnabled(particle: Particle): boolean;
     abstract reset(particle: Particle): void;
 }

package/Interactions/External/Attract/Attractor.d.ts

@@ -4,7 +4,7 @@ export declare class Attractor extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
     reset(): void;
-    interact(): void;
+    interact(): Promise<void>;
     private hoverAttract;
     private processAttract;
     private clickAttract;

package/Interactions/External/Attract/Attractor.js

@@ -17,7 +17,7 @@ class Attractor extends Core_1.ExternalInteractorBase {
     }
     reset() {
     }
-    interact() {
+    async interact() {
         const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Core_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode;
         if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("attract", hoverMode)) {
             this.hoverAttract();

package/Interactions/External/Bounce/Bouncer.d.ts

@@ -3,7 +3,7 @@ import type { Container } from "../../../Core";
 export declare class Bouncer extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
-    interact(): void;
+    interact(): Promise<void>;
     reset(): void;
     private processMouseBounce;
     private singleSelectorBounce;

package/Interactions/External/Bounce/Bouncer.js

@@ -12,7 +12,7 @@ class Bouncer extends Core_1.ExternalInteractorBase {
         return ((mouse.position && events.onHover.enable && (0, Utils_1.isInArray)("bounce", events.onHover.mode)) ||
             (0, Utils_1.isDivModeEnabled)("bounce", divs));
     }
-    interact() {
+    async interact() {
         const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === Core_1.Constants.mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
         if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("bounce", hoverMode)) {
             this.processMouseBounce();

package/Interactions/External/Bubble/Bubbler.d.ts

@@ -5,7 +5,7 @@ export declare class Bubbler extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
     reset(particle: Particle, force?: boolean): void;
-    interact(): void;
+    interact(): Promise<void>;
     private singleSelectorHover;
     private process;
     private clickBubble;

package/Interactions/External/Bubble/Bubbler.js

@@ -35,7 +35,7 @@ class Bubbler extends Core_1.ExternalInteractorBase {
         delete particle.bubble.radius;
         delete particle.bubble.color;
     }
-    interact() {
+    async interact() {
         const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
         if (hoverEnabled && (0, Utils_1.isInArray)("bubble", hoverMode)) {
             this.hoverBubble();

package/Interactions/External/Connect/Connector.d.ts

@@ -4,5 +4,5 @@ export declare class Connector extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
     reset(): void;
-    interact(): void;
+    interact(): Promise<void>;
 }

package/Interactions/External/Connect/Connector.js

@@ -16,7 +16,7 @@ class Connector extends Core_1.ExternalInteractorBase {
     }
     reset() {
     }
-    interact() {
+    async interact() {
         const container = this.container, options = container.actualOptions;
         if (options.interactivity.events.onHover.enable && container.interactivity.status === "mousemove") {
             const mousePos = container.interactivity.mouse.position;

package/Interactions/External/Grab/Grabber.d.ts

@@ -4,5 +4,5 @@ export declare class Grabber extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
     reset(): void;
-    interact(): void;
+    interact(): Promise<void>;
 }

package/Interactions/External/Grab/Grabber.js

@@ -13,7 +13,7 @@ class Grabber extends Core_1.ExternalInteractorBase {
     }
     reset() {
     }
-    interact() {
+    async interact() {
         var _a;
         const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
         if (interactivity.events.onHover.enable && container.interactivity.status === Core_1.Constants.mouseMoveEvent) {

package/Interactions/External/Repulse/Repulser.d.ts

@@ -4,7 +4,7 @@ export declare class Repulser extends ExternalInteractorBase {
     constructor(container: Container);
     isEnabled(): boolean;
     reset(): void;
-    interact(): void;
+    interact(): Promise<void>;
     private singleSelectorRepulse;
     private hoverRepulse;
     private processRepulse;

package/Interactions/External/Repulse/Repulser.js

@@ -17,7 +17,7 @@ class Repulser extends Core_1.ExternalInteractorBase {
     }
     reset() {
     }
-    interact() {
+    async interact() {
         const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Core_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode, divs = events.onDiv;
         if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("repulse", hoverMode)) {
             this.hoverRepulse();

package/Interactions/External/Trail/TrailMaker.d.ts

@@ -4,7 +4,7 @@ export declare class TrailMaker extends ExternalInteractorBase {
     private delay;
     private lastPosition?;
     constructor(container: Container);
-    interact(delta: IDelta): void;
+    interact(delta: IDelta): Promise<void>;
     isEnabled(): boolean;
     reset(): void;
 }

package/Interactions/External/Trail/TrailMaker.js

@@ -8,7 +8,7 @@ class TrailMaker extends Core_1.ExternalInteractorBase {
         super(container);
         this.delay = 0;
     }
-    interact(delta) {
+    async interact(delta) {
         var _a, _b, _c, _d;
         if (!this.container.retina.reduceFactor) {
             return;

package/Interactions/Particles/Attract/Attractor.d.ts

@@ -2,7 +2,7 @@ import type { Container, IParticle, Particle } from "../../../Core";
 import { ParticlesInteractorBase } from "../../../Core";
 export declare class Attractor extends ParticlesInteractorBase {
     constructor(container: Container);
-    interact(p1: IParticle): void;
+    interact(p1: IParticle): Promise<void>;
     isEnabled(particle: Particle): boolean;
     reset(): void;
 }

package/Interactions/Particles/Attract/Attractor.js

@@ -7,7 +7,7 @@ class Attractor extends Core_1.ParticlesInteractorBase {
     constructor(container) {
         super(container);
     }
-    interact(p1) {
+    async interact(p1) {
         var _a;
         const container = this.container, distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
         for (const p2 of query) {

package/Interactions/Particles/Collisions/Collider.d.ts

@@ -4,7 +4,7 @@ export declare class Collider extends ParticlesInteractorBase {
     constructor(container: Container);
     isEnabled(particle: Particle): boolean;
     reset(): void;
-    interact(p1: Particle): void;
+    interact(p1: Particle): Promise<void>;
     private resolveCollision;
     private absorb;
 }

package/Interactions/Particles/Collisions/Collider.js

@@ -34,7 +34,7 @@ class Collider extends Core_1.ParticlesInteractorBase {
     }
     reset() {
     }
-    interact(p1) {
+    async interact(p1) {
         const container = this.container;
         const pos1 = p1.getPosition();
         const radius1 = p1.getRadius();

package/Interactions/Particles/Links/Linker.d.ts

@@ -5,6 +5,6 @@ export declare class Linker extends ParticlesInteractorBase {
     constructor(container: Container);
     isEnabled(particle: Particle): boolean;
     reset(): void;
-    interact(p1: LinkParticle): void;
+    interact(p1: LinkParticle): Promise<void>;
     private setColor;
 }

package/Interactions/Particles/Links/Linker.js

@@ -40,7 +40,7 @@ class Linker extends Core_1.ParticlesInteractorBase {
     }
     reset() {
     }
-    interact(p1) {
+    async interact(p1) {
         var _a;
         p1.links = [];
         const pos1 = p1.getPosition();

package/Plugins/PolygonMask/PolygonMaskInstance.js

@@ -35,7 +35,7 @@ class PolygonMaskInstance {
         }
         this.redrawTimeout = window.setTimeout(async () => {
             await this.initRawData(true);
-            container.particles.redraw();
+            await container.particles.redraw();
         }, 250);
     }
     stop() {

package/Updaters/Opacity/OpacityUpdater.js

@@ -23,9 +23,9 @@ function updateOpacity(particle, delta) {
     }
     const minValue = particle.opacity.min;
     const maxValue = particle.opacity.max;
-    if (!(!particle.destroyed &&
-        particle.opacity.enable &&
-        (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0)))) {
+    if (particle.destroyed ||
+        !particle.opacity.enable ||
+        (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) > 0 && ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) > ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0))) {
         return;
     }
     switch (particle.opacity.status) {
@@ -102,12 +102,14 @@ class OpacityUpdater {
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         return (!particle.destroyed &&
             !particle.spawning &&
             !!particle.opacity &&
             particle.opacity.enable &&
-            (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0)));
+            (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 ||
+                (((_b = particle.opacity.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 &&
+                    ((_c = particle.opacity.loops) !== null && _c !== void 0 ? _c : 0) < ((_d = particle.opacity.maxLoops) !== null && _d !== void 0 ? _d : 0))));
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/Updaters/Size/SizeUpdater.js

@@ -21,9 +21,9 @@ function updateSize(particle, delta) {
     const sizeVelocity = ((_a = particle.size.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
     const minValue = particle.size.min;
     const maxValue = particle.size.max;
-    if (!(!particle.destroyed &&
-        particle.size.enable &&
-        (((_b = particle.size.loops) !== null && _b !== void 0 ? _b : 0) <= 0 || ((_c = particle.size.loops) !== null && _c !== void 0 ? _c : 0) < ((_d = particle.size.maxLoops) !== null && _d !== void 0 ? _d : 0)))) {
+    if (particle.destroyed ||
+        !particle.size.enable ||
+        (((_b = particle.size.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 && ((_c = particle.size.loops) !== null && _c !== void 0 ? _c : 0) > ((_d = particle.size.maxLoops) !== null && _d !== void 0 ? _d : 0))) {
         return;
     }
     switch (particle.size.status) {
@@ -60,11 +60,12 @@ class SizeUpdater {
     init() {
     }
     isEnabled(particle) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         return (!particle.destroyed &&
             !particle.spawning &&
             particle.size.enable &&
-            (((_a = particle.size.loops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.size.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.size.maxLoops) !== null && _c !== void 0 ? _c : 0)));
+            (((_a = particle.size.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 ||
+                (((_b = particle.size.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 && ((_c = particle.size.loops) !== null && _c !== void 0 ? _c : 0) < ((_d = particle.size.maxLoops) !== null && _d !== void 0 ? _d : 0))));
     }
     update(particle, delta) {
         if (!this.isEnabled(particle)) {

package/browser/Core/Container.js

@@ -146,12 +146,12 @@ export class Container {
      */
     draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp) => {
+        this.drawAnimationFrame = animate()(async (timestamp) => {
             if (refreshTime) {
                 this.lastFrameTime = undefined;
                 refreshTime = false;
             }
-            this.drawer.nextFrame(timestamp);
+            await this.drawer.nextFrame(timestamp);
         });
     }
     /**

package/browser/Core/Interfaces/IExternalInteractor.d.ts

@@ -5,5 +5,5 @@ import type { IInteractor } from "./IInteractor";
  */
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
-    interact(delta: IDelta): void;
+    interact(delta: IDelta): Promise<void>;
 }

package/browser/Core/Interfaces/IParticlesInteractor.d.ts

@@ -6,5 +6,5 @@ import type { Particle } from "../Particle";
  */
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
-    interact(particle: Particle, delta: IDelta): void;
+    interact(particle: Particle, delta: IDelta): Promise<void>;
 }

package/browser/Core/Particle.js

@@ -216,10 +216,10 @@ export class Particle {
         return (this.getRadius() ** 2 * Math.PI) / 2;
     }
     getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-            const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+            const backFactor = this.options.roll.mode === "both" /* both */ ? 2 : 1, backSum = this.options.roll.mode === "horizontal" /* horizontal */ ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
             if (rolled) {
                 if (this.backColor) {
                     return this.backColor;

package/browser/Core/Particles.d.ts

@@ -36,11 +36,11 @@ export declare class Particles {
     private readonly mover;
     constructor(engine: Engine, container: Container);
     init(): void;
-    redraw(): void;
+    redraw(): Promise<void>;
     removeAt(index: number, quantity?: number, group?: string, override?: boolean): void;
     remove(particle: Particle, group?: string, override?: boolean): void;
-    update(delta: IDelta): void;
-    draw(delta: IDelta): void;
+    update(delta: IDelta): Promise<void>;
+    draw(delta: IDelta): Promise<void>;
     /**
      * Removes all particles from the array
      */

package/browser/Core/Particles.js

@@ -77,10 +77,10 @@ export class Particles {
         }
         container.pathGenerator.init(container);
     }
-    redraw() {
+    async redraw() {
         this.clear();
         this.init();
-        this.draw({ value: 0, factor: 0 });
+        await this.draw({ value: 0, factor: 0 });
     }
     removeAt(index, quantity = 1, group, override) {
         if (!(index >= 0 && index <= this.count)) {
@@ -102,7 +102,7 @@ export class Particles {
     remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
     }
-    update(delta) {
+    async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -144,26 +144,26 @@ export class Particles {
         for (const particle of particlesToDelete) {
             this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         // this loop is required to be done after mouse interactions
         for (const particle of container.particles.array) {
             for (const updater of this.updaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                this.interactionManager.particlesInteract(particle, delta);
+                await this.interactionManager.particlesInteract(particle, delta);
             }
         }
         delete container.canvas.resizeFactor;
     }
-    draw(delta) {
+    async draw(delta) {
         const container = this.container;
         /* clear canvas */
         container.canvas.clear();
         const canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
         /* update each particles param */
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
             this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
             this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;

package/browser/Core/Utils/ExternalInteractorBase.d.ts

@@ -6,7 +6,7 @@ export declare abstract class ExternalInteractorBase implements IExternalInterac
     protected readonly container: Container;
     protected constructor(container: Container);
     type: InteractorType;
-    abstract interact(delta: IDelta): void;
+    abstract interact(delta: IDelta): Promise<void>;
     abstract isEnabled(): boolean;
     abstract reset(particle: Particle): void;
 }

package/browser/Core/Utils/FrameManager.d.ts

@@ -10,5 +10,5 @@ export declare class FrameManager {
      * limiting it if it's needed by the current configuration
      * @param timestamp
      */
-    nextFrame(timestamp: DOMHighResTimeStamp): void;
+    nextFrame(timestamp: DOMHighResTimeStamp): Promise<void>;
 }

package/browser/Core/Utils/FrameManager.js

@@ -10,7 +10,7 @@ export class FrameManager {
      * limiting it if it's needed by the current configuration
      * @param timestamp
      */
-    nextFrame(timestamp) {
+    async nextFrame(timestamp) {
         var _a;
         try {
             const container = this.container;
@@ -32,7 +32,7 @@ export class FrameManager {
                 container.draw(false);
                 return;
             }
-            container.particles.draw(delta);
+            await container.particles.draw(delta);
             if (container.duration > 0 && container.lifeTime > container.duration) {
                 container.destroy();
                 return;

package/browser/Core/Utils/InteractionManager.d.ts

@@ -12,6 +12,6 @@ export declare class InteractionManager {
     private particleInteractors;
     constructor(engine: Engine, container: Container);
     init(): void;
-    externalInteract(delta: IDelta): void;
-    particlesInteract(particle: Particle, delta: IDelta): void;
+    externalInteract(delta: IDelta): Promise<void>;
+    particlesInteract(particle: Particle, delta: IDelta): Promise<void>;
 }