@tsparticles/fireworks 3.0.1 → 3.0.2

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 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 = 20;
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];
@@ -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 === "line";
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: "#000",
77
+ color: options.background,
74
78
  },
75
- fpsLimit: 120,
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: options.colors,
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
- stroke: {
125
- width: 0,
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: 0.7,
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
- shape: {
185
- type: "line",
199
+ effect: {
200
+ type: "trail",
186
201
  options: {
187
- line: {
188
- cap: "round",
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
- stroke: {
206
- color: {
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: "particleRemoved",
246
+ event: "particleDestroyed",
244
247
  filter: explodeSoundCheck,
245
248
  audio: [
246
249
  "https://particles.js.org/audio/explosion0.mp3",
@@ -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 = 20;
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 === "line";
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: "#000",
80
+ color: options.background,
77
81
  },
78
- fpsLimit: 120,
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: options.colors,
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
- stroke: {
128
- width: 0,
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: 0.7,
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
- shape: {
188
- type: "line",
202
+ effect: {
203
+ type: "trail",
189
204
  options: {
190
- line: {
191
- cap: "round",
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
- stroke: {
209
- color: {
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: "particleRemoved",
249
+ event: "particleDestroyed",
247
250
  filter: explodeSoundCheck,
248
251
  audio: [
249
252
  "https://particles.js.org/audio/explosion0.mp3",
@@ -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 = 20;
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 === "line";
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: "#000",
77
+ color: options.background,
74
78
  },
75
- fpsLimit: 120,
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: options.colors,
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
- stroke: {
125
- width: 0,
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: 0.7,
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
- shape: {
185
- type: "line",
199
+ effect: {
200
+ type: "trail",
186
201
  options: {
187
- line: {
188
- cap: "round",
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
- stroke: {
206
- color: {
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: "particleRemoved",
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.1",
3
+ "version": "3.0.2",
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.1",
103
- "@tsparticles/engine": "^3.0.1",
104
- "@tsparticles/plugin-emitters": "^3.0.1",
105
- "@tsparticles/plugin-sounds": "^3.0.1",
106
- "@tsparticles/shape-line": "^3.0.1",
107
- "@tsparticles/updater-destroy": "^3.0.1",
108
- "@tsparticles/updater-life": "^3.0.1",
109
- "@tsparticles/updater-rotate": "^3.0.1",
110
- "@tsparticles/updater-stroke-color": "^3.0.1"
102
+ "@tsparticles/basic": "^3.0.2",
103
+ "@tsparticles/effect-trail": "^3.0.2",
104
+ "@tsparticles/engine": "^3.0.2",
105
+ "@tsparticles/plugin-emitters": "^3.0.2",
106
+ "@tsparticles/plugin-emitters-shape-square": "^3.0.2",
107
+ "@tsparticles/plugin-sounds": "^3.0.2",
108
+ "@tsparticles/shape-line": "^3.0.2",
109
+ "@tsparticles/updater-destroy": "^3.0.2",
110
+ "@tsparticles/updater-life": "^3.0.2",
111
+ "@tsparticles/updater-rotate": "^3.0.2",
112
+ "@tsparticles/updater-stroke-color": "^3.0.2"
111
113
  },
112
114
  "publishConfig": {
113
115
  "access": "public"