canvasparticles-js 3.2.10 → 3.2.12

package/README.md

@@ -2,7 +2,7 @@
 
 <span class="badge-npmversion"><a href="https://npmjs.org/package/canvasparticles-js" title="View this project on NPM"><img src="https://img.shields.io/npm/v/canvasparticles-js.svg" alt="NPM version" /></a></span>
 <span class="badge-npmdownloads"><a href="https://npmjs.org/package/canvasparticles-js" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/canvasparticles-js.svg" alt="NPM downloads" /></a></span>
-[![](https://data.jsdelivr.com/v1/package/npm/canvasparticles-js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/canvasparticles-js)
+<span><a href="https://www.jsdelivr.com/package/npm/canvasparticles-js" title="View this project on jsDelivr"><img src="https://data.jsdelivr.com/v1/package/npm/canvasparticles-js/badge?style=rounded" alt="jsDelivr hits" /></a></span>
 
 ## Description
 
@@ -133,19 +133,23 @@ particles.stop()
 const particles = new CanvasParticles(selector, options)
 particles.options.particles.color = 'blue'
 
-// Required usage of setter for options.background
+// 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 or resize
+// Changing options.particles.ppm or options.particles.max requires a reset
 particles.options.particles.ppm = 100
 particles.options.particles.max = 300
-particles.newParticles() // reset
+particles.newParticles() // required reset
+
+// All other options work on the fly
+particles.options.gravity.repulsive = 1
 ```
 
 ## Options
 
 Configuration options for the particles and their behavior.<br>
-Play around with these values: [Playground](http://kylehoeckman.great-site.net/canvas-particles/#playground)
+Play around with these values: [Sandbox](http://kylehoeckman.great-site.net/canvas-particles/#sandbox)
 
 <details>
   <summary><h3>Options structure</h3></summary>

package/canvasParticles.js

@@ -5,10 +5,10 @@
  * Canvas Particles JS
  *
  * @class CanvasParticles
- * @version 3.2.10
+ * @version 3.2.12
  */
 class CanvasParticles {
-  static version = '3.2.10'
+  static version = '3.2.12'
   animating = false
 
   /**
@@ -73,30 +73,12 @@ class CanvasParticles {
     if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
 
     this.setBackground(this.options.background)
+    this.setParticleColor(this.options.particles.color)
 
     // Transform distance multiplier to absolute distance
     this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
     delete this.options.mouse.connectDistMult
 
-    // Format particle color and opacity
-    this.ctx.fillStyle = this.options.particles.color
-
-    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)
-      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
-    }
-
     // Event handling
     window.addEventListener('resize', this.resizeCanvas)
     this.resizeCanvas()
@@ -411,10 +393,35 @@ class CanvasParticles {
   setBackground = background => {
     if (typeof background === 'string') this.canvas.style.background = this.options.background = background
   }
+
+  /**
+   * Format particle color and opacity
+   * @param {string} color - The color of the particles and their connections. Can be any CSS supported color format.
+   */
+  setParticleColor = color => {
+    this.ctx.fillStyle = color
+
+    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)
+      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
+    }
+  }
 }
 
-if (typeof module !== undefined) {
-  try {
-    module.exports = CanvasParticles
-  } catch (err) {}
-} else globalThis.CanvasParticles = CanvasParticles
+try {
+  if (typeof module !== undefined) module.exports = CanvasParticles
+  else globalThis.CanvasParticles = CanvasParticles
+} catch (err) {
+  console.log('Error while exporting canvasparticles-js:', err)
+}

package/canvasParticles.mjs

@@ -5,10 +5,10 @@
  * Canvas Particles JS
  *
  * @module CanvasParticles
- * @version 3.2.10
+ * @version 3.2.12
  */
 export default class CanvasParticles {
-  static version = '3.2.10'
+  static version = '3.2.12'
   animating = false
 
   /**
@@ -73,30 +73,12 @@ export default class CanvasParticles {
     if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
 
     this.setBackground(this.options.background)
+    this.setParticleColor(this.options.particles.color)
 
     // Transform distance multiplier to absolute distance
     this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
     delete this.options.mouse.connectDistMult
 
-    // Format particle color and opacity
-    this.ctx.fillStyle = this.options.particles.color
-
-    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)
-      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
-    }
-
     // Event handling
     window.addEventListener('resize', this.resizeCanvas)
     this.resizeCanvas()
@@ -411,4 +393,28 @@ export default class CanvasParticles {
   setBackground = background => {
     if (typeof background === 'string') this.canvas.style.background = this.options.background = background
   }
+
+  /**
+   * Format particle color and opacity
+   * @param {string} color - The color of the particles and their connections. Can be any CSS supported color format.
+   */
+  setParticleColor = color => {
+    this.ctx.fillStyle = color
+
+    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)
+      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

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