canvasparticles-js 3.3.9 → 3.4.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.
- package/LICENSE +1 -1
- package/README.md +22 -10
- package/canvasParticles.js +477 -465
- package/canvasParticles.mjs +129 -117
- package/package.json +25 -9
- package/demo/global.html +0 -108
- package/demo/initParticles.js +0 -57
- package/demo/module.html +0 -45
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
## Description
|
|
8
8
|
|
|
9
|
-
In an HTML canvas, a bunch of floating particles connected with lines when they approach
|
|
9
|
+
In an HTML canvas, a bunch of floating particles connected with lines when they approach each other.
|
|
10
10
|
Creating a fun and interactive background. Colors, interaction and gravity can be customized!
|
|
11
11
|
|
|
12
12
|
[Showcase](#showcase)<br>
|
|
@@ -17,7 +17,7 @@ Creating a fun and interactive background. Colors, interaction and gravity can b
|
|
|
17
17
|
## Showcase
|
|
18
18
|
|
|
19
19
|
If you dont like reading documentation this website is for you:<br>
|
|
20
|
-
[
|
|
20
|
+
[https://canvasparticleshomepage.onrender.com/](https://canvasparticleshomepage.onrender.com/)
|
|
21
21
|
|
|
22
22
|
## Implementation
|
|
23
23
|
|
|
@@ -59,7 +59,7 @@ Add an inline `<script>` element at the very bottom of the `<body>`.
|
|
|
59
59
|
<script>
|
|
60
60
|
const initParticles = () => {
|
|
61
61
|
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
62
|
-
const options = {} // See #options
|
|
62
|
+
const options = { ... } // See #options
|
|
63
63
|
new CanvasParticles(selector, options).start()
|
|
64
64
|
}
|
|
65
65
|
document.addEventListener('DOMContentLoaded', initParticles)
|
|
@@ -89,7 +89,7 @@ Inside _initParticles.js_:
|
|
|
89
89
|
import CanvasParticles from './canvasParticles.mjs'
|
|
90
90
|
|
|
91
91
|
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
92
|
-
const options = {} // See #options
|
|
92
|
+
const options = { ... } // See #options
|
|
93
93
|
new CanvasParticles(selector, options).start()
|
|
94
94
|
```
|
|
95
95
|
|
|
@@ -115,7 +115,7 @@ Add a `<script>` element in the `<head>` to import `CanvasParticles`.
|
|
|
115
115
|
|
|
116
116
|
```js
|
|
117
117
|
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
118
|
-
const options = {} // See #options
|
|
118
|
+
const options = { ... } // See #options
|
|
119
119
|
new CanvasParticles(selector, options).start()
|
|
120
120
|
```
|
|
121
121
|
|
|
@@ -249,7 +249,7 @@ const options = {
|
|
|
249
249
|
|
|
250
250
|
**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.
|
|
251
251
|
|
|
252
|
-
#### Using setter
|
|
252
|
+
#### Using the setter
|
|
253
253
|
|
|
254
254
|
These options require dedicated setters to ensure proper integration.
|
|
255
255
|
|
|
@@ -266,9 +266,9 @@ particles.setMouseConnectDistMult(0.8)
|
|
|
266
266
|
particles.setParticleColor('hsl(149, 100%, 50%)')
|
|
267
267
|
```
|
|
268
268
|
|
|
269
|
-
####
|
|
269
|
+
#### Changing the particle count
|
|
270
270
|
|
|
271
|
-
After
|
|
271
|
+
After updating the following options, the number of particles is not automatically adjusted:
|
|
272
272
|
|
|
273
273
|
- options.particles.ppm
|
|
274
274
|
- options.particles.max
|
|
@@ -276,10 +276,13 @@ After being updated, these options must call `newParticles()` to apply the chang
|
|
|
276
276
|
```js
|
|
277
277
|
particles.options.particles.ppm = 100
|
|
278
278
|
particles.options.particles.max = 300
|
|
279
|
-
|
|
279
|
+
|
|
280
|
+
// Apply the changes using one of these methods:
|
|
281
|
+
particles.newParticles() // Remove all particles and create the correct amount of new ones
|
|
282
|
+
particles.matchParticleCount() // Add or remove some particles to match the count
|
|
280
283
|
```
|
|
281
284
|
|
|
282
|
-
####
|
|
285
|
+
#### Modifying object properties
|
|
283
286
|
|
|
284
287
|
**All** other options can be updated by modifying the `options` object properties, with changes taking immediate effect.
|
|
285
288
|
|
|
@@ -289,6 +292,15 @@ particles.options.particles.connectDist = 200
|
|
|
289
292
|
particles.options.gravity.repulsive = 1
|
|
290
293
|
```
|
|
291
294
|
|
|
295
|
+
#### Updating options object
|
|
296
|
+
|
|
297
|
+
To update all options for the same class, pass a new options object.
|
|
298
|
+
|
|
299
|
+
```js
|
|
300
|
+
const options = { ... }
|
|
301
|
+
particles.setOptions(options)
|
|
302
|
+
```
|
|
303
|
+
|
|
292
304
|
## One pager example
|
|
293
305
|
|
|
294
306
|
```html
|