npm - canvasparticles-js - Versions diffs - 3.2.21 → 3.3.4 - Mend

canvasparticles-js 3.2.21 → 3.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -102,7 +102,7 @@ Add a `<script>` element in the `<head>` to import `CanvasParticles`.
 ```html
 <head>
-  <script src="https://cdn.jsdelivr.net/npm/canvasparticles-js@3.2/canvasParticles.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/canvasparticles-js/canvasParticles.min.js" defer></script>
 </head>
 ```
@@ -127,24 +127,6 @@ particles.start()
 particles.stop()
 ```
-### Update options on the fly
-```js
-const particles = new CanvasParticles(selector, options)
-// Required usage of setter for options.background and options.particles.color
-particles.setBackground('red')
-particles.setParticleColor('hsl(149, 100%, 50%)')
-// Changing options.particles.ppm or options.particles.max requires a reset
-particles.options.particles.ppm = 100
-particles.options.particles.max = 300
-particles.newParticles() // required reset
-// All other options can be updated on the fly
-particles.options.gravity.repulsive = 1
-```
 ## Options
 Configuration options for the particles and their behavior.<br>
@@ -263,17 +245,62 @@ const options = {
 </details>
-## Example
+### Update options on the fly
+**Note:** The new option values are not validated, except for the options with a setter. Assigning invalid values will lead to unexpected behavior and system errors.
+#### Using setter
+These options require dedicated setters to ensure proper integration.
+- options.background
+- options.mouse.connectDistMult
+- options.particles.color
+```js
+const particles = new CanvasParticles(selector, options)
+// Use the setters to update these specific options
+particles.setBackground('red')
+particles.setMouseConnectDistMult(0.8)
+particles.setParticleColor('hsl(149, 100%, 50%)')
+```
+#### Requires particle reset
+After being updated, these options must call `newParticles()` to apply the changes:
+- options.particles.ppm
+- options.particles.max
+```js
+particles.options.particles.ppm = 100
+particles.options.particles.max = 300
+particles.newParticles() // Required reset to apply changes
+```
+#### Other
+**All** other options can be updated by modifying the `options` object properties, with changes taking immediate effect.
+```js
+particles.options.mouse.interactionType = 0
+particles.options.particles.connectDist = 200
+particles.options.gravity.repulsive = 1
+```
+## One pager example
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <script src="./canvasParticles.js" defer></script>
     <style>
       #canvas-particles {
         position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
@@ -284,6 +311,7 @@ const options = {
   <body>
     <canvas id="canvas-particles"></canvas>
+    <script src="https://cdn.jsdelivr.net/npm/canvasparticles-js/canvasParticles.min.js"></script>
     <script>
       const selector = '#canvas-particles'
       const options = {

package/canvasParticles.js CHANGED Viewed

@@ -2,7 +2,10 @@
 // https://github.com/Khoeckman/canvasParticles/blob/main/LICENSE
 class CanvasParticles {
-  static version = '3.2.21'
+  static version = '3.3.4'
+  animating = false
+  particles = []
   /**
    * Creates a new CanvasParticles instance.
@@ -19,7 +22,6 @@ class CanvasParticles {
     // Get 2d drawing functions
     this.ctx = this.canvas.getContext('2d')
-    this.animating = false
     this.formatOptions(options)
     // Event handling
@@ -62,7 +64,6 @@ class CanvasParticles {
     if (isNaN(this.options.framesPerUpdate)) this.options.framesPerUpdate = 1
     if (isNaN(this.options.mouse.interactionType)) this.options.mouse.interactionType = 1
-    if (isNaN(this.options.mouse.connectDistMult)) this.options.mouse.connectDistMult = 2 / 3
     if (isNaN(this.options.mouse.distRatio)) this.options.mouse.distRatio = 2 / 3
     if (isNaN(this.options.particles.ppm)) this.options.particles.ppm = 100
@@ -77,11 +78,8 @@ class CanvasParticles {
     if (isNaN(this.options.gravity.pulling)) this.options.gravity.pulling = 0
     if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
-    // Transform distance multiplier to absolute distance
-    this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
-    delete this.options.mouse.connectDistMult
     this.setBackground(this.options.background)
+    this.setMouseConnectDistMult(this.options.mouse.connectDistMult)
     this.setParticleColor(this.options.particles.color)
   }
@@ -113,10 +111,14 @@ class CanvasParticles {
     // Amount of particles to be created
     const particles = Math.floor((this.options.particles.ppm * this.width * this.height) / 1000000)
-    this.len = Math.min(this.options.particles.max, particles)
+    this.particleCount = Math.min(this.options.particles.max, particles)
+    if (!isFinite(this.particleCount)) throw new RangeError('number of particles must be finite. check `options.particles.ppm`')
+    if (this.options.resetOnResize || this.particles.length === 0) this.newParticles()
+    else this.matchParticleCount()
-    if (this.options.resetOnResize || typeof this.particles === 'undefined') this.newParticles()
-    else this.matchParticlesAmount()
+    this.updateParticleBounds()
   }
   /**
@@ -124,22 +126,21 @@ class CanvasParticles {
    * The amount of new particles will match 'options.particles.ppm'
    * */
   newParticles = () => {
-    if (this.len === Infinity) throw new RangeError('cannot create an infinite amount of particles')
     this.particles = []
-    for (let i = 0; i < this.len; i++) this.createParticle()
+    for (let i = 0; i < this.particleCount; i++) this.createParticle()
   }
   /**
-   * When resizing, add or remove some particles.
-   * The final amount of particles will match 'options.particles.ppm'
+   * When resizing, add or remove some particles so that the final amount of particles will match 'options.particles.ppm'
    * */
-  matchParticlesAmount = () => {
-    if (this.len === Infinity) throw new RangeError('cannot create an infinite amount of particles')
-    this.particles = this.particles.slice(0, this.len)
-    while (this.len > this.particles.length) this.createParticle()
+  matchParticleCount = () => {
+    this.particles = this.particles.slice(0, this.particleCount)
+    while (this.particleCount > this.particles.length) this.createParticle()
   }
-  createParticle = function (posX, posY, dir, speed, size) {
+  createParticle = (posX, posY, dir, speed, size) => {
+    size = size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize
     this.particles.push({
       posX: posX - this.offX || Math.random() * this.width, // Logical position in pixels
       posY: posY - this.offY || Math.random() * this.height, // Logical position in pixels
@@ -151,17 +152,22 @@ class CanvasParticles {
       offY: 0, // Vertical distance from drawn to logical position in pixels
       dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
       speed: speed || (0.5 + Math.random() * 0.5) * this.options.particles.relSpeed, // Velocity in pixels per update
-      size: size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize, // Ray in pixels of the particle
+      size, // Ray in pixels of the particle
     })
-    const particle = this.particles.at(-1)
-    // Within these bounds the particle is considered visible
-    particle.bounds = {
-      top: -particle.size,
-      right: this.canvas.width + particle.size,
-      bottom: this.canvas.height + particle.size,
-      left: -particle.size,
-    }
+    this.updateParticleBounds()
+  }
+  updateParticleBounds = () => {
+    this.particles.map(
+      particle =>
+        // Within these bounds the particle is considered visible
+        (particle.bounds = {
+          top: -particle.size,
+          right: this.canvas.width + particle.size,
+          bottom: this.canvas.height + particle.size,
+          left: -particle.size,
+        })
+    )
   }
   /**
@@ -169,7 +175,7 @@ class CanvasParticles {
    * Is executed once every 'options.framesPerUpdate' frames.
    * */
   update = () => {
-    const len = this.len
+    const len = this.particleCount
     const enabledRepulsive = this.options.gravity.repulsive !== 0
     const enabledPulling = this.options.gravity.pulling !== 0
     const gravRepulsiveMult = this.options.particles.connectDist * this.options.gravity.repulsive
@@ -267,7 +273,7 @@ class CanvasParticles {
    * @returns {number} x - The horizontal grid position (0, 1, or 2).
    * @returns {number} y - The vertical grid position (0, 1, or 2).
    */
-  gridPos = function (particle) {
+  gridPos = particle => {
     return {
       x: (particle.x >= particle.bounds.left) + (particle.x > particle.bounds.right),
       y: (particle.y >= particle.bounds.top) + (particle.y > particle.bounds.bottom),
@@ -280,7 +286,7 @@ class CanvasParticles {
    * @param {Object} particleB - Second particle with {gridPos, isVisible}.
    * @returns {boolean} - True if the line crosses the visible center, false otherwise.
    */
-  isLineVisible = function (particleA, particleB) {
+  isLineVisible(particleA, particleB) {
     // Visible if either particle is in the center
     if (particleA.isVisible || particleB.isVisible) return true
@@ -316,7 +322,7 @@ class CanvasParticles {
       }
     }
-    const len = this.len
+    const len = this.particleCount
     const drawAll = this.options.particles.connectDist >= Math.min(this.canvas.width, this.canvas.height)
     const maxWorkPerParticle = this.options.particles.connectDist * this.options.particles.maxWork
@@ -397,6 +403,16 @@ class CanvasParticles {
     if (typeof background === 'string') this.canvas.style.background = this.options.background = background
   }
+  /**
+   * Transform distance multiplier to absolute distance
+   * @param {float} connectDistMult - The maximum distance for the mouse to interact with the particles.
+   * The value is multiplied by particles.connectDistance
+   * @example 0.8 connectDistMult * 150 particles.connectDistance = 120 pixels
+   */
+  setMouseConnectDistMult = connectDistMult => {
+    this.options.mouse.connectDist = this.options.particles.connectDist * (isNaN(connectDistMult) ? 2 / 3 : connectDistMult)
+  }
   /**
    * Format particle color and opacity
    * @param {string} color - The color of the particles and their connections. Can be any CSS supported color format.
@@ -407,19 +423,20 @@ class CanvasParticles {
     if (this.ctx.fillStyle[0] === '#') {
       this.options.particles.opacity = { value: 255, hex: 'ff' }
       this.options.particles.color = this.ctx.fillStyle
-    } else {
-      // Example: extract 0.25 from rgba(136, 244, 255, 0.25) and convert to range 0x00 to 0xff and store as a 2 char string
-      const value = ~~(this.ctx.fillStyle.split(',').at(-1).slice(1, -1) * 255)
+      return
+    }
-      this.options.particles.opacity = {
-        value: value,
-        hex: value.toString(16),
-      }
+    // Example: extract 0.25 from rgba(136, 244, 255, 0.25) and convert to range 0x00 to 0xff and store as a 2 char string
+    const value = ~~(this.ctx.fillStyle.split(',').at(-1).slice(1, -1) * 255)
-      // Example: extract 136, 244 and 255 from rgba(136, 244, 255, 0.25) and convert to '#001122' format
-      this.ctx.fillStyle = this.ctx.fillStyle.split(',').slice(0, -1).join(',') + ', 1)'
-      this.options.particles.color = this.ctx.fillStyle
+    this.options.particles.opacity = {
+      value: value,
+      hex: value.toString(16),
     }
+    // Example: extract 136, 244 and 255 from rgba(136, 244, 255, 0.25) and convert to '#001122' format
+    this.ctx.fillStyle = this.ctx.fillStyle.split(',').slice(0, -1).join(',') + ', 1)'
+    this.options.particles.color = this.ctx.fillStyle
   }
 }

package/canvasParticles.mjs CHANGED Viewed

@@ -2,7 +2,10 @@
 // https://github.com/Khoeckman/canvasParticles/blob/main/LICENSE
 export default class CanvasParticles {
-  static version = '3.2.21'
+  static version = '3.3.4'
+  animating = false
+  particles = []
   /**
    * Creates a new CanvasParticles instance.
@@ -19,7 +22,6 @@ export default class CanvasParticles {
     // Get 2d drawing functions
     this.ctx = this.canvas.getContext('2d')
-    this.animating = false
     this.formatOptions(options)
     // Event handling
@@ -62,7 +64,6 @@ export default class CanvasParticles {
     if (isNaN(this.options.framesPerUpdate)) this.options.framesPerUpdate = 1
     if (isNaN(this.options.mouse.interactionType)) this.options.mouse.interactionType = 1
-    if (isNaN(this.options.mouse.connectDistMult)) this.options.mouse.connectDistMult = 2 / 3
     if (isNaN(this.options.mouse.distRatio)) this.options.mouse.distRatio = 2 / 3
     if (isNaN(this.options.particles.ppm)) this.options.particles.ppm = 100
@@ -77,11 +78,8 @@ export default class CanvasParticles {
     if (isNaN(this.options.gravity.pulling)) this.options.gravity.pulling = 0
     if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
-    // Transform distance multiplier to absolute distance
-    this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
-    delete this.options.mouse.connectDistMult
     this.setBackground(this.options.background)
+    this.setMouseConnectDistMult(this.options.mouse.connectDistMult)
     this.setParticleColor(this.options.particles.color)
   }
@@ -113,10 +111,14 @@ export default class CanvasParticles {
     // Amount of particles to be created
     const particles = Math.floor((this.options.particles.ppm * this.width * this.height) / 1000000)
-    this.len = Math.min(this.options.particles.max, particles)
+    this.particleCount = Math.min(this.options.particles.max, particles)
+    if (!isFinite(this.particleCount)) throw new RangeError('number of particles must be finite. check `options.particles.ppm`')
+    if (this.options.resetOnResize || this.particles.length === 0) this.newParticles()
+    else this.matchParticleCount()
-    if (this.options.resetOnResize || typeof this.particles === 'undefined') this.newParticles()
-    else this.matchParticlesAmount()
+    this.updateParticleBounds()
   }
   /**
@@ -124,22 +126,21 @@ export default class CanvasParticles {
    * The amount of new particles will match 'options.particles.ppm'
    * */
   newParticles = () => {
-    if (this.len === Infinity) throw new RangeError('cannot create an infinite amount of particles')
     this.particles = []
-    for (let i = 0; i < this.len; i++) this.createParticle()
+    for (let i = 0; i < this.particleCount; i++) this.createParticle()
   }
   /**
-   * When resizing, add or remove some particles.
-   * The final amount of particles will match 'options.particles.ppm'
+   * When resizing, add or remove some particles so that the final amount of particles will match 'options.particles.ppm'
    * */
-  matchParticlesAmount = () => {
-    if (this.len === Infinity) throw new RangeError('cannot create an infinite amount of particles')
-    this.particles = this.particles.slice(0, this.len)
-    while (this.len > this.particles.length) this.createParticle()
+  matchParticleCount = () => {
+    this.particles = this.particles.slice(0, this.particleCount)
+    while (this.particleCount > this.particles.length) this.createParticle()
   }
-  createParticle = function (posX, posY, dir, speed, size) {
+  createParticle = (posX, posY, dir, speed, size) => {
+    size = size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize
     this.particles.push({
       posX: posX - this.offX || Math.random() * this.width, // Logical position in pixels
       posY: posY - this.offY || Math.random() * this.height, // Logical position in pixels
@@ -151,17 +152,22 @@ export default class CanvasParticles {
       offY: 0, // Vertical distance from drawn to logical position in pixels
       dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
       speed: speed || (0.5 + Math.random() * 0.5) * this.options.particles.relSpeed, // Velocity in pixels per update
-      size: size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize, // Ray in pixels of the particle
+      size, // Ray in pixels of the particle
     })
-    const particle = this.particles.at(-1)
-    // Within these bounds the particle is considered visible
-    particle.bounds = {
-      top: -particle.size,
-      right: this.canvas.width + particle.size,
-      bottom: this.canvas.height + particle.size,
-      left: -particle.size,
-    }
+    this.updateParticleBounds()
+  }
+  updateParticleBounds = () => {
+    this.particles.map(
+      particle =>
+        // Within these bounds the particle is considered visible
+        (particle.bounds = {
+          top: -particle.size,
+          right: this.canvas.width + particle.size,
+          bottom: this.canvas.height + particle.size,
+          left: -particle.size,
+        })
+    )
   }
   /**
@@ -169,7 +175,7 @@ export default class CanvasParticles {
    * Is executed once every 'options.framesPerUpdate' frames.
    * */
   update = () => {
-    const len = this.len
+    const len = this.particleCount
     const enabledRepulsive = this.options.gravity.repulsive !== 0
     const enabledPulling = this.options.gravity.pulling !== 0
     const gravRepulsiveMult = this.options.particles.connectDist * this.options.gravity.repulsive
@@ -267,7 +273,7 @@ export default class CanvasParticles {
    * @returns {number} x - The horizontal grid position (0, 1, or 2).
    * @returns {number} y - The vertical grid position (0, 1, or 2).
    */
-  gridPos = function (particle) {
+  gridPos = particle => {
     return {
       x: (particle.x >= particle.bounds.left) + (particle.x > particle.bounds.right),
       y: (particle.y >= particle.bounds.top) + (particle.y > particle.bounds.bottom),
@@ -280,7 +286,7 @@ export default class CanvasParticles {
    * @param {Object} particleB - Second particle with {gridPos, isVisible}.
    * @returns {boolean} - True if the line crosses the visible center, false otherwise.
    */
-  isLineVisible = function (particleA, particleB) {
+  isLineVisible(particleA, particleB) {
     // Visible if either particle is in the center
     if (particleA.isVisible || particleB.isVisible) return true
@@ -316,7 +322,7 @@ export default class CanvasParticles {
       }
     }
-    const len = this.len
+    const len = this.particleCount
     const drawAll = this.options.particles.connectDist >= Math.min(this.canvas.width, this.canvas.height)
     const maxWorkPerParticle = this.options.particles.connectDist * this.options.particles.maxWork
@@ -397,6 +403,16 @@ export default class CanvasParticles {
     if (typeof background === 'string') this.canvas.style.background = this.options.background = background
   }
+  /**
+   * Transform distance multiplier to absolute distance
+   * @param {float} connectDistMult - The maximum distance for the mouse to interact with the particles.
+   * The value is multiplied by particles.connectDistance
+   * @example 0.8 connectDistMult * 150 particles.connectDistance = 120 pixels
+   */
+  setMouseConnectDistMult = connectDistMult => {
+    this.options.mouse.connectDist = this.options.particles.connectDist * (isNaN(connectDistMult) ? 2 / 3 : connectDistMult)
+  }
   /**
    * Format particle color and opacity
    * @param {string} color - The color of the particles and their connections. Can be any CSS supported color format.
@@ -407,18 +423,19 @@ export default class CanvasParticles {
     if (this.ctx.fillStyle[0] === '#') {
       this.options.particles.opacity = { value: 255, hex: 'ff' }
       this.options.particles.color = this.ctx.fillStyle
-    } else {
-      // Example: extract 0.25 from rgba(136, 244, 255, 0.25) and convert to range 0x00 to 0xff and store as a 2 char string
-      const value = ~~(this.ctx.fillStyle.split(',').at(-1).slice(1, -1) * 255)
+      return
+    }
-      this.options.particles.opacity = {
-        value: value,
-        hex: value.toString(16),
-      }
+    // Example: extract 0.25 from rgba(136, 244, 255, 0.25) and convert to range 0x00 to 0xff and store as a 2 char string
+    const value = ~~(this.ctx.fillStyle.split(',').at(-1).slice(1, -1) * 255)
-      // Example: extract 136, 244 and 255 from rgba(136, 244, 255, 0.25) and convert to '#001122' format
-      this.ctx.fillStyle = this.ctx.fillStyle.split(',').slice(0, -1).join(',') + ', 1)'
-      this.options.particles.color = this.ctx.fillStyle
+    this.options.particles.opacity = {
+      value: value,
+      hex: value.toString(16),
     }
+    // Example: extract 136, 244 and 255 from rgba(136, 244, 255, 0.25) and convert to '#001122' format
+    this.ctx.fillStyle = this.ctx.fillStyle.split(',').slice(0, -1).join(',') + ', 1)'
+    this.options.particles.color = this.ctx.fillStyle
   }
 }

package/package.json CHANGED Viewed

@@ -1,43 +1,43 @@
-{
-  "name": "canvasparticles-js",
-  "version": "3.2.21",
-  "description": "In an HTML canvas, a bunch of floating particles connected with lines when they approach eachother. Creating a fun and interactive background.",
-  "main": "canvasParticles.js",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Khoeckman/canvasParticles.git"
-  },
-  "keywords": [
-    "front-end",
-    "frontend",
-    "canvas",
-    "particle",
-    "particles",
-    "jsparticles",
-    "js-particles",
-    "particles.js",
-    "particles-js",
-    "xparticles",
-    "background",
-    "animation",
-    "animated",
-    "interactive",
-    "interaction",
-    "web",
-    "webdesign",
-    "web-design",
-    "javascript",
-    "js",
-    "ecmascript",
-    "module",
-    "html5",
-    "html"
-  ],
-  "author": "Kyle Hoeckman",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Khoeckman/canvasParticles/issues"
-  },
-  "homepage": "http://kylehoeckman.great-site.net/canvas-particles/"
-}
+{
+  "name": "canvasparticles-js",
+  "version": "3.3.4",
+  "description": "In an HTML canvas, a bunch of floating particles connected with lines when they approach eachother. Creating a fun and interactive background.",
+  "main": "canvasParticles.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Khoeckman/canvasParticles.git"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "canvas",
+    "particle",
+    "particles",
+    "jsparticles",
+    "js-particles",
+    "particles.js",
+    "particles-js",
+    "xparticles",
+    "background",
+    "animation",
+    "animated",
+    "interactive",
+    "interaction",
+    "web",
+    "webdesign",
+    "web-design",
+    "javascript",
+    "js",
+    "ecmascript",
+    "module",
+    "html5",
+    "html"
+  ],
+  "author": "Kyle Hoeckman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Khoeckman/canvasParticles/issues"
+  },
+  "homepage": "http://kylehoeckman.great-site.net/canvas-particles/"
+}