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.
277 lines (276 loc) • 10.8 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", "tsparticles-basic", "tsparticles-updater-destroy", "tsparticles-plugin-emitters", "tsparticles-updater-life", "tsparticles-shape-line", "tsparticles-updater-rotate", "tsparticles-plugin-sounds", "tsparticles-updater-stroke-color"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fireworks = void 0;
const tsparticles_engine_1 = require("tsparticles-engine");
const FireworkOptions_1 = require("./FireworkOptions");
const tsparticles_basic_1 = require("tsparticles-basic");
const tsparticles_updater_destroy_1 = require("tsparticles-updater-destroy");
const tsparticles_plugin_emitters_1 = require("tsparticles-plugin-emitters");
const tsparticles_updater_life_1 = require("tsparticles-updater-life");
const tsparticles_shape_line_1 = require("tsparticles-shape-line");
const tsparticles_updater_rotate_1 = require("tsparticles-updater-rotate");
const tsparticles_plugin_sounds_1 = require("tsparticles-plugin-sounds");
const tsparticles_updater_stroke_color_1 = require("tsparticles-updater-stroke-color");
let initialized = false;
let initializing = false;
const explodeSoundCheck = (args) => {
const data = args.data;
return data.particle.shape === "line";
};
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, tsparticles_basic_1.loadBasic)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_plugin_emitters_1.loadEmittersPlugin)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_plugin_sounds_1.loadSoundsPlugin)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_shape_line_1.loadLineShape)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_updater_rotate_1.loadRotateUpdater)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_updater_destroy_1.loadDestroyUpdater)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_updater_life_1.loadLifeUpdater)(tsparticles_engine_1.tsParticles);
await (0, tsparticles_updater_stroke_color_1.loadStrokeColorUpdater)(tsparticles_engine_1.tsParticles);
initializing = false;
initialized = true;
}
async function fireworks(idOrOptions, sourceOptions) {
await initPlugins();
let id;
const options = new FireworkOptions_1.FireworkOptions();
if ((0, tsparticles_engine_1.isString)(idOrOptions)) {
id = idOrOptions;
options.load(sourceOptions);
}
else {
id = "fireworks";
options.load(idOrOptions);
}
const particlesOptions = {
detectRetina: true,
background: {
color: "#000",
},
fpsLimit: 120,
emitters: {
direction: "top",
life: {
count: 0,
duration: 0.1,
delay: 0.1,
},
rate: {
delay: (0, tsparticles_engine_1.isNumber)(options.rate)
? 1 / options.rate
: { min: 1 / (0, tsparticles_engine_1.getRangeMin)(options.rate), max: 1 / (0, tsparticles_engine_1.getRangeMax)(options.rate) },
quantity: 1,
},
size: {
width: 100,
height: 0,
},
position: {
y: 100,
x: 50,
},
},
particles: {
number: {
value: 0,
},
color: {
value: options.colors,
},
destroy: {
mode: "split",
bounds: {
top: (0, tsparticles_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: {
stroke: {
width: 0,
},
number: {
value: 0,
},
opacity: {
value: {
min: 0.1,
max: 1,
},
animation: {
enable: true,
speed: 0.7,
sync: false,
startValue: "max",
destroy: "min",
},
},
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, tsparticles_engine_1.setRangeValue)(options.gravity),
},
speed: (0, tsparticles_engine_1.setRangeValue)(options.speed),
direction: "none",
outModes: "destroy",
},
},
},
},
life: {
count: 1,
},
shape: {
type: "line",
options: {
line: {
cap: "round",
},
},
},
size: {
value: {
min: 0.1,
max: 50,
},
animation: {
enable: true,
sync: true,
speed: 90,
startValue: "max",
destroy: "min",
},
},
stroke: {
color: {
value: "#ffffff",
},
width: 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",
},
trail: {
fillColor: "#000",
enable: true,
length: 10,
},
},
},
sounds: {
enable: options.sounds,
events: [
{
event: "particleRemoved",
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 tsparticles_engine_1.tsParticles.load({ id, options: particlesOptions });
if (!container) {
return;
}
return new FireworksInstance(container);
}
exports.fireworks = fireworks;
fireworks.version = tsparticles_engine_1.tsParticles.version;
if (!(0, tsparticles_engine_1.isSsr)()) {
window.fireworks = fireworks;
}
});