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.
263 lines (262 loc) • 8.24 kB
JavaScript
import { getRangeMax, getRangeMin, isNumber, isSsr, isString, setRangeValue, tsParticles, } from "tsparticles-engine";
import { FireworkOptions } from "./FireworkOptions";
import { loadBasic } from "tsparticles-basic";
import { loadDestroyUpdater } from "tsparticles-updater-destroy";
import { loadEmittersPlugin } from "tsparticles-plugin-emitters";
import { loadLifeUpdater } from "tsparticles-updater-life";
import { loadLineShape } from "tsparticles-shape-line";
import { loadRotateUpdater } from "tsparticles-updater-rotate";
import { loadSoundsPlugin } from "tsparticles-plugin-sounds";
import { loadStrokeColorUpdater } from "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 loadBasic(tsParticles);
await loadEmittersPlugin(tsParticles);
await loadSoundsPlugin(tsParticles);
await loadLineShape(tsParticles);
await loadRotateUpdater(tsParticles);
await loadDestroyUpdater(tsParticles);
await loadLifeUpdater(tsParticles);
await loadStrokeColorUpdater(tsParticles);
initializing = false;
initialized = true;
}
export async function fireworks(idOrOptions, sourceOptions) {
await initPlugins();
let id;
const options = new FireworkOptions();
if (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: isNumber(options.rate)
? 1 / options.rate
: { min: 1 / getRangeMin(options.rate), max: 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: 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: setRangeValue(options.gravity),
},
speed: 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.load({ id, options: particlesOptions });
if (!container) {
return;
}
return new FireworksInstance(container);
}
fireworks.version = tsParticles.version;
if (!isSsr()) {
window.fireworks = fireworks;
}