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,390 lines (1,373 loc) • 200 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_require__ = {};
!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__.o = function(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
};
}();
!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
});
};
}();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
loadExternalBubbleInteraction: function() {
return loadExternalBubbleInteraction;
}
});
function NumberUtils_clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}
function mix(comp1, comp2, weight1, weight2) {
return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
}
function NumberUtils_randomInRange(r) {
const max = NumberUtils_getRangeMax(r);
let min = NumberUtils_getRangeMin(r);
if (max === min) {
min = 0;
}
return Math.random() * (max - min) + min;
}
function NumberUtils_getRangeValue(value) {
return typeof value === "number" ? value : NumberUtils_randomInRange(value);
}
function NumberUtils_getRangeMin(value) {
return typeof value === "number" ? value : value.min;
}
function NumberUtils_getRangeMax(value) {
return typeof value === "number" ? value : value.max;
}
function NumberUtils_setRangeValue(source, value) {
if (source === value || value === undefined && typeof source === "number") {
return source;
}
const min = NumberUtils_getRangeMin(source), max = NumberUtils_getRangeMax(source);
return value !== undefined ? {
min: Math.min(min, value),
max: Math.max(max, value)
} : NumberUtils_setRangeValue(min, max);
}
function NumberUtils_getValue(options) {
const random = options.random;
const {enable: enable, minimumValue: minimumValue} = typeof random === "boolean" ? {
enable: random,
minimumValue: 0
} : random;
return enable ? NumberUtils_getRangeValue(NumberUtils_setRangeValue(options.value, minimumValue)) : NumberUtils_getRangeValue(options.value);
}
function NumberUtils_getDistances(pointA, pointB) {
const dx = pointA.x - pointB.x;
const dy = pointA.y - pointB.y;
return {
dx: dx,
dy: dy,
distance: Math.sqrt(dx * dx + dy * dy)
};
}
function NumberUtils_getDistance(pointA, pointB) {
return NumberUtils_getDistances(pointA, pointB).distance;
}
function NumberUtils_getParticleDirectionAngle(direction) {
if (typeof direction === "number") {
return direction * Math.PI / 180;
} else {
switch (direction) {
case "top":
return -Math.PI / 2;
case "top-right":
return -Math.PI / 4;
case "right":
return 0;
case "bottom-right":
return Math.PI / 4;
case "bottom":
return Math.PI / 2;
case "bottom-left":
return 3 * Math.PI / 4;
case "left":
return Math.PI;
case "top-left":
return -3 * Math.PI / 4;
case "none":
default:
return Math.random() * Math.PI * 2;
}
}
}
function NumberUtils_getParticleBaseVelocity(direction) {
const baseVelocity = Vector.origin;
baseVelocity.length = 1;
baseVelocity.angle = direction;
return baseVelocity;
}
function NumberUtils_collisionVelocity(v1, v2, m1, m2) {
return Vector.create(v1.x * (m1 - m2) / (m1 + m2) + v2.x * 2 * m2 / (m1 + m2), v1.y);
}
function calcEasing(value, type) {
switch (type) {
case "ease-out-quad":
return 1 - (1 - value) ** 2;
case "ease-out-cubic":
return 1 - (1 - value) ** 3;
case "ease-out-quart":
return 1 - (1 - value) ** 4;
case "ease-out-quint":
return 1 - (1 - value) ** 5;
case "ease-out-expo":
return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
case "ease-out-sine":
return Math.sin(value * Math.PI / 2);
case "ease-out-back":
{
const c1 = 1.70158;
const c3 = c1 + 1;
return 1 + c3 * Math.pow(value - 1, 3) + c1 * Math.pow(value - 1, 2);
}
case "ease-out-circ":
return Math.sqrt(1 - Math.pow(value - 1, 2));
default:
return value;
}
}
function rectSideBounce(pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor) {
const res = {
bounced: false
};
if (pOtherSide.min >= rectOtherSide.min && pOtherSide.min <= rectOtherSide.max && pOtherSide.max >= rectOtherSide.min && pOtherSide.max <= rectOtherSide.max) {
if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0) {
res.velocity = velocity * -factor;
res.bounced = true;
}
}
return res;
}
function checkSelector(element, selectors) {
if (selectors instanceof Array) {
for (const selector of selectors) {
if (element.matches(selector)) {
return true;
}
}
return false;
} else {
return element.matches(selectors);
}
}
function Utils_isSsr() {
return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
}
function Utils_animate() {
return Utils_isSsr() ? callback => setTimeout(callback) : callback => (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout)(callback);
}
function Utils_cancelAnimation() {
return Utils_isSsr() ? handle => clearTimeout(handle) : handle => (window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.clearTimeout)(handle);
}
function Utils_isInArray(value, array) {
return value === array || array instanceof Array && array.indexOf(value) > -1;
}
async function loadFont(character) {
var _a, _b;
try {
await document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
} catch (_c) {}
}
function arrayRandomIndex(array) {
return Math.floor(Math.random() * array.length);
}
function Utils_itemFromArray(array, index, useIndex = true) {
const fixedIndex = index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array);
return array[fixedIndex];
}
function isPointInside(point, size, radius, direction) {
return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, direction);
}
function areBoundsInside(bounds, size, direction) {
let inside = true;
if (!direction || direction === "bottom") {
inside = bounds.top < size.height;
}
if (inside && (!direction || direction === "left")) {
inside = bounds.right > 0;
}
if (inside && (!direction || direction === "right")) {
inside = bounds.left < size.width;
}
if (inside && (!direction || direction === "top")) {
inside = bounds.bottom > 0;
}
return inside;
}
function calculateBounds(point, radius) {
return {
bottom: point.y + radius,
left: point.x - radius,
right: point.x + radius,
top: point.y - radius
};
}
function Utils_deepExtend(destination, ...sources) {
for (const source of sources) {
if (source === undefined || source === null) {
continue;
}
if (typeof source !== "object") {
destination = source;
continue;
}
const sourceIsArray = Array.isArray(source);
if (sourceIsArray && (typeof destination !== "object" || !destination || !Array.isArray(destination))) {
destination = [];
} else if (!sourceIsArray && (typeof destination !== "object" || !destination || Array.isArray(destination))) {
destination = {};
}
for (const key in source) {
if (key === "__proto__") {
continue;
}
const sourceDict = source;
const value = sourceDict[key];
const isObject = typeof value === "object";
const destDict = destination;
destDict[key] = isObject && Array.isArray(value) ? value.map((v => Utils_deepExtend(destDict[key], v))) : Utils_deepExtend(destDict[key], value);
}
}
return destination;
}
function isDivModeEnabled(mode, divs) {
return divs instanceof Array ? !!divs.find((t => t.enable && Utils_isInArray(mode, t.mode))) : Utils_isInArray(mode, divs.mode);
}
function divModeExecute(mode, divs, callback) {
if (divs instanceof Array) {
for (const div of divs) {
const divMode = div.mode;
const divEnabled = div.enable;
if (divEnabled && Utils_isInArray(mode, divMode)) {
singleDivModeExecute(div, callback);
}
}
} else {
const divMode = divs.mode;
const divEnabled = divs.enable;
if (divEnabled && Utils_isInArray(mode, divMode)) {
singleDivModeExecute(divs, callback);
}
}
}
function singleDivModeExecute(div, callback) {
const selectors = div.selectors;
if (selectors instanceof Array) {
for (const selector of selectors) {
callback(selector, div);
}
} else {
callback(selectors, div);
}
}
function divMode(divs, element) {
if (!element || !divs) {
return;
}
if (divs instanceof Array) {
return divs.find((d => checkSelector(element, d.selectors)));
} else if (checkSelector(element, divs.selectors)) {
return divs;
}
}
function circleBounceDataFromParticle(p) {
return {
position: p.getPosition(),
radius: p.getRadius(),
mass: p.getMass(),
velocity: p.velocity,
factor: Vector.create(getValue(p.options.bounce.horizontal), getValue(p.options.bounce.vertical))
};
}
function circleBounce(p1, p2) {
const {x: xVelocityDiff, y: yVelocityDiff} = p1.velocity.sub(p2.velocity);
const [pos1, pos2] = [ p1.position, p2.position ];
const {dx: xDist, dy: yDist} = getDistances(pos2, pos1);
if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
const angle = -Math.atan2(yDist, xDist);
const m1 = p1.mass;
const m2 = p2.mass;
const u1 = p1.velocity.rotate(angle);
const u2 = p2.velocity.rotate(angle);
const v1 = collisionVelocity(u1, u2, m1, m2);
const v2 = collisionVelocity(u2, u1, m1, m2);
const vFinal1 = v1.rotate(-angle);
const vFinal2 = v2.rotate(-angle);
p1.velocity.x = vFinal1.x * p1.factor.x;
p1.velocity.y = vFinal1.y * p1.factor.y;
p2.velocity.x = vFinal2.x * p2.factor.x;
p2.velocity.y = vFinal2.y * p2.factor.y;
}
}
function rectBounce(particle, divBounds) {
const pPos = particle.getPosition();
const size = particle.getRadius();
const bounds = calculateBounds(pPos, size);
const resH = rectSideBounce({
min: bounds.left,
max: bounds.right
}, {
min: bounds.top,
max: bounds.bottom
}, {
min: divBounds.left,
max: divBounds.right
}, {
min: divBounds.top,
max: divBounds.bottom
}, particle.velocity.x, getValue(particle.options.bounce.horizontal));
if (resH.bounced) {
if (resH.velocity !== undefined) {
particle.velocity.x = resH.velocity;
}
if (resH.position !== undefined) {
particle.position.x = resH.position;
}
}
const resV = rectSideBounce({
min: bounds.top,
max: bounds.bottom
}, {
min: bounds.left,
max: bounds.right
}, {
min: divBounds.top,
max: divBounds.bottom
}, {
min: divBounds.left,
max: divBounds.right
}, particle.velocity.y, getValue(particle.options.bounce.vertical));
if (resV.bounced) {
if (resV.velocity !== undefined) {
particle.velocity.y = resV.velocity;
}
if (resV.position !== undefined) {
particle.position.y = resV.position;
}
}
}
function hue2rgb(p, q, t) {
let tCalc = t;
if (tCalc < 0) {
tCalc += 1;
}
if (tCalc > 1) {
tCalc -= 1;
}
if (tCalc < 1 / 6) {
return p + (q - p) * 6 * tCalc;
}
if (tCalc < 1 / 2) {
return q;
}
if (tCalc < 2 / 3) {
return p + (q - p) * (2 / 3 - tCalc) * 6;
}
return p;
}
function stringToRgba(input) {
if (input.startsWith("rgb")) {
const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i;
const result = regex.exec(input);
return result ? {
a: result.length > 4 ? parseFloat(result[5]) : 1,
b: parseInt(result[3], 10),
g: parseInt(result[2], 10),
r: parseInt(result[1], 10)
} : undefined;
} else if (input.startsWith("hsl")) {
const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i;
const result = regex.exec(input);
return result ? hslaToRgba({
a: result.length > 4 ? parseFloat(result[5]) : 1,
h: parseInt(result[1], 10),
l: parseInt(result[3], 10),
s: parseInt(result[2], 10)
}) : undefined;
} else if (input.startsWith("hsv")) {
const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i;
const result = regex.exec(input);
return result ? hsvaToRgba({
a: result.length > 4 ? parseFloat(result[5]) : 1,
h: parseInt(result[1], 10),
s: parseInt(result[2], 10),
v: parseInt(result[3], 10)
}) : undefined;
} else {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
const hexFixed = input.replace(shorthandRegex, ((_m, r, g, b, a) => r + r + g + g + b + b + (a !== undefined ? a + a : "")));
const regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i;
const result = regex.exec(hexFixed);
return result ? {
a: result[4] !== undefined ? parseInt(result[4], 16) / 255 : 1,
b: parseInt(result[3], 16),
g: parseInt(result[2], 16),
r: parseInt(result[1], 16)
} : undefined;
}
}
function ColorUtils_colorToRgb(input, index, useIndex = true) {
var _a, _b, _c;
if (input === undefined) {
return;
}
const color = typeof input === "string" ? {
value: input
} : input;
let res;
if (typeof color.value === "string") {
if (color.value === Constants_Constants.randomColorValue) {
res = getRandomRgbColor();
} else {
res = stringToRgb(color.value);
}
} else {
if (color.value instanceof Array) {
const colorSelected = Utils_itemFromArray(color.value, index, useIndex);
res = ColorUtils_colorToRgb({
value: colorSelected
});
} else {
const colorValue = color.value;
const rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
if (rgbColor.r !== undefined) {
res = rgbColor;
} else {
const hslColor = (_b = colorValue.hsl) !== null && _b !== void 0 ? _b : color.value;
if (hslColor.h !== undefined && hslColor.l !== undefined) {
res = hslToRgb(hslColor);
} else {
const hsvColor = (_c = colorValue.hsv) !== null && _c !== void 0 ? _c : color.value;
if (hsvColor.h !== undefined && hsvColor.v !== undefined) {
res = hsvToRgb(hsvColor);
}
}
}
}
}
return res;
}
function ColorUtils_colorToHsl(color, index, useIndex = true) {
const rgb = ColorUtils_colorToRgb(color, index, useIndex);
return rgb !== undefined ? rgbToHsl(rgb) : undefined;
}
function rgbToHsl(color) {
const r1 = color.r / 255;
const g1 = color.g / 255;
const b1 = color.b / 255;
const max = Math.max(r1, g1, b1);
const min = Math.min(r1, g1, b1);
const res = {
h: 0,
l: (max + min) / 2,
s: 0
};
if (max != min) {
res.s = res.l < .5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? 2 + (b1 - r1) / (max - min) : 4 + (r1 - g1) / (max - min);
}
res.l *= 100;
res.s *= 100;
res.h *= 60;
if (res.h < 0) {
res.h += 360;
}
return res;
}
function stringToAlpha(input) {
var _a;
return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
}
function stringToRgb(input) {
return stringToRgba(input);
}
function hslToRgb(hsl) {
const result = {
b: 0,
g: 0,
r: 0
};
const hslPercent = {
h: hsl.h / 360,
l: hsl.l / 100,
s: hsl.s / 100
};
if (hslPercent.s === 0) {
result.b = hslPercent.l;
result.g = hslPercent.l;
result.r = hslPercent.l;
} else {
const q = hslPercent.l < .5 ? hslPercent.l * (1 + hslPercent.s) : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s;
const p = 2 * hslPercent.l - q;
result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
result.g = hue2rgb(p, q, hslPercent.h);
result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
}
result.r = Math.floor(result.r * 255);
result.g = Math.floor(result.g * 255);
result.b = Math.floor(result.b * 255);
return result;
}
function hslaToRgba(hsla) {
const rgbResult = hslToRgb(hsla);
return {
a: hsla.a,
b: rgbResult.b,
g: rgbResult.g,
r: rgbResult.r
};
}
function hslToHsv(hsl) {
const l = hsl.l / 100, sl = hsl.s / 100;
const v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
return {
h: hsl.h,
s: sv * 100,
v: v * 100
};
}
function hslaToHsva(hsla) {
const hsvResult = hslToHsv(hsla);
return {
a: hsla.a,
h: hsvResult.h,
s: hsvResult.s,
v: hsvResult.v
};
}
function hsvToHsl(hsv) {
const v = hsv.v / 100, sv = hsv.s / 100;
const l = v * (1 - sv / 2), sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
return {
h: hsv.h,
l: l * 100,
s: sl * 100
};
}
function hsvaToHsla(hsva) {
const hslResult = hsvToHsl(hsva);
return {
a: hsva.a,
h: hslResult.h,
l: hslResult.l,
s: hslResult.s
};
}
function hsvToRgb(hsv) {
const result = {
b: 0,
g: 0,
r: 0
};
const hsvPercent = {
h: hsv.h / 60,
s: hsv.s / 100,
v: hsv.v / 100
};
const c = hsvPercent.v * hsvPercent.s, x = c * (1 - Math.abs(hsvPercent.h % 2 - 1));
let tempRgb;
if (hsvPercent.h >= 0 && hsvPercent.h <= 1) {
tempRgb = {
r: c,
g: x,
b: 0
};
} else if (hsvPercent.h > 1 && hsvPercent.h <= 2) {
tempRgb = {
r: x,
g: c,
b: 0
};
} else if (hsvPercent.h > 2 && hsvPercent.h <= 3) {
tempRgb = {
r: 0,
g: c,
b: x
};
} else if (hsvPercent.h > 3 && hsvPercent.h <= 4) {
tempRgb = {
r: 0,
g: x,
b: c
};
} else if (hsvPercent.h > 4 && hsvPercent.h <= 5) {
tempRgb = {
r: x,
g: 0,
b: c
};
} else if (hsvPercent.h > 5 && hsvPercent.h <= 6) {
tempRgb = {
r: c,
g: 0,
b: x
};
}
if (tempRgb) {
const m = hsvPercent.v - c;
result.r = Math.floor((tempRgb.r + m) * 255);
result.g = Math.floor((tempRgb.g + m) * 255);
result.b = Math.floor((tempRgb.b + m) * 255);
}
return result;
}
function hsvaToRgba(hsva) {
const rgbResult = hsvToRgb(hsva);
return {
a: hsva.a,
b: rgbResult.b,
g: rgbResult.g,
r: rgbResult.r
};
}
function rgbToHsv(rgb) {
const rgbPercent = {
r: rgb.r / 255,
g: rgb.g / 255,
b: rgb.b / 255
}, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
let h = 0;
if (v === rgbPercent.r) {
h = 60 * ((rgbPercent.g - rgbPercent.b) / c);
} else if (v === rgbPercent.g) {
h = 60 * (2 + (rgbPercent.b - rgbPercent.r) / c);
} else if (v === rgbPercent.b) {
h = 60 * (4 + (rgbPercent.r - rgbPercent.g) / c);
}
const s = !v ? 0 : c / v;
return {
h: h,
s: s * 100,
v: v * 100
};
}
function rgbaToHsva(rgba) {
const hsvResult = rgbToHsv(rgba);
return {
a: rgba.a,
h: hsvResult.h,
s: hsvResult.s,
v: hsvResult.v
};
}
function getRandomRgbColor(min) {
const fixedMin = min !== null && min !== void 0 ? min : 0;
return {
b: Math.floor(NumberUtils_randomInRange(NumberUtils_setRangeValue(fixedMin, 256))),
g: Math.floor(NumberUtils_randomInRange(NumberUtils_setRangeValue(fixedMin, 256))),
r: Math.floor(NumberUtils_randomInRange(NumberUtils_setRangeValue(fixedMin, 256)))
};
}
function ColorUtils_getStyleFromRgb(color, opacity) {
return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}
function ColorUtils_getStyleFromHsl(color, opacity) {
return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}
function getStyleFromHsv(color, opacity) {
return ColorUtils_getStyleFromHsl(hsvToHsl(color), opacity);
}
function ColorUtils_colorMix(color1, color2, size1, size2) {
let rgb1 = color1;
let rgb2 = color2;
if (rgb1.r === undefined) {
rgb1 = hslToRgb(color1);
}
if (rgb2.r === undefined) {
rgb2 = hslToRgb(color2);
}
return {
b: mix(rgb1.b, rgb2.b, size1, size2),
g: mix(rgb1.g, rgb2.g, size1, size2),
r: mix(rgb1.r, rgb2.r, size1, size2)
};
}
function getLinkColor(p1, p2, linkColor) {
var _a, _b;
if (linkColor === Constants.randomColorValue) {
return getRandomRgbColor();
} else if (linkColor === "mid") {
const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor();
const destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
if (sourceColor && destColor && p2) {
return ColorUtils_colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
} else {
const hslColor = sourceColor !== null && sourceColor !== void 0 ? sourceColor : destColor;
if (hslColor) {
return hslToRgb(hslColor);
}
}
} else {
return linkColor;
}
}
function getLinkRandomColor(optColor, blink, consent) {
const color = typeof optColor === "string" ? optColor : optColor.value;
if (color === Constants.randomColorValue) {
if (consent) {
return ColorUtils_colorToRgb({
value: color
});
} else if (blink) {
return Constants.randomColorValue;
} else {
return Constants.midColorValue;
}
} else {
return ColorUtils_colorToRgb({
value: color
});
}
}
function ColorUtils_getHslFromAnimation(animation) {
return animation !== undefined ? {
h: animation.h.value,
s: animation.s.value,
l: animation.l.value
} : undefined;
}
function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
const resColor = {
h: {
enable: false,
value: hsl.h
},
s: {
enable: false,
value: hsl.s
},
l: {
enable: false,
value: hsl.l
}
};
if (animationOptions) {
setColorAnimation(resColor.h, animationOptions.h, reduceFactor);
setColorAnimation(resColor.s, animationOptions.s, reduceFactor);
setColorAnimation(resColor.l, animationOptions.l, reduceFactor);
}
return resColor;
}
function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
colorValue.enable = colorAnimation.enable;
if (colorValue.enable) {
colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
if (colorAnimation.sync) {
return;
}
colorValue.status = 0;
colorValue.velocity *= Math.random();
if (colorValue.value) {
colorValue.value *= Math.random();
}
} else {
colorValue.velocity = 0;
}
}
function drawLine(context, begin, end) {
context.beginPath();
context.moveTo(begin.x, begin.y);
context.lineTo(end.x, end.y);
context.closePath();
}
function drawTriangle(context, p1, p2, p3) {
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.lineTo(p3.x, p3.y);
context.closePath();
}
function CanvasUtils_paintBase(context, dimension, baseColor) {
context.save();
context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
context.fillRect(0, 0, dimension.width, dimension.height);
context.restore();
}
function CanvasUtils_clear(context, dimension) {
context.clearRect(0, 0, dimension.width, dimension.height);
}
function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
let drawn = false;
if (getDistance(begin, end) <= maxDistance) {
drawLine(context, begin, end);
drawn = true;
} else if (warp) {
let pi1;
let pi2;
const endNE = {
x: end.x - canvasSize.width,
y: end.y
};
const d1 = getDistances(begin, endNE);
if (d1.distance <= maxDistance) {
const yi = begin.y - d1.dy / d1.dx * begin.x;
pi1 = {
x: 0,
y: yi
};
pi2 = {
x: canvasSize.width,
y: yi
};
} else {
const endSW = {
x: end.x,
y: end.y - canvasSize.height
};
const d2 = getDistances(begin, endSW);
if (d2.distance <= maxDistance) {
const yi = begin.y - d2.dy / d2.dx * begin.x;
const xi = -yi / (d2.dy / d2.dx);
pi1 = {
x: xi,
y: 0
};
pi2 = {
x: xi,
y: canvasSize.height
};
} else {
const endSE = {
x: end.x - canvasSize.width,
y: end.y - canvasSize.height
};
const d3 = getDistances(begin, endSE);
if (d3.distance <= maxDistance) {
const yi = begin.y - d3.dy / d3.dx * begin.x;
const xi = -yi / (d3.dy / d3.dx);
pi1 = {
x: xi,
y: yi
};
pi2 = {
x: pi1.x + canvasSize.width,
y: pi1.y + canvasSize.height
};
}
}
}
if (pi1 && pi2) {
drawLine(context, begin, pi1);
drawLine(context, end, pi2);
drawn = true;
}
}
if (!drawn) {
return;
}
context.lineWidth = width;
if (backgroundMask) {
context.globalCompositeOperation = composite;
}
context.strokeStyle = getStyleFromRgb(colorLine, opacity);
if (shadow.enable) {
const shadowColor = colorToRgb(shadow.color);
if (shadowColor) {
context.shadowBlur = shadow.blur;
context.shadowColor = getStyleFromRgb(shadowColor);
}
}
context.stroke();
}
function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
drawTriangle(context, pos1, pos2, pos3);
if (backgroundMask) {
context.globalCompositeOperation = composite;
}
context.fillStyle = getStyleFromRgb(colorTriangle, opacityTriangle);
context.fill();
}
function CanvasUtils_drawConnectLine(context, width, lineStyle, begin, end) {
context.save();
drawLine(context, begin, end);
context.lineWidth = width;
context.strokeStyle = lineStyle;
context.stroke();
context.restore();
}
function CanvasUtils_gradient(context, p1, p2, opacity) {
const gradStop = Math.floor(p2.getRadius() / p1.getRadius());
const color1 = p1.getFillColor();
const color2 = p2.getFillColor();
if (!color1 || !color2) {
return;
}
const sourcePos = p1.getPosition();
const destPos = p2.getPosition();
const midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius());
const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
grad.addColorStop(0, getStyleFromHsl(color1, opacity));
grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
grad.addColorStop(1, getStyleFromHsl(color2, opacity));
return grad;
}
function CanvasUtils_drawGrabLine(context, width, begin, end, colorLine, opacity) {
context.save();
drawLine(context, begin, end);
context.strokeStyle = getStyleFromRgb(colorLine, opacity);
context.lineWidth = width;
context.stroke();
context.restore();
}
function CanvasUtils_drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
var _a, _b, _c, _d, _e, _f;
const pos = particle.getPosition();
const tiltOptions = particle.options.tilt;
const rollOptions = particle.options.roll;
context.save();
if (tiltOptions.enable || rollOptions.enable) {
const roll = rollOptions.enable && particle.roll;
const tilt = tiltOptions.enable && particle.tilt;
const rollHorizontal = roll && (rollOptions.mode === "horizontal" || rollOptions.mode === "both");
const rollVertical = roll && (rollOptions.mode === "vertical" || rollOptions.mode === "both");
context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
} else {
context.translate(pos.x, pos.y);
}
context.beginPath();
const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
if (angle !== 0) {
context.rotate(angle);
}
if (backgroundMask) {
context.globalCompositeOperation = composite;
}
const shadowColor = particle.shadowColor;
if (shadow.enable && shadowColor) {
context.shadowBlur = shadow.blur;
context.shadowColor = getStyleFromRgb(shadowColor);
context.shadowOffsetX = shadow.offset.x;
context.shadowOffsetY = shadow.offset.y;
}
if (gradient) {
const gradientAngle = gradient.angle.value;
const fillGradient = gradient.type === "radial" ? context.createRadialGradient(0, 0, 0, 0, 0, radius) : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
for (const color of gradient.colors) {
fillGradient.addColorStop(color.stop, getStyleFromHsl({
h: color.value.h.value,
s: color.value.s.value,
l: color.value.l.value
}, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
}
context.fillStyle = fillGradient;
} else {
if (fillColorValue) {
context.fillStyle = fillColorValue;
}
}
const stroke = particle.stroke;
context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
if (strokeColorValue) {
context.strokeStyle = strokeColorValue;
}
drawShape(container, context, particle, radius, opacity, delta);
if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
context.stroke();
}
if (particle.close) {
context.closePath();
}
if (particle.fill) {
context.fill();
}
context.restore();
context.save();
if (tiltOptions.enable && particle.tilt) {
context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
} else {
context.translate(pos.x, pos.y);
}
if (angle !== 0) {
context.rotate(angle);
}
if (backgroundMask) {
context.globalCompositeOperation = composite;
}
drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
context.restore();
}
function drawShape(container, context, particle, radius, opacity, delta) {
if (!particle.shape) {
return;
}
const drawer = container.drawers.get(particle.shape);
if (!drawer) {
return;
}
drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
}
function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
if (!particle.shape) {
return;
}
const drawer = container.drawers.get(particle.shape);
if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
return;
}
drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
}
function CanvasUtils_drawPlugin(context, plugin, delta) {
if (!plugin.draw) {
return;
}
context.save();
plugin.draw(context, delta);
context.restore();
}
function CanvasUtils_drawParticlePlugin(context, plugin, particle, delta) {
if (plugin.drawParticle !== undefined) {
context.save();
plugin.drawParticle(context, particle, delta);
context.restore();
}
}
function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
const pos = particle.getPosition();
if (fillColorValue) {
context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
}
if (width === 0) {
return;
}
context.lineWidth = width;
const rotationRadian = rotation * Math.PI / 180;
context.beginPath();
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
context.stroke();
}
function CanvasUtils_alterHsl(color, type, value) {
return {
h: color.h,
s: color.s,
l: color.l + (type === "darken" ? -1 : 1) * value
};
}
class Range {
constructor(x, y) {
this.position = {
x: x,
y: y
};
}
}
class Circle_Circle extends Range {
constructor(x, y, radius) {
super(x, y);
this.radius = radius;
}
contains(point) {
return NumberUtils_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)