@tsparticles/fireworks
Version:
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.
282 lines (281 loc) • 11.1 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "@tsparticles/engine", "./FireworkOptions.js", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/plugin-emitters-shape-square", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color", "@tsparticles/effect-trail"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fireworks = void 0;
const engine_1 = require("@tsparticles/engine");
const FireworkOptions_js_1 = require("./FireworkOptions.js");
const basic_1 = require("@tsparticles/basic");
const updater_destroy_1 = require("@tsparticles/updater-destroy");
const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
const plugin_emitters_shape_square_1 = require("@tsparticles/plugin-emitters-shape-square");
const updater_life_1 = require("@tsparticles/updater-life");
const shape_line_1 = require("@tsparticles/shape-line");
const updater_rotate_1 = require("@tsparticles/updater-rotate");
const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
const effect_trail_1 = require("@tsparticles/effect-trail");
let initialized = false;
let initializing = false;
const explodeSoundCheck = (args) => {
const data = args.data;
return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
};
class FireworksInstance {
constructor(container) {
this._container = container;
}
pause() {
this._container.pause();
}
play() {
this._container.play();
}
stop() {
this._container.stop();
}
}
async function initPlugins() {
if (initialized) {
return;
}
if (initializing) {
return new Promise((resolve) => {
const interval = setInterval(() => {
if (!initialized) {
return;
}
clearInterval(interval);
resolve();
}, 100);
});
}
initializing = true;
await (0, plugin_emitters_1.loadEmittersPlugin)(engine_1.tsParticles, false);
await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine_1.tsParticles, false);
await (0, plugin_sounds_1.loadSoundsPlugin)(engine_1.tsParticles, false);
await (0, shape_line_1.loadLineShape)(engine_1.tsParticles, false);
await (0, updater_rotate_1.loadRotateUpdater)(engine_1.tsParticles, false);
await (0, updater_destroy_1.loadDestroyUpdater)(engine_1.tsParticles, false);
await (0, updater_life_1.loadLifeUpdater)(engine_1.tsParticles, false);
await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine_1.tsParticles, false);
await (0, effect_trail_1.loadTrailEffect)(engine_1.tsParticles, false);
await (0, basic_1.loadBasic)(engine_1.tsParticles, false);
initializing = false;
initialized = true;
}
async function fireworks(idOrOptions, sourceOptions) {
await initPlugins();
let id;
const options = new FireworkOptions_js_1.FireworkOptions();
if ((0, engine_1.isString)(idOrOptions)) {
id = idOrOptions;
options.load(sourceOptions);
}
else {
id = "fireworks";
options.load(idOrOptions);
}
const particlesOptions = {
detectRetina: true,
background: {
color: options.background,
},
fpsLimit: 60,
emitters: {
direction: "top",
life: {
count: 0,
duration: 0.1,
delay: 0.1,
},
rate: {
delay: (0, engine_1.isNumber)(options.rate)
? 1 / options.rate
: { min: 1 / (0, engine_1.getRangeMin)(options.rate), max: 1 / (0, engine_1.getRangeMax)(options.rate) },
quantity: 1,
},
size: {
width: 100,
height: 0,
},
position: {
y: 100,
x: 50,
},
},
particles: {
number: {
value: 0,
},
color: {
value: "#fff",
},
destroy: {
mode: "split",
bounds: {
top: (0, engine_1.setRangeValue)(options.minHeight),
},
split: {
sizeOffset: false,
count: 1,
factor: {
value: 0.333333,
},
rate: {
value: options.splitCount,
},
colorOffset: {
s: options.saturation,
l: options.brightness,
},
particles: {
color: {
value: options.colors,
},
number: {
value: 0,
},
opacity: {
value: {
min: 0.1,
max: 1,
},
animation: {
enable: true,
speed: 1,
sync: false,
startValue: "max",
destroy: "min",
},
},
effect: {
type: "trail",
options: {
trail: {
length: {
min: 5,
max: 10,
},
},
},
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 2 },
animation: {
enable: true,
speed: 5,
count: 1,
sync: false,
startValue: "min",
destroy: "none",
},
},
life: {
count: 1,
duration: {
value: {
min: 0.25,
max: 0.5,
},
},
},
move: {
decay: { min: 0.05, max: 0.1 },
enable: true,
gravity: {
enable: true,
inverse: false,
acceleration: (0, engine_1.setRangeValue)(options.gravity),
},
speed: (0, engine_1.setRangeValue)(options.speed),
direction: "none",
outModes: "destroy",
},
},
},
},
life: {
count: 1,
},
effect: {
type: "trail",
options: {
trail: {
length: {
min: 10,
max: 30,
},
minWidth: 1,
maxWidth: 1,
},
},
},
shape: {
type: "circle",
},
size: {
value: 1,
},
opacity: {
value: 0.5,
},
rotate: {
path: true,
},
move: {
enable: true,
gravity: {
acceleration: 15,
enable: true,
inverse: true,
maxSpeed: 100,
},
speed: {
min: 10,
max: 20,
},
outModes: {
default: "destroy",
top: "none",
},
},
},
sounds: {
enable: options.sounds,
events: [
{
event: "particleDestroyed",
filter: explodeSoundCheck,
audio: [
"https://particles.js.org/audio/explosion0.mp3",
"https://particles.js.org/audio/explosion1.mp3",
"https://particles.js.org/audio/explosion2.mp3",
],
},
],
volume: 50,
},
};
const container = await engine_1.tsParticles.load({ id, options: particlesOptions });
if (!container) {
return;
}
return new FireworksInstance(container);
}
exports.fireworks = fireworks;
fireworks.version = engine_1.tsParticles.version;
if (!(0, engine_1.isSsr)()) {
window.fireworks = fireworks;
}
});