@tsparticles/fireworks
Version:
tsParticles fireworks bundle — easily create spectacular fireworks and fountain particle effects with built-in presets. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
393 lines (384 loc) • 18 kB
JavaScript
(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
/* tsParticles v4.2.0 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine'), require('@tsparticles/basic'), require('@tsparticles/plugin-blend'), require('@tsparticles/updater-destroy'), require('@tsparticles/plugin-emitters/plugin'), require('@tsparticles/plugin-emitters-shape-square'), require('@tsparticles/updater-life'), require('@tsparticles/shape-line'), require('@tsparticles/updater-paint'), require('@tsparticles/updater-rotate'), require('@tsparticles/plugin-sounds')) :
typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine', '@tsparticles/basic', '@tsparticles/plugin-blend', '@tsparticles/updater-destroy', '@tsparticles/plugin-emitters/plugin', '@tsparticles/plugin-emitters-shape-square', '@tsparticles/updater-life', '@tsparticles/shape-line', '@tsparticles/updater-paint', '@tsparticles/updater-rotate', '@tsparticles/plugin-sounds'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.bundles = global.__tsParticlesInternals.bundles || {}, global.__tsParticlesInternals.bundles.fireworks = global.__tsParticlesInternals.bundles.fireworks || {}), global.__tsParticlesInternals.engine, global.__tsParticlesInternals.bundles.basic, global.__tsParticlesInternals.plugins.blend, global.__tsParticlesInternals.updaters.destroy, global.__tsParticlesInternals.plugins["emitters/plugin"], global.__tsParticlesInternals.plugins.emittersShapes.square, global.__tsParticlesInternals.updaters.life, global.__tsParticlesInternals.shapes.line, global.__tsParticlesInternals.updaters.paint, global.__tsParticlesInternals.updaters.rotate, global.__tsParticlesInternals.plugins.sounds));
})(this, (function (exports, engine, basic, pluginBlend, updaterDestroy, plugin, pluginEmittersShapeSquare, updaterLife, shapeLine, updaterPaint, updaterRotate, pluginSounds) { 'use strict';
class FireworkOptions {
background;
brightness;
colors;
gravity;
minHeight;
rate;
saturation;
sounds;
speed;
splitCount;
constructor() {
this.background = "none";
this.brightness = {
min: -30,
max: 30,
};
this.colors = [
"#FF0000",
"#FF2A00",
"#FF5500",
"#FF8000",
"#FFAA00",
"#FFD400",
"#FFFF00",
"#D4FF00",
"#AAFF00",
"#80FF00",
"#55FF00",
"#2AFF00",
"#00FF00",
"#00FF2A",
"#00FF55",
"#00FF80",
"#00FFAA",
"#00FFD4",
"#00FFFF",
"#00D4FF",
"#00AAFF",
"#0080FF",
"#0055FF",
"#002AFF",
"#0000FF",
"#2A00FF",
"#5500FF",
"#8000FF",
"#AA00FF",
"#D400FF",
"#FF00FF",
"#FF00D4",
"#FF00AA",
"#FF0080",
"#FF0055",
"#FF002A",
];
this.gravity = 30;
this.minHeight = {
min: 10,
max: 30,
};
this.rate = 10;
this.saturation = {
min: -30,
max: 30,
};
this.sounds = true;
this.speed = { min: 20, max: 40 };
this.splitCount = 100;
}
load(data) {
if (engine.isNull(data)) {
return;
}
if (data.colors !== undefined) {
if (engine.isArray(data.colors)) {
this.colors = [...data.colors];
}
else {
this.colors = data.colors;
}
}
engine.loadProperty(this, "background", data.background);
engine.loadRangeProperty(this, "brightness", data.brightness);
engine.loadRangeProperty(this, "gravity", data.gravity);
engine.loadRangeProperty(this, "minHeight", data.minHeight);
engine.loadRangeProperty(this, "rate", data.rate);
engine.loadRangeProperty(this, "saturation", data.saturation);
engine.loadProperty(this, "sounds", data.sounds);
engine.loadRangeProperty(this, "speed", data.speed);
engine.loadRangeProperty(this, "splitCount", data.splitCount);
}
}
const instances = new Map();
function deleteFireworksInstance(id) {
instances.delete(id);
}
const explodeSoundCheck = (args) => {
const data = args.data;
return data?.particle?.options.move.gravity.enable ?? false;
};
function getOptions(options, canvas) {
const identity = 1;
return {
detectRetina: true,
background: {
color: options.background,
},
blend: {
enable: true,
mode: "lighter",
},
fullScreen: {
enable: !canvas,
},
fpsLimit: 60,
emitters: {
direction: engine.MoveDirection.top,
life: {
count: 0,
duration: 0.1,
delay: 0.1,
},
rate: {
delay: engine.isNumber(options.rate)
? identity / options.rate
: { min: identity / engine.getRangeMin(options.rate), max: identity / engine.getRangeMax(options.rate) },
quantity: 1,
},
size: {
width: 100,
height: 0,
},
position: {
y: 100,
x: 50,
},
},
particles: {
number: {
value: 0,
},
paint: {
fill: {
enable: false,
},
stroke: {
color: {
value: options.colors,
},
width: 2,
},
},
destroy: {
mode: "split",
bounds: {
top: engine.setRangeValue(options.minHeight),
},
split: {
count: 1,
factor: {
value: 0.333333,
},
rate: {
value: options.splitCount,
},
strokeColorOffset: {
s: options.saturation,
l: options.brightness,
},
particles: {
group: "split",
number: {
value: 0,
},
opacity: {
value: {
min: 0.1,
max: 1,
},
animation: {
enable: true,
speed: { min: 2, max: 4 },
sync: true,
startValue: engine.StartValueType.max,
destroy: engine.DestroyType.min,
count: 1,
},
},
size: {
value: { min: 5, max: 10 },
},
life: {
count: 1,
duration: {
value: {
min: 0.5,
max: 1,
},
},
},
move: {
decay: 0.05,
enable: true,
gravity: {
enable: false,
},
speed: {
min: 10,
max: 25,
},
direction: "outside",
outModes: engine.OutMode.destroy,
},
},
},
},
life: {
count: 1,
},
shape: {
type: "line",
options: {
line: {
cap: "round",
},
},
},
size: {
value: { min: 10, max: 20 },
},
rotate: {
path: true,
},
move: {
enable: true,
gravity: {
acceleration: engine.setRangeValue(options.gravity),
enable: true,
inverse: true,
maxSpeed: 150,
},
speed: engine.setRangeValue(options.speed),
outModes: {
default: engine.OutMode.destroy,
top: engine.OutMode.none,
},
},
},
sounds: {
enable: options.sounds,
events: [
{
event: engine.EventType.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,
},
};
}
async function getFireworksInstance(engine, id, sourceOptions, canvas) {
const existing = instances.get(id);
if (existing instanceof Promise) {
return existing;
}
if (existing) {
if (!existing.destroyed) {
return existing;
}
instances.delete(id);
}
const create = async () => {
const options = new FireworkOptions();
options.load(sourceOptions);
const particlesOptions = getOptions(options, canvas), container = await engine.load({ id, element: canvas, options: particlesOptions });
if (!container) {
instances.delete(id);
return;
}
const { FireworksInstance } = await Promise.resolve().then(function () { return FireworksInstance$1; }), instance = new FireworksInstance(container, id);
instances.set(id, instance);
return instance;
}, createPromise = create();
instances.set(id, createPromise);
return createPromise;
}
let initPromise = null;
async function doInitPlugins(engine) {
engine.checkVersion("4.2.0");
await engine.pluginManager.register(async (e) => {
const loadEmittersForFireworks = async (e) => {
await plugin.loadEmittersPluginSimple(e);
await pluginEmittersShapeSquare.loadEmittersShapeSquare(e);
};
await Promise.all([
basic.loadBasic(e),
shapeLine.loadLineShape(e),
pluginBlend.loadBlendPlugin(e),
loadEmittersForFireworks(e),
pluginSounds.loadSoundsPlugin(e),
updaterRotate.loadRotateUpdater(e),
updaterDestroy.loadDestroyUpdater(e),
updaterLife.loadLifeUpdater(e),
updaterPaint.loadPaintUpdater(e),
]);
});
}
async function initPlugins(engine) {
if (initPromise) {
return initPromise;
}
initPromise = doInitPlugins(engine);
return initPromise;
}
async function fireworks(idOrOptions, sourceOptions) {
await initPlugins(engine.tsParticles);
let id, options;
if (engine.isString(idOrOptions)) {
id = idOrOptions;
options = sourceOptions ?? {};
}
else {
id = "fireworks";
options = idOrOptions ?? {};
}
return getFireworksInstance(engine.tsParticles, id, options);
}
fireworks.create = async (canvas, options) => {
await initPlugins(engine.tsParticles);
const id = canvas?.id ?? "fireworks";
return getFireworksInstance(engine.tsParticles, id, options ?? {}, canvas ?? undefined);
};
fireworks.init = async () => {
await initPlugins(engine.tsParticles);
};
fireworks.version = "4.2.0";
globalThis.fireworks = fireworks;
const globalObject = globalThis;
globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
globalObject.fireworks = fireworks;
class FireworksInstance {
#container;
#id;
constructor(container, id) {
this.#container = container;
this.#id = id;
}
get destroyed() {
return this.#container.destroyed;
}
destroy() {
this.#container.destroy();
deleteFireworksInstance(this.#id);
}
pause() {
this.#container.pause();
}
play() {
this.#container.play();
}
stop() {
this.#container.stop();
}
}
var FireworksInstance$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
FireworksInstance: FireworksInstance
});
exports.fireworks = fireworks;
}));
Object.assign(globalThis.window || globalThis, { fireworks: (globalThis.__tsParticlesInternals.bundles.fireworks || {}).fireworks });
delete (globalThis.window || globalThis).tsparticlesInternalExports;