canvasparticles-js 3.2.9 → 3.2.11

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
  1. package/README.md +21 -7
  2. package/canvasParticles.js +10 -6
  3. package/canvasParticles.mjs +9 -6
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Canvas Particles JS
2
2
 
3
+ <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>
4
+ <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>
5
+ <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>
6
+
3
7
  ## Description
4
8
 
5
9
  In an HTML canvas, a bunch of floating particles connected with lines when they approach eachother.
@@ -104,6 +108,9 @@ Add a `<script>` element in the `<head>` to import `CanvasParticles`.
104
108
 
105
109
  </details>
106
110
 
111
+ <br>
112
+ <br>
113
+
107
114
  ### Start animating
108
115
 
109
116
  ```js
@@ -122,13 +129,17 @@ particles.stop()
122
129
 
123
130
  ### Update options on the fly
124
131
 
125
- Only options.background has a setter.
126
- Not all options can be updated without setter!
127
-
128
132
  ```js
129
133
  const particles = new CanvasParticles(selector, options)
130
- particles.setBackground('red')
131
134
  particles.options.particles.color = 'blue'
135
+
136
+ // Required usage of setter for options.background
137
+ particles.setBackground('red')
138
+
139
+ // Changing options.particles.ppm or options.particles.max requires a reset or resize
140
+ particles.options.particles.ppm = 100
141
+ particles.options.particles.max = 300
142
+ particles.newParticles() // reset
132
143
  ```
133
144
 
134
145
  ## Options
@@ -211,12 +222,15 @@ const options = {
211
222
  connectDistance: 150,
212
223
 
213
224
  /** @param {number} [options.particles.relSpeed=1] - The relative moving speed of the particles.
214
- * The moving speed is a random value between 0.5 and 1 pixels per update.
215
- * @example 2 relSpeed = 1 to 2 pixels per update
216
- * @example 0.5 relSpeed = 0.25 to 0.5 pixels per update
225
+ * The moving speed is a random value between 0.5 and 1 pixels per update multiplied by this value.
217
226
  */
218
227
  relSpeed: 0.8,
219
228
 
229
+ /** @param {number} [options.particles.relSize=1] - The relative size of the particles.
230
+ * The ray is a random value between 0.5 and 2.5 pixels multiplied by this value.
231
+ */
232
+ relSize: 1.1,
233
+
220
234
  /** @param {number} [options.particles.rotationSpeed=2] - The speed at which the particles randomly changes direction.
221
235
  * @example 1 rotationSpeed = max direction change of 0.01 radians per update
222
236
  */
package/canvasParticles.js CHANGED
@@ -5,11 +5,12 @@
5
5
  * Canvas Particles JS
6
6
  *
7
7
  * @class CanvasParticles
8
- * @version 3.2.9
8
+ * @version 3.2.11
9
9
  */
10
10
  class CanvasParticles {
11
- static version = '3.2.9'
11
+ static version = '3.2.11'
12
12
  animating = false
13
+
13
14
  /**
14
15
  * Creates a new CanvasParticles instance.
15
16
  * @param {string} [selector] - The CSS selector for the canvas element.
@@ -42,6 +43,7 @@ class CanvasParticles {
42
43
  maxWork: Math.max(0, options.particles?.maxWork ?? Infinity),
43
44
  connectDist: Math.max(1, options.particles?.connectDistance ?? 150),
44
45
  relSpeed: Math.max(0, options.particles?.relSpeed ?? 1),
46
+ relSize: Math.max(0, options.particles?.relSize ?? 1),
45
47
  rotationSpeed: Math.max(0, (options.particles?.rotationSpeed ?? 2) / 100),
46
48
  },
47
49
  gravity: {
@@ -63,12 +65,15 @@ class CanvasParticles {
63
65
  if (isNaN(this.options.particles.maxWork)) this.options.particles.maxWork = Infinity
64
66
  if (isNaN(this.options.particles.connectDist)) this.options.particles.connectDist = 150
65
67
  if (isNaN(this.options.particles.relSpeed)) this.options.particles.relSpeed = 1
68
+ if (isNaN(this.options.particles.relSize)) this.options.particles.relSize = 1
66
69
  if (isNaN(this.options.particles.rotationSpeed)) this.options.particles.rotationSpeed = 0.02
67
70
 
68
71
  if (isNaN(this.options.gravity.repulsive)) this.options.gravity.repulsive = 0
69
72
  if (isNaN(this.options.gravity.pulling)) this.options.gravity.pulling = 0
70
73
  if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
71
74
 
75
+ this.setBackground(this.options.background)
76
+
72
77
  // Transform distance multiplier to absolute distance
73
78
  this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
74
79
  delete this.options.mouse.connectDistMult
@@ -92,7 +97,8 @@ class CanvasParticles {
92
97
  this.options.particles.color = this.ctx.fillStyle
93
98
  }
94
99
 
95
- this.setBackground(this.options.background)
100
+ // Event handling
101
+ window.addEventListener('resize', this.resizeCanvas)
96
102
  this.resizeCanvas()
97
103
 
98
104
  const updateMousePos = event => {
@@ -105,8 +111,6 @@ class CanvasParticles {
105
111
  this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
106
112
  this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
107
113
  }
108
-
109
- window.addEventListener('resize', () => this.resizeCanvas())
110
114
  window.addEventListener('mousemove', updateMousePos)
111
115
  window.addEventListener('scroll', updateMousePos)
112
116
  }
@@ -165,7 +169,7 @@ class CanvasParticles {
165
169
  offY: 0, // Vertical distance from drawn to logical position in pixels
166
170
  dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
167
171
  speed: speed || (0.5 + Math.random() * 0.5) * this.options.particles.relSpeed, // Velocity in pixels per update
168
- size: size || 0.5 + Math.random() ** 5 * 2, // Ray in pixels of the particle
172
+ size: size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize, // Ray in pixels of the particle
169
173
  })
170
174
  const point = this.particles.at(-1)
171
175
  point.gridPos = this.gridPos(point) // The location of the particle relative to the visible center of the canvas
package/canvasParticles.mjs CHANGED
@@ -5,10 +5,10 @@
5
5
  * Canvas Particles JS
6
6
  *
7
7
  * @module CanvasParticles
8
- * @version 3.2.9
8
+ * @version 3.2.11
9
9
  */
10
10
  export default class CanvasParticles {
11
- static version = '3.2.9'
11
+ static version = '3.2.11'
12
12
  animating = false
13
13
 
14
14
  /**
@@ -43,6 +43,7 @@ export default class CanvasParticles {
43
43
  maxWork: Math.max(0, options.particles?.maxWork ?? Infinity),
44
44
  connectDist: Math.max(1, options.particles?.connectDistance ?? 150),
45
45
  relSpeed: Math.max(0, options.particles?.relSpeed ?? 1),
46
+ relSize: Math.max(0, options.particles?.relSize ?? 1),
46
47
  rotationSpeed: Math.max(0, (options.particles?.rotationSpeed ?? 2) / 100),
47
48
  },
48
49
  gravity: {
@@ -64,12 +65,15 @@ export default class CanvasParticles {
64
65
  if (isNaN(this.options.particles.maxWork)) this.options.particles.maxWork = Infinity
65
66
  if (isNaN(this.options.particles.connectDist)) this.options.particles.connectDist = 150
66
67
  if (isNaN(this.options.particles.relSpeed)) this.options.particles.relSpeed = 1
68
+ if (isNaN(this.options.particles.relSize)) this.options.particles.relSize = 1
67
69
  if (isNaN(this.options.particles.rotationSpeed)) this.options.particles.rotationSpeed = 0.02
68
70
 
69
71
  if (isNaN(this.options.gravity.repulsive)) this.options.gravity.repulsive = 0
70
72
  if (isNaN(this.options.gravity.pulling)) this.options.gravity.pulling = 0
71
73
  if (isNaN(this.options.gravity.friction)) this.options.gravity.friction = 0.9
72
74
 
75
+ this.setBackground(this.options.background)
76
+
73
77
  // Transform distance multiplier to absolute distance
74
78
  this.options.mouse.connectDist = this.options.particles.connectDist * this.options.mouse.connectDistMult
75
79
  delete this.options.mouse.connectDistMult
@@ -93,7 +97,8 @@ export default class CanvasParticles {
93
97
  this.options.particles.color = this.ctx.fillStyle
94
98
  }
95
99
 
96
- this.setBackground(this.options.background)
100
+ // Event handling
101
+ window.addEventListener('resize', this.resizeCanvas)
97
102
  this.resizeCanvas()
98
103
 
99
104
  const updateMousePos = event => {
@@ -106,8 +111,6 @@ export default class CanvasParticles {
106
111
  this.mouseX = this.clientX - this.canvas.offsetLeft + window.scrollX
107
112
  this.mouseY = this.clientY - this.canvas.offsetTop + window.scrollY
108
113
  }
109
-
110
- window.addEventListener('resize', () => this.resizeCanvas())
111
114
  window.addEventListener('mousemove', updateMousePos)
112
115
  window.addEventListener('scroll', updateMousePos)
113
116
  }
@@ -166,7 +169,7 @@ export default class CanvasParticles {
166
169
  offY: 0, // Vertical distance from drawn to logical position in pixels
167
170
  dir: dir || Math.random() * 2 * Math.PI, // Direction in radians
168
171
  speed: speed || (0.5 + Math.random() * 0.5) * this.options.particles.relSpeed, // Velocity in pixels per update
169
- size: size || 0.5 + Math.random() ** 5 * 2, // Ray in pixels of the particle
172
+ size: size || 0.5 + Math.random() ** 5 * 2 * this.options.particles.relSize, // Ray in pixels of the particle
170
173
  })
171
174
  const point = this.particles.at(-1)
172
175
  point.gridPos = this.gridPos(point) // The location of the particle relative to the visible center of the canvas
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvasparticles-js",
3
- "version": "3.2.9",
3
+ "version": "3.2.11",
4
4
  "description": "In an HTML canvas, a bunch of floating particles connected with lines when they approach eachother. Creating a fun and interactive background.",
5
5
  "main": "canvasParticles.js",
6
6
  "type": "module",