@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.
297 lines (296 loc) • 11.5 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/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/effect-trail"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fireworks = fireworks;
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 updater_rotate_1 = require("@tsparticles/updater-rotate");
const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
const effect_trail_1 = require("@tsparticles/effect-trail");
const minSplitCount = 2;
let initialized = false;
let initializing = false;
const explodeSoundCheck = (args) => {
const data = args.data;
return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < minSplitCount;
};
class FireworksInstance {
constructor(container) {
this._container = container;
}
pause() {
this._container.pause();
}
play() {
this._container.play();
}
stop() {
this._container.stop();
}
}
async function initPlugins(engine) {
if (initialized) {
return;
}
if (initializing) {
return new Promise(resolve => {
const timeout = 100, interval = setInterval(() => {
if (!initialized) {
return;
}
clearInterval(interval);
resolve();
}, timeout);
});
}
initializing = true;
engine.checkVersion("3.9.1");
await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine, false);
await (0, plugin_sounds_1.loadSoundsPlugin)(engine, false);
await (0, updater_rotate_1.loadRotateUpdater)(engine, false);
await (0, updater_destroy_1.loadDestroyUpdater)(engine, false);
await (0, updater_life_1.loadLifeUpdater)(engine, false);
await (0, effect_trail_1.loadTrailEffect)(engine, false);
await (0, basic_1.loadBasic)(engine, false);
initializing = false;
initialized = true;
}
function getOptions(options, canvas) {
const identity = 1;
return {
detectRetina: true,
background: {
color: options.background,
},
fullScreen: {
enable: !!canvas,
},
fpsLimit: 60,
emitters: {
direction: engine_1.MoveDirection.top,
life: {
count: 0,
duration: 0.1,
delay: 0.1,
},
rate: {
delay: (0, engine_1.isNumber)(options.rate)
? identity / options.rate
: { min: identity / (0, engine_1.getRangeMin)(options.rate), max: identity / (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: engine_1.StartValueType.max,
destroy: engine_1.DestroyType.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: engine_1.StartValueType.min,
destroy: engine_1.DestroyType.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: engine_1.OutMode.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: engine_1.OutMode.destroy,
top: engine_1.OutMode.none,
},
},
},
sounds: {
enable: options.sounds,
events: [
{
event: engine_1.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(id, sourceOptions, canvas) {
await initPlugins(engine_1.tsParticles);
const options = new FireworkOptions_js_1.FireworkOptions();
options.load(sourceOptions);
const particlesOptions = getOptions(options, canvas), container = await engine_1.tsParticles.load({ id, element: canvas, options: particlesOptions });
if (!container) {
return;
}
return new FireworksInstance(container);
}
async function fireworks(idOrOptions, sourceOptions) {
let id;
let options;
if ((0, engine_1.isString)(idOrOptions)) {
id = idOrOptions;
options = sourceOptions ?? {};
}
else {
id = "fireworks";
options = idOrOptions ?? {};
}
return getFireworksInstance(id, options);
}
fireworks.create = async (canvas, options) => {
const id = canvas.id ?? "fireworks";
return getFireworksInstance(id, options ?? {}, canvas);
};
fireworks.init = async () => {
await initPlugins(engine_1.tsParticles);
};
fireworks.version = "3.9.1";
if (!(0, engine_1.isSsr)()) {
window.fireworks = fireworks;
}
});