canvasparticles-js 3.2.15 → 3.2.17

package/README.md

@@ -131,7 +131,6 @@ particles.stop()
 
 ```js
 const particles = new CanvasParticles(selector, options)
-particles.options.particles.color = 'blue'
 
 // Required usage of setter for options.background and options.particles.color
 particles.setBackground('red')

package/canvasParticles.js

@@ -5,11 +5,10 @@
  * Canvas Particles JS
  *
  * @class CanvasParticles
- * @version 3.2.15
+ * @version 3.2.17
  */
 class CanvasParticles {
-  static version = '3.2.15'
-  animating = false
+  static version = '3.2.17'
 
   /**
    * Creates a new CanvasParticles instance.
@@ -26,6 +25,18 @@ class CanvasParticles {
     // Get 2d drawing functions
     this.ctx = this.canvas.getContext('2d')
 
+    this.animating = false
+    this.formatOptions(options)
+
+    // Event handling
+    window.addEventListener('resize', this.resizeCanvas)
+    this.resizeCanvas()
+
+    window.addEventListener('mousemove', this.updateMousePos)
+    window.addEventListener('scroll', this.updateMousePos)
+  }
+
+  formatOptions = options => {
     // Format and store options
     this.options = {
       background: options.background ?? false,
@@ -72,29 +83,23 @@ 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
 
-    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
 
-    // Event handling
-    window.addEventListener('resize', this.resizeCanvas)
-    this.resizeCanvas()
+    this.setBackground(this.options.background)
+    this.setParticleColor(this.options.particles.color)
+  }
 
-    const updateMousePos = event => {
-      if (!this.animating) return
+  updateMousePos = event => {
+    if (!this.animating) return
 
-      if (event instanceof MouseEvent) {
-        this.clientX = event.clientX
-        this.clientY = event.clientY
-      }
-      this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
-      this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
+    if (event instanceof MouseEvent) {
+      this.clientX = event.clientX
+      this.clientY = event.clientY
     }
-    window.addEventListener('mousemove', updateMousePos)
-    window.addEventListener('scroll', updateMousePos)
+    this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
+    this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
   }
 
   resizeCanvas = () => {
@@ -120,7 +125,7 @@ class CanvasParticles {
   }
 
   /**
-   * Remove all particles and generates new ones.
+   * Remove all particles and generate new ones.
    * The amount of new particles will match 'options.particles.ppm'
    * */
   newParticles = () => {

package/canvasParticles.mjs

@@ -5,11 +5,10 @@
  * Canvas Particles JS
  *
  * @module CanvasParticles
- * @version 3.2.15
+ * @version 3.2.17
  */
 export default class CanvasParticles {
-  static version = '3.2.15'
-  animating = false
+  static version = '3.2.17'
 
   /**
    * Creates a new CanvasParticles instance.
@@ -26,6 +25,18 @@ export default class CanvasParticles {
     // Get 2d drawing functions
     this.ctx = this.canvas.getContext('2d')
 
+    this.animating = false
+    this.formatOptions(options)
+
+    // Event handling
+    window.addEventListener('resize', this.resizeCanvas)
+    this.resizeCanvas()
+
+    window.addEventListener('mousemove', this.updateMousePos)
+    window.addEventListener('scroll', this.updateMousePos)
+  }
+
+  formatOptions = options => {
     // Format and store options
     this.options = {
       background: options.background ?? false,
@@ -72,29 +83,23 @@ 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
 
-    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
 
-    // Event handling
-    window.addEventListener('resize', this.resizeCanvas)
-    this.resizeCanvas()
+    this.setBackground(this.options.background)
+    this.setParticleColor(this.options.particles.color)
+  }
 
-    const updateMousePos = event => {
-      if (!this.animating) return
+  updateMousePos = event => {
+    if (!this.animating) return
 
-      if (event instanceof MouseEvent) {
-        this.clientX = event.clientX
-        this.clientY = event.clientY
-      }
-      this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
-      this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
+    if (event instanceof MouseEvent) {
+      this.clientX = event.clientX
+      this.clientY = event.clientY
     }
-    window.addEventListener('mousemove', updateMousePos)
-    window.addEventListener('scroll', updateMousePos)
+    this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
+    this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
   }
 
   resizeCanvas = () => {
@@ -120,7 +125,7 @@ export default class CanvasParticles {
   }
 
   /**
-   * Remove all particles and generates new ones.
+   * Remove all particles and generate new ones.
    * The amount of new particles will match 'options.particles.ppm'
    * */
   newParticles = () => {

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "canvasparticles-js",
-  "version": "3.2.15",
-  "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",
-    "particles",
-    "particle",
-    "animation",
-    "animated",
-    "javascript",
-    "js",
-    "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.2.17",
+  "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",
+    "particles",
+    "particle",
+    "animation",
+    "animated",
+    "javascript",
+    "js",
+    "html5",
+    "html"
+  ],
+  "author": "Kyle Hoeckman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Khoeckman/canvasParticles/issues"
+  },
+  "homepage": "http://kylehoeckman.great-site.net/canvas-particles/"
+}