@tsparticles/fireworks 3.0.1 → 3.0.3
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/README.md +3 -0
- package/browser/FireworkOptions.js +5 -1
- package/browser/fireworks.js +38 -35
- package/cjs/FireworkOptions.js +5 -1
- package/cjs/fireworks.js +38 -35
- package/esm/FireworkOptions.js +5 -1
- package/esm/fireworks.js +38 -35
- package/package.json +12 -10
- package/report.html +2 -2
- package/tsparticles.fireworks.bundle.js +278 -76
- package/tsparticles.fireworks.bundle.min.js +1 -1
- package/tsparticles.fireworks.bundle.min.js.LICENSE.txt +1 -1
- package/tsparticles.fireworks.js +66 -41
- package/tsparticles.fireworks.min.js +1 -1
- package/tsparticles.fireworks.min.js.LICENSE.txt +1 -1
- package/types/FireworkOptions.d.ts +1 -0
- package/types/IFireworkOptions.d.ts +1 -0
- package/umd/FireworkOptions.js +5 -1
- package/umd/fireworks.js +39 -36
package/README.md
CHANGED
|
@@ -10,8 +10,10 @@ beautiful fireworks effects with ease.
|
|
|
10
10
|
**Included Packages**
|
|
11
11
|
|
|
12
12
|
- [@tsparticles/engine](https://github.com/tsparticles/tsparticles/tree/main/engine)
|
|
13
|
+
- [@tsparticles/effect-trail](https://github.com/tsparticles/tsparticles/tree/main/effects/trail)
|
|
13
14
|
- [@tsparticles/move-base](https://github.com/tsparticles/tsparticles/tree/main/move/base)
|
|
14
15
|
- [@tsparticles/plugin-emitters](https://github.com/tsparticles/tsparticles/tree/main/plugins/emitters)
|
|
16
|
+
- [@tsparticles/plugin-emitters-shape-square](https://github.com/tsparticles/tsparticles/tree/main/plugins/emitters/shape/square)
|
|
15
17
|
- [@tsparticles/plugin-sounds](https://github.com/tsparticles/tsparticles/tree/main/plugins/sounds)
|
|
16
18
|
- [@tsparticles/shape-circle](https://github.com/tsparticles/tsparticles/tree/main/shapes/circle)
|
|
17
19
|
- [@tsparticles/shape-line](https://github.com/tsparticles/tsparticles/tree/main/shapes/line)
|
|
@@ -78,6 +80,7 @@ fireworks({
|
|
|
78
80
|
|
|
79
81
|
The `fireworks` has only a single `options` object parameter, with the following properties:
|
|
80
82
|
|
|
83
|
+
- `background` String: The background color of the canvas, it can be any valid CSS color, can be transparent as well.
|
|
81
84
|
- `brightness` Number or { min: number; max: number; }: The brightness offset applied to the particles color, from -100
|
|
82
85
|
to 100.
|
|
83
86
|
- `colors` String or _Array<String>_: An array of color strings, in the HEX format... you know, like `#bada55`.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { isArray, setRangeValue, } from "@tsparticles/engine";
|
|
2
2
|
export class FireworkOptions {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.background = "none";
|
|
4
5
|
this.brightness = {
|
|
5
6
|
min: -30,
|
|
6
7
|
max: 30,
|
|
@@ -11,7 +12,7 @@ export class FireworkOptions {
|
|
|
11
12
|
min: 10,
|
|
12
13
|
max: 30,
|
|
13
14
|
};
|
|
14
|
-
this.rate =
|
|
15
|
+
this.rate = 10;
|
|
15
16
|
this.saturation = {
|
|
16
17
|
min: -30,
|
|
17
18
|
max: 30,
|
|
@@ -27,6 +28,9 @@ export class FireworkOptions {
|
|
|
27
28
|
if (!data) {
|
|
28
29
|
return;
|
|
29
30
|
}
|
|
31
|
+
if (data.background !== undefined) {
|
|
32
|
+
this.background = data.background;
|
|
33
|
+
}
|
|
30
34
|
if (data.colors !== undefined) {
|
|
31
35
|
if (isArray(data.colors)) {
|
|
32
36
|
this.colors = [...data.colors];
|
package/browser/fireworks.js
CHANGED
|
@@ -3,16 +3,18 @@ import { FireworkOptions } from "./FireworkOptions.js";
|
|
|
3
3
|
import { loadBasic } from "@tsparticles/basic";
|
|
4
4
|
import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
|
|
5
5
|
import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
|
|
6
|
+
import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
|
|
6
7
|
import { loadLifeUpdater } from "@tsparticles/updater-life";
|
|
7
8
|
import { loadLineShape } from "@tsparticles/shape-line";
|
|
8
9
|
import { loadRotateUpdater } from "@tsparticles/updater-rotate";
|
|
9
10
|
import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
|
|
10
11
|
import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
|
|
12
|
+
import { loadTrailEffect } from "@tsparticles/effect-trail";
|
|
11
13
|
let initialized = false;
|
|
12
14
|
let initializing = false;
|
|
13
15
|
const explodeSoundCheck = (args) => {
|
|
14
16
|
const data = args.data;
|
|
15
|
-
return data.particle.shape === "
|
|
17
|
+
return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
|
|
16
18
|
};
|
|
17
19
|
class FireworksInstance {
|
|
18
20
|
constructor(container) {
|
|
@@ -45,12 +47,14 @@ async function initPlugins() {
|
|
|
45
47
|
}
|
|
46
48
|
initializing = true;
|
|
47
49
|
await loadEmittersPlugin(tsParticles, false);
|
|
50
|
+
await loadEmittersShapeSquare(tsParticles, false);
|
|
48
51
|
await loadSoundsPlugin(tsParticles, false);
|
|
49
52
|
await loadLineShape(tsParticles, false);
|
|
50
53
|
await loadRotateUpdater(tsParticles, false);
|
|
51
54
|
await loadDestroyUpdater(tsParticles, false);
|
|
52
55
|
await loadLifeUpdater(tsParticles, false);
|
|
53
56
|
await loadStrokeColorUpdater(tsParticles, false);
|
|
57
|
+
await loadTrailEffect(tsParticles, false);
|
|
54
58
|
await loadBasic(tsParticles, false);
|
|
55
59
|
initializing = false;
|
|
56
60
|
initialized = true;
|
|
@@ -70,9 +74,9 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
70
74
|
const particlesOptions = {
|
|
71
75
|
detectRetina: true,
|
|
72
76
|
background: {
|
|
73
|
-
color:
|
|
77
|
+
color: options.background,
|
|
74
78
|
},
|
|
75
|
-
fpsLimit:
|
|
79
|
+
fpsLimit: 60,
|
|
76
80
|
emitters: {
|
|
77
81
|
direction: "top",
|
|
78
82
|
life: {
|
|
@@ -100,7 +104,7 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
100
104
|
value: 0,
|
|
101
105
|
},
|
|
102
106
|
color: {
|
|
103
|
-
value:
|
|
107
|
+
value: "#fff",
|
|
104
108
|
},
|
|
105
109
|
destroy: {
|
|
106
110
|
mode: "split",
|
|
@@ -121,8 +125,8 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
121
125
|
l: options.brightness,
|
|
122
126
|
},
|
|
123
127
|
particles: {
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
color: {
|
|
129
|
+
value: options.colors,
|
|
126
130
|
},
|
|
127
131
|
number: {
|
|
128
132
|
value: 0,
|
|
@@ -134,12 +138,23 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
134
138
|
},
|
|
135
139
|
animation: {
|
|
136
140
|
enable: true,
|
|
137
|
-
speed:
|
|
141
|
+
speed: 1,
|
|
138
142
|
sync: false,
|
|
139
143
|
startValue: "max",
|
|
140
144
|
destroy: "min",
|
|
141
145
|
},
|
|
142
146
|
},
|
|
147
|
+
effect: {
|
|
148
|
+
type: "trail",
|
|
149
|
+
options: {
|
|
150
|
+
trail: {
|
|
151
|
+
length: {
|
|
152
|
+
min: 5,
|
|
153
|
+
max: 10,
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
143
158
|
shape: {
|
|
144
159
|
type: "circle",
|
|
145
160
|
},
|
|
@@ -181,32 +196,27 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
181
196
|
life: {
|
|
182
197
|
count: 1,
|
|
183
198
|
},
|
|
184
|
-
|
|
185
|
-
type: "
|
|
199
|
+
effect: {
|
|
200
|
+
type: "trail",
|
|
186
201
|
options: {
|
|
187
|
-
|
|
188
|
-
|
|
202
|
+
trail: {
|
|
203
|
+
length: {
|
|
204
|
+
min: 10,
|
|
205
|
+
max: 30,
|
|
206
|
+
},
|
|
207
|
+
minWidth: 1,
|
|
208
|
+
maxWidth: 1,
|
|
189
209
|
},
|
|
190
210
|
},
|
|
191
211
|
},
|
|
212
|
+
shape: {
|
|
213
|
+
type: "circle",
|
|
214
|
+
},
|
|
192
215
|
size: {
|
|
193
|
-
value:
|
|
194
|
-
min: 0.1,
|
|
195
|
-
max: 50,
|
|
196
|
-
},
|
|
197
|
-
animation: {
|
|
198
|
-
enable: true,
|
|
199
|
-
sync: true,
|
|
200
|
-
speed: 90,
|
|
201
|
-
startValue: "max",
|
|
202
|
-
destroy: "min",
|
|
203
|
-
},
|
|
216
|
+
value: 1,
|
|
204
217
|
},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
value: "#ffffff",
|
|
208
|
-
},
|
|
209
|
-
width: 0.5,
|
|
218
|
+
opacity: {
|
|
219
|
+
value: 0.5,
|
|
210
220
|
},
|
|
211
221
|
rotate: {
|
|
212
222
|
path: true,
|
|
@@ -227,20 +237,13 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
227
237
|
default: "destroy",
|
|
228
238
|
top: "none",
|
|
229
239
|
},
|
|
230
|
-
trail: {
|
|
231
|
-
fill: {
|
|
232
|
-
color: "#000",
|
|
233
|
-
},
|
|
234
|
-
enable: true,
|
|
235
|
-
length: 10,
|
|
236
|
-
},
|
|
237
240
|
},
|
|
238
241
|
},
|
|
239
242
|
sounds: {
|
|
240
243
|
enable: options.sounds,
|
|
241
244
|
events: [
|
|
242
245
|
{
|
|
243
|
-
event: "
|
|
246
|
+
event: "particleDestroyed",
|
|
244
247
|
filter: explodeSoundCheck,
|
|
245
248
|
audio: [
|
|
246
249
|
"https://particles.js.org/audio/explosion0.mp3",
|
package/cjs/FireworkOptions.js
CHANGED
|
@@ -4,6 +4,7 @@ exports.FireworkOptions = void 0;
|
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
5
|
class FireworkOptions {
|
|
6
6
|
constructor() {
|
|
7
|
+
this.background = "none";
|
|
7
8
|
this.brightness = {
|
|
8
9
|
min: -30,
|
|
9
10
|
max: 30,
|
|
@@ -14,7 +15,7 @@ class FireworkOptions {
|
|
|
14
15
|
min: 10,
|
|
15
16
|
max: 30,
|
|
16
17
|
};
|
|
17
|
-
this.rate =
|
|
18
|
+
this.rate = 10;
|
|
18
19
|
this.saturation = {
|
|
19
20
|
min: -30,
|
|
20
21
|
max: 30,
|
|
@@ -30,6 +31,9 @@ class FireworkOptions {
|
|
|
30
31
|
if (!data) {
|
|
31
32
|
return;
|
|
32
33
|
}
|
|
34
|
+
if (data.background !== undefined) {
|
|
35
|
+
this.background = data.background;
|
|
36
|
+
}
|
|
33
37
|
if (data.colors !== undefined) {
|
|
34
38
|
if ((0, engine_1.isArray)(data.colors)) {
|
|
35
39
|
this.colors = [...data.colors];
|
package/cjs/fireworks.js
CHANGED
|
@@ -6,16 +6,18 @@ const FireworkOptions_js_1 = require("./FireworkOptions.js");
|
|
|
6
6
|
const basic_1 = require("@tsparticles/basic");
|
|
7
7
|
const updater_destroy_1 = require("@tsparticles/updater-destroy");
|
|
8
8
|
const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
|
|
9
|
+
const plugin_emitters_shape_square_1 = require("@tsparticles/plugin-emitters-shape-square");
|
|
9
10
|
const updater_life_1 = require("@tsparticles/updater-life");
|
|
10
11
|
const shape_line_1 = require("@tsparticles/shape-line");
|
|
11
12
|
const updater_rotate_1 = require("@tsparticles/updater-rotate");
|
|
12
13
|
const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
|
|
13
14
|
const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
|
|
15
|
+
const effect_trail_1 = require("@tsparticles/effect-trail");
|
|
14
16
|
let initialized = false;
|
|
15
17
|
let initializing = false;
|
|
16
18
|
const explodeSoundCheck = (args) => {
|
|
17
19
|
const data = args.data;
|
|
18
|
-
return data.particle.shape === "
|
|
20
|
+
return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
|
|
19
21
|
};
|
|
20
22
|
class FireworksInstance {
|
|
21
23
|
constructor(container) {
|
|
@@ -48,12 +50,14 @@ async function initPlugins() {
|
|
|
48
50
|
}
|
|
49
51
|
initializing = true;
|
|
50
52
|
await (0, plugin_emitters_1.loadEmittersPlugin)(engine_1.tsParticles, false);
|
|
53
|
+
await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine_1.tsParticles, false);
|
|
51
54
|
await (0, plugin_sounds_1.loadSoundsPlugin)(engine_1.tsParticles, false);
|
|
52
55
|
await (0, shape_line_1.loadLineShape)(engine_1.tsParticles, false);
|
|
53
56
|
await (0, updater_rotate_1.loadRotateUpdater)(engine_1.tsParticles, false);
|
|
54
57
|
await (0, updater_destroy_1.loadDestroyUpdater)(engine_1.tsParticles, false);
|
|
55
58
|
await (0, updater_life_1.loadLifeUpdater)(engine_1.tsParticles, false);
|
|
56
59
|
await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine_1.tsParticles, false);
|
|
60
|
+
await (0, effect_trail_1.loadTrailEffect)(engine_1.tsParticles, false);
|
|
57
61
|
await (0, basic_1.loadBasic)(engine_1.tsParticles, false);
|
|
58
62
|
initializing = false;
|
|
59
63
|
initialized = true;
|
|
@@ -73,9 +77,9 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
73
77
|
const particlesOptions = {
|
|
74
78
|
detectRetina: true,
|
|
75
79
|
background: {
|
|
76
|
-
color:
|
|
80
|
+
color: options.background,
|
|
77
81
|
},
|
|
78
|
-
fpsLimit:
|
|
82
|
+
fpsLimit: 60,
|
|
79
83
|
emitters: {
|
|
80
84
|
direction: "top",
|
|
81
85
|
life: {
|
|
@@ -103,7 +107,7 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
103
107
|
value: 0,
|
|
104
108
|
},
|
|
105
109
|
color: {
|
|
106
|
-
value:
|
|
110
|
+
value: "#fff",
|
|
107
111
|
},
|
|
108
112
|
destroy: {
|
|
109
113
|
mode: "split",
|
|
@@ -124,8 +128,8 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
124
128
|
l: options.brightness,
|
|
125
129
|
},
|
|
126
130
|
particles: {
|
|
127
|
-
|
|
128
|
-
|
|
131
|
+
color: {
|
|
132
|
+
value: options.colors,
|
|
129
133
|
},
|
|
130
134
|
number: {
|
|
131
135
|
value: 0,
|
|
@@ -137,12 +141,23 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
137
141
|
},
|
|
138
142
|
animation: {
|
|
139
143
|
enable: true,
|
|
140
|
-
speed:
|
|
144
|
+
speed: 1,
|
|
141
145
|
sync: false,
|
|
142
146
|
startValue: "max",
|
|
143
147
|
destroy: "min",
|
|
144
148
|
},
|
|
145
149
|
},
|
|
150
|
+
effect: {
|
|
151
|
+
type: "trail",
|
|
152
|
+
options: {
|
|
153
|
+
trail: {
|
|
154
|
+
length: {
|
|
155
|
+
min: 5,
|
|
156
|
+
max: 10,
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
},
|
|
146
161
|
shape: {
|
|
147
162
|
type: "circle",
|
|
148
163
|
},
|
|
@@ -184,32 +199,27 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
184
199
|
life: {
|
|
185
200
|
count: 1,
|
|
186
201
|
},
|
|
187
|
-
|
|
188
|
-
type: "
|
|
202
|
+
effect: {
|
|
203
|
+
type: "trail",
|
|
189
204
|
options: {
|
|
190
|
-
|
|
191
|
-
|
|
205
|
+
trail: {
|
|
206
|
+
length: {
|
|
207
|
+
min: 10,
|
|
208
|
+
max: 30,
|
|
209
|
+
},
|
|
210
|
+
minWidth: 1,
|
|
211
|
+
maxWidth: 1,
|
|
192
212
|
},
|
|
193
213
|
},
|
|
194
214
|
},
|
|
215
|
+
shape: {
|
|
216
|
+
type: "circle",
|
|
217
|
+
},
|
|
195
218
|
size: {
|
|
196
|
-
value:
|
|
197
|
-
min: 0.1,
|
|
198
|
-
max: 50,
|
|
199
|
-
},
|
|
200
|
-
animation: {
|
|
201
|
-
enable: true,
|
|
202
|
-
sync: true,
|
|
203
|
-
speed: 90,
|
|
204
|
-
startValue: "max",
|
|
205
|
-
destroy: "min",
|
|
206
|
-
},
|
|
219
|
+
value: 1,
|
|
207
220
|
},
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
value: "#ffffff",
|
|
211
|
-
},
|
|
212
|
-
width: 0.5,
|
|
221
|
+
opacity: {
|
|
222
|
+
value: 0.5,
|
|
213
223
|
},
|
|
214
224
|
rotate: {
|
|
215
225
|
path: true,
|
|
@@ -230,20 +240,13 @@ async function fireworks(idOrOptions, sourceOptions) {
|
|
|
230
240
|
default: "destroy",
|
|
231
241
|
top: "none",
|
|
232
242
|
},
|
|
233
|
-
trail: {
|
|
234
|
-
fill: {
|
|
235
|
-
color: "#000",
|
|
236
|
-
},
|
|
237
|
-
enable: true,
|
|
238
|
-
length: 10,
|
|
239
|
-
},
|
|
240
243
|
},
|
|
241
244
|
},
|
|
242
245
|
sounds: {
|
|
243
246
|
enable: options.sounds,
|
|
244
247
|
events: [
|
|
245
248
|
{
|
|
246
|
-
event: "
|
|
249
|
+
event: "particleDestroyed",
|
|
247
250
|
filter: explodeSoundCheck,
|
|
248
251
|
audio: [
|
|
249
252
|
"https://particles.js.org/audio/explosion0.mp3",
|
package/esm/FireworkOptions.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { isArray, setRangeValue, } from "@tsparticles/engine";
|
|
2
2
|
export class FireworkOptions {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.background = "none";
|
|
4
5
|
this.brightness = {
|
|
5
6
|
min: -30,
|
|
6
7
|
max: 30,
|
|
@@ -11,7 +12,7 @@ export class FireworkOptions {
|
|
|
11
12
|
min: 10,
|
|
12
13
|
max: 30,
|
|
13
14
|
};
|
|
14
|
-
this.rate =
|
|
15
|
+
this.rate = 10;
|
|
15
16
|
this.saturation = {
|
|
16
17
|
min: -30,
|
|
17
18
|
max: 30,
|
|
@@ -27,6 +28,9 @@ export class FireworkOptions {
|
|
|
27
28
|
if (!data) {
|
|
28
29
|
return;
|
|
29
30
|
}
|
|
31
|
+
if (data.background !== undefined) {
|
|
32
|
+
this.background = data.background;
|
|
33
|
+
}
|
|
30
34
|
if (data.colors !== undefined) {
|
|
31
35
|
if (isArray(data.colors)) {
|
|
32
36
|
this.colors = [...data.colors];
|
package/esm/fireworks.js
CHANGED
|
@@ -3,16 +3,18 @@ import { FireworkOptions } from "./FireworkOptions.js";
|
|
|
3
3
|
import { loadBasic } from "@tsparticles/basic";
|
|
4
4
|
import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
|
|
5
5
|
import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
|
|
6
|
+
import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
|
|
6
7
|
import { loadLifeUpdater } from "@tsparticles/updater-life";
|
|
7
8
|
import { loadLineShape } from "@tsparticles/shape-line";
|
|
8
9
|
import { loadRotateUpdater } from "@tsparticles/updater-rotate";
|
|
9
10
|
import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
|
|
10
11
|
import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
|
|
12
|
+
import { loadTrailEffect } from "@tsparticles/effect-trail";
|
|
11
13
|
let initialized = false;
|
|
12
14
|
let initializing = false;
|
|
13
15
|
const explodeSoundCheck = (args) => {
|
|
14
16
|
const data = args.data;
|
|
15
|
-
return data.particle.shape === "
|
|
17
|
+
return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
|
|
16
18
|
};
|
|
17
19
|
class FireworksInstance {
|
|
18
20
|
constructor(container) {
|
|
@@ -45,12 +47,14 @@ async function initPlugins() {
|
|
|
45
47
|
}
|
|
46
48
|
initializing = true;
|
|
47
49
|
await loadEmittersPlugin(tsParticles, false);
|
|
50
|
+
await loadEmittersShapeSquare(tsParticles, false);
|
|
48
51
|
await loadSoundsPlugin(tsParticles, false);
|
|
49
52
|
await loadLineShape(tsParticles, false);
|
|
50
53
|
await loadRotateUpdater(tsParticles, false);
|
|
51
54
|
await loadDestroyUpdater(tsParticles, false);
|
|
52
55
|
await loadLifeUpdater(tsParticles, false);
|
|
53
56
|
await loadStrokeColorUpdater(tsParticles, false);
|
|
57
|
+
await loadTrailEffect(tsParticles, false);
|
|
54
58
|
await loadBasic(tsParticles, false);
|
|
55
59
|
initializing = false;
|
|
56
60
|
initialized = true;
|
|
@@ -70,9 +74,9 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
70
74
|
const particlesOptions = {
|
|
71
75
|
detectRetina: true,
|
|
72
76
|
background: {
|
|
73
|
-
color:
|
|
77
|
+
color: options.background,
|
|
74
78
|
},
|
|
75
|
-
fpsLimit:
|
|
79
|
+
fpsLimit: 60,
|
|
76
80
|
emitters: {
|
|
77
81
|
direction: "top",
|
|
78
82
|
life: {
|
|
@@ -100,7 +104,7 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
100
104
|
value: 0,
|
|
101
105
|
},
|
|
102
106
|
color: {
|
|
103
|
-
value:
|
|
107
|
+
value: "#fff",
|
|
104
108
|
},
|
|
105
109
|
destroy: {
|
|
106
110
|
mode: "split",
|
|
@@ -121,8 +125,8 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
121
125
|
l: options.brightness,
|
|
122
126
|
},
|
|
123
127
|
particles: {
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
color: {
|
|
129
|
+
value: options.colors,
|
|
126
130
|
},
|
|
127
131
|
number: {
|
|
128
132
|
value: 0,
|
|
@@ -134,12 +138,23 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
134
138
|
},
|
|
135
139
|
animation: {
|
|
136
140
|
enable: true,
|
|
137
|
-
speed:
|
|
141
|
+
speed: 1,
|
|
138
142
|
sync: false,
|
|
139
143
|
startValue: "max",
|
|
140
144
|
destroy: "min",
|
|
141
145
|
},
|
|
142
146
|
},
|
|
147
|
+
effect: {
|
|
148
|
+
type: "trail",
|
|
149
|
+
options: {
|
|
150
|
+
trail: {
|
|
151
|
+
length: {
|
|
152
|
+
min: 5,
|
|
153
|
+
max: 10,
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
143
158
|
shape: {
|
|
144
159
|
type: "circle",
|
|
145
160
|
},
|
|
@@ -181,32 +196,27 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
181
196
|
life: {
|
|
182
197
|
count: 1,
|
|
183
198
|
},
|
|
184
|
-
|
|
185
|
-
type: "
|
|
199
|
+
effect: {
|
|
200
|
+
type: "trail",
|
|
186
201
|
options: {
|
|
187
|
-
|
|
188
|
-
|
|
202
|
+
trail: {
|
|
203
|
+
length: {
|
|
204
|
+
min: 10,
|
|
205
|
+
max: 30,
|
|
206
|
+
},
|
|
207
|
+
minWidth: 1,
|
|
208
|
+
maxWidth: 1,
|
|
189
209
|
},
|
|
190
210
|
},
|
|
191
211
|
},
|
|
212
|
+
shape: {
|
|
213
|
+
type: "circle",
|
|
214
|
+
},
|
|
192
215
|
size: {
|
|
193
|
-
value:
|
|
194
|
-
min: 0.1,
|
|
195
|
-
max: 50,
|
|
196
|
-
},
|
|
197
|
-
animation: {
|
|
198
|
-
enable: true,
|
|
199
|
-
sync: true,
|
|
200
|
-
speed: 90,
|
|
201
|
-
startValue: "max",
|
|
202
|
-
destroy: "min",
|
|
203
|
-
},
|
|
216
|
+
value: 1,
|
|
204
217
|
},
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
value: "#ffffff",
|
|
208
|
-
},
|
|
209
|
-
width: 0.5,
|
|
218
|
+
opacity: {
|
|
219
|
+
value: 0.5,
|
|
210
220
|
},
|
|
211
221
|
rotate: {
|
|
212
222
|
path: true,
|
|
@@ -227,20 +237,13 @@ export async function fireworks(idOrOptions, sourceOptions) {
|
|
|
227
237
|
default: "destroy",
|
|
228
238
|
top: "none",
|
|
229
239
|
},
|
|
230
|
-
trail: {
|
|
231
|
-
fill: {
|
|
232
|
-
color: "#000",
|
|
233
|
-
},
|
|
234
|
-
enable: true,
|
|
235
|
-
length: 10,
|
|
236
|
-
},
|
|
237
240
|
},
|
|
238
241
|
},
|
|
239
242
|
sounds: {
|
|
240
243
|
enable: options.sounds,
|
|
241
244
|
events: [
|
|
242
245
|
{
|
|
243
|
-
event: "
|
|
246
|
+
event: "particleDestroyed",
|
|
244
247
|
filter: explodeSoundCheck,
|
|
245
248
|
audio: [
|
|
246
249
|
"https://particles.js.org/audio/explosion0.mp3",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/fireworks",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -99,15 +99,17 @@
|
|
|
99
99
|
"./package.json": "./package.json"
|
|
100
100
|
},
|
|
101
101
|
"dependencies": {
|
|
102
|
-
"@tsparticles/basic": "^3.0.
|
|
103
|
-
"@tsparticles/
|
|
104
|
-
"@tsparticles/
|
|
105
|
-
"@tsparticles/plugin-
|
|
106
|
-
"@tsparticles/shape-
|
|
107
|
-
"@tsparticles/
|
|
108
|
-
"@tsparticles/
|
|
109
|
-
"@tsparticles/updater-
|
|
110
|
-
"@tsparticles/updater-
|
|
102
|
+
"@tsparticles/basic": "^3.0.3",
|
|
103
|
+
"@tsparticles/effect-trail": "^3.0.3",
|
|
104
|
+
"@tsparticles/engine": "^3.0.3",
|
|
105
|
+
"@tsparticles/plugin-emitters": "^3.0.3",
|
|
106
|
+
"@tsparticles/plugin-emitters-shape-square": "^3.0.3",
|
|
107
|
+
"@tsparticles/plugin-sounds": "^3.0.3",
|
|
108
|
+
"@tsparticles/shape-line": "^3.0.3",
|
|
109
|
+
"@tsparticles/updater-destroy": "^3.0.3",
|
|
110
|
+
"@tsparticles/updater-life": "^3.0.3",
|
|
111
|
+
"@tsparticles/updater-rotate": "^3.0.3",
|
|
112
|
+
"@tsparticles/updater-stroke-color": "^3.0.3"
|
|
111
113
|
},
|
|
112
114
|
"publishConfig": {
|
|
113
115
|
"access": "public"
|