canvasparticles-js 3.3.9 → 3.4.5
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 +79 -37
- 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,18 +6,25 @@
|
|
|
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>
|
|
13
|
+
[Installation](#installation)<br>
|
|
13
14
|
[Implementation](#implementation)<br>
|
|
14
15
|
[Options](#options)<br>
|
|
15
|
-
[
|
|
16
|
+
[One pager example](#one-pager-example)
|
|
16
17
|
|
|
17
18
|
## Showcase
|
|
18
19
|
|
|
19
20
|
If you dont like reading documentation this website is for you:<br>
|
|
20
|
-
[
|
|
21
|
+
[https://canvasparticleshomepage.onrender.com/](https://canvasparticleshomepage.onrender.com/)
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```batch
|
|
26
|
+
npm install canvasparticles-js
|
|
27
|
+
```
|
|
21
28
|
|
|
22
29
|
## Implementation
|
|
23
30
|
|
|
@@ -40,37 +47,44 @@ Resize the `<canvas>` so it covers the whole page and place it behind all elemen
|
|
|
40
47
|
}
|
|
41
48
|
```
|
|
42
49
|
|
|
43
|
-
<details>
|
|
44
|
-
<summary><h3>Import
|
|
45
|
-
|
|
46
|
-
Add a `<script>` element in the `<head>` to import the *canvasParticles.js* file.<br>
|
|
47
|
-
```html
|
|
48
|
-
<head>
|
|
49
|
-
<script src="./canvasParticles.js" defer></script>
|
|
50
|
-
</head>
|
|
51
|
-
```
|
|
50
|
+
<details open>
|
|
51
|
+
<summary><h3>Import with npm</h3></summary>
|
|
52
52
|
|
|
53
|
-
Add
|
|
53
|
+
Add a `<script>` element in the `<head>` to import _initParticles.js_.
|
|
54
54
|
|
|
55
55
|
```html
|
|
56
|
-
<
|
|
57
|
-
|
|
56
|
+
<head>
|
|
57
|
+
<script src="./initParticles.js" type="module"></script>
|
|
58
|
+
</head>
|
|
59
|
+
```
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
Inside _initParticles.js_:
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
import CanvasParticles from 'canvasparticles-js'
|
|
65
|
+
|
|
66
|
+
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
67
|
+
const options = { ... } // See #options
|
|
68
|
+
new CanvasParticles(selector, options).start()
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
</details>
|
|
72
|
+
|
|
73
|
+
<details>
|
|
74
|
+
<summary><h3>Import with jsDelivr</h3></summary>
|
|
75
|
+
|
|
76
|
+
Add a `<script>` element in the `<head>` to import `CanvasParticles`.
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<head>
|
|
80
|
+
<script src="https://cdn.jsdelivr.net/npm/canvasparticles-js/canvasParticles.min.js" defer></script>
|
|
81
|
+
</head>
|
|
68
82
|
```
|
|
69
83
|
|
|
70
84
|
</details>
|
|
71
85
|
|
|
72
86
|
<details>
|
|
73
|
-
<summary><h3>Import as ES module</h3></summary>
|
|
87
|
+
<summary><h3>Import raw file as ES module</h3></summary>
|
|
74
88
|
|
|
75
89
|
Be aware that using ES modules is only possible when running the application on a (local) server.<br>
|
|
76
90
|
[Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
|
|
@@ -89,21 +103,37 @@ Inside _initParticles.js_:
|
|
|
89
103
|
import CanvasParticles from './canvasParticles.mjs'
|
|
90
104
|
|
|
91
105
|
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
92
|
-
const options = {} // See #options
|
|
106
|
+
const options = { ... } // See #options
|
|
93
107
|
new CanvasParticles(selector, options).start()
|
|
94
108
|
```
|
|
95
109
|
|
|
96
110
|
</details>
|
|
97
111
|
|
|
98
112
|
<details>
|
|
99
|
-
<summary><h3>Import
|
|
113
|
+
<summary><h3>Import raw file globally</h3></summary>
|
|
114
|
+
|
|
115
|
+
Add a `<script>` element in the `<head>` to import the *canvasParticles.js* file.<br>
|
|
116
|
+
```html
|
|
117
|
+
<head>
|
|
118
|
+
<script src="./canvasParticles.js" defer></script>
|
|
119
|
+
</head>
|
|
120
|
+
```
|
|
100
121
|
|
|
101
|
-
Add
|
|
122
|
+
Add an inline `<script>` element at the very bottom of the `<body>`.
|
|
102
123
|
|
|
103
124
|
```html
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
125
|
+
<body>
|
|
126
|
+
...
|
|
127
|
+
|
|
128
|
+
<script>
|
|
129
|
+
const initParticles = () => {
|
|
130
|
+
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
131
|
+
const options = { ... } // See #options
|
|
132
|
+
new CanvasParticles(selector, options).start()
|
|
133
|
+
}
|
|
134
|
+
document.addEventListener('DOMContentLoaded', initParticles)
|
|
135
|
+
</script>
|
|
136
|
+
</body>
|
|
107
137
|
```
|
|
108
138
|
|
|
109
139
|
</details>
|
|
@@ -115,7 +145,7 @@ Add a `<script>` element in the `<head>` to import `CanvasParticles`.
|
|
|
115
145
|
|
|
116
146
|
```js
|
|
117
147
|
const selector = '#canvas-particles' // Query Selector for the canvas
|
|
118
|
-
const options = {} // See #options
|
|
148
|
+
const options = { ... } // See #options
|
|
119
149
|
new CanvasParticles(selector, options).start()
|
|
120
150
|
```
|
|
121
151
|
|
|
@@ -249,7 +279,7 @@ const options = {
|
|
|
249
279
|
|
|
250
280
|
**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
281
|
|
|
252
|
-
#### Using setter
|
|
282
|
+
#### Using the setter
|
|
253
283
|
|
|
254
284
|
These options require dedicated setters to ensure proper integration.
|
|
255
285
|
|
|
@@ -266,9 +296,9 @@ particles.setMouseConnectDistMult(0.8)
|
|
|
266
296
|
particles.setParticleColor('hsl(149, 100%, 50%)')
|
|
267
297
|
```
|
|
268
298
|
|
|
269
|
-
####
|
|
299
|
+
#### Changing the particle count
|
|
270
300
|
|
|
271
|
-
After
|
|
301
|
+
After updating the following options, the number of particles is not automatically adjusted:
|
|
272
302
|
|
|
273
303
|
- options.particles.ppm
|
|
274
304
|
- options.particles.max
|
|
@@ -276,10 +306,13 @@ After being updated, these options must call `newParticles()` to apply the chang
|
|
|
276
306
|
```js
|
|
277
307
|
particles.options.particles.ppm = 100
|
|
278
308
|
particles.options.particles.max = 300
|
|
279
|
-
|
|
309
|
+
|
|
310
|
+
// Apply the changes using one of these methods:
|
|
311
|
+
particles.newParticles() // Remove all particles and create the correct amount of new ones
|
|
312
|
+
particles.matchParticleCount() // Add or remove some particles to match the count
|
|
280
313
|
```
|
|
281
314
|
|
|
282
|
-
####
|
|
315
|
+
#### Modifying object properties
|
|
283
316
|
|
|
284
317
|
**All** other options can be updated by modifying the `options` object properties, with changes taking immediate effect.
|
|
285
318
|
|
|
@@ -289,6 +322,15 @@ particles.options.particles.connectDist = 200
|
|
|
289
322
|
particles.options.gravity.repulsive = 1
|
|
290
323
|
```
|
|
291
324
|
|
|
325
|
+
#### Updating options object
|
|
326
|
+
|
|
327
|
+
To update all options for the same class, pass a new options object.
|
|
328
|
+
|
|
329
|
+
```js
|
|
330
|
+
const options = { ... }
|
|
331
|
+
particles.setOptions(options)
|
|
332
|
+
```
|
|
333
|
+
|
|
292
334
|
## One pager example
|
|
293
335
|
|
|
294
336
|
```html
|