canvasparticles-js 4.4.9 → 4.5.0

package/dist/index.cjs

@@ -1,5 +1,22 @@
 'use strict';
 
+/** Helper functions for options parsing */
+function defaultIfNaN(value, defaultValue) {
+    return isNaN(+value) ? defaultValue : +value;
+}
+function parseNumericOption(name, value, defaultValue, clamp) {
+    if (value == undefined)
+        return defaultValue;
+    const { min = -Infinity, max = Infinity } = clamp ?? {};
+    if (value < min) {
+        console.warn(`option.${name} was clamped to ${min} as ${value} is too low`);
+    }
+    else if (value > max) {
+        console.warn(`option.${name} was clamped to ${max} as ${value} is too high`);
+    }
+    return defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue);
+}
+
 // Copyright (c) 2022–2026 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
 const TWO_PI = 2 * Math.PI;
@@ -22,7 +39,7 @@ function Mulberry32(seed) {
 const prng = Mulberry32(Math.random() * 4294967296).next;
 class CanvasParticles {
     /** Version of the library, injected via Rollup replace plugin. */
-    static version = "4.4.9";
+    static version = "4.5.0";
     static MAX_DT = 1000 / 30; // milliseconds between updates @ 30 FPS
     static BASE_DT = 1000 / 60; // milliseconds between updates @ 60 FPS
     /** Defines mouse interaction types with the particles */
@@ -37,7 +54,7 @@ class CanvasParticles {
         NEW: 1, // Generate all particles from scratch
         MATCH: 2, // Add or remove some particles to match the new count (default)
     });
-    /** Observes canvas elements entering or leaving the viewport to start/stop animation */
+    /** Observes when canvas elements enter or leave the viewport to start/stop animation */
     static canvasIntersectionObserver = new IntersectionObserver((entries) => {
         for (const entry of entries) {
             const canvas = entry.target;
@@ -52,6 +69,7 @@ class CanvasParticles {
     }, {
         rootMargin: '-1px',
     });
+    /** Observes when canvas elements change size */
     static canvasResizeObserver = new ResizeObserver((entries) => {
         // Seperate for loops is very important to prevent huge forced reflow overhead
         // First read all canvas rects at once
@@ -59,28 +77,15 @@ class CanvasParticles {
             const canvas = entry.target;
             canvas.instance.updateCanvasRect();
         }
+        // Cache to prevent fetching the dpr for every instance
+        const dpr = window.devicePixelRatio || 1;
         // Then resize all canvases at once
         for (const entry of entries) {
             const canvas = entry.target;
-            canvas.instance.#resizeCanvas();
+            canvas.instance.#resizeCanvas(dpr);
         }
     });
-    /** Helper functions for options parsing */
-    static defaultIfNaN(value, defaultValue) {
-        return isNaN(+value) ? defaultValue : +value;
-    }
-    static parseNumericOption(name, value, defaultValue, clamp) {
-        if (value == undefined)
-            return defaultValue;
-        const { min = -Infinity, max = Infinity } = clamp ?? {};
-        if (value < min) {
-            console.warn(new RangeError(`option.${name} was clamped to ${min} as ${value} is too low`));
-        }
-        else if (value > max) {
-            console.warn(new RangeError(`option.${name} was clamped to ${max} as ${value} is too high`));
-        }
-        return CanvasParticles.defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue);
-    }
+    static instances = new Set();
     canvas;
     ctx;
     enableAnimating = false;
@@ -92,6 +97,7 @@ class CanvasParticles {
     clientY = Infinity;
     mouseX = Infinity;
     mouseY = Infinity;
+    dpr = 1;
     width;
     height;
     offX;
@@ -124,15 +130,9 @@ class CanvasParticles {
             throw new Error('failed to get 2D context from canvas');
         this.ctx = ctx;
         this.options = options; // Uses setter
+        CanvasParticles.instances.add(this);
         CanvasParticles.canvasIntersectionObserver.observe(this.canvas);
         CanvasParticles.canvasResizeObserver.observe(this.canvas);
-        // Setup event handlers
-        this.resizeCanvas = this.resizeCanvas.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleScroll = this.handleScroll.bind(this);
-        this.resizeCanvas();
-        window.addEventListener('mousemove', this.handleMouseMove, { passive: true });
-        window.addEventListener('scroll', this.handleScroll, { passive: true });
     }
     updateCanvasRect() {
         const { top, left, width, height } = this.canvas.getBoundingClientRect();
@@ -161,11 +161,12 @@ class CanvasParticles {
         this.mouseY = this.clientY - top;
     }
     /** Resize the canvas and update particles accordingly */
-    #resizeCanvas() {
-        const dpr = window.devicePixelRatio || 1;
+    #resizeCanvas(dpr = window.devicePixelRatio || 1) {
         const width = (this.canvas.width = this.canvas.rect.width * dpr);
         const height = (this.canvas.height = this.canvas.rect.height * dpr);
-        this.ctx.scale(dpr, dpr);
+        // Must be set every time width or height changes because scale is removed
+        if (dpr !== 1)
+            this.ctx.scale(dpr, dpr);
         // Hide the mouse when resizing because it must be outside the viewport to do so
         this.mouseX = Infinity;
         this.mouseY = Infinity;
@@ -219,17 +220,17 @@ class CanvasParticles {
         if (this.hasManualParticles) {
             const pruned = [];
             let autoCount = 0;
-            // Keep manual particles while pruning automatic particles that exceed `particleCount`
-            // Only count automatic particles towards `particledCount`
             for (const particle of this.particles) {
+                // Keep manual particles
                 if (particle.isManual) {
                     pruned.push(particle);
                     continue;
                 }
-                if (autoCount >= particleCount)
-                    continue;
-                pruned.push(particle);
-                autoCount++;
+                // Only keep `autoCount` amount of automatic particles
+                if (autoCount < particleCount) {
+                    pruned.push(particle);
+                    autoCount++;
+                }
             }
             this.particles = pruned;
         }
@@ -740,16 +741,15 @@ class CanvasParticles {
     /** Gracefully destroy the instance and remove the canvas element */
     destroy() {
         this.stop();
+        CanvasParticles.instances.delete(this);
         CanvasParticles.canvasIntersectionObserver.unobserve(this.canvas);
         CanvasParticles.canvasResizeObserver.unobserve(this.canvas);
-        window.removeEventListener('mousemove', this.handleMouseMove);
-        window.removeEventListener('scroll', this.handleScroll);
         this.canvas?.remove();
         Object.keys(this).forEach((key) => delete this[key]); // Remove references to help GC
     }
     /** Set and validate options (https://github.com/Khoeckman/canvasParticles?tab=readme-ov-file#options) */
     set options(options) {
-        const pno = CanvasParticles.parseNumericOption;
+        const pno = parseNumericOption;
         // Format and parse all options
         this.option = {
             background: options.background ?? false,
@@ -759,7 +759,6 @@ class CanvasParticles {
             },
             mouse: {
                 interactionType: ~~pno('mouse.interactionType', options.mouse?.interactionType, CanvasParticles.interactionType.MOVE, { min: 0, max: 2 }),
-                connectDistMult: pno('mouse.connectDistMult', options.mouse?.connectDistMult, 2 / 3, { min: 0 }),
                 connectDist: 1 /* post processed */,
                 distRatio: pno('mouse.distRatio', options.mouse?.distRatio, 2 / 3, { min: 0 }),
             },
@@ -787,7 +786,7 @@ class CanvasParticles {
             },
         };
         this.setBackground(this.option.background);
-        this.setMouseConnectDistMult(this.option.mouse.connectDistMult);
+        this.setMouseConnectDistMult(options.mouse?.connectDistMult);
         this.setParticleColor(this.option.particles.color);
     }
     get options() {
@@ -803,7 +802,7 @@ class CanvasParticles {
     }
     /** Transform the distance multiplier (float) to absolute distance (px) */
     setMouseConnectDistMult(connectDistMult) {
-        const mult = CanvasParticles.parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 });
+        const mult = parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 });
         this.option.mouse.connectDist = this.option.particles.connectDist * mult;
     }
     /** Format particle color and opacity */
@@ -830,5 +829,16 @@ class CanvasParticles {
         }
     }
 }
+// Global event listeners that handle all instances at once
+window.addEventListener('mousemove', (e) => {
+    for (const instance of CanvasParticles.instances) {
+        instance.handleMouseMove(e);
+    }
+}, { passive: true });
+window.addEventListener('scroll', () => {
+    for (const instance of CanvasParticles.instances) {
+        instance.handleScroll();
+    }
+}, { passive: true });
 
 module.exports = CanvasParticles;

package/dist/index.d.ts

@@ -18,12 +18,11 @@ export default class CanvasParticles {
         NEW: 1;
         MATCH: 2;
     }>;
-    /** Observes canvas elements entering or leaving the viewport to start/stop animation */
+    /** Observes when canvas elements enter or leave the viewport to start/stop animation */
     static readonly canvasIntersectionObserver: IntersectionObserver;
+    /** Observes when canvas elements change size */
     static readonly canvasResizeObserver: ResizeObserver;
-    /** Helper functions for options parsing */
-    private static defaultIfNaN;
-    private static parseNumericOption;
+    static instances: Set<CanvasParticles>;
     canvas: CanvasParticlesCanvas;
     private ctx;
     enableAnimating: boolean;
@@ -35,6 +34,7 @@ export default class CanvasParticles {
     private clientY;
     mouseX: number;
     mouseY: number;
+    dpr: number;
     width: number;
     height: number;
     private offX;
@@ -82,7 +82,7 @@ export default class CanvasParticles {
     /** Sets the canvas background */
     setBackground(background: CanvasParticlesOptionsInput['background']): void;
     /** Transform the distance multiplier (float) to absolute distance (px) */
-    setMouseConnectDistMult(connectDistMult: number): void;
+    setMouseConnectDistMult(connectDistMult: number | undefined): void;
     /** Format particle color and opacity */
     setParticleColor(color: string | CanvasGradient | CanvasPattern): void;
 }

package/dist/index.mjs

@@ -1,3 +1,20 @@
+/** Helper functions for options parsing */
+function defaultIfNaN(value, defaultValue) {
+    return isNaN(+value) ? defaultValue : +value;
+}
+function parseNumericOption(name, value, defaultValue, clamp) {
+    if (value == undefined)
+        return defaultValue;
+    const { min = -Infinity, max = Infinity } = clamp ?? {};
+    if (value < min) {
+        console.warn(`option.${name} was clamped to ${min} as ${value} is too low`);
+    }
+    else if (value > max) {
+        console.warn(`option.${name} was clamped to ${max} as ${value} is too high`);
+    }
+    return defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue);
+}
+
 // Copyright (c) 2022–2026 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
 const TWO_PI = 2 * Math.PI;
@@ -20,7 +37,7 @@ function Mulberry32(seed) {
 const prng = Mulberry32(Math.random() * 4294967296).next;
 class CanvasParticles {
     /** Version of the library, injected via Rollup replace plugin. */
-    static version = "4.4.9";
+    static version = "4.5.0";
     static MAX_DT = 1000 / 30; // milliseconds between updates @ 30 FPS
     static BASE_DT = 1000 / 60; // milliseconds between updates @ 60 FPS
     /** Defines mouse interaction types with the particles */
@@ -35,7 +52,7 @@ class CanvasParticles {
         NEW: 1, // Generate all particles from scratch
         MATCH: 2, // Add or remove some particles to match the new count (default)
     });
-    /** Observes canvas elements entering or leaving the viewport to start/stop animation */
+    /** Observes when canvas elements enter or leave the viewport to start/stop animation */
     static canvasIntersectionObserver = new IntersectionObserver((entries) => {
         for (const entry of entries) {
             const canvas = entry.target;
@@ -50,6 +67,7 @@ class CanvasParticles {
     }, {
         rootMargin: '-1px',
     });
+    /** Observes when canvas elements change size */
     static canvasResizeObserver = new ResizeObserver((entries) => {
         // Seperate for loops is very important to prevent huge forced reflow overhead
         // First read all canvas rects at once
@@ -57,28 +75,15 @@ class CanvasParticles {
             const canvas = entry.target;
             canvas.instance.updateCanvasRect();
         }
+        // Cache to prevent fetching the dpr for every instance
+        const dpr = window.devicePixelRatio || 1;
         // Then resize all canvases at once
         for (const entry of entries) {
             const canvas = entry.target;
-            canvas.instance.#resizeCanvas();
+            canvas.instance.#resizeCanvas(dpr);
         }
     });
-    /** Helper functions for options parsing */
-    static defaultIfNaN(value, defaultValue) {
-        return isNaN(+value) ? defaultValue : +value;
-    }
-    static parseNumericOption(name, value, defaultValue, clamp) {
-        if (value == undefined)
-            return defaultValue;
-        const { min = -Infinity, max = Infinity } = clamp ?? {};
-        if (value < min) {
-            console.warn(new RangeError(`option.${name} was clamped to ${min} as ${value} is too low`));
-        }
-        else if (value > max) {
-            console.warn(new RangeError(`option.${name} was clamped to ${max} as ${value} is too high`));
-        }
-        return CanvasParticles.defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue);
-    }
+    static instances = new Set();
     canvas;
     ctx;
     enableAnimating = false;
@@ -90,6 +95,7 @@ class CanvasParticles {
     clientY = Infinity;
     mouseX = Infinity;
     mouseY = Infinity;
+    dpr = 1;
     width;
     height;
     offX;
@@ -122,15 +128,9 @@ class CanvasParticles {
             throw new Error('failed to get 2D context from canvas');
         this.ctx = ctx;
         this.options = options; // Uses setter
+        CanvasParticles.instances.add(this);
         CanvasParticles.canvasIntersectionObserver.observe(this.canvas);
         CanvasParticles.canvasResizeObserver.observe(this.canvas);
-        // Setup event handlers
-        this.resizeCanvas = this.resizeCanvas.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleScroll = this.handleScroll.bind(this);
-        this.resizeCanvas();
-        window.addEventListener('mousemove', this.handleMouseMove, { passive: true });
-        window.addEventListener('scroll', this.handleScroll, { passive: true });
     }
     updateCanvasRect() {
         const { top, left, width, height } = this.canvas.getBoundingClientRect();
@@ -159,11 +159,12 @@ class CanvasParticles {
         this.mouseY = this.clientY - top;
     }
     /** Resize the canvas and update particles accordingly */
-    #resizeCanvas() {
-        const dpr = window.devicePixelRatio || 1;
+    #resizeCanvas(dpr = window.devicePixelRatio || 1) {
         const width = (this.canvas.width = this.canvas.rect.width * dpr);
         const height = (this.canvas.height = this.canvas.rect.height * dpr);
-        this.ctx.scale(dpr, dpr);
+        // Must be set every time width or height changes because scale is removed
+        if (dpr !== 1)
+            this.ctx.scale(dpr, dpr);
         // Hide the mouse when resizing because it must be outside the viewport to do so
         this.mouseX = Infinity;
         this.mouseY = Infinity;
@@ -217,17 +218,17 @@ class CanvasParticles {
         if (this.hasManualParticles) {
             const pruned = [];
             let autoCount = 0;
-            // Keep manual particles while pruning automatic particles that exceed `particleCount`
-            // Only count automatic particles towards `particledCount`
             for (const particle of this.particles) {
+                // Keep manual particles
                 if (particle.isManual) {
                     pruned.push(particle);
                     continue;
                 }
-                if (autoCount >= particleCount)
-                    continue;
-                pruned.push(particle);
-                autoCount++;
+                // Only keep `autoCount` amount of automatic particles
+                if (autoCount < particleCount) {
+                    pruned.push(particle);
+                    autoCount++;
+                }
             }
             this.particles = pruned;
         }
@@ -738,16 +739,15 @@ class CanvasParticles {
     /** Gracefully destroy the instance and remove the canvas element */
     destroy() {
         this.stop();
+        CanvasParticles.instances.delete(this);
         CanvasParticles.canvasIntersectionObserver.unobserve(this.canvas);
         CanvasParticles.canvasResizeObserver.unobserve(this.canvas);
-        window.removeEventListener('mousemove', this.handleMouseMove);
-        window.removeEventListener('scroll', this.handleScroll);
         this.canvas?.remove();
         Object.keys(this).forEach((key) => delete this[key]); // Remove references to help GC
     }
     /** Set and validate options (https://github.com/Khoeckman/canvasParticles?tab=readme-ov-file#options) */
     set options(options) {
-        const pno = CanvasParticles.parseNumericOption;
+        const pno = parseNumericOption;
         // Format and parse all options
         this.option = {
             background: options.background ?? false,
@@ -757,7 +757,6 @@ class CanvasParticles {
             },
             mouse: {
                 interactionType: ~~pno('mouse.interactionType', options.mouse?.interactionType, CanvasParticles.interactionType.MOVE, { min: 0, max: 2 }),
-                connectDistMult: pno('mouse.connectDistMult', options.mouse?.connectDistMult, 2 / 3, { min: 0 }),
                 connectDist: 1 /* post processed */,
                 distRatio: pno('mouse.distRatio', options.mouse?.distRatio, 2 / 3, { min: 0 }),
             },
@@ -785,7 +784,7 @@ class CanvasParticles {
             },
         };
         this.setBackground(this.option.background);
-        this.setMouseConnectDistMult(this.option.mouse.connectDistMult);
+        this.setMouseConnectDistMult(options.mouse?.connectDistMult);
         this.setParticleColor(this.option.particles.color);
     }
     get options() {
@@ -801,7 +800,7 @@ class CanvasParticles {
     }
     /** Transform the distance multiplier (float) to absolute distance (px) */
     setMouseConnectDistMult(connectDistMult) {
-        const mult = CanvasParticles.parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 });
+        const mult = parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 });
         this.option.mouse.connectDist = this.option.particles.connectDist * mult;
     }
     /** Format particle color and opacity */
@@ -828,5 +827,16 @@ class CanvasParticles {
         }
     }
 }
+// Global event listeners that handle all instances at once
+window.addEventListener('mousemove', (e) => {
+    for (const instance of CanvasParticles.instances) {
+        instance.handleMouseMove(e);
+    }
+}, { passive: true });
+window.addEventListener('scroll', () => {
+    for (const instance of CanvasParticles.instances) {
+        instance.handleScroll();
+    }
+}, { passive: true });
 
 export { CanvasParticles as default };

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";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}}}(4294967296*Math.random()).next;class e{static version="4.4.9";static MAX_DT=1e3/30;static BASE_DT=1e3/60;static interactionType=Object.freeze({NONE:0,SHIFT:1,MOVE:2});static generationType=Object.freeze({OFF:0,NEW:1,MATCH:2});static canvasIntersectionObserver=new IntersectionObserver(t=>{for(const i of t){const t=i.target,e=t.instance;if(!e.options?.animation)return;(t.inViewbox=i.isIntersecting)?e.option.animation?.startOnEnter&&e.start({auto:!0}):e.option.animation?.stopOnLeave&&e.stop({auto:!0,clear:!1})}},{rootMargin:"-1px"});static canvasResizeObserver=new ResizeObserver(t=>{for(const i of t){i.target.instance.updateCanvasRect()}for(const i of t){i.target.instance.#t()}});static defaultIfNaN(t,i){return isNaN(+t)?i:+t}static parseNumericOption(t,i,s,n){if(null==i)return s;const{min:o=-1/0,max:a=1/0}=n??{};return i<o?console.warn(new RangeError(`option.${t} was clamped to ${o} as ${i} is too low`)):i>a&&console.warn(new RangeError(`option.${t} was clamped to ${a} as ${i} is too high`)),e.defaultIfNaN(Math.min(Math.max(i??s,o),a),s)}canvas;ctx;enableAnimating=!1;isAnimating=!1;lastAnimationFrame=0;particles=[];hasManualParticles=!1;clientX=1/0;clientY=1/0;mouseX=1/0;mouseY=1/0;width;height;offX;offY;option;color;constructor(t,i={}){let s;if(t instanceof HTMLCanvasElement)s=t;else{if("string"!=typeof t)throw new TypeError("selector is not a string and neither a HTMLCanvasElement itself");if(s=document.querySelector(t),!(s instanceof HTMLCanvasElement))throw new Error("selector does not point to a canvas")}this.canvas=s,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,e.canvasIntersectionObserver.observe(this.canvas),e.canvasResizeObserver.observe(this.canvas),this.resizeCanvas=this.resizeCanvas.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleScroll=this.handleScroll.bind(this),this.resizeCanvas(),window.addEventListener("mousemove",this.handleMouseMove,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})}updateCanvasRect(){const{top:t,left:i,width:e,height:s}=this.canvas.getBoundingClientRect();this.canvas.rect={top:t,left:i,width:e,height:s}}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}#t(){const t=window.devicePixelRatio||1,i=this.canvas.width=this.canvas.rect.width*t,s=this.canvas.height=this.canvas.rect.height*t;this.ctx.scale(t,t),this.mouseX=1/0,this.mouseY=1/0,this.width=Math.max(i+2*this.option.particles.connectDist,1),this.height=Math.max(s+2*this.option.particles.connectDist,1),this.offX=(i-this.width)/2,this.offY=(s-this.height)/2;const n=this.option.particles.generationType;n!==e.generationType.OFF&&(n===e.generationType.NEW||0===this.particles.length?this.newParticles():n===e.generationType.MATCH&&this.matchParticleCount({updateBounds:!0})),this.isAnimating&&this.#i()}resizeCanvas(t=!0){t&&this.updateCanvasRect(),this.#t()}#e(){let t=Math.round(this.option.particles.ppm*this.width*this.height/1e6);if(t=Math.min(this.option.particles.max,t),!isFinite(t))throw new RangeError("particleCount must be finite");return 0|t}newParticles({keepAuto:t=!1,keepManual:i=!0}={}){const e=this.#e();if(this.hasManualParticles&&(t||i)?(this.particles=this.particles.filter(e=>t&&!e.isManual||i&&e.isManual),this.hasManualParticles=this.particles.length>0):this.particles=[],!t)for(let t=0;t<e;t++)this.#s()}matchParticleCount({updateBounds:t=!1}={}){const i=this.#e();if(this.hasManualParticles){const t=[];let e=0;for(const s of this.particles)s.isManual?t.push(s):e>=i||(t.push(s),e++);this.particles=t}else this.particles=this.particles.slice(0,i);if(t)for(const t of this.particles)this.#n(t);for(let t=this.particles.length;t<i;t++)this.#s()}#s(){const e=i()*this.width,s=i()*this.height;this.createParticle(e,s,i()*t,(.5+.5*i())*this.option.particles.relSpeed,(.5+2*Math.pow(i(),5))*this.option.particles.relSize,!1)}createParticle(t,i,e,s,n,o=!0){const a={posX:t,posY:i,x:t,y:i,velX:0,velY:0,offX:0,offY:0,dir:e,speed:s,size:n,gridPos:{x:1,y:1},isVisible:!1,isManual:o};this.#n(a),this.particles.push(a),this.hasManualParticles=!0}#n(t){t.bounds={top:-t.size,right:this.canvas.width+t.size,bottom:this.canvas.height+t.size,left:-t.size}}updateParticles(){const t=this.option.particles.relSpeed,e=this.option.particles.relSize;for(const s of this.particles)s.speed=(.5+.5*i())*t,s.size=(.5+2*Math.pow(i(),5))*e,this.#n(s)}#o(t){const i=this.option.gravity.repulsive>0,e=this.option.gravity.pulling>0;if(!i&&!e)return;const s=this.particles,n=s.length,o=this.option.particles.connectDist,a=o*this.option.gravity.repulsive*t,r=o*this.option.gravity.pulling*t,c=(o/2)**2,l=o**2/256;for(let t=0;t<n;t++){const i=s[t];for(let o=t+1;o<n;o++){const t=s[o],n=i.posX-t.posX,h=i.posY-t.posY,p=n*n+h*h;if(p>=c&&!e)continue;const d=1/Math.sqrt(p+l),u=d*d*d;if(p<c){const e=u*a,s=-n*e,o=-h*e;i.velX-=s,i.velY-=o,t.velX+=s,t.velY+=o}if(!e)continue;const f=u*r,g=-n*f,m=-h*f;i.velX+=g,i.velY+=m,t.velX-=g,t.velY-=m}}}#a(i){const s=this.width,n=this.height,o=this.offX,a=this.offY,r=this.mouseX,c=this.mouseY,l=this.option.mouse.interactionType===e.interactionType.NONE,h=this.option.mouse.interactionType===e.interactionType.MOVE,p=this.option.mouse.connectDist,d=this.option.mouse.distRatio,u=this.option.particles.rotationSpeed*i,f=this.option.gravity.friction,g=this.option.gravity.maxVelocity,m=1-Math.pow(3/4,i);for(const e of this.particles){e.dir+=2*(Math.random()-.5)*u*i,e.dir%=t;const v=Math.sin(e.dir)*e.speed,x=Math.cos(e.dir)*e.speed;g>0&&(e.velX>g&&(e.velX=g),e.velX<-g&&(e.velX=-g),e.velY>g&&(e.velY=g),e.velY<-g&&(e.velY=-g)),e.posX+=(v+e.velX)*i,e.posY+=(x+e.velY)*i,e.posX%=s,e.posX<0&&(e.posX+=s),e.posY%=n,e.posY<0&&(e.posY+=n),e.velX*=Math.pow(f,i),e.velY*=Math.pow(f,i);const y=e.posX+o-r,M=e.posY+a-c;if(!l){const t=p/Math.hypot(y,M);d<t?(e.offX+=(t*y-y-e.offX)*m,e.offY+=(t*M-M-e.offY)*m):(e.offX-=e.offX*m,e.offY-=e.offY*m)}e.x=e.posX+e.offX,e.y=e.posY+e.offY,h&&(e.posX=e.x,e.posY=e.y),e.x+=o,e.y+=a,e.gridPos.x=+(e.x>=e.bounds.left)+ +(e.x>e.bounds.right),e.gridPos.y=+(e.y>=e.bounds.top)+ +(e.y>e.bounds.bottom),e.isVisible=1===e.gridPos.x&&1===e.gridPos.y}}#r(){const i=this.ctx;for(const e of this.particles)e.isVisible&&(e.size>1?(i.beginPath(),i.arc(e.x,e.y,e.size,0,t),i.fill(),i.closePath()):i.fillRect(e.x-e.size,e.y-e.size,2*e.size,2*e.size))}#c(t,i){const e=this.particles,s=e.length,n=new Map;for(let o=0;o<s;o++){const s=e[o],a=(s.x*i|0)+Math.imul(s.y*i,t),r=n.get(a);r?r.push(o):n.set(a,[o])}return n}static#l(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)}#h(){const t=this.particles,i=t.length,s=this.ctx,n=this.option.particles.connectDist,o=n**2,a=(n/2)**2,r=1/n,c=Math.ceil(this.width*r),l=n>=Math.min(this.canvas.width,this.canvas.height),h=o*this.option.particles.maxWork,p=this.color.alpha,d=this.color.alpha*n,u=[],f=this.#c(c,r);let g=0,m=!0;function v(t,i,e,n){const r=t-e,c=i-n,l=r*r+c*c;l>o||(l>a?(s.globalAlpha=d/Math.sqrt(l)-p,s.beginPath(),s.moveTo(t,i),s.lineTo(e,n),s.stroke()):u.push(t,i,e,n),g+=l,m=g<h)}function x(i,s,n){for(const o of i){if(s>=o)continue;const i=t[o];if((l||e.#l(n,i))&&(v(n.x,n.y,i.x,i.y),!m))break}}function y(i,s){for(const n of i){const i=t[n];if((l||e.#l(s,i))&&(v(s.x,s.y,i.x,i.y),!m))break}}for(let e=0;e<i;e++){g=0,m=!0;let s,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c);if((s=f.get(l+1))&&y(s,n),m&&((s=f.get(l+c))&&y(s,n),m&&((s=f.get(l+c+1))&&y(s,n),m&&((s=f.get(l+c-1))&&y(s,n),m)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;if(g=0,m=!0,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c),(s=f.get(l+c+1))&&y(s,n),m&&((s=f.get(l+c-1))&&y(s,n),m&&((s=f.get(l+1))&&y(s,n),m&&((s=f.get(l+c))&&y(s,n),m)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;g=0,m=!0,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c),(s=f.get(l+c))&&y(s,n),m&&((s=f.get(l+1))&&y(s,n),m&&(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),m&&((s=f.get(l+c-1))&&y(s,n),m&&(s=f.get(l+c+1))&&y(s,n))))}}}if(u.length){s.globalAlpha=p,s.beginPath();for(let t=0;t<u.length;t+=4)s.moveTo(u[t],u[t+1]),s.lineTo(u[t+2],u[t+3]);s.stroke()}}#p(t){const i=this.ctx,{width:e,height:s}=this.canvas;i.save(),i.globalAlpha=.5,i.beginPath();for(let n=.5;n<=e;n+=t)i.moveTo(n,0),i.lineTo(n,s);for(let n=.5;n<=s;n+=t)i.moveTo(0,n),i.lineTo(e,n);i.stroke(),i.restore()}#d(){const t=this.ctx,i=this.particles,e=i.length;t.save(),t.globalAlpha=1,t.fillStyle="#fff",t.textAlign="center",t.textBaseline="middle";for(let s=0;s<e;s++){const e=i[s];t.fillText(String(s),e.x,e.y)}t.restore()}#u(){const t=performance.now(),i=Math.min(t-this.lastAnimationFrame,e.MAX_DT)/e.BASE_DT;this.#o(i),this.#a(i),this.lastAnimationFrame=t}#i(){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.option.particles.drawLines&&this.#h(),this.option.debug.drawGrid&&this.#p(this.option.particles.connectDist),this.option.debug.drawIndexes&&this.#d()}#f(){this.isAnimating&&(requestAnimationFrame(()=>this.#f()),this.#u(),this.#i())}start({auto:t=!1}={}){return this.isAnimating||t&&!this.enableAnimating||(this.enableAnimating=!0,this.isAnimating=!0,this.updateCanvasRect(),requestAnimationFrame(()=>this.#f())),!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(),e.canvasIntersectionObserver.unobserve(this.canvas),e.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=e.parseNumericOption;this.option={background:t.background??!1,animation:{startOnEnter:!!(t.animation?.startOnEnter??1),stopOnLeave:!!(t.animation?.stopOnLeave??1)},mouse:{interactionType:~~i("mouse.interactionType",t.mouse?.interactionType,e.interactionType.MOVE,{min:0,max:2}),connectDistMult:i("mouse.connectDistMult",t.mouse?.connectDistMult,2/3,{min:0}),connectDist:1,distRatio:i("mouse.distRatio",t.mouse?.distRatio,2/3,{min:0})},particles:{generationType:~~i("particles.generationType",t.particles?.generationType,e.generationType.MATCH,{min:0,max:2}),drawLines:!!(t.particles?.drawLines??1),color:t.particles?.color??"black",ppm:~~i("particles.ppm",t.particles?.ppm,100),max:Math.round(i("particles.max",t.particles?.max,1/0,{min:0})),maxWork:Math.round(i("particles.maxWork",t.particles?.maxWork,1/0,{min:0})),connectDist:~~i("particles.connectDistance",t.particles?.connectDistance,150,{min:1}),relSpeed:i("particles.relSpeed",t.particles?.relSpeed,1,{min:0}),relSize:i("particles.relSize",t.particles?.relSize,1,{min:0}),rotationSpeed:i("particles.rotationSpeed",t.particles?.rotationSpeed,2,{min:0})/100},gravity:{repulsive:i("gravity.repulsive",t.gravity?.repulsive,0,{min:0}),pulling:i("gravity.pulling",t.gravity?.pulling,0,{min:0}),friction:i("gravity.friction",t.gravity?.friction,.8,{min:0,max:1}),maxVelocity:i("gravity.maxVelocity",t.gravity?.maxVelocity,1/0,{min:0})},debug:{drawGrid:!!t.debug?.drawGrid,drawIndexes:!!t.debug?.drawIndexes}},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){const i=e.parseNumericOption("mouse.connectDistMult",t,2/3,{min:0});this.option.mouse.connectDist=this.option.particles.connectDist*i}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 e});
+!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";function t(t,i,e,s){if(null==i)return e;const{min:n=-1/0,max:o=1/0}=s??{};return i<n?console.warn(`option.${t} was clamped to ${n} as ${i} is too low`):i>o&&console.warn(`option.${t} was clamped to ${o} as ${i} is too high`),function(t,i){return isNaN(+t)?i:+t}(Math.min(Math.max(i??e,n),o),e)}const i=2*Math.PI;const e=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}}}(4294967296*Math.random()).next;class s{static version="4.5.0";static MAX_DT=1e3/30;static BASE_DT=1e3/60;static interactionType=Object.freeze({NONE:0,SHIFT:1,MOVE:2});static generationType=Object.freeze({OFF:0,NEW:1,MATCH:2});static canvasIntersectionObserver=new IntersectionObserver(t=>{for(const i of t){const t=i.target,e=t.instance;if(!e.options?.animation)return;(t.inViewbox=i.isIntersecting)?e.option.animation?.startOnEnter&&e.start({auto:!0}):e.option.animation?.stopOnLeave&&e.stop({auto:!0,clear:!1})}},{rootMargin:"-1px"});static canvasResizeObserver=new ResizeObserver(t=>{for(const i of t){i.target.instance.updateCanvasRect()}const i=window.devicePixelRatio||1;for(const e of t){e.target.instance.#t(i)}});static instances=new Set;canvas;ctx;enableAnimating=!1;isAnimating=!1;lastAnimationFrame=0;particles=[];hasManualParticles=!1;clientX=1/0;clientY=1/0;mouseX=1/0;mouseY=1/0;dpr=1;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.instances.add(this),s.canvasIntersectionObserver.observe(this.canvas),s.canvasResizeObserver.observe(this.canvas)}updateCanvasRect(){const{top:t,left:i,width:e,height:s}=this.canvas.getBoundingClientRect();this.canvas.rect={top:t,left:i,width:e,height:s}}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}#t(t=window.devicePixelRatio||1){const i=this.canvas.width=this.canvas.rect.width*t,e=this.canvas.height=this.canvas.rect.height*t;1!==t&&this.ctx.scale(t,t),this.mouseX=1/0,this.mouseY=1/0,this.width=Math.max(i+2*this.option.particles.connectDist,1),this.height=Math.max(e+2*this.option.particles.connectDist,1),this.offX=(i-this.width)/2,this.offY=(e-this.height)/2;const n=this.option.particles.generationType;n!==s.generationType.OFF&&(n===s.generationType.NEW||0===this.particles.length?this.newParticles():n===s.generationType.MATCH&&this.matchParticleCount({updateBounds:!0})),this.isAnimating&&this.#i()}resizeCanvas(t=!0){t&&this.updateCanvasRect(),this.#t()}#e(){let t=Math.round(this.option.particles.ppm*this.width*this.height/1e6);if(t=Math.min(this.option.particles.max,t),!isFinite(t))throw new RangeError("particleCount must be finite");return 0|t}newParticles({keepAuto:t=!1,keepManual:i=!0}={}){const e=this.#e();if(this.hasManualParticles&&(t||i)?(this.particles=this.particles.filter(e=>t&&!e.isManual||i&&e.isManual),this.hasManualParticles=this.particles.length>0):this.particles=[],!t)for(let t=0;t<e;t++)this.#s()}matchParticleCount({updateBounds:t=!1}={}){const i=this.#e();if(this.hasManualParticles){const t=[];let e=0;for(const s of this.particles)s.isManual?t.push(s):e<i&&(t.push(s),e++);this.particles=t}else this.particles=this.particles.slice(0,i);if(t)for(const t of this.particles)this.#n(t);for(let t=this.particles.length;t<i;t++)this.#s()}#s(){const t=e()*this.width,s=e()*this.height;this.createParticle(t,s,e()*i,(.5+.5*e())*this.option.particles.relSpeed,(.5+2*Math.pow(e(),5))*this.option.particles.relSize,!1)}createParticle(t,i,e,s,n,o=!0){const a={posX:t,posY:i,x:t,y:i,velX:0,velY:0,offX:0,offY:0,dir:e,speed:s,size:n,gridPos:{x:1,y:1},isVisible:!1,isManual:o};this.#n(a),this.particles.push(a),this.hasManualParticles=!0}#n(t){t.bounds={top:-t.size,right:this.canvas.width+t.size,bottom:this.canvas.height+t.size,left:-t.size}}updateParticles(){const t=this.option.particles.relSpeed,i=this.option.particles.relSize;for(const s of this.particles)s.speed=(.5+.5*e())*t,s.size=(.5+2*Math.pow(e(),5))*i,this.#n(s)}#o(t){const i=this.option.gravity.repulsive>0,e=this.option.gravity.pulling>0;if(!i&&!e)return;const s=this.particles,n=s.length,o=this.option.particles.connectDist,a=o*this.option.gravity.repulsive*t,r=o*this.option.gravity.pulling*t,c=(o/2)**2,l=o**2/256;for(let t=0;t<n;t++){const i=s[t];for(let o=t+1;o<n;o++){const t=s[o],n=i.posX-t.posX,h=i.posY-t.posY,p=n*n+h*h;if(p>=c&&!e)continue;const d=1/Math.sqrt(p+l),u=d*d*d;if(p<c){const e=u*a,s=-n*e,o=-h*e;i.velX-=s,i.velY-=o,t.velX+=s,t.velY+=o}if(!e)continue;const f=u*r,g=-n*f,m=-h*f;i.velX+=g,i.velY+=m,t.velX-=g,t.velY-=m}}}#a(t){const e=this.width,n=this.height,o=this.offX,a=this.offY,r=this.mouseX,c=this.mouseY,l=this.option.mouse.interactionType===s.interactionType.NONE,h=this.option.mouse.interactionType===s.interactionType.MOVE,p=this.option.mouse.connectDist,d=this.option.mouse.distRatio,u=this.option.particles.rotationSpeed*t,f=this.option.gravity.friction,g=this.option.gravity.maxVelocity,m=1-Math.pow(3/4,t);for(const s of this.particles){s.dir+=2*(Math.random()-.5)*u*t,s.dir%=i;const v=Math.sin(s.dir)*s.speed,x=Math.cos(s.dir)*s.speed;g>0&&(s.velX>g&&(s.velX=g),s.velX<-g&&(s.velX=-g),s.velY>g&&(s.velY=g),s.velY<-g&&(s.velY=-g)),s.posX+=(v+s.velX)*t,s.posY+=(x+s.velY)*t,s.posX%=e,s.posX<0&&(s.posX+=e),s.posY%=n,s.posY<0&&(s.posY+=n),s.velX*=Math.pow(f,t),s.velY*=Math.pow(f,t);const y=s.posX+o-r,b=s.posY+a-c;if(!l){const t=p/Math.hypot(y,b);d<t?(s.offX+=(t*y-y-s.offX)*m,s.offY+=(t*b-b-s.offY)*m):(s.offX-=s.offX*m,s.offY-=s.offY*m)}s.x=s.posX+s.offX,s.y=s.posY+s.offY,h&&(s.posX=s.x,s.posY=s.y),s.x+=o,s.y+=a,s.gridPos.x=+(s.x>=s.bounds.left)+ +(s.x>s.bounds.right),s.gridPos.y=+(s.y>=s.bounds.top)+ +(s.y>s.bounds.bottom),s.isVisible=1===s.gridPos.x&&1===s.gridPos.y}}#r(){const t=this.ctx;for(const e of this.particles)e.isVisible&&(e.size>1?(t.beginPath(),t.arc(e.x,e.y,e.size,0,i),t.fill(),t.closePath()):t.fillRect(e.x-e.size,e.y-e.size,2*e.size,2*e.size))}#c(t,i){const e=this.particles,s=e.length,n=new Map;for(let o=0;o<s;o++){const s=e[o],a=(s.x*i|0)+Math.imul(s.y*i,t),r=n.get(a);r?r.push(o):n.set(a,[o])}return n}static#l(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)}#h(){const t=this.particles,i=t.length,e=this.ctx,n=this.option.particles.connectDist,o=n**2,a=(n/2)**2,r=1/n,c=Math.ceil(this.width*r),l=n>=Math.min(this.canvas.width,this.canvas.height),h=o*this.option.particles.maxWork,p=this.color.alpha,d=this.color.alpha*n,u=[],f=this.#c(c,r);let g=0,m=!0;function v(t,i,s,n){const r=t-s,c=i-n,l=r*r+c*c;l>o||(l>a?(e.globalAlpha=d/Math.sqrt(l)-p,e.beginPath(),e.moveTo(t,i),e.lineTo(s,n),e.stroke()):u.push(t,i,s,n),g+=l,m=g<h)}function x(i,e,n){for(const o of i){if(e>=o)continue;const i=t[o];if((l||s.#l(n,i))&&(v(n.x,n.y,i.x,i.y),!m))break}}function y(i,e){for(const n of i){const i=t[n];if((l||s.#l(e,i))&&(v(e.x,e.y,i.x,i.y),!m))break}}for(let e=0;e<i;e++){g=0,m=!0;let s,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c);if((s=f.get(l+1))&&y(s,n),m&&((s=f.get(l+c))&&y(s,n),m&&((s=f.get(l+c+1))&&y(s,n),m&&((s=f.get(l+c-1))&&y(s,n),m)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;if(g=0,m=!0,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c),(s=f.get(l+c+1))&&y(s,n),m&&((s=f.get(l+c-1))&&y(s,n),m&&((s=f.get(l+1))&&y(s,n),m&&((s=f.get(l+c))&&y(s,n),m)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;g=0,m=!0,n=t[e],o=n.x*r|0,a=n.y*r|0,l=o+Math.imul(a,c),(s=f.get(l+c))&&y(s,n),m&&((s=f.get(l+1))&&y(s,n),m&&(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),m&&((s=f.get(l+c-1))&&y(s,n),m&&(s=f.get(l+c+1))&&y(s,n))))}}}if(u.length){e.globalAlpha=p,e.beginPath();for(let t=0;t<u.length;t+=4)e.moveTo(u[t],u[t+1]),e.lineTo(u[t+2],u[t+3]);e.stroke()}}#p(t){const i=this.ctx,{width:e,height:s}=this.canvas;i.save(),i.globalAlpha=.5,i.beginPath();for(let n=.5;n<=e;n+=t)i.moveTo(n,0),i.lineTo(n,s);for(let n=.5;n<=s;n+=t)i.moveTo(0,n),i.lineTo(e,n);i.stroke(),i.restore()}#d(){const t=this.ctx,i=this.particles,e=i.length;t.save(),t.globalAlpha=1,t.fillStyle="#fff",t.textAlign="center",t.textBaseline="middle";for(let s=0;s<e;s++){const e=i[s];t.fillText(String(s),e.x,e.y)}t.restore()}#u(){const t=performance.now(),i=Math.min(t-this.lastAnimationFrame,s.MAX_DT)/s.BASE_DT;this.#o(i),this.#a(i),this.lastAnimationFrame=t}#i(){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.option.particles.drawLines&&this.#h(),this.option.debug.drawGrid&&this.#p(this.option.particles.connectDist),this.option.debug.drawIndexes&&this.#d()}#f(){this.isAnimating&&(requestAnimationFrame(()=>this.#f()),this.#u(),this.#i())}start({auto:t=!1}={}){return this.isAnimating||t&&!this.enableAnimating||(this.enableAnimating=!0,this.isAnimating=!0,this.updateCanvasRect(),requestAnimationFrame(()=>this.#f())),!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.instances.delete(this),s.canvasIntersectionObserver.unobserve(this.canvas),s.canvasResizeObserver.unobserve(this.canvas),this.canvas?.remove(),Object.keys(this).forEach(t=>delete this[t])}set options(i){const e=t;this.option={background:i.background??!1,animation:{startOnEnter:!!(i.animation?.startOnEnter??1),stopOnLeave:!!(i.animation?.stopOnLeave??1)},mouse:{interactionType:~~e("mouse.interactionType",i.mouse?.interactionType,s.interactionType.MOVE,{min:0,max:2}),connectDist:1,distRatio:e("mouse.distRatio",i.mouse?.distRatio,2/3,{min:0})},particles:{generationType:~~e("particles.generationType",i.particles?.generationType,s.generationType.MATCH,{min:0,max:2}),drawLines:!!(i.particles?.drawLines??1),color:i.particles?.color??"black",ppm:~~e("particles.ppm",i.particles?.ppm,100),max:Math.round(e("particles.max",i.particles?.max,1/0,{min:0})),maxWork:Math.round(e("particles.maxWork",i.particles?.maxWork,1/0,{min:0})),connectDist:~~e("particles.connectDistance",i.particles?.connectDistance,150,{min:1}),relSpeed:e("particles.relSpeed",i.particles?.relSpeed,1,{min:0}),relSize:e("particles.relSize",i.particles?.relSize,1,{min:0}),rotationSpeed:e("particles.rotationSpeed",i.particles?.rotationSpeed,2,{min:0})/100},gravity:{repulsive:e("gravity.repulsive",i.gravity?.repulsive,0,{min:0}),pulling:e("gravity.pulling",i.gravity?.pulling,0,{min:0}),friction:e("gravity.friction",i.gravity?.friction,.8,{min:0,max:1}),maxVelocity:e("gravity.maxVelocity",i.gravity?.maxVelocity,1/0,{min:0})},debug:{drawGrid:!!i.debug?.drawGrid,drawIndexes:!!i.debug?.drawIndexes}},this.setBackground(this.option.background),this.setMouseConnectDistMult(i.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(i){const e=t("mouse.connectDistMult",i,2/3,{min:0});this.option.mouse.connectDist=this.option.particles.connectDist*e}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 window.addEventListener("mousemove",t=>{for(const i of s.instances)i.handleMouseMove(t)},{passive:!0}),window.addEventListener("scroll",()=>{for(const t of s.instances)t.handleScroll()},{passive:!0}),s});

package/dist/options.d.ts

@@ -0,0 +1,6 @@
+/** Helper functions for options parsing */
+export declare function defaultIfNaN(value: number, defaultValue: number): number;
+export declare function parseNumericOption(name: string, value: number | undefined, defaultValue: number, clamp?: {
+    min?: number;
+    max?: number;
+}): number;

package/dist/types/options.d.ts

@@ -6,7 +6,6 @@ export interface CanvasParticlesOptions {
     };
     mouse: {
         interactionType: 0 | 1 | 2;
-        connectDistMult: number;
         connectDist: number;
         distRatio: number;
     };
@@ -37,5 +36,9 @@ export interface CanvasParticlesOptions {
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
-export type CanvasParticlesOptionsInput = DeepPartial<CanvasParticlesOptions>;
+export type CanvasParticlesOptionsInput = DeepPartial<CanvasParticlesOptions> & {
+    mouse?: {
+        connectDistMult?: number;
+    };
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasparticles-js",
-  "version": "4.4.9",
+  "version": "4.5.0",
   "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

@@ -1,6 +1,8 @@
 // Copyright (c) 2022–2026 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
 
+import { parseNumericOption } from './options'
+
 import type { CanvasParticlesCanvas, Particle, GridPos, ContextColor, SpatialGrid } from './types'
 import type { CanvasParticlesOptions, CanvasParticlesOptionsInput } from './types/options'
 
@@ -50,7 +52,7 @@ export default class CanvasParticles {
     MATCH: 2, // Add or remove some particles to match the new count (default)
   })
 
-  /** Observes canvas elements entering or leaving the viewport to start/stop animation */
+  /** Observes when canvas elements enter or leave the viewport to start/stop animation */
   static readonly canvasIntersectionObserver = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
@@ -69,6 +71,7 @@ export default class CanvasParticles {
     }
   )
 
+  /** Observes when canvas elements change size */
   static readonly canvasResizeObserver = new ResizeObserver((entries) => {
     // Seperate for loops is very important to prevent huge forced reflow overhead
 
@@ -78,36 +81,17 @@ export default class CanvasParticles {
       canvas.instance.updateCanvasRect()
     }
 
+    // Cache to prevent fetching the dpr for every instance
+    const dpr = window.devicePixelRatio || 1
+
     // Then resize all canvases at once
     for (const entry of entries) {
       const canvas = entry.target as CanvasParticlesCanvas
-      canvas.instance.#resizeCanvas()
+      canvas.instance.#resizeCanvas(dpr)
     }
   })
 
-  /** Helper functions for options parsing */
-  private static defaultIfNaN(value: number, defaultValue: number): number {
-    return isNaN(+value) ? defaultValue : +value
-  }
-
-  private static parseNumericOption(
-    name: string,
-    value: number | undefined,
-    defaultValue: number,
-    clamp?: { min?: number; max?: number }
-  ): number {
-    if (value == undefined) return defaultValue
-
-    const { min = -Infinity, max = Infinity } = clamp ?? {}
-
-    if (value < min) {
-      console.warn(new RangeError(`option.${name} was clamped to ${min} as ${value} is too low`))
-    } else if (value > max) {
-      console.warn(new RangeError(`option.${name} was clamped to ${max} as ${value} is too high`))
-    }
-
-    return CanvasParticles.defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue)
-  }
+  static instances = new Set<CanvasParticles>()
 
   canvas: CanvasParticlesCanvas
   private ctx: CanvasRenderingContext2D
@@ -122,6 +106,8 @@ export default class CanvasParticles {
   private clientY: number = Infinity
   mouseX: number = Infinity
   mouseY: number = Infinity
+
+  dpr: number = 1
   width!: number
   height!: number
   private offX!: number
@@ -157,17 +143,9 @@ export default class CanvasParticles {
 
     this.options = options // Uses setter
 
+    CanvasParticles.instances.add(this)
     CanvasParticles.canvasIntersectionObserver.observe(this.canvas)
     CanvasParticles.canvasResizeObserver.observe(this.canvas)
-
-    // Setup event handlers
-    this.resizeCanvas = this.resizeCanvas.bind(this)
-    this.handleMouseMove = this.handleMouseMove.bind(this)
-    this.handleScroll = this.handleScroll.bind(this)
-
-    this.resizeCanvas()
-    window.addEventListener('mousemove', this.handleMouseMove, { passive: true })
-    window.addEventListener('scroll', this.handleScroll, { passive: true })
   }
 
   updateCanvasRect() {
@@ -199,11 +177,12 @@ export default class CanvasParticles {
   }
 
   /** Resize the canvas and update particles accordingly */
-  #resizeCanvas() {
-    const dpr = window.devicePixelRatio || 1
+  #resizeCanvas(dpr = window.devicePixelRatio || 1) {
     const width = (this.canvas.width = this.canvas.rect.width * dpr)
     const height = (this.canvas.height = this.canvas.rect.height * dpr)
-    this.ctx.scale(dpr, dpr)
+
+    // Must be set every time width or height changes because scale is removed
+    if (dpr !== 1) this.ctx.scale(dpr, dpr)
 
     // Hide the mouse when resizing because it must be outside the viewport to do so
     this.mouseX = Infinity
@@ -266,17 +245,18 @@ export default class CanvasParticles {
       const pruned: Particle[] = []
       let autoCount = 0
 
-      // Keep manual particles while pruning automatic particles that exceed `particleCount`
-      // Only count automatic particles towards `particledCount`
       for (const particle of this.particles) {
+        // Keep manual particles
         if (particle.isManual) {
           pruned.push(particle)
           continue
         }
 
-        if (autoCount >= particleCount) continue
-        pruned.push(particle)
-        autoCount++
+        // Only keep `autoCount` amount of automatic particles
+        if (autoCount < particleCount) {
+          pruned.push(particle)
+          autoCount++
+        }
       }
       this.particles = pruned
     } else {
@@ -839,12 +819,10 @@ export default class CanvasParticles {
   destroy() {
     this.stop()
 
+    CanvasParticles.instances.delete(this)
     CanvasParticles.canvasIntersectionObserver.unobserve(this.canvas)
     CanvasParticles.canvasResizeObserver.unobserve(this.canvas)
 
-    window.removeEventListener('mousemove', this.handleMouseMove)
-    window.removeEventListener('scroll', this.handleScroll)
-
     this.canvas?.remove()
 
     Object.keys(this).forEach((key) => delete (this as any)[key]) // Remove references to help GC
@@ -852,7 +830,7 @@ export default class CanvasParticles {
 
   /** Set and validate options (https://github.com/Khoeckman/canvasParticles?tab=readme-ov-file#options) */
   set options(options: CanvasParticlesOptionsInput) {
-    const pno = CanvasParticles.parseNumericOption
+    const pno = parseNumericOption
 
     // Format and parse all options
     this.option = {
@@ -868,7 +846,6 @@ export default class CanvasParticles {
           CanvasParticles.interactionType.MOVE,
           { min: 0, max: 2 }
         ) as 0 | 1 | 2,
-        connectDistMult: pno('mouse.connectDistMult', options.mouse?.connectDistMult, 2 / 3, { min: 0 }),
         connectDist: 1 /* post processed */,
         distRatio: pno('mouse.distRatio', options.mouse?.distRatio, 2 / 3, { min: 0 }),
       },
@@ -902,7 +879,7 @@ export default class CanvasParticles {
     }
 
     this.setBackground(this.option.background)
-    this.setMouseConnectDistMult(this.option.mouse.connectDistMult)
+    this.setMouseConnectDistMult(options.mouse?.connectDistMult)
     this.setParticleColor(this.option.particles.color)
   }
 
@@ -918,8 +895,8 @@ export default class CanvasParticles {
   }
 
   /** Transform the distance multiplier (float) to absolute distance (px) */
-  setMouseConnectDistMult(connectDistMult: number) {
-    const mult = CanvasParticles.parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 })
+  setMouseConnectDistMult(connectDistMult: number | undefined) {
+    const mult = parseNumericOption('mouse.connectDistMult', connectDistMult, 2 / 3, { min: 0 })
     this.option.mouse.connectDist = this.option.particles.connectDist * mult
   }
 
@@ -950,3 +927,24 @@ export default class CanvasParticles {
     }
   }
 }
+
+// Global event listeners that handle all instances at once
+window.addEventListener(
+  'mousemove',
+  (e) => {
+    for (const instance of CanvasParticles.instances) {
+      instance.handleMouseMove(e)
+    }
+  },
+  { passive: true }
+)
+
+window.addEventListener(
+  'scroll',
+  () => {
+    for (const instance of CanvasParticles.instances) {
+      instance.handleScroll()
+    }
+  },
+  { passive: true }
+)

package/src/options.ts

@@ -0,0 +1,24 @@
+/** Helper functions for options parsing */
+
+export function defaultIfNaN(value: number, defaultValue: number): number {
+  return isNaN(+value) ? defaultValue : +value
+}
+
+export function parseNumericOption(
+  name: string,
+  value: number | undefined,
+  defaultValue: number,
+  clamp?: { min?: number; max?: number }
+): number {
+  if (value == undefined) return defaultValue
+
+  const { min = -Infinity, max = Infinity } = clamp ?? {}
+
+  if (value < min) {
+    console.warn(`option.${name} was clamped to ${min} as ${value} is too low`)
+  } else if (value > max) {
+    console.warn(`option.${name} was clamped to ${max} as ${value} is too high`)
+  }
+
+  return defaultIfNaN(Math.min(Math.max(value ?? defaultValue, min), max), defaultValue)
+}

package/src/types/options.ts

@@ -8,7 +8,6 @@ export interface CanvasParticlesOptions {
 
   mouse: {
     interactionType: 0 | 1 | 2 /* see CanvasParticles.interactionType */
-    connectDistMult: number
     connectDist: number /* post processed */
     distRatio: number
   }
@@ -44,4 +43,6 @@ type DeepPartial<T> = {
   [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
 }
 
-export type CanvasParticlesOptionsInput = DeepPartial<CanvasParticlesOptions>
+export type CanvasParticlesOptionsInput = DeepPartial<CanvasParticlesOptions> & {
+  mouse?: { connectDistMult?: number }
+}