canvasparticles-js 4.1.2 → 4.1.4

package/dist/index.cjs

@@ -2,8 +2,26 @@
 
 // Copyright (c) 2022–2025 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
+const TWO_PI = 2 * Math.PI;
+/** Extremely fast, simple 32‑bit PRNG */
+function Mulberry32(seed) {
+    let state = seed >>> 0;
+    return {
+        next() {
+            let t = (state + 0x6d2b79f5) | 0;
+            state = t;
+            t = Math.imul(t ^ (t >>> 15), t | 1);
+            t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        },
+    };
+}
+// Mulberry32 is ±388% faster than Math.random()
+// Benchmark: https://jsbm.dev/muLCWR9RJCbmy
+// Spectral test: /demo/mulberry32.html
+const prng = Mulberry32(Math.random() * 2 ** 32).next;
 class CanvasParticles {
-    static version = "4.1.2";
+    static version = "4.1.4";
     /** Defines mouse interaction types with the particles */
     static interactionType = Object.freeze({
         NONE: 0, // No mouse interaction
@@ -38,9 +56,11 @@ class CanvasParticles {
     });
     canvas;
     ctx;
+    lastAnimationFrame = 0;
     enableAnimating = false;
     isAnimating = false;
     particles = [];
+    particleCount = 0;
     clientX = Infinity;
     clientY = Infinity;
     mouseX = Infinity;
@@ -49,10 +69,8 @@ class CanvasParticles {
     height;
     offX;
     offY;
-    updateCount;
-    particleCount;
     option;
-    color = { hex: '000000', alpha: 0.0 }; // Overwritten on initialization
+    color;
     /**
      * Initialize a CanvasParticles instance
      * @param selector - Canvas element or CSS selector
@@ -87,8 +105,8 @@ class CanvasParticles {
         this.handleScroll = this.handleScroll.bind(this);
         this.updateCanvasRect();
         this.resizeCanvas();
-        window.addEventListener('mousemove', this.handleMouseMove);
-        window.addEventListener('scroll', this.handleScroll);
+        window.addEventListener('mousemove', this.handleMouseMove, { passive: true });
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
     }
     /* @public Update the canvas bounding rectangle and mouse position relative to it */
     updateCanvasRect() {
@@ -125,7 +143,6 @@ class CanvasParticles {
         // Hide the mouse when resizing because it must be outside the viewport to do so
         this.mouseX = Infinity;
         this.mouseY = Infinity;
-        this.updateCount = Infinity;
         this.width = Math.max(width + this.option.particles.connectDist * 2, 1);
         this.height = Math.max(height + this.option.particles.connectDist * 2, 1);
         this.offX = (width - this.width) / 2;
@@ -163,8 +180,8 @@ class CanvasParticles {
     }
     /** @public Create a new particle with optional parameters */
     createParticle(posX, posY, dir, speed, size) {
-        posX = typeof posX === 'number' ? posX - this.offX : Math.random() * this.width;
-        posY = typeof posY === 'number' ? posY - this.offY : Math.random() * this.height;
+        posX = typeof posX === 'number' ? posX - this.offX : prng() * this.width;
+        posY = typeof posY === 'number' ? posY - this.offY : prng() * this.height;
         const particle = {
             posX, // Logical position in pixels
             posY, // Logical position in pixels
@@ -174,9 +191,9 @@ class CanvasParticles {
             velY: 0, // Vertical speed in pixels per update
             offX: 0, // Horizontal distance from drawn to logical position in pixels
             offY: 0, // Vertical distance from drawn to logical position in pixels
-            dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
-            speed: speed || (0.5 + Math.random() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
-            size: size || (0.5 + Math.random() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
+            dir: dir || prng() * TWO_PI, // Direction in radians
+            speed: speed || (0.5 + prng() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
+            size: size || (0.5 + prng() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
             gridPos: { x: 1, y: 1 },
             isVisible: false,
         };
@@ -193,7 +210,7 @@ class CanvasParticles {
             left: -particle.size,
         };
     }
-    /** @private Apply gravity forces between particles once every `options.framesPerUpdate` frames */
+    /** @private Apply gravity forces between particles */
     #updateGravity() {
         const isRepulsiveEnabled = this.option.gravity.repulsive !== 0;
         const isPullingEnabled = this.option.gravity.pulling !== 0;
@@ -243,13 +260,12 @@ class CanvasParticles {
             }
         }
     }
-    /** @private Update positions, directions, and visibility of all particles once every `options.framesPerUpdate` frames */
+    /** @private Update positions, directions, and visibility of all particles */
     #updateParticles() {
         for (let particle of this.particles) {
             // Randomly perturb direction
             particle.dir =
-                (particle.dir + Math.random() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) %
-                    (2 * Math.PI);
+                (particle.dir + prng() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) % TWO_PI;
             particle.velX *= this.option.gravity.friction;
             particle.velY *= this.option.gravity.friction;
             particle.posX =
@@ -326,7 +342,7 @@ class CanvasParticles {
             if (particle.size > 1) {
                 // Draw circle
                 this.ctx.beginPath();
-                this.ctx.arc(particle.x, particle.y, particle.size, 0, 2 * Math.PI);
+                this.ctx.arc(particle.x, particle.y, particle.size, 0, TWO_PI);
                 this.ctx.fill();
                 this.ctx.closePath();
             }
@@ -393,12 +409,9 @@ class CanvasParticles {
         if (!this.isAnimating)
             return;
         requestAnimationFrame(() => this.#animation());
-        if (++this.updateCount >= this.option.framesPerUpdate) {
-            this.updateCount = 0;
-            this.#updateGravity();
-            this.#updateParticles();
-            this.#render();
-        }
+        this.#updateGravity();
+        this.#updateParticles();
+        this.#render();
     }
     /** @public Start the particle animation if it was not running before */
     start({ auto = false } = {}) {
@@ -419,7 +432,7 @@ class CanvasParticles {
             this.enableAnimating = false;
         this.isAnimating = false;
         if (clear !== false)
-            this.canvas.width = this.canvas.width;
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         return true;
     }
     /** @public Gracefully destroy the instance and remove the canvas element */
@@ -442,7 +455,6 @@ class CanvasParticles {
         // Format and parse all options
         this.option = {
             background: options.background ?? false,
-            framesPerUpdate: parseNumericOption(options.framesPerUpdate, 1, { min: 1 }),
             animation: {
                 startOnEnter: !!(options.animation?.startOnEnter ?? true),
                 stopOnLeave: !!(options.animation?.stopOnLeave ?? true),
@@ -495,18 +507,22 @@ class CanvasParticles {
         this.ctx.fillStyle = color;
         // Check if `ctx.fillStyle` is in hex format ("#RRGGBB")
         if (String(this.ctx.fillStyle)[0] === '#') {
-            this.color.hex = String(this.ctx.fillStyle);
-            this.color.alpha = 1.0;
+            this.color = {
+                hex: String(this.ctx.fillStyle),
+                alpha: 1.0,
+            };
         }
         else {
             // JavaScript's `ctx.fillStyle` causes the color to otherwise end up in in rgba format ("rgba(136, 244, 255, 0.25)")
             // Extract the alpha value from the rgba string
             let alpha = String(this.ctx.fillStyle).split(',').at(-1); // ' 0.25)'
             alpha = alpha?.slice(1, -1) ?? '1'; // '0.25'
-            this.color.alpha = isNaN(+alpha) ? 1 : +alpha; // 0.25 or 1
             // Extracts e.g. 136, 244 and 255 from rgba(136, 244, 255, 0.25) and converts it to '#rrggbb'
             this.ctx.fillStyle = String(this.ctx.fillStyle).split(',').slice(0, -1).join(',') + ', 1)';
-            this.color.hex = this.ctx.fillStyle;
+            this.color = {
+                hex: String(this.ctx.fillStyle),
+                alpha: isNaN(+alpha) ? 1 : +alpha,
+            }; // 0.25 or 1
         }
     }
 }

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import type { CanvasParticlesCanvas, Particle } from './types';
+import type { CanvasParticlesCanvas, Particle, ContextColor } from './types';
 import type { CanvasParticlesOptions, CanvasParticlesOptionsInput } from './types/options';
 export default class CanvasParticles {
     #private;
-    static version: string;
+    static readonly version: string;
     /** Defines mouse interaction types with the particles */
     static interactionType: Readonly<{
         NONE: 0;
@@ -10,13 +10,15 @@ export default class CanvasParticles {
         MOVE: 2;
     }>;
     /** Observes canvas elements entering or leaving the viewport to start/stop animation */
-    static canvasIntersectionObserver: IntersectionObserver;
-    static canvasResizeObserver: ResizeObserver;
+    static readonly canvasIntersectionObserver: IntersectionObserver;
+    static readonly canvasResizeObserver: ResizeObserver;
     canvas: CanvasParticlesCanvas;
     private ctx;
+    private lastAnimationFrame;
     enableAnimating: boolean;
     isAnimating: boolean;
     particles: Particle[];
+    particleCount: number;
     private clientX;
     private clientY;
     mouseX: number;
@@ -25,10 +27,8 @@ export default class CanvasParticles {
     height: number;
     private offX;
     private offY;
-    private updateCount;
-    particleCount: number;
     option: CanvasParticlesOptions;
-    private color;
+    color: ContextColor;
     /**
      * Initialize a CanvasParticles instance
      * @param selector - Canvas element or CSS selector

package/dist/index.mjs

@@ -1,7 +1,25 @@
 // Copyright (c) 2022–2025 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
+const TWO_PI = 2 * Math.PI;
+/** Extremely fast, simple 32‑bit PRNG */
+function Mulberry32(seed) {
+    let state = seed >>> 0;
+    return {
+        next() {
+            let t = (state + 0x6d2b79f5) | 0;
+            state = t;
+            t = Math.imul(t ^ (t >>> 15), t | 1);
+            t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        },
+    };
+}
+// Mulberry32 is ±388% faster than Math.random()
+// Benchmark: https://jsbm.dev/muLCWR9RJCbmy
+// Spectral test: /demo/mulberry32.html
+const prng = Mulberry32(Math.random() * 2 ** 32).next;
 class CanvasParticles {
-    static version = "4.1.2";
+    static version = "4.1.4";
     /** Defines mouse interaction types with the particles */
     static interactionType = Object.freeze({
         NONE: 0, // No mouse interaction
@@ -36,9 +54,11 @@ class CanvasParticles {
     });
     canvas;
     ctx;
+    lastAnimationFrame = 0;
     enableAnimating = false;
     isAnimating = false;
     particles = [];
+    particleCount = 0;
     clientX = Infinity;
     clientY = Infinity;
     mouseX = Infinity;
@@ -47,10 +67,8 @@ class CanvasParticles {
     height;
     offX;
     offY;
-    updateCount;
-    particleCount;
     option;
-    color = { hex: '000000', alpha: 0.0 }; // Overwritten on initialization
+    color;
     /**
      * Initialize a CanvasParticles instance
      * @param selector - Canvas element or CSS selector
@@ -85,8 +103,8 @@ class CanvasParticles {
         this.handleScroll = this.handleScroll.bind(this);
         this.updateCanvasRect();
         this.resizeCanvas();
-        window.addEventListener('mousemove', this.handleMouseMove);
-        window.addEventListener('scroll', this.handleScroll);
+        window.addEventListener('mousemove', this.handleMouseMove, { passive: true });
+        window.addEventListener('scroll', this.handleScroll, { passive: true });
     }
     /* @public Update the canvas bounding rectangle and mouse position relative to it */
     updateCanvasRect() {
@@ -123,7 +141,6 @@ class CanvasParticles {
         // Hide the mouse when resizing because it must be outside the viewport to do so
         this.mouseX = Infinity;
         this.mouseY = Infinity;
-        this.updateCount = Infinity;
         this.width = Math.max(width + this.option.particles.connectDist * 2, 1);
         this.height = Math.max(height + this.option.particles.connectDist * 2, 1);
         this.offX = (width - this.width) / 2;
@@ -161,8 +178,8 @@ class CanvasParticles {
     }
     /** @public Create a new particle with optional parameters */
     createParticle(posX, posY, dir, speed, size) {
-        posX = typeof posX === 'number' ? posX - this.offX : Math.random() * this.width;
-        posY = typeof posY === 'number' ? posY - this.offY : Math.random() * this.height;
+        posX = typeof posX === 'number' ? posX - this.offX : prng() * this.width;
+        posY = typeof posY === 'number' ? posY - this.offY : prng() * this.height;
         const particle = {
             posX, // Logical position in pixels
             posY, // Logical position in pixels
@@ -172,9 +189,9 @@ class CanvasParticles {
             velY: 0, // Vertical speed in pixels per update
             offX: 0, // Horizontal distance from drawn to logical position in pixels
             offY: 0, // Vertical distance from drawn to logical position in pixels
-            dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
-            speed: speed || (0.5 + Math.random() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
-            size: size || (0.5 + Math.random() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
+            dir: dir || prng() * TWO_PI, // Direction in radians
+            speed: speed || (0.5 + prng() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
+            size: size || (0.5 + prng() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
             gridPos: { x: 1, y: 1 },
             isVisible: false,
         };
@@ -191,7 +208,7 @@ class CanvasParticles {
             left: -particle.size,
         };
     }
-    /** @private Apply gravity forces between particles once every `options.framesPerUpdate` frames */
+    /** @private Apply gravity forces between particles */
     #updateGravity() {
         const isRepulsiveEnabled = this.option.gravity.repulsive !== 0;
         const isPullingEnabled = this.option.gravity.pulling !== 0;
@@ -241,13 +258,12 @@ class CanvasParticles {
             }
         }
     }
-    /** @private Update positions, directions, and visibility of all particles once every `options.framesPerUpdate` frames */
+    /** @private Update positions, directions, and visibility of all particles */
     #updateParticles() {
         for (let particle of this.particles) {
             // Randomly perturb direction
             particle.dir =
-                (particle.dir + Math.random() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) %
-                    (2 * Math.PI);
+                (particle.dir + prng() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) % TWO_PI;
             particle.velX *= this.option.gravity.friction;
             particle.velY *= this.option.gravity.friction;
             particle.posX =
@@ -324,7 +340,7 @@ class CanvasParticles {
             if (particle.size > 1) {
                 // Draw circle
                 this.ctx.beginPath();
-                this.ctx.arc(particle.x, particle.y, particle.size, 0, 2 * Math.PI);
+                this.ctx.arc(particle.x, particle.y, particle.size, 0, TWO_PI);
                 this.ctx.fill();
                 this.ctx.closePath();
             }
@@ -391,12 +407,9 @@ class CanvasParticles {
         if (!this.isAnimating)
             return;
         requestAnimationFrame(() => this.#animation());
-        if (++this.updateCount >= this.option.framesPerUpdate) {
-            this.updateCount = 0;
-            this.#updateGravity();
-            this.#updateParticles();
-            this.#render();
-        }
+        this.#updateGravity();
+        this.#updateParticles();
+        this.#render();
     }
     /** @public Start the particle animation if it was not running before */
     start({ auto = false } = {}) {
@@ -417,7 +430,7 @@ class CanvasParticles {
             this.enableAnimating = false;
         this.isAnimating = false;
         if (clear !== false)
-            this.canvas.width = this.canvas.width;
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         return true;
     }
     /** @public Gracefully destroy the instance and remove the canvas element */
@@ -440,7 +453,6 @@ class CanvasParticles {
         // Format and parse all options
         this.option = {
             background: options.background ?? false,
-            framesPerUpdate: parseNumericOption(options.framesPerUpdate, 1, { min: 1 }),
             animation: {
                 startOnEnter: !!(options.animation?.startOnEnter ?? true),
                 stopOnLeave: !!(options.animation?.stopOnLeave ?? true),
@@ -493,18 +505,22 @@ class CanvasParticles {
         this.ctx.fillStyle = color;
         // Check if `ctx.fillStyle` is in hex format ("#RRGGBB")
         if (String(this.ctx.fillStyle)[0] === '#') {
-            this.color.hex = String(this.ctx.fillStyle);
-            this.color.alpha = 1.0;
+            this.color = {
+                hex: String(this.ctx.fillStyle),
+                alpha: 1.0,
+            };
         }
         else {
             // JavaScript's `ctx.fillStyle` causes the color to otherwise end up in in rgba format ("rgba(136, 244, 255, 0.25)")
             // Extract the alpha value from the rgba string
             let alpha = String(this.ctx.fillStyle).split(',').at(-1); // ' 0.25)'
             alpha = alpha?.slice(1, -1) ?? '1'; // '0.25'
-            this.color.alpha = isNaN(+alpha) ? 1 : +alpha; // 0.25 or 1
             // Extracts e.g. 136, 244 and 255 from rgba(136, 244, 255, 0.25) and converts it to '#rrggbb'
             this.ctx.fillStyle = String(this.ctx.fillStyle).split(',').slice(0, -1).join(',') + ', 1)';
-            this.color.hex = this.ctx.fillStyle;
+            this.color = {
+                hex: String(this.ctx.fillStyle),
+                alpha: isNaN(+alpha) ? 1 : +alpha,
+            }; // 0.25 or 1
         }
     }
 }

package/dist/index.umd.js

@@ -1 +1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).CanvasParticles=i()}(this,function(){"use strict";class t{static version="4.1.2";static interactionType=Object.freeze({NONE:0,SHIFT:1,MOVE:2});static canvasIntersectionObserver=new IntersectionObserver(t=>{for(const i of t){const t=i.target,s=t.instance;if(!s.options?.animation)return;(t.inViewbox=i.isIntersecting)?s.options.animation?.startOnEnter&&s.start({auto:!0}):s.options.animation?.stopOnLeave&&s.stop({auto:!0,clear:!1})}});static canvasResizeObserver=new ResizeObserver(t=>{for(const i of t){i.target.instance.updateCanvasRect()}for(const i of t){i.target.instance.resizeCanvas()}});canvas;ctx;enableAnimating=!1;isAnimating=!1;particles=[];clientX=1/0;clientY=1/0;mouseX=1/0;mouseY=1/0;width;height;offX;offY;updateCount;particleCount;option;color={hex:"000000",alpha:0};constructor(i,s={}){let e;if(i instanceof HTMLCanvasElement)e=i;else{if("string"!=typeof i)throw new TypeError("selector is not a string and neither a HTMLCanvasElement itself");if(e=document.querySelector(i),!(e instanceof HTMLCanvasElement))throw new Error("selector does not point to a canvas")}this.canvas=e,this.canvas.instance=this,this.canvas.inViewbox=!0;const o=this.canvas.getContext("2d");if(!o)throw new Error("failed to get 2D context from canvas");this.ctx=o,this.options=s,t.canvasIntersectionObserver.observe(this.canvas),t.canvasResizeObserver.observe(this.canvas),this.resizeCanvas=this.resizeCanvas.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleScroll=this.handleScroll.bind(this),this.updateCanvasRect(),this.resizeCanvas(),window.addEventListener("mousemove",this.handleMouseMove),window.addEventListener("scroll",this.handleScroll)}updateCanvasRect(){const{top:t,left:i,width:s,height:e}=this.canvas.getBoundingClientRect();this.canvas.rect={top:t,left:i,width:s,height:e}}handleMouseMove(t){this.enableAnimating&&(this.clientX=t.clientX,this.clientY=t.clientY,this.isAnimating&&this.updateMousePos())}handleScroll(){this.enableAnimating&&(this.updateCanvasRect(),this.isAnimating&&this.updateMousePos())}updateMousePos(){const{top:t,left:i}=this.canvas.rect;this.mouseX=this.clientX-i,this.mouseY=this.clientY-t}resizeCanvas(){const t=this.canvas.width=this.canvas.rect.width,i=this.canvas.height=this.canvas.rect.height;this.mouseX=1/0,this.mouseY=1/0,this.updateCount=1/0,this.width=Math.max(t+2*this.option.particles.connectDist,1),this.height=Math.max(i+2*this.option.particles.connectDist,1),this.offX=(t-this.width)/2,this.offY=(i-this.height)/2,this.option.particles.regenerateOnResize||0===this.particles.length?this.newParticles():this.matchParticleCount({updateBounds:!0}),this.isAnimating&&this.#t()}#i(){const t=this.option.particles.ppm*this.width*this.height/1e6|0;if(this.particleCount=Math.min(this.option.particles.max,t),!isFinite(this.particleCount))throw new RangeError("number of particles must be finite. (options.particles.ppm)")}newParticles(){this.#i(),this.particles=[];for(let t=0;t<this.particleCount;t++)this.createParticle()}matchParticleCount({updateBounds:t=!1}={}){for(this.#i(),this.particles=this.particles.slice(0,this.particleCount),t&&this.particles.forEach(t=>this.#s(t));this.particleCount>this.particles.length;)this.createParticle()}createParticle(t,i,s,e,o){const n={posX:t="number"==typeof t?t-this.offX:Math.random()*this.width,posY:i="number"==typeof i?i-this.offY:Math.random()*this.height,x:t,y:i,velX:0,velY:0,offX:0,offY:0,dir:s||2*Math.random()*Math.PI,speed:e||(.5+.5*Math.random())*this.option.particles.relSpeed,size:o||(.5+Math.random()**5*2)*this.option.particles.relSize,gridPos:{x:1,y:1},isVisible:!1};this.#s(n),this.particles.push(n)}#s(t){t.bounds={top:-t.size,right:this.canvas.width+t.size,bottom:this.canvas.height+t.size,left:-t.size}}#e(){const t=0!==this.option.gravity.repulsive,i=0!==this.option.gravity.pulling;if(!t&&!i)return;const s=this.particleCount,e=this.option.particles.connectDist*this.option.gravity.repulsive,o=this.option.particles.connectDist*this.option.gravity.pulling,n=this.option.particles.connectDist/2,a=.1*this.option.particles.connectDist;for(let t=0;t<s;t++)for(let r=t+1;r<s;r++){const s=this.particles[t],h=this.particles[r],c=s.posX-h.posX,l=s.posY-h.posY,p=Math.sqrt(c*c+l*l);let d,u=1;if(p<n){d=Math.atan2(h.posY-s.posY,h.posX-s.posX),u=(1/p)**1.8;const t=Math.min(a,u*e),i=Math.cos(d)*t,o=Math.sin(d)*t;s.velX-=i,s.velY-=o,h.velX+=i,h.velY+=o}if(!i)continue;void 0===d&&(d=Math.atan2(h.posY-s.posY,h.posX-s.posX),u=(1/p)**1.8);const f=Math.min(a,u*o),v=Math.cos(d)*f,m=Math.sin(d)*f;s.velX+=v,s.velY+=m,h.velX-=v,h.velY-=m}}#o(){for(let i of this.particles){i.dir=(i.dir+Math.random()*this.option.particles.rotationSpeed*2-this.option.particles.rotationSpeed)%(2*Math.PI),i.velX*=this.option.gravity.friction,i.velY*=this.option.gravity.friction,i.posX=(i.posX+i.velX+Math.sin(i.dir)*i.speed%this.width+this.width)%this.width,i.posY=(i.posY+i.velY+Math.cos(i.dir)*i.speed%this.height+this.height)%this.height;const s=i.posX+this.offX-this.mouseX,e=i.posY+this.offY-this.mouseY;if(this.option.mouse.interactionType!==t.interactionType.NONE){const t=this.option.mouse.connectDist/Math.hypot(s,e);this.option.mouse.distRatio<t?(i.offX+=(t*s-s-i.offX)/4,i.offY+=(t*e-e-i.offY)/4):(i.offX-=i.offX/4,i.offY-=i.offY/4)}i.x=i.posX+i.offX,i.y=i.posY+i.offY,this.option.mouse.interactionType===t.interactionType.MOVE&&(i.posX=i.x,i.posY=i.y),i.x+=this.offX,i.y+=this.offY,i.gridPos=this.#n(i),i.isVisible=1===i.gridPos.x&&1===i.gridPos.y}}#n(t){return{x:+(t.x>=t.bounds.left)+ +(t.x>t.bounds.right),y:+(t.y>=t.bounds.top)+ +(t.y>t.bounds.bottom)}}#a(t,i){return!(!t.isVisible&&!i.isVisible)||!(t.gridPos.x===i.gridPos.x&&1!==t.gridPos.x||t.gridPos.y===i.gridPos.y&&1!==t.gridPos.y)}#r(){for(let t of this.particles)t.isVisible&&(t.size>1?(this.ctx.beginPath(),this.ctx.arc(t.x,t.y,t.size,0,2*Math.PI),this.ctx.fill(),this.ctx.closePath()):this.ctx.fillRect(t.x-t.size,t.y-t.size,2*t.size,2*t.size))}#h(){const t=this.particleCount,i=this.option.particles.connectDist,s=i>=Math.min(this.canvas.width,this.canvas.height),e=i*this.option.particles.maxWork,o=this.color.alpha,n=this.color.alpha*i;for(let a=0;a<t;a++){let r=0;for(let h=a+1;h<t;h++){const t=this.particles[a],c=this.particles[h];if(!s&&!this.#a(t,c))continue;const l=t.x-c.x,p=t.y-c.y,d=Math.sqrt(l*l+p*p);if(!(d>i)&&(this.ctx.globalAlpha=d>i/2?n/d-o:o,this.ctx.beginPath(),this.ctx.moveTo(t.x,t.y),this.ctx.lineTo(c.x,c.y),this.ctx.stroke(),(r+=d)>=e))break}}}#t(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.globalAlpha=this.color.alpha,this.ctx.fillStyle=this.color.hex,this.ctx.strokeStyle=this.color.hex,this.ctx.lineWidth=1,this.#r(),this.#h()}#c(){this.isAnimating&&(requestAnimationFrame(()=>this.#c()),++this.updateCount>=this.option.framesPerUpdate&&(this.updateCount=0,this.#e(),this.#o(),this.#t()))}start({auto:t=!1}={}){return this.isAnimating||t&&!this.enableAnimating||(this.enableAnimating=!0,this.isAnimating=!0,this.updateCanvasRect(),requestAnimationFrame(()=>this.#c())),!this.canvas.inViewbox&&this.option.animation.startOnEnter&&(this.isAnimating=!1),this}stop({auto:t=!1,clear:i=!0}={}){return t||(this.enableAnimating=!1),this.isAnimating=!1,!1!==i&&(this.canvas.width=this.canvas.width),!0}destroy(){this.stop(),t.canvasIntersectionObserver.unobserve(this.canvas),t.canvasResizeObserver.unobserve(this.canvas),window.removeEventListener("mousemove",this.handleMouseMove),window.removeEventListener("scroll",this.handleScroll),this.canvas?.remove(),Object.keys(this).forEach(t=>delete this[t])}set options(t){const i=(t,i,s)=>{const{min:e=-1/0,max:o=1/0}=s??{};return((t,i)=>isNaN(+t)?i:+t)(Math.min(Math.max(t??i,e),o),i)};this.option={background:t.background??!1,framesPerUpdate:i(t.framesPerUpdate,1,{min:1}),animation:{startOnEnter:!!(t.animation?.startOnEnter??1),stopOnLeave:!!(t.animation?.stopOnLeave??1)},mouse:{interactionType:i(t.mouse?.interactionType,1),connectDistMult:i(t.mouse?.connectDistMult,2/3),connectDist:1,distRatio:i(t.mouse?.distRatio,2/3)},particles:{regenerateOnResize:!!t.particles?.regenerateOnResize,color:t.particles?.color??"black",ppm:i(t.particles?.ppm,100),max:i(t.particles?.max,500),maxWork:i(t.particles?.maxWork,1/0,{min:0}),connectDist:i(t.particles?.connectDistance,150,{min:1}),relSpeed:i(t.particles?.relSpeed,1,{min:0}),relSize:i(t.particles?.relSize,1,{min:1}),rotationSpeed:i(t.particles?.rotationSpeed,2,{min:0})/100},gravity:{repulsive:i(t.gravity?.repulsive,0),pulling:i(t.gravity?.pulling,0),friction:i(t.gravity?.friction,.8,{min:0,max:1})}},this.setBackground(this.option.background),this.setMouseConnectDistMult(this.option.mouse.connectDistMult),this.setParticleColor(this.option.particles.color)}get options(){return this.option}setBackground(t){if(t){if("string"!=typeof t)throw new TypeError("background is not a string");this.canvas.style.background=this.option.background=t}}setMouseConnectDistMult(t){this.option.mouse.connectDist=this.option.particles.connectDist*(isNaN(t)?2/3:t)}setParticleColor(t){if(this.ctx.fillStyle=t,"#"===String(this.ctx.fillStyle)[0])this.color.hex=String(this.ctx.fillStyle),this.color.alpha=1;else{let t=String(this.ctx.fillStyle).split(",").at(-1);t=t?.slice(1,-1)??"1",this.color.alpha=isNaN(+t)?1:+t,this.ctx.fillStyle=String(this.ctx.fillStyle).split(",").slice(0,-1).join(",")+", 1)",this.color.hex=this.ctx.fillStyle}}}return t});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).CanvasParticles=i()}(this,function(){"use strict";const t=2*Math.PI;const i=function(t){let i=t>>>0;return{next(){let t=i+1831565813|0;return i=t,t=Math.imul(t^t>>>15,1|t),t^=t+Math.imul(t^t>>>7,61|t),((t^t>>>14)>>>0)/4294967296}}}(Math.random()*2**32).next;class s{static version="4.1.4";static interactionType=Object.freeze({NONE:0,SHIFT:1,MOVE:2});static canvasIntersectionObserver=new IntersectionObserver(t=>{for(const i of t){const t=i.target,s=t.instance;if(!s.options?.animation)return;(t.inViewbox=i.isIntersecting)?s.options.animation?.startOnEnter&&s.start({auto:!0}):s.options.animation?.stopOnLeave&&s.stop({auto:!0,clear:!1})}});static canvasResizeObserver=new ResizeObserver(t=>{for(const i of t){i.target.instance.updateCanvasRect()}for(const i of t){i.target.instance.resizeCanvas()}});canvas;ctx;lastAnimationFrame=0;enableAnimating=!1;isAnimating=!1;particles=[];particleCount=0;clientX=1/0;clientY=1/0;mouseX=1/0;mouseY=1/0;width;height;offX;offY;option;color;constructor(t,i={}){let e;if(t instanceof HTMLCanvasElement)e=t;else{if("string"!=typeof t)throw new TypeError("selector is not a string and neither a HTMLCanvasElement itself");if(e=document.querySelector(t),!(e instanceof HTMLCanvasElement))throw new Error("selector does not point to a canvas")}this.canvas=e,this.canvas.instance=this,this.canvas.inViewbox=!0;const n=this.canvas.getContext("2d");if(!n)throw new Error("failed to get 2D context from canvas");this.ctx=n,this.options=i,s.canvasIntersectionObserver.observe(this.canvas),s.canvasResizeObserver.observe(this.canvas),this.resizeCanvas=this.resizeCanvas.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleScroll=this.handleScroll.bind(this),this.updateCanvasRect(),this.resizeCanvas(),window.addEventListener("mousemove",this.handleMouseMove,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})}updateCanvasRect(){const{top:t,left:i,width:s,height:e}=this.canvas.getBoundingClientRect();this.canvas.rect={top:t,left:i,width:s,height:e}}handleMouseMove(t){this.enableAnimating&&(this.clientX=t.clientX,this.clientY=t.clientY,this.isAnimating&&this.updateMousePos())}handleScroll(){this.enableAnimating&&(this.updateCanvasRect(),this.isAnimating&&this.updateMousePos())}updateMousePos(){const{top:t,left:i}=this.canvas.rect;this.mouseX=this.clientX-i,this.mouseY=this.clientY-t}resizeCanvas(){const t=this.canvas.width=this.canvas.rect.width,i=this.canvas.height=this.canvas.rect.height;this.mouseX=1/0,this.mouseY=1/0,this.width=Math.max(t+2*this.option.particles.connectDist,1),this.height=Math.max(i+2*this.option.particles.connectDist,1),this.offX=(t-this.width)/2,this.offY=(i-this.height)/2,this.option.particles.regenerateOnResize||0===this.particles.length?this.newParticles():this.matchParticleCount({updateBounds:!0}),this.isAnimating&&this.#t()}#i(){const t=this.option.particles.ppm*this.width*this.height/1e6|0;if(this.particleCount=Math.min(this.option.particles.max,t),!isFinite(this.particleCount))throw new RangeError("number of particles must be finite. (options.particles.ppm)")}newParticles(){this.#i(),this.particles=[];for(let t=0;t<this.particleCount;t++)this.createParticle()}matchParticleCount({updateBounds:t=!1}={}){for(this.#i(),this.particles=this.particles.slice(0,this.particleCount),t&&this.particles.forEach(t=>this.#s(t));this.particleCount>this.particles.length;)this.createParticle()}createParticle(s,e,n,o,a){const r={posX:s="number"==typeof s?s-this.offX:i()*this.width,posY:e="number"==typeof e?e-this.offY:i()*this.height,x:s,y:e,velX:0,velY:0,offX:0,offY:0,dir:n||i()*t,speed:o||(.5+.5*i())*this.option.particles.relSpeed,size:a||(.5+i()**5*2)*this.option.particles.relSize,gridPos:{x:1,y:1},isVisible:!1};this.#s(r),this.particles.push(r)}#s(t){t.bounds={top:-t.size,right:this.canvas.width+t.size,bottom:this.canvas.height+t.size,left:-t.size}}#e(){const t=0!==this.option.gravity.repulsive,i=0!==this.option.gravity.pulling;if(!t&&!i)return;const s=this.particleCount,e=this.option.particles.connectDist*this.option.gravity.repulsive,n=this.option.particles.connectDist*this.option.gravity.pulling,o=this.option.particles.connectDist/2,a=.1*this.option.particles.connectDist;for(let t=0;t<s;t++)for(let r=t+1;r<s;r++){const s=this.particles[t],h=this.particles[r],c=s.posX-h.posX,l=s.posY-h.posY,p=Math.sqrt(c*c+l*l);let u,d=1;if(p<o){u=Math.atan2(h.posY-s.posY,h.posX-s.posX),d=(1/p)**1.8;const t=Math.min(a,d*e),i=Math.cos(u)*t,n=Math.sin(u)*t;s.velX-=i,s.velY-=n,h.velX+=i,h.velY+=n}if(!i)continue;void 0===u&&(u=Math.atan2(h.posY-s.posY,h.posX-s.posX),d=(1/p)**1.8);const f=Math.min(a,d*n),v=Math.cos(u)*f,m=Math.sin(u)*f;s.velX+=v,s.velY+=m,h.velX-=v,h.velY-=m}}#n(){for(let e of this.particles){e.dir=(e.dir+i()*this.option.particles.rotationSpeed*2-this.option.particles.rotationSpeed)%t,e.velX*=this.option.gravity.friction,e.velY*=this.option.gravity.friction,e.posX=(e.posX+e.velX+Math.sin(e.dir)*e.speed%this.width+this.width)%this.width,e.posY=(e.posY+e.velY+Math.cos(e.dir)*e.speed%this.height+this.height)%this.height;const n=e.posX+this.offX-this.mouseX,o=e.posY+this.offY-this.mouseY;if(this.option.mouse.interactionType!==s.interactionType.NONE){const t=this.option.mouse.connectDist/Math.hypot(n,o);this.option.mouse.distRatio<t?(e.offX+=(t*n-n-e.offX)/4,e.offY+=(t*o-o-e.offY)/4):(e.offX-=e.offX/4,e.offY-=e.offY/4)}e.x=e.posX+e.offX,e.y=e.posY+e.offY,this.option.mouse.interactionType===s.interactionType.MOVE&&(e.posX=e.x,e.posY=e.y),e.x+=this.offX,e.y+=this.offY,e.gridPos=this.#o(e),e.isVisible=1===e.gridPos.x&&1===e.gridPos.y}}#o(t){return{x:+(t.x>=t.bounds.left)+ +(t.x>t.bounds.right),y:+(t.y>=t.bounds.top)+ +(t.y>t.bounds.bottom)}}#a(t,i){return!(!t.isVisible&&!i.isVisible)||!(t.gridPos.x===i.gridPos.x&&1!==t.gridPos.x||t.gridPos.y===i.gridPos.y&&1!==t.gridPos.y)}#r(){for(let i of this.particles)i.isVisible&&(i.size>1?(this.ctx.beginPath(),this.ctx.arc(i.x,i.y,i.size,0,t),this.ctx.fill(),this.ctx.closePath()):this.ctx.fillRect(i.x-i.size,i.y-i.size,2*i.size,2*i.size))}#h(){const t=this.particleCount,i=this.option.particles.connectDist,s=i>=Math.min(this.canvas.width,this.canvas.height),e=i*this.option.particles.maxWork,n=this.color.alpha,o=this.color.alpha*i;for(let a=0;a<t;a++){let r=0;for(let h=a+1;h<t;h++){const t=this.particles[a],c=this.particles[h];if(!s&&!this.#a(t,c))continue;const l=t.x-c.x,p=t.y-c.y,u=Math.sqrt(l*l+p*p);if(!(u>i)&&(this.ctx.globalAlpha=u>i/2?o/u-n:n,this.ctx.beginPath(),this.ctx.moveTo(t.x,t.y),this.ctx.lineTo(c.x,c.y),this.ctx.stroke(),(r+=u)>=e))break}}}#t(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.globalAlpha=this.color.alpha,this.ctx.fillStyle=this.color.hex,this.ctx.strokeStyle=this.color.hex,this.ctx.lineWidth=1,this.#r(),this.#h()}#c(){this.isAnimating&&(requestAnimationFrame(()=>this.#c()),this.#e(),this.#n(),this.#t())}start({auto:t=!1}={}){return this.isAnimating||t&&!this.enableAnimating||(this.enableAnimating=!0,this.isAnimating=!0,this.updateCanvasRect(),requestAnimationFrame(()=>this.#c())),!this.canvas.inViewbox&&this.option.animation.startOnEnter&&(this.isAnimating=!1),this}stop({auto:t=!1,clear:i=!0}={}){return t||(this.enableAnimating=!1),this.isAnimating=!1,!1!==i&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),!0}destroy(){this.stop(),s.canvasIntersectionObserver.unobserve(this.canvas),s.canvasResizeObserver.unobserve(this.canvas),window.removeEventListener("mousemove",this.handleMouseMove),window.removeEventListener("scroll",this.handleScroll),this.canvas?.remove(),Object.keys(this).forEach(t=>delete this[t])}set options(t){const i=(t,i,s)=>{const{min:e=-1/0,max:n=1/0}=s??{};return((t,i)=>isNaN(+t)?i:+t)(Math.min(Math.max(t??i,e),n),i)};this.option={background:t.background??!1,animation:{startOnEnter:!!(t.animation?.startOnEnter??1),stopOnLeave:!!(t.animation?.stopOnLeave??1)},mouse:{interactionType:i(t.mouse?.interactionType,1),connectDistMult:i(t.mouse?.connectDistMult,2/3),connectDist:1,distRatio:i(t.mouse?.distRatio,2/3)},particles:{regenerateOnResize:!!t.particles?.regenerateOnResize,color:t.particles?.color??"black",ppm:i(t.particles?.ppm,100),max:i(t.particles?.max,500),maxWork:i(t.particles?.maxWork,1/0,{min:0}),connectDist:i(t.particles?.connectDistance,150,{min:1}),relSpeed:i(t.particles?.relSpeed,1,{min:0}),relSize:i(t.particles?.relSize,1,{min:1}),rotationSpeed:i(t.particles?.rotationSpeed,2,{min:0})/100},gravity:{repulsive:i(t.gravity?.repulsive,0),pulling:i(t.gravity?.pulling,0),friction:i(t.gravity?.friction,.8,{min:0,max:1})}},this.setBackground(this.option.background),this.setMouseConnectDistMult(this.option.mouse.connectDistMult),this.setParticleColor(this.option.particles.color)}get options(){return this.option}setBackground(t){if(t){if("string"!=typeof t)throw new TypeError("background is not a string");this.canvas.style.background=this.option.background=t}}setMouseConnectDistMult(t){this.option.mouse.connectDist=this.option.particles.connectDist*(isNaN(t)?2/3:t)}setParticleColor(t){if(this.ctx.fillStyle=t,"#"===String(this.ctx.fillStyle)[0])this.color={hex:String(this.ctx.fillStyle),alpha:1};else{let t=String(this.ctx.fillStyle).split(",").at(-1);t=t?.slice(1,-1)??"1",this.ctx.fillStyle=String(this.ctx.fillStyle).split(",").slice(0,-1).join(",")+", 1)",this.color={hex:String(this.ctx.fillStyle),alpha:isNaN(+t)?1:+t}}}}return s});

package/dist/types/options.d.ts

@@ -1,6 +1,5 @@
 export interface CanvasParticlesOptions {
     background: CSSStyleDeclaration['background'] | false;
-    framesPerUpdate: number;
     animation: {
         startOnEnter: boolean;
         stopOnLeave: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasparticles-js",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "In an HTML canvas, a bunch of interactive particles connected with lines when they approach each other.",
   "author": "Khoeckman",
   "license": "MIT",

package/src/index.ts

@@ -4,10 +4,32 @@
 import type { CanvasParticlesCanvas, Particle, ParticleGridPos, ContextColor } from './types'
 import type { CanvasParticlesOptions, CanvasParticlesOptionsInput } from './types/options'
 
+const TWO_PI = 2 * Math.PI
+
+/** Extremely fast, simple 32‑bit PRNG */
+function Mulberry32(seed: number) {
+  let state = seed >>> 0
+
+  return {
+    next() {
+      let t = (state + 0x6d2b79f5) | 0
+      state = t
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    },
+  }
+}
+
+// Mulberry32 is ±388% faster than Math.random()
+// Benchmark: https://jsbm.dev/muLCWR9RJCbmy
+// Spectral test: /demo/mulberry32.html
+const prng = Mulberry32(Math.random() * 2 ** 32).next
+
 declare const __VERSION__: string
 
 export default class CanvasParticles {
-  static version = __VERSION__
+  static readonly version = __VERSION__
 
   /** Defines mouse interaction types with the particles */
   static interactionType = Object.freeze({
@@ -17,7 +39,7 @@ export default class CanvasParticles {
   })
 
   /** Observes canvas elements entering or leaving the viewport to start/stop animation */
-  static canvasIntersectionObserver = new IntersectionObserver((entries) => {
+  static readonly canvasIntersectionObserver = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       const canvas = entry.target as CanvasParticlesCanvas
       const instance = canvas.instance // The CanvasParticles class instance bound to this canvas
@@ -30,7 +52,7 @@ export default class CanvasParticles {
     }
   })
 
-  static canvasResizeObserver = new ResizeObserver((entries) => {
+  static readonly canvasResizeObserver = new ResizeObserver((entries) => {
     // Seperate for loops is very important to prevent huge forced reflow overhead
 
     // First read all canvas rects at once
@@ -48,11 +70,13 @@ export default class CanvasParticles {
 
   canvas: CanvasParticlesCanvas
   private ctx: CanvasRenderingContext2D
+  private lastAnimationFrame: number = 0
 
   enableAnimating: boolean = false
   isAnimating: boolean = false
 
   particles: Particle[] = []
+  particleCount: number = 0
 
   private clientX: number = Infinity
   private clientY: number = Infinity
@@ -62,10 +86,8 @@ export default class CanvasParticles {
   height!: number
   private offX!: number
   private offY!: number
-  private updateCount!: number
-  particleCount!: number
   option!: CanvasParticlesOptions
-  private color: ContextColor = { hex: '000000', alpha: 0.0 } // Overwritten on initialization
+  color!: ContextColor
 
   /**
    * Initialize a CanvasParticles instance
@@ -106,8 +128,8 @@ export default class CanvasParticles {
     this.updateCanvasRect()
     this.resizeCanvas()
 
-    window.addEventListener('mousemove', this.handleMouseMove)
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('mousemove', this.handleMouseMove, { passive: true })
+    window.addEventListener('scroll', this.handleScroll, { passive: true })
   }
 
   /* @public Update the canvas bounding rectangle and mouse position relative to it */
@@ -149,7 +171,6 @@ export default class CanvasParticles {
     this.mouseX = Infinity
     this.mouseY = Infinity
 
-    this.updateCount = Infinity
     this.width = Math.max(width + this.option.particles.connectDist * 2, 1)
     this.height = Math.max(height + this.option.particles.connectDist * 2, 1)
     this.offX = (width - this.width) / 2
@@ -190,8 +211,8 @@ export default class CanvasParticles {
 
   /** @public Create a new particle with optional parameters */
   createParticle(posX?: number, posY?: number, dir?: number, speed?: number, size?: number) {
-    posX = typeof posX === 'number' ? posX - this.offX : Math.random() * this.width
-    posY = typeof posY === 'number' ? posY - this.offY : Math.random() * this.height
+    posX = typeof posX === 'number' ? posX - this.offX : prng() * this.width
+    posY = typeof posY === 'number' ? posY - this.offY : prng() * this.height
 
     const particle: Omit<Particle, 'bounds'> = {
       posX, // Logical position in pixels
@@ -202,9 +223,9 @@ export default class CanvasParticles {
       velY: 0, // Vertical speed in pixels per update
       offX: 0, // Horizontal distance from drawn to logical position in pixels
       offY: 0, // Vertical distance from drawn to logical position in pixels
-      dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
-      speed: speed || (0.5 + Math.random() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
-      size: size || (0.5 + Math.random() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
+      dir: dir || prng() * TWO_PI, // Direction in radians
+      speed: speed || (0.5 + prng() * 0.5) * this.option.particles.relSpeed, // Velocity in pixels per update
+      size: size || (0.5 + prng() ** 5 * 2) * this.option.particles.relSize, // Ray in pixels of the particle
       gridPos: { x: 1, y: 1 },
       isVisible: false,
     }
@@ -223,7 +244,7 @@ export default class CanvasParticles {
     }
   }
 
-  /** @private Apply gravity forces between particles once every `options.framesPerUpdate` frames */
+  /** @private Apply gravity forces between particles */
   #updateGravity() {
     const isRepulsiveEnabled = this.option.gravity.repulsive !== 0
     const isPullingEnabled = this.option.gravity.pulling !== 0
@@ -281,13 +302,12 @@ export default class CanvasParticles {
     }
   }
 
-  /** @private Update positions, directions, and visibility of all particles once every `options.framesPerUpdate` frames */
+  /** @private Update positions, directions, and visibility of all particles */
   #updateParticles() {
     for (let particle of this.particles) {
       // Randomly perturb direction
       particle.dir =
-        (particle.dir + Math.random() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) %
-        (2 * Math.PI)
+        (particle.dir + prng() * this.option.particles.rotationSpeed * 2 - this.option.particles.rotationSpeed) % TWO_PI
       particle.velX *= this.option.gravity.friction
       particle.velY *= this.option.gravity.friction
       particle.posX =
@@ -374,7 +394,7 @@ export default class CanvasParticles {
       if (particle.size > 1) {
         // Draw circle
         this.ctx.beginPath()
-        this.ctx.arc(particle.x, particle.y, particle.size, 0, 2 * Math.PI)
+        this.ctx.arc(particle.x, particle.y, particle.size, 0, TWO_PI)
         this.ctx.fill()
         this.ctx.closePath()
       } else {
@@ -451,12 +471,9 @@ export default class CanvasParticles {
 
     requestAnimationFrame(() => this.#animation())
 
-    if (++this.updateCount >= this.option.framesPerUpdate) {
-      this.updateCount = 0
-      this.#updateGravity()
-      this.#updateParticles()
-      this.#render()
-    }
+    this.#updateGravity()
+    this.#updateParticles()
+    this.#render()
   }
 
   /** @public Start the particle animation if it was not running before */
@@ -478,8 +495,7 @@ export default class CanvasParticles {
   stop({ auto = false, clear = true }: { auto?: boolean; clear?: boolean } = {}): boolean {
     if (!auto) this.enableAnimating = false
     this.isAnimating = false
-    if (clear !== false) this.canvas.width = this.canvas.width
-
+    if (clear !== false) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     return true
   }
 
@@ -514,7 +530,6 @@ export default class CanvasParticles {
     // Format and parse all options
     this.option = {
       background: options.background ?? false,
-      framesPerUpdate: parseNumericOption(options.framesPerUpdate, 1, { min: 1 }),
       animation: {
         startOnEnter: !!(options.animation?.startOnEnter ?? true),
         stopOnLeave: !!(options.animation?.stopOnLeave ?? true),
@@ -571,19 +586,24 @@ export default class CanvasParticles {
 
     // Check if `ctx.fillStyle` is in hex format ("#RRGGBB")
     if (String(this.ctx.fillStyle)[0] === '#') {
-      this.color.hex = String(this.ctx.fillStyle)
-      this.color.alpha = 1.0
+      this.color = {
+        hex: String(this.ctx.fillStyle),
+        alpha: 1.0,
+      }
     } else {
       // JavaScript's `ctx.fillStyle` causes the color to otherwise end up in in rgba format ("rgba(136, 244, 255, 0.25)")
 
       // Extract the alpha value from the rgba string
       let alpha = String(this.ctx.fillStyle).split(',').at(-1) // ' 0.25)'
       alpha = alpha?.slice(1, -1) ?? '1' // '0.25'
-      this.color.alpha = isNaN(+alpha) ? 1 : +alpha // 0.25 or 1
 
       // Extracts e.g. 136, 244 and 255 from rgba(136, 244, 255, 0.25) and converts it to '#rrggbb'
       this.ctx.fillStyle = String(this.ctx.fillStyle).split(',').slice(0, -1).join(',') + ', 1)'
-      this.color.hex = this.ctx.fillStyle
+
+      this.color = {
+        hex: String(this.ctx.fillStyle),
+        alpha: isNaN(+alpha) ? 1 : +alpha,
+      } // 0.25 or 1
     }
   }
 }

package/src/types/options.ts

@@ -1,6 +1,5 @@
 export interface CanvasParticlesOptions {
   background: CSSStyleDeclaration['background'] | false
-  framesPerUpdate: number
 
   animation: {
     startOnEnter: boolean