@tsparticles/preset-fireworks 3.1.0 → 3.2.0

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 (18) hide show
  1. package/README.md +1 -1
  2. package/browser/index.js +2 -2
  3. package/browser/options.js +196 -190
  4. package/cjs/index.js +2 -2
  5. package/cjs/options.js +198 -191
  6. package/esm/index.js +2 -2
  7. package/esm/options.js +196 -190
  8. package/package.json +11 -11
  9. package/report.html +1 -1
  10. package/tsparticles.preset.fireworks.bundle.js +892 -852
  11. package/tsparticles.preset.fireworks.bundle.min.js +1 -1
  12. package/tsparticles.preset.fireworks.bundle.min.js.LICENSE.txt +1 -1
  13. package/tsparticles.preset.fireworks.js +7 -7
  14. package/tsparticles.preset.fireworks.min.js +1 -1
  15. package/tsparticles.preset.fireworks.min.js.LICENSE.txt +1 -1
  16. package/types/options.d.ts +2 -2
  17. package/umd/index.js +3 -3
  18. package/umd/options.js +198 -191
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  [tsParticles](https://github.com/tsparticles/tsparticles) preset for fireworks effect.
8
8
 
9
- [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
9
+ [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
10
10
 
11
11
  [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
12
12
 
package/browser/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { initOptions } from "./options.js";
1
2
  import { loadBasic } from "@tsparticles/basic";
2
3
  import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
3
4
  import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
@@ -7,7 +8,6 @@ import { loadLineShape } from "@tsparticles/shape-line";
7
8
  import { loadRotateUpdater } from "@tsparticles/updater-rotate";
8
9
  import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
9
10
  import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
10
- import { options } from "./options.js";
11
11
  export async function loadFireworksPreset(engine, refresh = true) {
12
12
  await loadBasic(engine, false);
13
13
  await loadEmittersPlugin(engine, false);
@@ -18,6 +18,6 @@ export async function loadFireworksPreset(engine, refresh = true) {
18
18
  await loadDestroyUpdater(engine, false);
19
19
  await loadLifeUpdater(engine, false);
20
20
  await loadStrokeColorUpdater(engine, false);
21
- await engine.addPreset("fireworks", options, false);
21
+ await engine.addPreset("fireworks", initOptions(engine), false);
22
22
  await engine.refresh(refresh);
23
23
  }
package/browser/options.js CHANGED
@@ -1,211 +1,217 @@
1
1
  import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
2
- const explodeSoundCheck = (args) => {
3
- const data = args.data;
4
- return data.particle.shape === "line";
5
- };
6
- const fixRange = (value, min, max) => {
7
- const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
8
- let res = setRangeValue(value);
9
- if (diffSMax) {
10
- res = setRangeValue(value.min - diffSMax, max);
11
- }
12
- const diffSMin = value.min < min ? value.min : minValue;
13
- if (diffSMin) {
14
- res = setRangeValue(minValue, value.max + diffSMin);
15
- }
16
- return res;
17
- };
18
- const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
19
- .map(color => {
20
- const rgb = stringToRgb(color);
21
- if (!rgb) {
22
- return undefined;
23
- }
24
- const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
25
- min: 0,
26
- max: 100,
27
- }, lBounds = {
28
- min: 0,
29
- max: 100,
30
- }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
31
- return {
32
- color: {
33
- value: {
34
- h: hsl.h,
35
- s: sRange,
36
- l: lRange,
37
- },
38
- },
39
- stroke: {
40
- width: 0,
41
- },
42
- number: {
43
- value: 0,
44
- },
45
- opacity: {
46
- value: {
47
- min: 0.1,
48
- max: 1,
2
+ export function initOptions(engine) {
3
+ const explodeSoundCheck = (args) => {
4
+ const data = args.data;
5
+ return data.particle.shape === "line";
6
+ }, fixRange = (value, min, max) => {
7
+ const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
8
+ let res = setRangeValue(value);
9
+ if (diffSMax) {
10
+ res = setRangeValue(value.min - diffSMax, max);
11
+ }
12
+ const diffSMin = value.min < min ? value.min : minValue;
13
+ if (diffSMin) {
14
+ res = setRangeValue(minValue, value.max + diffSMin);
15
+ }
16
+ return res;
17
+ }, fireworksOptions = [
18
+ "#ff595e",
19
+ "#ffca3a",
20
+ "#8ac926",
21
+ "#1982c4",
22
+ "#6a4c93",
23
+ ]
24
+ .map(color => {
25
+ const rgb = stringToRgb(engine, color);
26
+ if (!rgb) {
27
+ return undefined;
28
+ }
29
+ const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
30
+ min: 0,
31
+ max: 100,
32
+ }, lBounds = {
33
+ min: 0,
34
+ max: 100,
35
+ }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
36
+ return {
37
+ color: {
38
+ value: {
39
+ h: hsl.h,
40
+ s: sRange,
41
+ l: lRange,
42
+ },
49
43
  },
50
- animation: {
51
- enable: true,
52
- speed: 0.7,
53
- sync: false,
54
- startValue: StartValueType.max,
55
- destroy: DestroyType.min,
44
+ stroke: {
45
+ width: 0,
56
46
  },
57
- },
58
- shape: {
59
- type: "circle",
60
- },
61
- size: {
62
- value: { min: 1, max: 2 },
63
- animation: {
64
- enable: true,
65
- speed: 5,
66
- count: 1,
67
- sync: false,
68
- startValue: StartValueType.min,
69
- destroy: DestroyType.none,
47
+ number: {
48
+ value: 0,
70
49
  },
71
- },
72
- life: {
73
- count: 1,
74
- duration: {
50
+ opacity: {
75
51
  value: {
76
- min: 1,
77
- max: 2,
52
+ min: 0.1,
53
+ max: 1,
54
+ },
55
+ animation: {
56
+ enable: true,
57
+ speed: 0.7,
58
+ sync: false,
59
+ startValue: StartValueType.max,
60
+ destroy: DestroyType.min,
78
61
  },
79
62
  },
80
- },
81
- move: {
82
- decay: { min: 0.075, max: 0.1 },
83
- enable: true,
84
- gravity: {
85
- enable: true,
86
- inverse: false,
87
- acceleration: 5,
88
- },
89
- speed: { min: 5, max: 15 },
90
- direction: "none",
91
- outModes: OutMode.destroy,
92
- },
93
- };
94
- })
95
- .filter(t => t !== undefined);
96
- export const options = {
97
- detectRetina: true,
98
- background: {
99
- color: "#000",
100
- },
101
- fpsLimit: 120,
102
- emitters: {
103
- direction: MoveDirection.top,
104
- life: {
105
- count: 0,
106
- duration: 0.1,
107
- delay: 0.1,
108
- },
109
- rate: {
110
- delay: 0.05,
111
- quantity: 1,
112
- },
113
- size: {
114
- width: 100,
115
- height: 0,
116
- },
117
- position: {
118
- y: 100,
119
- x: 50,
120
- },
121
- },
122
- particles: {
123
- number: {
124
- value: 0,
125
- },
126
- destroy: {
127
- mode: "split",
128
- bounds: {
129
- top: { min: 10, max: 30 },
63
+ shape: {
64
+ type: "circle",
65
+ },
66
+ size: {
67
+ value: { min: 1, max: 2 },
68
+ animation: {
69
+ enable: true,
70
+ speed: 5,
71
+ count: 1,
72
+ sync: false,
73
+ startValue: StartValueType.min,
74
+ destroy: DestroyType.none,
75
+ },
130
76
  },
131
- split: {
132
- sizeOffset: false,
77
+ life: {
133
78
  count: 1,
134
- factor: {
135
- value: 0.333333,
136
- },
137
- rate: {
138
- value: { min: 75, max: 150 },
79
+ duration: {
80
+ value: {
81
+ min: 1,
82
+ max: 2,
83
+ },
139
84
  },
140
- particles: fireworksOptions,
141
85
  },
142
- },
143
- life: {
144
- count: 1,
145
- },
146
- shape: {
147
- type: "line",
148
- },
149
- size: {
150
- value: {
151
- min: 0.1,
152
- max: 50,
153
- },
154
- animation: {
86
+ move: {
87
+ decay: { min: 0.075, max: 0.1 },
155
88
  enable: true,
156
- sync: true,
157
- speed: 90,
158
- startValue: StartValueType.max,
159
- destroy: DestroyType.min,
89
+ gravity: {
90
+ enable: true,
91
+ inverse: false,
92
+ acceleration: 5,
93
+ },
94
+ speed: { min: 5, max: 15 },
95
+ direction: "none",
96
+ outModes: OutMode.destroy,
160
97
  },
161
- },
162
- stroke: {
163
- color: {
164
- value: "#ffffff",
98
+ };
99
+ })
100
+ .filter(t => t !== undefined);
101
+ return {
102
+ detectRetina: true,
103
+ background: {
104
+ color: "#000",
105
+ },
106
+ fpsLimit: 120,
107
+ emitters: {
108
+ direction: MoveDirection.top,
109
+ life: {
110
+ count: 0,
111
+ duration: 0.1,
112
+ delay: 0.1,
113
+ },
114
+ rate: {
115
+ delay: 0.05,
116
+ quantity: 1,
117
+ },
118
+ size: {
119
+ width: 100,
120
+ height: 0,
121
+ },
122
+ position: {
123
+ y: 100,
124
+ x: 50,
125
+ },
126
+ },
127
+ particles: {
128
+ number: {
129
+ value: 0,
130
+ },
131
+ destroy: {
132
+ mode: "split",
133
+ bounds: {
134
+ top: { min: 10, max: 30 },
135
+ },
136
+ split: {
137
+ sizeOffset: false,
138
+ count: 1,
139
+ factor: {
140
+ value: 0.333333,
141
+ },
142
+ rate: {
143
+ value: { min: 75, max: 150 },
144
+ },
145
+ particles: fireworksOptions,
146
+ },
165
147
  },
166
- width: 1,
167
- },
168
- rotate: {
169
- path: true,
170
- },
171
- move: {
172
- enable: true,
173
- gravity: {
174
- acceleration: 15,
175
- enable: true,
176
- inverse: true,
177
- maxSpeed: 100,
148
+ life: {
149
+ count: 1,
178
150
  },
179
- speed: {
180
- min: 10,
181
- max: 20,
151
+ shape: {
152
+ type: "line",
182
153
  },
183
- outModes: {
184
- default: OutMode.destroy,
185
- top: OutMode.none,
154
+ size: {
155
+ value: {
156
+ min: 0.1,
157
+ max: 50,
158
+ },
159
+ animation: {
160
+ enable: true,
161
+ sync: true,
162
+ speed: 90,
163
+ startValue: StartValueType.max,
164
+ destroy: DestroyType.min,
165
+ },
186
166
  },
187
- trail: {
188
- fill: {
189
- color: "#000",
167
+ stroke: {
168
+ color: {
169
+ value: "#ffffff",
190
170
  },
171
+ width: 1,
172
+ },
173
+ rotate: {
174
+ path: true,
175
+ },
176
+ move: {
191
177
  enable: true,
192
- length: 10,
178
+ gravity: {
179
+ acceleration: 15,
180
+ enable: true,
181
+ inverse: true,
182
+ maxSpeed: 100,
183
+ },
184
+ speed: {
185
+ min: 10,
186
+ max: 20,
187
+ },
188
+ outModes: {
189
+ default: OutMode.destroy,
190
+ top: OutMode.none,
191
+ },
192
+ trail: {
193
+ fill: {
194
+ color: "#000",
195
+ },
196
+ enable: true,
197
+ length: 10,
198
+ },
193
199
  },
194
200
  },
195
- },
196
- sounds: {
197
- enable: true,
198
- events: [
199
- {
200
- event: EventType.particleRemoved,
201
- filter: explodeSoundCheck,
202
- audio: [
203
- "https://particles.js.org/audio/explosion0.mp3",
204
- "https://particles.js.org/audio/explosion1.mp3",
205
- "https://particles.js.org/audio/explosion2.mp3",
206
- ],
207
- },
208
- ],
209
- volume: 50,
210
- },
211
- };
201
+ sounds: {
202
+ enable: true,
203
+ events: [
204
+ {
205
+ event: EventType.particleRemoved,
206
+ filter: explodeSoundCheck,
207
+ audio: [
208
+ "https://particles.js.org/audio/explosion0.mp3",
209
+ "https://particles.js.org/audio/explosion1.mp3",
210
+ "https://particles.js.org/audio/explosion2.mp3",
211
+ ],
212
+ },
213
+ ],
214
+ volume: 50,
215
+ },
216
+ };
217
+ }
package/cjs/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.loadFireworksPreset = void 0;
4
+ const options_js_1 = require("./options.js");
4
5
  const basic_1 = require("@tsparticles/basic");
5
6
  const updater_destroy_1 = require("@tsparticles/updater-destroy");
6
7
  const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
@@ -10,7 +11,6 @@ const shape_line_1 = require("@tsparticles/shape-line");
10
11
  const updater_rotate_1 = require("@tsparticles/updater-rotate");
11
12
  const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
12
13
  const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
13
- const options_js_1 = require("./options.js");
14
14
  async function loadFireworksPreset(engine, refresh = true) {
15
15
  await (0, basic_1.loadBasic)(engine, false);
16
16
  await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
@@ -21,7 +21,7 @@ async function loadFireworksPreset(engine, refresh = true) {
21
21
  await (0, updater_destroy_1.loadDestroyUpdater)(engine, false);
22
22
  await (0, updater_life_1.loadLifeUpdater)(engine, false);
23
23
  await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine, false);
24
- await engine.addPreset("fireworks", options_js_1.options, false);
24
+ await engine.addPreset("fireworks", (0, options_js_1.initOptions)(engine), false);
25
25
  await engine.refresh(refresh);
26
26
  }
27
27
  exports.loadFireworksPreset = loadFireworksPreset;