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.
1,248 lines (1,242 loc) • 226 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === "object" && typeof module === "object") module.exports = factory(); else if (typeof define === "function" && define.amd) define([], factory); else {
var a = factory();
for (var i in a) (typeof exports === "object" ? exports : root)[i] = a[i];
}
})(window, (function() {
return function() {
"use strict";
var __webpack_modules__ = {};
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
var module = __webpack_module_cache__[moduleId] = {
exports: {}
};
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
return module.exports;
}
__webpack_require__.m = __webpack_modules__;
!function() {
var deferred = [];
__webpack_require__.O = function(result, chunkIds, fn, priority) {
if (chunkIds) {
priority = priority || 0;
for (var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
deferred[i] = [ chunkIds, fn, priority ];
return;
}
var notFulfilled = Infinity;
for (var i = 0; i < deferred.length; i++) {
var chunkIds = deferred[i][0];
var fn = deferred[i][1];
var priority = deferred[i][2];
var fulfilled = true;
for (var j = 0; j < chunkIds.length; j++) {
if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((function(key) {
return __webpack_require__.O[key](chunkIds[j]);
}))) {
chunkIds.splice(j--, 1);
} else {
fulfilled = false;
if (priority < notFulfilled) notFulfilled = priority;
}
}
if (fulfilled) {
deferred.splice(i--, 1);
var r = fn();
if (r !== undefined) result = r;
}
}
return result;
};
}();
!function() {
__webpack_require__.F = {};
__webpack_require__.E = function(chunkId) {
Object.keys(__webpack_require__.F).map((function(key) {
__webpack_require__.F[key](chunkId);
}));
};
}();
!function() {
var getProto = Object.getPrototypeOf ? function(obj) {
return Object.getPrototypeOf(obj);
} : function(obj) {
return obj.__proto__;
};
var leafPrototypes;
__webpack_require__.t = function(value, mode) {
if (mode & 1) value = this(value);
if (mode & 8) return value;
if (typeof value === "object" && value) {
if (mode & 4 && value.__esModule) return value;
if (mode & 16 && typeof value.then === "function") return value;
}
var ns = Object.create(null);
__webpack_require__.r(ns);
var def = {};
leafPrototypes = leafPrototypes || [ null, getProto({}), getProto([]), getProto(getProto) ];
for (var current = mode & 2 && value; typeof current == "object" && !~leafPrototypes.indexOf(current); current = getProto(current)) {
Object.getOwnPropertyNames(current).forEach((function(key) {
def[key] = function() {
return value[key];
};
}));
}
def["default"] = function() {
return value;
};
__webpack_require__.d(ns, def);
return ns;
};
}();
!function() {
__webpack_require__.d = function(exports, definition) {
for (var key in definition) {
if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
Object.defineProperty(exports, key, {
enumerable: true,
get: definition[key]
});
}
}
};
}();
!function() {
__webpack_require__.f = {};
__webpack_require__.e = function(chunkId) {
return Promise.all(Object.keys(__webpack_require__.f).reduce((function(promises, key) {
__webpack_require__.f[key](chunkId, promises);
return promises;
}), []));
};
}();
!function() {
__webpack_require__.u = function(chunkId) {
return "" + "tsparticles.pathseg.min" + ".js";
};
}();
!function() {
__webpack_require__.g = function() {
if (typeof globalThis === "object") return globalThis;
try {
return this || new Function("return this")();
} catch (e) {
if (typeof window === "object") return window;
}
}();
}();
!function() {
__webpack_require__.o = function(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
};
}();
!function() {
var inProgress = {};
var dataWebpackPrefix = "tsparticles:";
__webpack_require__.l = function(url, done, key, chunkId) {
if (inProgress[url]) {
inProgress[url].push(done);
return;
}
var script, needAttach;
if (key !== undefined) {
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
var s = scripts[i];
if (s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) {
script = s;
break;
}
}
}
if (!script) {
needAttach = true;
script = document.createElement("script");
script.charset = "utf-8";
script.timeout = 120;
if (__webpack_require__.nc) {
script.setAttribute("nonce", __webpack_require__.nc);
}
script.setAttribute("data-webpack", dataWebpackPrefix + key);
script.src = url;
}
inProgress[url] = [ done ];
var onScriptComplete = function(prev, event) {
script.onerror = script.onload = null;
clearTimeout(timeout);
var doneFns = inProgress[url];
delete inProgress[url];
script.parentNode && script.parentNode.removeChild(script);
doneFns && doneFns.forEach((function(fn) {
return fn(event);
}));
if (prev) return prev(event);
};
var timeout = setTimeout(onScriptComplete.bind(null, undefined, {
type: "timeout",
target: script
}), 12e4);
script.onerror = onScriptComplete.bind(null, script.onerror);
script.onload = onScriptComplete.bind(null, script.onload);
needAttach && document.head.appendChild(script);
};
}();
!function() {
__webpack_require__.r = function(exports) {
if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {
value: "Module"
});
}
Object.defineProperty(exports, "__esModule", {
value: true
});
};
}();
!function() {
var scriptUrl;
if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
var document = __webpack_require__.g.document;
if (!scriptUrl && document) {
if (document.currentScript) scriptUrl = document.currentScript.src;
if (!scriptUrl) {
var scripts = document.getElementsByTagName("script");
if (scripts.length) scriptUrl = scripts[scripts.length - 1].src;
}
}
if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
__webpack_require__.p = scriptUrl;
}();
!function() {
var installedChunks = {
143: 0,
475: 0
};
__webpack_require__.f.j = function(chunkId, promises) {
var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
if (installedChunkData !== 0) {
if (installedChunkData) {
promises.push(installedChunkData[2]);
} else {
if (true) {
var promise = new Promise((function(resolve, reject) {
installedChunkData = installedChunks[chunkId] = [ resolve, reject ];
}));
promises.push(installedChunkData[2] = promise);
var url = __webpack_require__.p + __webpack_require__.u(chunkId);
var error = new Error;
var loadingEnded = function(event) {
if (__webpack_require__.o(installedChunks, chunkId)) {
installedChunkData = installedChunks[chunkId];
if (installedChunkData !== 0) installedChunks[chunkId] = undefined;
if (installedChunkData) {
var errorType = event && (event.type === "load" ? "missing" : event.type);
var realSrc = event && event.target && event.target.src;
error.message = "Loading chunk " + chunkId + " failed.\n(" + errorType + ": " + realSrc + ")";
error.name = "ChunkLoadError";
error.type = errorType;
error.request = realSrc;
installedChunkData[1](error);
}
}
};
__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
} else installedChunks[chunkId] = 0;
}
}
};
__webpack_require__.F.j = function(chunkId) {
if ((!__webpack_require__.o(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && true) {
installedChunks[chunkId] = null;
var link = document.createElement("link");
if (__webpack_require__.nc) {
link.setAttribute("nonce", __webpack_require__.nc);
}
link.rel = "prefetch";
link.as = "script";
link.href = __webpack_require__.p + __webpack_require__.u(chunkId);
document.head.appendChild(link);
}
};
__webpack_require__.O.j = function(chunkId) {
return installedChunks[chunkId] === 0;
};
var webpackJsonpCallback = function(parentChunkLoadingFunction, data) {
var chunkIds = data[0];
var moreModules = data[1];
var runtime = data[2];
var moduleId, chunkId, i = 0;
if (chunkIds.some((function(id) {
return installedChunks[id] !== 0;
}))) {
for (moduleId in moreModules) {
if (__webpack_require__.o(moreModules, moduleId)) {
__webpack_require__.m[moduleId] = moreModules[moduleId];
}
}
if (runtime) var result = runtime(__webpack_require__);
}
if (parentChunkLoadingFunction) parentChunkLoadingFunction(data);
for (;i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if (__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
installedChunks[chunkId][0]();
}
installedChunks[chunkId] = 0;
}
return __webpack_require__.O(result);
};
var chunkLoadingGlobal = window["webpackChunktsparticles"] = window["webpackChunktsparticles"] || [];
chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
}();
!function() {
__webpack_require__.O(0, [ 143 ], (function() {
__webpack_require__.E(404);
}), 5);
}();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
loadPolygonMaskPlugin: function() {
return loadPolygonMaskPlugin;
}
});
class OptionsColor_OptionsColor {
constructor() {
this.value = "#fff";
}
static create(source, data) {
const color = new OptionsColor_OptionsColor;
color.load(source);
if (data !== undefined) {
if (typeof data === "string" || data instanceof Array) {
color.load({
value: data
});
} else {
color.load(data);
}
}
return color;
}
load(data) {
if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
return;
}
this.value = data.value;
}
}
class Circle_Circle extends(null && Range){
constructor(x, y, radius) {
super(x, y);
this.radius = radius;
}
contains(point) {
return getDistance(point, this.position) <= this.radius;
}
intersects(range) {
const rect = range;
const circle = range;
const pos1 = this.position;
const pos2 = range.position;
const xDist = Math.abs(pos2.x - pos1.x);
const yDist = Math.abs(pos2.y - pos1.y);
const r = this.radius;
if (circle.radius !== undefined) {
const rSum = r + circle.radius;
const dist = Math.sqrt(xDist * xDist + yDist + yDist);
return rSum > dist;
} else if (rect.size !== undefined) {
const w = rect.size.width;
const h = rect.size.height;
const edges = Math.pow(xDist - w, 2) + Math.pow(yDist - h, 2);
if (xDist > r + w || yDist > r + h) {
return false;
}
if (xDist <= w || yDist <= h) {
return true;
}
return edges <= r * r;
}
return false;
}
}
class CircleWarp_CircleWarp extends(null && Circle){
constructor(x, y, radius, canvasSize) {
super(x, y, radius);
this.canvasSize = canvasSize;
this.canvasSize = {
height: canvasSize.height,
width: canvasSize.width
};
}
contains(point) {
if (super.contains(point)) {
return true;
}
const posNE = {
x: point.x - this.canvasSize.width,
y: point.y
};
if (super.contains(posNE)) {
return true;
}
const posSE = {
x: point.x - this.canvasSize.width,
y: point.y - this.canvasSize.height
};
if (super.contains(posSE)) {
return true;
}
const posSW = {
x: point.x,
y: point.y - this.canvasSize.height
};
return super.contains(posSW);
}
intersects(range) {
if (super.intersects(range)) {
return true;
}
const rect = range;
const circle = range;
const newPos = {
x: range.position.x - this.canvasSize.width,
y: range.position.y - this.canvasSize.height
};
if (circle.radius !== undefined) {
const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
return super.intersects(biggerCircle);
} else if (rect.size !== undefined) {
const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
return super.intersects(rectSW);
}
return false;
}
}
class Constants_Constants {}
Constants_Constants.generatedAttribute = "generated";
Constants_Constants.randomColorValue = "random";
Constants_Constants.midColorValue = "mid";
Constants_Constants.touchEndEvent = "touchend";
Constants_Constants.mouseDownEvent = "mousedown";
Constants_Constants.mouseUpEvent = "mouseup";
Constants_Constants.mouseMoveEvent = "mousemove";
Constants_Constants.touchStartEvent = "touchstart";
Constants_Constants.touchMoveEvent = "touchmove";
Constants_Constants.mouseLeaveEvent = "mouseleave";
Constants_Constants.mouseOutEvent = "mouseout";
Constants_Constants.touchCancelEvent = "touchcancel";
Constants_Constants.resizeEvent = "resize";
Constants_Constants.visibilityChangeEvent = "visibilitychange";
Constants_Constants.noPolygonDataLoaded = "No polygon data loaded.";
Constants_Constants.noPolygonFound = "No polygon found, you need to specify SVG url in config.";
function manageListener(element, event, handler, add, options) {
if (add) {
let addOptions = {
passive: true
};
if (typeof options === "boolean") {
addOptions.capture = options;
} else if (options !== undefined) {
addOptions = options;
}
element.addEventListener(event, handler, addOptions);
} else {
const removeOptions = options;
element.removeEventListener(event, handler, removeOptions);
}
}
class EventListeners_EventListeners {
constructor(container) {
this.container = container;
this.canPush = true;
this.mouseMoveHandler = e => this.mouseTouchMove(e);
this.touchStartHandler = e => this.mouseTouchMove(e);
this.touchMoveHandler = e => this.mouseTouchMove(e);
this.touchEndHandler = () => this.mouseTouchFinish();
this.mouseLeaveHandler = () => this.mouseTouchFinish();
this.touchCancelHandler = () => this.mouseTouchFinish();
this.touchEndClickHandler = e => this.mouseTouchClick(e);
this.mouseUpHandler = e => this.mouseTouchClick(e);
this.mouseDownHandler = () => this.mouseDown();
this.visibilityChangeHandler = () => this.handleVisibilityChange();
this.themeChangeHandler = e => this.handleThemeChange(e);
this.oldThemeChangeHandler = e => this.handleThemeChange(e);
this.resizeHandler = () => this.handleWindowResize();
}
addListeners() {
this.manageListeners(true);
}
removeListeners() {
this.manageListeners(false);
}
manageListeners(add) {
var _a;
const container = this.container;
const options = container.actualOptions;
const detectType = options.interactivity.detectsOn;
let mouseLeaveEvent = Constants.mouseLeaveEvent;
if (detectType === "window") {
container.interactivity.element = window;
mouseLeaveEvent = Constants.mouseOutEvent;
} else if (detectType === "parent" && container.canvas.element) {
const canvasEl = container.canvas.element;
container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
} else {
container.interactivity.element = container.canvas.element;
}
const mediaMatch = !isSsr() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
if (mediaMatch) {
if (mediaMatch.addEventListener !== undefined) {
manageListener(mediaMatch, "change", this.themeChangeHandler, add);
} else if (mediaMatch.addListener !== undefined) {
if (add) {
mediaMatch.addListener(this.oldThemeChangeHandler);
} else {
mediaMatch.removeListener(this.oldThemeChangeHandler);
}
}
}
const interactivityEl = container.interactivity.element;
if (!interactivityEl) {
return;
}
const html = interactivityEl;
if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
manageListener(interactivityEl, Constants.mouseMoveEvent, this.mouseMoveHandler, add);
manageListener(interactivityEl, Constants.touchStartEvent, this.touchStartHandler, add);
manageListener(interactivityEl, Constants.touchMoveEvent, this.touchMoveHandler, add);
if (!options.interactivity.events.onClick.enable) {
manageListener(interactivityEl, Constants.touchEndEvent, this.touchEndHandler, add);
} else {
manageListener(interactivityEl, Constants.touchEndEvent, this.touchEndClickHandler, add);
manageListener(interactivityEl, Constants.mouseUpEvent, this.mouseUpHandler, add);
manageListener(interactivityEl, Constants.mouseDownEvent, this.mouseDownHandler, add);
}
manageListener(interactivityEl, mouseLeaveEvent, this.mouseLeaveHandler, add);
manageListener(interactivityEl, Constants.touchCancelEvent, this.touchCancelHandler, add);
}
if (container.canvas.element) {
container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
}
if (options.interactivity.events.resize) {
if (typeof ResizeObserver !== "undefined") {
if (this.resizeObserver && !add) {
if (container.canvas.element) {
this.resizeObserver.unobserve(container.canvas.element);
}
this.resizeObserver.disconnect();
delete this.resizeObserver;
} else if (!this.resizeObserver && add && container.canvas.element) {
this.resizeObserver = new ResizeObserver((entries => {
const entry = entries.find((e => e.target === container.canvas.element));
if (!entry) {
return;
}
this.handleWindowResize();
}));
this.resizeObserver.observe(container.canvas.element);
}
} else {
manageListener(window, Constants.resizeEvent, this.resizeHandler, add);
}
}
if (document) {
manageListener(document, Constants.visibilityChangeEvent, this.visibilityChangeHandler, add, false);
}
}
handleWindowResize() {
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
delete this.resizeTimeout;
}
this.resizeTimeout = setTimeout((async () => {
var _a;
return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize());
}), 500);
}
handleVisibilityChange() {
const container = this.container;
const options = container.actualOptions;
this.mouseTouchFinish();
if (!options.pauseOnBlur) {
return;
}
if (document === null || document === void 0 ? void 0 : document.hidden) {
container.pageHidden = true;
container.pause();
} else {
container.pageHidden = false;
if (container.getAnimationStatus()) {
container.play(true);
} else {
container.draw(true);
}
}
}
mouseDown() {
const interactivity = this.container.interactivity;
if (interactivity) {
const mouse = interactivity.mouse;
mouse.clicking = true;
mouse.downPosition = mouse.position;
}
}
mouseTouchMove(e) {
var _a, _b, _c, _d, _e, _f, _g;
const container = this.container;
const options = container.actualOptions;
if (((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element) === undefined) {
return;
}
container.interactivity.mouse.inside = true;
let pos;
const canvas = container.canvas.element;
if (e.type.startsWith("mouse")) {
this.canPush = true;
const mouseEvent = e;
if (container.interactivity.element === window) {
if (canvas) {
const clientRect = canvas.getBoundingClientRect();
pos = {
x: mouseEvent.clientX - clientRect.left,
y: mouseEvent.clientY - clientRect.top
};
}
} else if (options.interactivity.detectsOn === "parent") {
const source = mouseEvent.target;
const target = mouseEvent.currentTarget;
const canvasEl = container.canvas.element;
if (source && target && canvasEl) {
const sourceRect = source.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const canvasRect = canvasEl.getBoundingClientRect();
pos = {
x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top)
};
} else {
pos = {
x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY
};
}
} else {
if (mouseEvent.target === container.canvas.element) {
pos = {
x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY
};
}
}
} else {
this.canPush = e.type !== "touchmove";
const touchEvent = e;
const lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
const canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
pos = {
x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0)
};
}
const pxRatio = container.retina.pixelRatio;
if (pos) {
pos.x *= pxRatio;
pos.y *= pxRatio;
}
container.interactivity.mouse.position = pos;
container.interactivity.status = Constants.mouseMoveEvent;
}
mouseTouchFinish() {
const interactivity = this.container.interactivity;
if (interactivity === undefined) {
return;
}
const mouse = interactivity.mouse;
delete mouse.position;
delete mouse.clickPosition;
delete mouse.downPosition;
interactivity.status = Constants.mouseLeaveEvent;
mouse.inside = false;
mouse.clicking = false;
}
mouseTouchClick(e) {
const container = this.container;
const options = container.actualOptions;
const mouse = container.interactivity.mouse;
mouse.inside = true;
let handled = false;
const mousePosition = mouse.position;
if (mousePosition === undefined || !options.interactivity.events.onClick.enable) {
return;
}
for (const [, plugin] of container.plugins) {
if (plugin.clickPositionValid !== undefined) {
handled = plugin.clickPositionValid(mousePosition);
if (handled) {
break;
}
}
}
if (!handled) {
this.doMouseTouchClick(e);
}
mouse.clicking = false;
}
doMouseTouchClick(e) {
const container = this.container;
const options = container.actualOptions;
if (this.canPush) {
const mousePos = container.interactivity.mouse.position;
if (mousePos) {
container.interactivity.mouse.clickPosition = {
x: mousePos.x,
y: mousePos.y
};
} else {
return;
}
container.interactivity.mouse.clickTime = (new Date).getTime();
const onClick = options.interactivity.events.onClick;
if (onClick.mode instanceof Array) {
for (const mode of onClick.mode) {
this.handleClickMode(mode);
}
} else {
this.handleClickMode(onClick.mode);
}
}
if (e.type === "touchend") {
setTimeout((() => this.mouseTouchFinish()), 500);
}
}
handleThemeChange(e) {
const mediaEvent = e;
const themeName = mediaEvent.matches ? this.container.options.defaultDarkTheme : this.container.options.defaultLightTheme;
const theme = this.container.options.themes.find((theme => theme.name === themeName));
if (theme && theme.default.auto) {
this.container.loadTheme(themeName);
}
}
handleClickMode(mode) {
const container = this.container;
const options = container.actualOptions;
const pushNb = options.interactivity.modes.push.quantity;
const removeNb = options.interactivity.modes.remove.quantity;
switch (mode) {
case "push":
{
if (pushNb > 0) {
const pushOptions = options.interactivity.modes.push;
const group = itemFromArray([ undefined, ...pushOptions.groups ]);
const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
}
break;
}
case "remove":
container.particles.removeQuantity(removeNb);
break;
case "bubble":
container.bubble.clicking = true;
break;
case "repulse":
container.repulse.clicking = true;
container.repulse.count = 0;
for (const particle of container.repulse.particles) {
particle.velocity.setTo(particle.initialVelocity);
}
container.repulse.particles = [];
container.repulse.finish = false;
setTimeout((() => {
if (!container.destroyed) {
container.repulse.clicking = false;
}
}), options.interactivity.modes.repulse.duration * 1e3);
break;
case "attract":
container.attract.clicking = true;
container.attract.count = 0;
for (const particle of container.attract.particles) {
particle.velocity.setTo(particle.initialVelocity);
}
container.attract.particles = [];
container.attract.finish = false;
setTimeout((() => {
if (!container.destroyed) {
container.attract.clicking = false;
}
}), options.interactivity.modes.attract.duration * 1e3);
break;
case "pause":
if (container.getAnimationStatus()) {
container.pause();
} else {
container.play();
}
break;
}
for (const [, plugin] of container.plugins) {
if (plugin.handleClickMode) {
plugin.handleClickMode(mode);
}
}
}
}
var __classPrivateFieldSet = undefined && undefined.__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 = undefined && undefined.__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 _InteractionManager_engine;
class InteractionManager_InteractionManager {
constructor(engine, container) {
this.container = container;
_InteractionManager_engine.set(this, void 0);
__classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
this.externalInteractors = [];
this.particleInteractors = [];
this.init();
}
init() {
const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
this.externalInteractors = [];
this.particleInteractors = [];
for (const interactor of interactors) {
switch (interactor.type) {
case 0:
this.externalInteractors.push(interactor);
break;
case 1:
this.particleInteractors.push(interactor);
break;
}
}
}
async externalInteract(delta) {
for (const interactor of this.externalInteractors) {
if (interactor.isEnabled()) {
await interactor.interact(delta);
}
}
}
async particlesInteract(particle, delta) {
for (const interactor of this.externalInteractors) {
interactor.reset(particle);
}
for (const interactor of this.particleInteractors) {
if (interactor.isEnabled(particle)) {
await interactor.interact(particle, delta);
}
}
}
}
_InteractionManager_engine = new WeakMap;
function applyDistance(particle) {
const initialPosition = particle.initialPosition;
const {dx: dx, dy: dy} = getDistances(initialPosition, particle.position);
const dxFixed = Math.abs(dx), dyFixed = Math.abs(dy);
const hDistance = particle.retina.maxDistance.horizontal;
const vDistance = particle.retina.maxDistance.vertical;
if (!hDistance && !vDistance) {
return;
}
if ((hDistance && dxFixed >= hDistance || vDistance && dyFixed >= vDistance) && !particle.misplaced) {
particle.misplaced = !!hDistance && dxFixed > hDistance || !!vDistance && dyFixed > vDistance;
if (hDistance) {
particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
}
if (vDistance) {
particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
}
} else if ((!hDistance || dxFixed < hDistance) && (!vDistance || dyFixed < vDistance) && particle.misplaced) {
particle.misplaced = false;
} else if (particle.misplaced) {
const pos = particle.position, vel = particle.velocity;
if (hDistance && (pos.x < initialPosition.x && vel.x < 0 || pos.x > initialPosition.x && vel.x > 0)) {
vel.x *= -Math.random();
}
if (vDistance && (pos.y < initialPosition.y && vel.y < 0 || pos.y > initialPosition.y && vel.y > 0)) {
vel.y *= -Math.random();
}
}
}
class ParticlesMover_ParticlesMover {
constructor(container) {
this.container = container;
}
move(particle, delta) {
if (particle.destroyed) {
return;
}
this.moveParticle(particle, delta);
this.moveParallax(particle);
}
moveParticle(particle, delta) {
var _a, _b, _c;
var _d, _e;
const particleOptions = particle.options;
const moveOptions = particleOptions.move;
if (!moveOptions.enable) {
return;
}
const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor, moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio, maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = sizeFactor * slowFactor * (delta.factor || 1) / diffFactor, moveSpeed = baseSpeed * speedFactor;
this.applyPath(particle, delta);
const gravityOptions = particle.gravity;
const gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
if (gravityOptions.enable && moveSpeed) {
particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (60 * moveSpeed);
}
if (moveDrift && moveSpeed) {
particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
}
const decay = particle.moveDecay;
if (decay != 1) {
particle.velocity.multTo(decay);
}
const velocity = particle.velocity.mult(moveSpeed);
const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
if (gravityOptions.enable && maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
velocity.y = gravityFactor * maxSpeed;
if (moveSpeed) {
particle.velocity.y = velocity.y / moveSpeed;
}
}
const zIndexOptions = particle.options.zIndex, zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
if (moveOptions.spin.enable) {
this.spin(particle, moveSpeed);
} else {
if (zVelocityFactor != 1) {
velocity.multTo(zVelocityFactor);
}
particle.position.addTo(velocity);
if (moveOptions.vibrate) {
particle.position.x += Math.sin(particle.position.x * Math.cos(particle.position.y));
particle.position.y += Math.cos(particle.position.y * Math.sin(particle.position.x));
}
}
applyDistance(particle);
}
spin(particle, moveSpeed) {
const container = this.container;
if (!particle.spin) {
return;
}
const updateFunc = {
x: particle.spin.direction === "clockwise" ? Math.cos : Math.sin,
y: particle.spin.direction === "clockwise" ? Math.sin : Math.cos
};
particle.position.x = particle.spin.center.x + particle.spin.radius * updateFunc.x(particle.spin.angle);
particle.position.y = particle.spin.center.y + particle.spin.radius * updateFunc.y(particle.spin.angle);
particle.spin.radius += particle.spin.acceleration;
const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height);
if (particle.spin.radius > maxCanvasSize / 2) {
particle.spin.radius = maxCanvasSize / 2;
particle.spin.acceleration *= -1;
} else if (particle.spin.radius < 0) {
particle.spin.radius = 0;
particle.spin.acceleration *= -1;
}
particle.spin.angle += moveSpeed / 100 * (1 - particle.spin.radius / maxCanvasSize);
}
applyPath(particle, delta) {
const particlesOptions = particle.options;
const pathOptions = particlesOptions.move.path;
const pathEnabled = pathOptions.enable;
if (!pathEnabled) {
return;
}
const container = this.container;
if (particle.lastPathTime <= particle.pathDelay) {
particle.lastPathTime += delta.value;
return;
}
const path = container.pathGenerator.generate(particle);
particle.velocity.addTo(path);
if (pathOptions.clamp) {
particle.velocity.x = clamp(particle.velocity.x, -1, 1);
particle.velocity.y = clamp(particle.velocity.y, -1, 1);
}
particle.lastPathTime -= particle.pathDelay;
}
moveParallax(particle) {
const container = this.container;
const options = container.actualOptions;
if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
return;
}
const parallaxForce = options.interactivity.events.onHover.parallax.force;
const mousePos = container.interactivity.mouse.position;
if (!mousePos) {
return;
}
const canvasCenter = {
x: container.canvas.size.width / 2,
y: container.canvas.size.height / 2
};
const parallaxSmooth = options.interactivity.events.onHover.parallax.smooth;
const factor = particle.getRadius() / parallaxForce;
const tmp = {
x: (mousePos.x - canvasCenter.x) * factor,
y: (mousePos.y - canvasCenter.y) * factor
};
particle.offset.x += (tmp.x - particle.offset.x) / parallaxSmooth;
particle.offset.y += (tmp.y - particle.offset.y) / parallaxSmooth;
}
getProximitySpeedFactor(particle) {
const container = this.container;
const options = container.actualOptions;
const active = isInArray("slow", options.interactivity.events.onHover.mode);
if (!active) {
return 1;
}
const mousePos = this.container.interactivity.mouse.position;
if (!mousePos) {
return 1;
}
const particlePos = particle.getPosition();
const dist = getDistance(mousePos, particlePos);
const radius = container.retina.slowModeRadius;
if (dist > radius) {
return 1;
}
const proximityFactor = dist / radius || 0;
const slowFactor = options.interactivity.modes.slow.factor;
return proximityFactor / slowFactor;
}
}
var Plugins_classPrivateFieldSet = undefined && undefined.__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 _Plugins_engine;
class Plugins {
constructor(engine) {
_Plugins_engine.set(this, void 0);
Plugins_classPrivateFieldSet(this, _Plugins_engine, engine, "f");
this.plugins = [];
this.interactorsInitializers = new Map;
this.updatersInitializers = new Map;
this.interactors = new Map;
this.updaters = new Map;
this.presets = new Map;
this.drawers = new Map;
this.pathGenerators = new Map;
}
getPlugin(plugin) {
return this.plugins.find((t => t.id === plugin));
}
addPlugin(plugin) {
if (!this.getPlugin(plugin.id)) {
this.plugins.push(plugin);
}
}
getAvailablePlugins(container) {
const res = new Map;
for (const plugin of this.plugins) {
if (!plugin.needsPlugin(container.actualOptions)) {
continue;
}
res.set(plugin.id, plugin.getPlugin(container));
}
return res;
}
loadOptions(options, sourceOptions) {
for (const plugin of this.plugins) {
plugin.loadOptions(options, sourceOptions);
}
}
getPreset(preset) {
return this.presets.get(preset);
}
addPreset(presetKey, options, override = false) {
if (override || !this.getPreset(presetKey)) {
this.presets.set(presetKey, options);
}
}
addShapeDrawer(type, drawer) {
if (!this.getShapeDrawer(type)) {
this.drawers.set(type, drawer);
}
}
getShapeDrawer(type) {
return this.drawers.get(type);
}
getSupportedShapes() {
return this.drawers.keys();
}
getPathGenerator(type) {
return this.pathGenerators.get(type);
}
addPathGenerator(type, pathGenerator) {
if (!this.getPathGenerator(type)) {
this.pathGenerators.set(type, pathGenerator);
}
}
getInteractors(container, force = false) {
let res = this.interactors.get(container);
if (!res || force) {
res = [ ...this.interactorsInitializers.values() ].map((t => t(container)));
this.interactors.set(container, res);
}
return res;
}
addInteractor(name, initInteractor) {
this.interactorsInitializers.set(name, initInteractor);
}
getUpdaters(container, force = false) {
let res = this.updaters.get(container);
if (!res || force) {
res = [ ...this.updatersInitializers.values() ].map((t => t(container)));
this.updaters.set(container, res);
}
return res;
}
addParticleUpdater(name, initUpdater) {
this.updatersInitializers.set(name, initUpdater);
}
}
_Plugins_engine = new WeakMap;
class QuadTree_QuadTree {
constructor(rectangle, capacity) {
this.rectangle = rectangle;
this.capacity = capacity;
this.points = [];
this.divided = false;
}
subdivide() {
const x = this.rectangle.position.x;
const y = this.rectangle.position.y;
const w = this.rectangle.size.width;
const h = this.rectangle.size.height;
const capacity = this.capacity;
this.northEast = new QuadTree_QuadTree(new Rectangle(x, y, w / 2, h / 2), capacity);
this.northWest = new QuadTree_QuadTree(new Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
this.southEast = new QuadTree_QuadTree(new Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
this.southWest = new QuadTree_QuadTree(new Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
this.divided = true;
}
insert(point) {
var _a, _b, _c, _d, _e;
if (!this.rectangle.contains(point.position)) {
return false;
}
if (this.points.length < this.capacity) {
this.points.push(point);
return true;
}
if (!this.divided) {
this.subdivide();
}
return (_e = ((_a = this.northEast) === null || _a === void 0 ? void 0 : _a.insert(point)) || ((_b = this.northWest) === null || _b === void 0 ? void 0 : _b.insert(point)) || ((_c = this.southEast) === null || _c === void 0 ? void 0 : _c.insert(point)) || ((_d = this.southWest) === null || _d === void 0 ? void 0 : _d.insert(point))) !== null && _e !== void 0 ? _e : false;
}
queryCircle(position, radius) {
return this.query(new Circle(position.x, position.y, radius));
}
queryCircleWarp(position, radius, containerOrSize) {
const container = containerOrSize;
const size = containerOrSize;
return this.query(new CircleWarp(position.x, position.y, radius, container.canvas !== undefined ? container.canvas.size : size));
}
queryRectangle(position, size) {
return this.query(new Rectangle(position.x, position.y, size.width, size.height));
}
query(range, found) {
var _a, _b, _c, _d;
const res = found !== null && found !== void 0 ? found : [];
if (!range.intersects(this.rectangle)) {
return [];
} else {
for (const p of this.points) {
if (!range.contains(p.position) && getDistance(range.position, p.position) > p.particle.getRadius()) {
continue;
}
res.push(p.particle);
}
if (this.divided) {
(_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
(_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
(_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
(_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
}
}
return res;
}
}
class Vector_Vector {
constructor(x, y) {
let defX, defY;
if (y === undefined) {
if (typeof x === "number") {
throw new Error("tsParticles - Vector not initialized correctly");
}
const coords = x;
[defX, defY] = [ coords.x, coords.y ];
} else {
[defX, defY] = [ x, y ];
}
this.x = defX;
this.y = defY;
}
static clone(source) {
return Vector_Vector.create(source.x, source.y);
}
static create(x, y) {
return new Vector_Vector(x, y);
}
static get origin() {
return Vector_Vector.create(0, 0);
}
get angle() {
return Math.atan2(this.y, this.x);
}
set angle(angle) {
this.updateFromAngle(angle, this.length);
}
get length() {
return Math.sqrt(this.x ** 2 + this.y ** 2);
}
set length(length) {
this.updateFromAngle(this.angle, length);
}
add(v) {
return Vector_Vector.create(this.x + v.x, this.y + v.y);
}
addTo(v) {
this.x += v.x;
this.y += v.y;
}
sub(v) {
return Vector_Vector.create(this.x - v.x, this.y - v.y);
}
subFrom(v) {
this.x -= v.x;
this.y -= v.y;
}
mult(n) {
return Vector_Vector.create(this.x * n, this.y * n);
}
multTo(n) {
this.x *= n;
this.y *= n;
}
div(n) {
return Vector_Vector.create(this.x / n, this