tsparticles
Version:
Easily create highly customizable particle, confetti and fireworks 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.
269 lines (268 loc) • 12.3 kB
JavaScript
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
import { colorToHsl, deepExtend, getRangeValue, isPointInside, randomInRange } from "../../Utils";
import { Emitter } from "./Options/Classes/Emitter";
import { EmitterSize } from "./Options/Classes/EmitterSize";
/**
* @category Emitters Plugin
*/
export class EmitterInstance {
constructor(engine, emitters, container, options, position) {
var _a, _b, _c, _d, _e, _f, _g;
var _h;
this.emitters = emitters;
this.container = container;
_EmitterInstance_firstSpawn.set(this, void 0);
_EmitterInstance_startParticlesAdded.set(this, void 0);
_EmitterInstance_engine.set(this, void 0);
__classPrivateFieldSet(this, _EmitterInstance_engine, engine, "f");
this.currentDuration = 0;
this.currentEmitDelay = 0;
this.currentSpawnDelay = 0;
this.initialPosition = position;
if (options instanceof Emitter) {
this.options = options;
}
else {
this.options = new Emitter();
this.options.load(options);
}
this.spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
this.name = this.options.name;
this.shape = (_c = __classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
this.fill = this.options.fill;
__classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
__classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
let particlesOptions = deepExtend({}, this.options.particles);
particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : (particlesOptions = {});
(_d = particlesOptions.move) !== null && _d !== void 0 ? _d : (particlesOptions.move = {});
(_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : (_h.direction = this.options.direction);
if (this.options.spawnColor) {
this.spawnColor = colorToHsl(this.options.spawnColor);
}
this.paused = !this.options.autoPlay;
this.particlesOptions = particlesOptions;
this.size =
(_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
const size = new EmitterSize();
size.load({
height: 0,
mode: "percent" /* percent */,
width: 0,
});
return size;
})();
this.lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
this.immortal = this.lifeCount <= 0;
this.play();
}
externalPlay() {
this.paused = false;
this.play();
}
externalPause() {
this.paused = true;
this.pause();
}
play() {
var _a;
if (this.paused) {
return;
}
if (this.container.retina.reduceFactor &&
(this.lifeCount > 0 || this.immortal || !this.options.life.count) &&
(__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
if (this.emitDelay === undefined) {
const delay = getRangeValue(this.options.rate.delay);
this.emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
}
if (this.lifeCount > 0 || this.immortal) {
this.prepareToDie();
}
}
}
pause() {
if (this.paused) {
return;
}
delete this.emitDelay;
}
resize() {
const initialPosition = this.initialPosition;
this.position =
initialPosition && isPointInside(initialPosition, this.container.canvas.size)
? initialPosition
: this.calcPosition();
}
update(delta) {
var _a, _b, _c;
if (this.paused) {
return;
}
if (__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f")) {
__classPrivateFieldSet(this, _EmitterInstance_firstSpawn, false, "f");
this.currentSpawnDelay = (_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0;
this.currentEmitDelay = (_b = this.emitDelay) !== null && _b !== void 0 ? _b : 0;
}
if (!__classPrivateFieldGet(this, _EmitterInstance_startParticlesAdded, "f")) {
__classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, true, "f");
this.emitParticles(this.options.startCount);
}
if (this.duration !== undefined) {
this.currentDuration += delta.value;
if (this.currentDuration >= this.duration) {
this.pause();
if (this.spawnDelay !== undefined) {
delete this.spawnDelay;
}
if (!this.immortal) {
this.lifeCount--;
}
if (this.lifeCount > 0 || this.immortal) {
this.position = this.calcPosition();
this.spawnDelay = (((_c = this.options.life.delay) !== null && _c !== void 0 ? _c : 0) * 1000) / this.container.retina.reduceFactor;
}
else {
this.destroy();
}
this.currentDuration -= this.duration;
delete this.duration;
}
}
if (this.spawnDelay !== undefined) {
this.currentSpawnDelay += delta.value;
if (this.currentSpawnDelay >= this.spawnDelay) {
this.play();
this.currentSpawnDelay -= this.currentSpawnDelay;
delete this.spawnDelay;
}
}
if (this.emitDelay !== undefined) {
this.currentEmitDelay += delta.value;
if (this.currentEmitDelay >= this.emitDelay) {
this.emit();
this.currentEmitDelay -= this.emitDelay;
}
}
}
getPosition() {
if (this.options.domId) {
const container = this.container, element = document.getElementById(this.options.domId);
if (element) {
const elRect = element.getBoundingClientRect();
return {
x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
};
}
}
return this.position;
}
getSize() {
const container = this.container;
if (this.options.domId) {
const element = document.getElementById(this.options.domId);
if (element) {
const elRect = element.getBoundingClientRect();
return {
width: elRect.width * container.retina.pixelRatio,
height: elRect.height * container.retina.pixelRatio,
};
}
}
return {
width: this.size.mode === "percent" /* percent */
? (container.canvas.size.width * this.size.width) / 100
: this.size.width,
height: this.size.mode === "percent" /* percent */
? (container.canvas.size.height * this.size.height) / 100
: this.size.height,
};
}
prepareToDie() {
var _a;
if (this.paused) {
return;
}
const duration = (_a = this.options.life) === null || _a === void 0 ? void 0 : _a.duration;
if (this.container.retina.reduceFactor &&
(this.lifeCount > 0 || this.immortal) &&
duration !== undefined &&
duration > 0) {
this.duration = duration * 1000;
}
}
destroy() {
this.emitters.removeEmitter(this);
}
calcPosition() {
var _a, _b;
const container = this.container;
const percentPosition = this.options.position;
return {
x: (getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width,
y: (getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height,
};
}
emit() {
if (this.paused) {
return;
}
const quantity = getRangeValue(this.options.rate.quantity);
this.emitParticles(quantity);
}
emitParticles(quantity) {
var _a, _b, _c;
const container = this.container;
const position = this.getPosition();
const size = this.getSize();
for (let i = 0; i < quantity; i++) {
const particlesOptions = deepExtend({}, this.particlesOptions);
if (this.spawnColor) {
const hslAnimation = (_a = this.options.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
if (hslAnimation) {
this.spawnColor.h = this.setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
this.spawnColor.s = this.setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
this.spawnColor.l = this.setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
}
if (!particlesOptions.color) {
particlesOptions.color = {
value: this.spawnColor,
};
}
else {
particlesOptions.color.value = this.spawnColor;
}
}
if (!position) {
return;
}
const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
container.particles.addParticle(pPosition, particlesOptions);
}
}
setColorAnimation(animation, initValue, maxValue) {
var _a;
const container = this.container;
if (!animation.enable) {
return initValue;
}
const colorOffset = randomInRange(animation.offset);
const delay = getRangeValue(this.options.rate.delay);
const emitFactor = (1000 * delay) / container.retina.reduceFactor;
const colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
}
}
_EmitterInstance_firstSpawn = new WeakMap(), _EmitterInstance_startParticlesAdded = new WeakMap(), _EmitterInstance_engine = new WeakMap();