canvasparticles-js 4.4.2 → 4.4.4

package/README.md

@@ -175,8 +175,7 @@ Play around with these values in the [Sandbox](https://khoeckman.github.io/canva
 
 ### Options Object
 
-The default value will be used when an option is assigned an invalid value.<br>
-Your screen resolution and refresh rate will directly impact perfomance!
+The default value will be used when an option is assigned an invalid value.
 
 ### Root options
 
@@ -188,6 +187,8 @@ Your screen resolution and refresh rate will directly impact perfomance!
 
 ### `animation`
 
+It's best to not touch these values if it's unclear what it does.
+
 | Option                   | Type      | Default | Description                                          |
 | ------------------------ | --------- | ------- | ---------------------------------------------------- |
 | `animation.startOnEnter` | `boolean` | `true`  | Start animation when the canvas enters the viewport. |
@@ -207,24 +208,30 @@ Your screen resolution and refresh rate will directly impact perfomance!
 
 - `NONE (0)` – No interaction
 - `SHIFT (1)` – Visual displacement only
-- `MOVE (2)` – Actual particle movement
+- `MOVE (2)` – Actual particle movement (default)
 
 ---
 
 ### `particles`
 
-| Option                      | Type          | Default    | Description                                                                                              |
-| --------------------------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------------- |
-| `particles.generationType`  | `0 \| 1 \| 2` | `false`    | Auto-generate particles on initialization and when the canvas resizes. `0 = OFF`, `1 = NEW`, `2 = MATCH` |
-| `particles.color`           | `string`      | `'black'`  | Particle and connection color. Any CSS color format.                                                     |
-| `particles.ppm`             | `integer`     | `100`      | Particles per million pixels. _Heavily impacts performance_                                              |
-| `particles.max`             | `integer`     | `Infinity` | Maximum number of particles allowed.                                                                     |
-| `particles.maxWork`         | `integer`     | `Infinity` | Maximum total connection length per particle. Lower values stabilize performance but may flicker.        |
-| `particles.connectDistance` | `integer`     | `150`      | Maximum distance for particle connections (px). _Heavily impacts performance_                            |
-| `particles.relSpeed`        | `float`       | `1`        | Relative particle speed multiplier.                                                                      |
-| `particles.relSize`         | `float`       | `1`        | Relative particle size multiplier.                                                                       |
-| `particles.rotationSpeed`   | `float`       | `2`        | Direction change speed.                                                                                  |
-| `particles.drawLines`       | `boolean`     | `true`     | Whether to draw lines between particles.                                                                 |
+| Option                      | Type          | Default    | Description                                                                                       |
+| --------------------------- | ------------- | ---------- | ------------------------------------------------------------------------------------------------- |
+| `particles.generationType`  | `0 \| 1 \| 2` | `false`    | Auto-generate particles on initialization and when the canvas resizes. `1 = OFF`, `2 = MATCH`     |
+| `particles.color`           | `string`      | `'black'`  | Particle and connection color. Any CSS color format.                                              |
+| `particles.ppm`             | `integer`     | `100`      | Particles per million pixels.                                                                     |
+| `particles.max`             | `integer`     | `Infinity` | Maximum number of particles allowed.                                                              |
+| `particles.maxWork`         | `integer`     | `Infinity` | Maximum total connection length per particle. Lower values stabilize performance but may flicker. |
+| `particles.connectDistance` | `integer`     | `150`      | Maximum distance for particle connections (px).                                                   |
+| `particles.relSpeed`        | `float`       | `1`        | Relative particle speed multiplier.                                                               |
+| `particles.relSize`         | `float`       | `1`        | Relative particle size multiplier.                                                                |
+| `particles.rotationSpeed`   | `float`       | `2`        | Direction change speed.                                                                           |
+| `particles.drawLines`       | `boolean`     | `true`     | Whether to draw lines between particles.                                                          |
+
+**Generation types** (enum)
+
+- `OFF (0)` – Never auto-generate particles
+- `NEW (1)` – Generate all particles from scratch
+- `MATCH (2)` – Add or remove some particles to match the new count (default)
 
 ---
 
@@ -232,11 +239,12 @@ Your screen resolution and refresh rate will directly impact perfomance!
 
 Enabling gravity (`repulsive` or `pulling` > 0) performs an extra **O(n²)** gravity computations per frame.
 
-| Option              | Type    | Default | Description                                                                            |
-| ------------------- | ------- | ------- | -------------------------------------------------------------------------------------- |
-| `gravity.repulsive` | `float` | `0`     | Repulsive force between particles. Strongly impacts performance.                       |
-| `gravity.pulling`   | `float` | `0`     | Attractive force between particles. Requires sufficient repulsion to avoid clustering. |
-| `gravity.friction`  | `float` | `0.8`   | Damping factor applied to gravitational velocity each update (`0.0 – 1.0`).            |
+| Option                      | Type      | Default | Description                                                                                   |
+| --------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------- |
+| `gravity.repulsive`         | `float`   | `0`     | Repulsive force between particles.                                                            |
+| `gravity.pulling`           | `float`   | `0`     | Attractive force between particles. Requires sufficient repulsion to avoid clustering.        |
+| `gravity.friction`          | `float`   | `0.8`   | Damping factor applied to gravitational velocity each update (`0.0 – 1.0`).                   |
+| `gravity.preventExplosions` | `boolean` | `false` | Clamp the maximum velocity so particles will not explode outward under heavy pulling gravity. |
 
 ---
 
@@ -342,13 +350,13 @@ instance.options = { ... }
 createParticle(posX?: number, posY?: number, dir?: number, speed?: number, size?: number)
 ```
 
-By default `particles.ppm` and `particles.max` are used to auto-generate random particles. This might destroy manually created particles. To fix this, set `particles.generationType` to `MANUAL (0)`.
+By default `particles.ppm` and `particles.max` are used to auto-generate random particles. Set one or both of these properties to `0` or set `particles.generationType` to `OFF (0)` (slightly more performant).
 
 ```js
 const canvas = '#my-canvas'
 const options = {
   particles: {
-    max: 0,
+    generationType: CanvasParticles.generationType.OFF, // = 0
     rotationSpeed: 0,
   },
 }
@@ -393,7 +401,7 @@ instance.newParticles({ keepAuto: true, keepManual: false })
       const options = {
         background: 'hsl(125, 42%, 35%)',
         mouse: {
-          interactionType: CanvasParticles.interactionType.MOVE, // = 2
+          interactionType: CanvasParticles.interactionType.SHIFT, // = 1
         },
         particles: {
           color: 'rgba(150, 255, 105, 0.95)',

package/dist/index.cjs

@@ -21,7 +21,7 @@ function Mulberry32(seed) {
 // Spectral test: /demo/mulberry32.html
 const prng = Mulberry32(Math.random() * 2 ** 32).next;
 class CanvasParticles {
-    static version = "4.4.2";
+    static version = "4.4.4";
     static MAX_DT = 1000 / 50; // milliseconds between updates @ 50 FPS
     static BASE_DT = 1000 / 60; // milliseconds between updates @ 60 FPS
     /** Defines mouse interaction types with the particles */
@@ -32,9 +32,9 @@ class CanvasParticles {
     });
     /** Defines how the particles are auto-generated */
     static generationType = Object.freeze({
-        MANUAL: 0, // Never auto-generate particles
-        NEW: 1, // Generate particles from scratch
-        MATCH: 2, // Add or remove particles to match new count (default)
+        OFF: 0, // Never auto-generate particles
+        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 */
     static canvasIntersectionObserver = new IntersectionObserver((entries) => {
@@ -169,7 +169,7 @@ class CanvasParticles {
         this.offX = (width - this.width) / 2;
         this.offY = (height - this.height) / 2;
         const generationType = this.option.particles.generationType;
-        if (generationType !== CanvasParticles.generationType.MANUAL) {
+        if (generationType !== CanvasParticles.generationType.OFF) {
             if (generationType === CanvasParticles.generationType.NEW || this.particles.length === 0)
                 this.newParticles();
             else if (generationType === CanvasParticles.generationType.MATCH)
@@ -343,12 +343,13 @@ class CanvasParticles {
         const offY = this.offY;
         const mouseX = this.mouseX;
         const mouseY = this.mouseY;
-        const rotationSpeed = this.option.particles.rotationSpeed * step;
-        const friction = this.option.gravity.friction;
-        const mouseConnectDist = this.option.mouse.connectDist;
-        const mouseDistRatio = this.option.mouse.distRatio;
         const isMouseInteractionTypeNone = this.option.mouse.interactionType === CanvasParticles.interactionType.NONE;
         const isMouseInteractionTypeMove = this.option.mouse.interactionType === CanvasParticles.interactionType.MOVE;
+        const mouseConnectDist = this.option.mouse.connectDist;
+        const mouseDistRatio = this.option.mouse.distRatio;
+        const rotationSpeed = this.option.particles.rotationSpeed * step;
+        const friction = this.option.gravity.friction;
+        const preventExplosions = this.option.gravity.preventExplosions;
         const easing = 1 - Math.pow(3 / 4, step);
         for (const p of this.particles) {
             p.dir += 2 * (Math.random() - 0.5) * rotationSpeed * step;
@@ -356,6 +357,18 @@ class CanvasParticles {
             // Constant velocity
             const movX = Math.sin(p.dir) * p.speed;
             const movY = Math.cos(p.dir) * p.speed;
+            // Maximum velocity
+            if (preventExplosions) {
+                const maxVel = Math.max(p.speed, friction) * 2;
+                if (p.velX > maxVel)
+                    p.velX = maxVel;
+                if (p.velX < -maxVel)
+                    p.velX = -maxVel;
+                if (p.velY > maxVel)
+                    p.velY = maxVel;
+                if (p.velY < -maxVel)
+                    p.velY = -maxVel;
+            }
             // Apply velocities
             p.posX += (movX + p.velX) * step;
             p.posY += (movY + p.velY) * step;
@@ -474,7 +487,7 @@ class CanvasParticles {
         const maxWorkPerParticle = maxDistSq * this.option.particles.maxWork;
         const alpha = this.color.alpha;
         const alphaFactor = this.color.alpha * maxDist;
-        const bucket = []; // Batch line segments of max alpha
+        const bucket = []; // Batch line segments of max alpha (2D -> 1D; stride = 4)
         const grid = this.#buildSpatialGrid(stride, invCellSize); // O(n^2) -> O(n)
         let particleWork = 0;
         let allowWork = true;
@@ -494,7 +507,7 @@ class CanvasParticles {
             }
             else {
                 // Cache lines with max alpha to later be drawn in one batch
-                bucket.push([ax, ay, bx, by]);
+                bucket.push(ax, ay, bx, by);
             }
             particleWork += distSq;
             allowWork = particleWork < maxWorkPerParticle;
@@ -561,8 +574,7 @@ class CanvasParticles {
             if (cellX >= 0 && cellY >= 0 && cellX < stride - 2 && (cell = grid.get(key)))
                 renderConnectionsToOwnCell(cell || [], a, pa);
             // Next iteration
-            a++;
-            if (!(a < len))
+            if (++a >= len)
                 break;
             // Same code inline but the order of grid.get() is different to remove maxWork artifacts
             particleWork = 0;
@@ -590,8 +602,7 @@ class CanvasParticles {
             if (cellX >= 0 && cellY >= 0 && cellX < stride - 2 && (cell = grid.get(key)))
                 renderConnectionsToOwnCell(cell || [], a, pa);
             // Next iteration
-            a++;
-            if (!(a < len))
+            if (++a >= len)
                 break;
             // Same code inline but the order of grid.get() is different to remove maxWork artifacts
             particleWork = 0;
@@ -624,10 +635,9 @@ class CanvasParticles {
         // Render all bucketed lines at once
         ctx.globalAlpha = alpha;
         ctx.beginPath();
-        for (let i = 0; i < bucket.length; i++) {
-            const line = bucket[i];
-            ctx.moveTo(line[0], line[1]);
-            ctx.lineTo(line[2], line[3]);
+        for (let line = 0; line < bucket.length; line += 4) {
+            ctx.moveTo(bucket[line], bucket[line + 1]);
+            ctx.lineTo(bucket[line + 2], bucket[line + 3]);
         }
         ctx.stroke();
     }
@@ -764,6 +774,7 @@ class CanvasParticles {
                 repulsive: pno('gravity.repulsive', options.gravity?.repulsive, 0, { min: 0 }),
                 pulling: pno('gravity.pulling', options.gravity?.pulling, 0, { min: 0 }),
                 friction: pno('gravity.friction', options.gravity?.friction, 0.8, { min: 0, max: 1 }),
+                preventExplosions: !!options.gravity?.preventExplosions,
             },
             debug: {
                 drawGrid: !!options.debug?.drawGrid,

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export default class CanvasParticles {
     }>;
     /** Defines how the particles are auto-generated */
     static readonly generationType: Readonly<{
-        MANUAL: 0;
+        OFF: 0;
         NEW: 1;
         MATCH: 2;
     }>;

package/dist/index.mjs

@@ -19,7 +19,7 @@ function Mulberry32(seed) {
 // Spectral test: /demo/mulberry32.html
 const prng = Mulberry32(Math.random() * 2 ** 32).next;
 class CanvasParticles {
-    static version = "4.4.2";
+    static version = "4.4.4";
     static MAX_DT = 1000 / 50; // milliseconds between updates @ 50 FPS
     static BASE_DT = 1000 / 60; // milliseconds between updates @ 60 FPS
     /** Defines mouse interaction types with the particles */
@@ -30,9 +30,9 @@ class CanvasParticles {
     });
     /** Defines how the particles are auto-generated */
     static generationType = Object.freeze({
-        MANUAL: 0, // Never auto-generate particles
-        NEW: 1, // Generate particles from scratch
-        MATCH: 2, // Add or remove particles to match new count (default)
+        OFF: 0, // Never auto-generate particles
+        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 */
     static canvasIntersectionObserver = new IntersectionObserver((entries) => {
@@ -167,7 +167,7 @@ class CanvasParticles {
         this.offX = (width - this.width) / 2;
         this.offY = (height - this.height) / 2;
         const generationType = this.option.particles.generationType;
-        if (generationType !== CanvasParticles.generationType.MANUAL) {
+        if (generationType !== CanvasParticles.generationType.OFF) {
             if (generationType === CanvasParticles.generationType.NEW || this.particles.length === 0)
                 this.newParticles();
             else if (generationType === CanvasParticles.generationType.MATCH)
@@ -341,12 +341,13 @@ class CanvasParticles {
         const offY = this.offY;
         const mouseX = this.mouseX;
         const mouseY = this.mouseY;
-        const rotationSpeed = this.option.particles.rotationSpeed * step;
-        const friction = this.option.gravity.friction;
-        const mouseConnectDist = this.option.mouse.connectDist;
-        const mouseDistRatio = this.option.mouse.distRatio;
         const isMouseInteractionTypeNone = this.option.mouse.interactionType === CanvasParticles.interactionType.NONE;
         const isMouseInteractionTypeMove = this.option.mouse.interactionType === CanvasParticles.interactionType.MOVE;
+        const mouseConnectDist = this.option.mouse.connectDist;
+        const mouseDistRatio = this.option.mouse.distRatio;
+        const rotationSpeed = this.option.particles.rotationSpeed * step;
+        const friction = this.option.gravity.friction;
+        const preventExplosions = this.option.gravity.preventExplosions;
         const easing = 1 - Math.pow(3 / 4, step);
         for (const p of this.particles) {
             p.dir += 2 * (Math.random() - 0.5) * rotationSpeed * step;
@@ -354,6 +355,18 @@ class CanvasParticles {
             // Constant velocity
             const movX = Math.sin(p.dir) * p.speed;
             const movY = Math.cos(p.dir) * p.speed;
+            // Maximum velocity
+            if (preventExplosions) {
+                const maxVel = Math.max(p.speed, friction) * 2;
+                if (p.velX > maxVel)
+                    p.velX = maxVel;
+                if (p.velX < -maxVel)
+                    p.velX = -maxVel;
+                if (p.velY > maxVel)
+                    p.velY = maxVel;
+                if (p.velY < -maxVel)
+                    p.velY = -maxVel;
+            }
             // Apply velocities
             p.posX += (movX + p.velX) * step;
             p.posY += (movY + p.velY) * step;
@@ -472,7 +485,7 @@ class CanvasParticles {
         const maxWorkPerParticle = maxDistSq * this.option.particles.maxWork;
         const alpha = this.color.alpha;
         const alphaFactor = this.color.alpha * maxDist;
-        const bucket = []; // Batch line segments of max alpha
+        const bucket = []; // Batch line segments of max alpha (2D -> 1D; stride = 4)
         const grid = this.#buildSpatialGrid(stride, invCellSize); // O(n^2) -> O(n)
         let particleWork = 0;
         let allowWork = true;
@@ -492,7 +505,7 @@ class CanvasParticles {
             }
             else {
                 // Cache lines with max alpha to later be drawn in one batch
-                bucket.push([ax, ay, bx, by]);
+                bucket.push(ax, ay, bx, by);
             }
             particleWork += distSq;
             allowWork = particleWork < maxWorkPerParticle;
@@ -559,8 +572,7 @@ class CanvasParticles {
             if (cellX >= 0 && cellY >= 0 && cellX < stride - 2 && (cell = grid.get(key)))
                 renderConnectionsToOwnCell(cell || [], a, pa);
             // Next iteration
-            a++;
-            if (!(a < len))
+            if (++a >= len)
                 break;
             // Same code inline but the order of grid.get() is different to remove maxWork artifacts
             particleWork = 0;
@@ -588,8 +600,7 @@ class CanvasParticles {
             if (cellX >= 0 && cellY >= 0 && cellX < stride - 2 && (cell = grid.get(key)))
                 renderConnectionsToOwnCell(cell || [], a, pa);
             // Next iteration
-            a++;
-            if (!(a < len))
+            if (++a >= len)
                 break;
             // Same code inline but the order of grid.get() is different to remove maxWork artifacts
             particleWork = 0;
@@ -622,10 +633,9 @@ class CanvasParticles {
         // Render all bucketed lines at once
         ctx.globalAlpha = alpha;
         ctx.beginPath();
-        for (let i = 0; i < bucket.length; i++) {
-            const line = bucket[i];
-            ctx.moveTo(line[0], line[1]);
-            ctx.lineTo(line[2], line[3]);
+        for (let line = 0; line < bucket.length; line += 4) {
+            ctx.moveTo(bucket[line], bucket[line + 1]);
+            ctx.lineTo(bucket[line + 2], bucket[line + 3]);
         }
         ctx.stroke();
     }
@@ -762,6 +772,7 @@ class CanvasParticles {
                 repulsive: pno('gravity.repulsive', options.gravity?.repulsive, 0, { min: 0 }),
                 pulling: pno('gravity.pulling', options.gravity?.pulling, 0, { min: 0 }),
                 friction: pno('gravity.friction', options.gravity?.friction, 0.8, { min: 0, max: 1 }),
+                preventExplosions: !!options.gravity?.preventExplosions,
             },
             debug: {
                 drawGrid: !!options.debug?.drawGrid,

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}}}(Math.random()*2**32).next;class e{static version="4.4.2";static MAX_DT=20;static BASE_DT=1e3/60;static interactionType=Object.freeze({NONE:0,SHIFT:1,MOVE:2});static generationType=Object.freeze({MANUAL: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)=>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=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;const s=this.option.particles.generationType;s!==e.generationType.MANUAL&&(s===e.generationType.NEW||0===this.particles.length?this.newParticles():s===e.generationType.MATCH&&this.matchParticleCount({updateBounds:!0})),this.isAnimating&&this.#i()}resizeCanvas(){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.particles.rotationSpeed*i,h=this.option.gravity.friction,p=this.option.mouse.connectDist,d=this.option.mouse.distRatio,u=this.option.mouse.interactionType===e.interactionType.NONE,f=this.option.mouse.interactionType===e.interactionType.MOVE,g=1-Math.pow(3/4,i);for(const e of this.particles){e.dir+=2*(Math.random()-.5)*l*i,e.dir%=t;const m=Math.sin(e.dir)*e.speed,v=Math.cos(e.dir)*e.speed;e.posX+=(m+e.velX)*i,e.posY+=(v+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(h,i),e.velY*=Math.pow(h,i);const x=e.posX+o-r,y=e.posY+a-c;if(!u){const t=p/Math.hypot(x,y);d<t?(e.offX+=(t*x-x-e.offX)*g,e.offY+=(t*y-y-e.offY)*g):(e.offX-=e.offX*g,e.offY-=e.offY*g)}e.x=e.posX+e.offX,e.y=e.posY+e.offY,f&&(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++,!(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++,!(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++){const i=u[t];s.moveTo(i[0],i[1]),s.lineTo(i[2],i[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})},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";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 e{static version="4.4.4";static MAX_DT=20;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)=>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=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;const s=this.option.particles.generationType;s!==e.generationType.OFF&&(s===e.generationType.NEW||0===this.particles.length?this.newParticles():s===e.generationType.MATCH&&this.matchParticleCount({updateBounds:!0})),this.isAnimating&&this.#i()}resizeCanvas(){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,v=-h*f;i.velX+=g,i.velY+=v,t.velX-=g,t.velY-=v}}}#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.preventExplosions,v=1-Math.pow(3/4,i);for(const e of this.particles){e.dir+=2*(Math.random()-.5)*u*i,e.dir%=t;const m=Math.sin(e.dir)*e.speed,x=Math.cos(e.dir)*e.speed;if(g){const t=2*Math.max(e.speed,f);e.velX>t&&(e.velX=t),e.velX<-t&&(e.velX=-t),e.velY>t&&(e.velY=t),e.velY<-t&&(e.velY=-t)}e.posX+=(m+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)*v,e.offY+=(t*M-M-e.offY)*v):(e.offX-=e.offX*v,e.offY-=e.offY*v)}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,v=!0;function m(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,v=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))&&(m(n.x,n.y,i.x,i.y),!v))break}}function y(i,s){for(const n of i){const i=t[n];if((l||e.#l(s,i))&&(m(s.x,s.y,i.x,i.y),!v))break}}for(let e=0;e<i;e++){g=0,v=!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),v&&((s=f.get(l+c))&&y(s,n),v&&((s=f.get(l+c+1))&&y(s,n),v&&((s=f.get(l+c-1))&&y(s,n),v)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;if(g=0,v=!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),v&&((s=f.get(l+c-1))&&y(s,n),v&&((s=f.get(l+1))&&y(s,n),v&&((s=f.get(l+c))&&y(s,n),v)))){if(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),++e>=i)break;g=0,v=!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),v&&((s=f.get(l+1))&&y(s,n),v&&(o>=0&&a>=0&&o<c-2&&(s=f.get(l))&&x(s||[],e,n),v&&((s=f.get(l+c-1))&&y(s,n),v&&(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}),preventExplosions:!!t.gravity?.preventExplosions},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});

package/dist/types/index.d.ts

@@ -44,6 +44,5 @@ export interface ContextColor {
     hex: string;
     alpha: number;
 }
-export type LineSegment = [ax: number, ay: number, bx: number, by: number];
 export type SpatialGrid = Map</* key: */ number, /* indexesOfParticles: */ number[]>;
 export {};

package/dist/types/options.d.ts

@@ -27,6 +27,7 @@ export interface CanvasParticlesOptions {
         repulsive: number;
         pulling: number;
         friction: number;
+        preventExplosions: boolean;
     };
     debug: {
         drawGrid: boolean;

package/package.json

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2022–2026 Kyle Hoeckman, MIT License
 // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
 
-import type { CanvasParticlesCanvas, Particle, GridPos, ContextColor, LineSegment, SpatialGrid } from './types'
+import type { CanvasParticlesCanvas, Particle, GridPos, ContextColor, SpatialGrid } from './types'
 import type { CanvasParticlesOptions, CanvasParticlesOptionsInput } from './types/options'
 
 const TWO_PI = 2 * Math.PI
@@ -43,9 +43,9 @@ export default class CanvasParticles {
 
   /** Defines how the particles are auto-generated */
   static readonly generationType = Object.freeze({
-    MANUAL: 0, // Never auto-generate particles
-    NEW: 1, // Generate particles from scratch
-    MATCH: 2, // Add or remove particles to match new count (default)
+    OFF: 0, // Never auto-generate particles
+    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 */
@@ -211,7 +211,7 @@ export default class CanvasParticles {
 
     const generationType = this.option.particles.generationType
 
-    if (generationType !== CanvasParticles.generationType.MANUAL) {
+    if (generationType !== CanvasParticles.generationType.OFF) {
       if (generationType === CanvasParticles.generationType.NEW || this.particles.length === 0) this.newParticles()
       else if (generationType === CanvasParticles.generationType.MATCH) this.matchParticleCount({ updateBounds: true })
     }
@@ -414,12 +414,13 @@ export default class CanvasParticles {
     const offY = this.offY
     const mouseX = this.mouseX
     const mouseY = this.mouseY
-    const rotationSpeed = this.option.particles.rotationSpeed * step
-    const friction = this.option.gravity.friction
-    const mouseConnectDist = this.option.mouse.connectDist
-    const mouseDistRatio = this.option.mouse.distRatio
     const isMouseInteractionTypeNone = this.option.mouse.interactionType === CanvasParticles.interactionType.NONE
     const isMouseInteractionTypeMove = this.option.mouse.interactionType === CanvasParticles.interactionType.MOVE
+    const mouseConnectDist = this.option.mouse.connectDist
+    const mouseDistRatio = this.option.mouse.distRatio
+    const rotationSpeed = this.option.particles.rotationSpeed * step
+    const friction = this.option.gravity.friction
+    const preventExplosions = this.option.gravity.preventExplosions
     const easing = 1 - Math.pow(3 / 4, step)
 
     for (const p of this.particles) {
@@ -430,6 +431,17 @@ export default class CanvasParticles {
       const movX = Math.sin(p.dir) * p.speed
       const movY = Math.cos(p.dir) * p.speed
 
+      // Maximum velocity
+      if (preventExplosions) {
+        const maxVel = Math.max(p.speed, friction) * 2
+
+        if (p.velX > maxVel) p.velX = maxVel
+        if (p.velX < -maxVel) p.velX = -maxVel
+
+        if (p.velY > maxVel) p.velY = maxVel
+        if (p.velY < -maxVel) p.velY = -maxVel
+      }
+
       // Apply velocities
       p.posX += (movX + p.velX) * step
       p.posY += (movY + p.velY) * step
@@ -564,7 +576,7 @@ export default class CanvasParticles {
     const alpha = this.color.alpha
     const alphaFactor = this.color.alpha * maxDist
 
-    const bucket: LineSegment[] = [] // Batch line segments of max alpha
+    const bucket: number[] = [] // Batch line segments of max alpha (2D -> 1D; stride = 4)
     const grid = this.#buildSpatialGrid(stride, invCellSize) // O(n^2) -> O(n)
 
     let particleWork = 0
@@ -587,7 +599,7 @@ export default class CanvasParticles {
         ctx.stroke()
       } else {
         // Cache lines with max alpha to later be drawn in one batch
-        bucket.push([ax, ay, bx, by])
+        bucket.push(ax, ay, bx, by)
       }
       particleWork += distSq
       allowWork = particleWork < maxWorkPerParticle
@@ -654,8 +666,7 @@ export default class CanvasParticles {
         renderConnectionsToOwnCell(cell || [], a, pa)
 
       // Next iteration
-      a++
-      if (!(a < len)) break
+      if (++a >= len) break
 
       // Same code inline but the order of grid.get() is different to remove maxWork artifacts
       particleWork = 0
@@ -678,8 +689,7 @@ export default class CanvasParticles {
         renderConnectionsToOwnCell(cell || [], a, pa)
 
       // Next iteration
-      a++
-      if (!(a < len)) break
+      if (++a >= len) break
 
       // Same code inline but the order of grid.get() is different to remove maxWork artifacts
       particleWork = 0
@@ -708,10 +718,9 @@ export default class CanvasParticles {
     ctx.globalAlpha = alpha
     ctx.beginPath()
 
-    for (let i = 0; i < bucket.length; i++) {
-      const line = bucket[i]
-      ctx.moveTo(line[0], line[1])
-      ctx.lineTo(line[2], line[3])
+    for (let line = 0; line < bucket.length; line += 4) {
+      ctx.moveTo(bucket[line], bucket[line + 1])
+      ctx.lineTo(bucket[line + 2], bucket[line + 3])
     }
     ctx.stroke()
   }
@@ -881,6 +890,7 @@ export default class CanvasParticles {
         repulsive: pno('gravity.repulsive', options.gravity?.repulsive, 0, { min: 0 }),
         pulling: pno('gravity.pulling', options.gravity?.pulling, 0, { min: 0 }),
         friction: pno('gravity.friction', options.gravity?.friction, 0.8, { min: 0, max: 1 }),
+        preventExplosions: !!options.gravity?.preventExplosions,
       },
       debug: {
         drawGrid: !!options.debug?.drawGrid,

package/src/types/index.ts

@@ -52,6 +52,4 @@ export interface ContextColor {
   alpha: number
 }
 
-export type LineSegment = [ax: number, ay: number, bx: number, by: number]
-
 export type SpatialGrid = Map</* key: */ number, /* indexesOfParticles: */ number[]>

package/src/types/options.ts

@@ -31,6 +31,7 @@ export interface CanvasParticlesOptions {
     repulsive: number
     pulling: number
     friction: number
+    preventExplosions: boolean
   }
 
   debug: {