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,557 lines (1,541 loc) • 231 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__, {
Canvas: function() {
return Canvas;
},
Circle: function() {
return Circle;
},
CircleWarp: function() {
return CircleWarp;
},
Constants: function() {
return Constants;
},
Container: function() {
return Container;
},
Engine: function() {
return Engine;
},
EventListeners: function() {
return EventListeners;
},
ExternalInteractorBase: function() {
return ExternalInteractorBase;
},
FrameManager: function() {
return FrameManager;
},
InteractionManager: function() {
return InteractionManager;
},
Loader: function() {
return Loader;
},
Main: function() {
return Engine;
},
Particle: function() {
return Particle;
},
Particles: function() {
return Particles;
},
ParticlesInteractorBase: function() {
return ParticlesInteractorBase;
},
ParticlesMover: function() {
return ParticlesMover;
},
Plugins: function() {
return Plugins;
},
Point: function() {
return Point;
},
QuadTree: function() {
return QuadTree;
},
Range: function() {
return Range;
},
Rectangle: function() {
return Rectangle;
},
Retina: function() {
return Retina;
},
Vector: function() {
return Vector;
},
Vector3d: function() {
return Vector3d;
},
alterHsl: function() {
return alterHsl;
},
animate: function() {
return animate;
},
areBoundsInside: function() {
return areBoundsInside;
},
arrayRandomIndex: function() {
return arrayRandomIndex;
},
calcEasing: function() {
return calcEasing;
},
calculateBounds: function() {
return calculateBounds;
},
cancelAnimation: function() {
return cancelAnimation;
},
circleBounce: function() {
return circleBounce;
},
circleBounceDataFromParticle: function() {
return circleBounceDataFromParticle;
},
clamp: function() {
return clamp;
},
clear: function() {
return clear;
},
collisionVelocity: function() {
return collisionVelocity;
},
colorMix: function() {
return colorMix;
},
colorToHsl: function() {
return colorToHsl;
},
colorToRgb: function() {
return colorToRgb;
},
deepExtend: function() {
return deepExtend;
},
divMode: function() {
return divMode;
},
divModeExecute: function() {
return divModeExecute;
},
drawConnectLine: function() {
return drawConnectLine;
},
drawEllipse: function() {
return drawEllipse;
},
drawGrabLine: function() {
return drawGrabLine;
},
drawLinkLine: function() {
return drawLinkLine;
},
drawLinkTriangle: function() {
return drawLinkTriangle;
},
drawParticle: function() {
return drawParticle;
},
drawParticlePlugin: function() {
return drawParticlePlugin;
},
drawPlugin: function() {
return drawPlugin;
},
drawShape: function() {
return drawShape;
},
drawShapeAfterEffect: function() {
return drawShapeAfterEffect;
},
getDistance: function() {
return getDistance;
},
getDistances: function() {
return getDistances;
},
getHslAnimationFromHsl: function() {
return getHslAnimationFromHsl;
},
getHslFromAnimation: function() {
return getHslFromAnimation;
},
getLinkColor: function() {
return getLinkColor;
},
getLinkRandomColor: function() {
return getLinkRandomColor;
},
getParticleBaseVelocity: function() {
return getParticleBaseVelocity;
},
getParticleDirectionAngle: function() {
return getParticleDirectionAngle;
},
getRandomRgbColor: function() {
return getRandomRgbColor;
},
getRangeMax: function() {
return getRangeMax;
},
getRangeMin: function() {
return getRangeMin;
},
getRangeValue: function() {
return getRangeValue;
},
getStyleFromHsl: function() {
return getStyleFromHsl;
},
getStyleFromHsv: function() {
return getStyleFromHsv;
},
getStyleFromRgb: function() {
return getStyleFromRgb;
},
getValue: function() {
return getValue;
},
gradient: function() {
return gradient;
},
hslToHsv: function() {
return hslToHsv;
},
hslToRgb: function() {
return hslToRgb;
},
hslaToHsva: function() {
return hslaToHsva;
},
hslaToRgba: function() {
return hslaToRgba;
},
hsvToHsl: function() {
return hsvToHsl;
},
hsvToRgb: function() {
return hsvToRgb;
},
hsvaToHsla: function() {
return hsvaToHsla;
},
hsvaToRgba: function() {
return hsvaToRgba;
},
isDivModeEnabled: function() {
return isDivModeEnabled;
},
isInArray: function() {
return isInArray;
},
isPointInside: function() {
return isPointInside;
},
isSsr: function() {
return isSsr;
},
itemFromArray: function() {
return itemFromArray;
},
loadFont: function() {
return loadFont;
},
mix: function() {
return mix;
},
pJSDom: function() {
return pJSDom;
},
paintBase: function() {
return paintBase;
},
particlesJS: function() {
return particlesJS;
},
randomInRange: function() {
return randomInRange;
},
rectBounce: function() {
return rectBounce;
},
rgbToHsl: function() {
return rgbToHsl;
},
rgbToHsv: function() {
return rgbToHsv;
},
rgbaToHsva: function() {
return rgbaToHsva;
},
setRangeValue: function() {
return setRangeValue;
},
singleDivModeExecute: function() {
return singleDivModeExecute;
},
stringToAlpha: function() {
return stringToAlpha;
},
stringToRgb: function() {
return stringToRgb;
},
tsParticles: function() {
return tsParticles;
}
});
function 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 randomInRange(r) {
const max = getRangeMax(r);
let min = getRangeMin(r);
if (max === min) {
min = 0;
}
return Math.random() * (max - min) + min;
}
function getRangeValue(value) {
return typeof value === "number" ? value : randomInRange(value);
}
function getRangeMin(value) {
return typeof value === "number" ? value : value.min;
}
function getRangeMax(value) {
return typeof value === "number" ? value : value.max;
}
function setRangeValue(source, value) {
if (source === value || value === undefined && typeof source === "number") {
return source;
}
const min = getRangeMin(source), max = getRangeMax(source);
return value !== undefined ? {
min: Math.min(min, value),
max: Math.max(max, value)
} : setRangeValue(min, max);
}
function getValue(options) {
const random = options.random;
const {enable: enable, minimumValue: minimumValue} = typeof random === "boolean" ? {
enable: random,
minimumValue: 0
} : random;
return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
}
function 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 getDistance(pointA, pointB) {
return getDistances(pointA, pointB).distance;
}
function 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 getParticleBaseVelocity(direction) {
const baseVelocity = Vector.origin;
baseVelocity.length = 1;
baseVelocity.angle = direction;
return baseVelocity;
}
function 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 isSsr() {
return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
}
function animate() {
return isSsr() ? callback => setTimeout(callback) : callback => (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout)(callback);
}
function cancelAnimation() {
return isSsr() ? handle => clearTimeout(handle) : handle => (window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.clearTimeout)(handle);
}
function 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 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 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 => deepExtend(destDict[key], v))) : deepExtend(destDict[key], value);
}
}
return destination;
}
function isDivModeEnabled(mode, divs) {
return divs instanceof Array ? !!divs.find((t => t.enable && isInArray(mode, t.mode))) : 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 && isInArray(mode, divMode)) {
singleDivModeExecute(div, callback);
}
}
} else {
const divMode = divs.mode;
const divEnabled = divs.enable;
if (divEnabled && 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 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.randomColorValue) {
res = getRandomRgbColor();
} else {
res = stringToRgb(color.value);
}
} else {
if (color.value instanceof Array) {
const colorSelected = itemFromArray(color.value, index, useIndex);
res = 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 colorToHsl(color, index, useIndex = true) {
const rgb = 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(randomInRange(setRangeValue(fixedMin, 256))),
g: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
r: Math.floor(randomInRange(setRangeValue(fixedMin, 256)))
};
}
function getStyleFromRgb(color, opacity) {
return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}
function getStyleFromHsl(color, opacity) {
return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}
function getStyleFromHsv(color, opacity) {
return getStyleFromHsl(hsvToHsl(color), opacity);
}
function 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 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 colorToRgb({
value: color
});
} else if (blink) {
return Constants.randomColorValue;
} else {
return Constants.midColorValue;
}
} else {
return colorToRgb({
value: color
});
}
}
function 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 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 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 drawConnectLine(context, width, lineStyle, begin, end) {
context.save();
drawLine(context, begin, end);
context.lineWidth = width;
context.strokeStyle = lineStyle;
context.stroke();
context.restore();
}
function 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 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 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 drawPlugin(context, plugin, delta) {
if (!plugin.draw) {
return;
}
context.save();
plugin.draw(context, delta);
context.restore();
}
function 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 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 extends 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 Rectangle extends Range {
constructor(x, y, width, height) {
super(x, y);
this.size = {
height: height,
width: width
};
}
contains(point) {
const w = this.size.width;
const h = this.size.height;
const pos = this.position;
return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
}
intersects(range) {
const rect = range;
const circle = range;
const w = this.size.width;
const h = this.size.height;
const pos1 = this.position;
const pos2 = range.position;
if (circle.radius !== undefined) {
return circle.intersects(this);
} else if (rect.size !== undefined) {
const size2 = rect.size;
const w2 = size2.width;
const h2 = size2.height;
return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
}
return false;
}
}
class CircleWarp extends 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.generatedAttribute = "generated";
Constants.randomColorValue = "random";
Constants.midColorValue = "mid";
Constants.touchEndEvent = "touchend";
Constants.mouseDownEvent = "mousedown";
Constants.mouseUpEvent = "mouseup";
Constants.mouseMoveEvent = "mousemove";
Constants.touchStartEvent = "touchstart";
Constants.touchMoveEvent = "touchmove";
Constants.mouseLeaveEvent = "mouseleave";
Constants.mouseOutEvent = "mouseout";
Constants.touchCancelEvent = "touchcancel";
Constants.resizeEvent = "resize";
Constants.visibilityChangeEvent = "visibilitychange";
Constants.noPolygonDataLoaded = "No polygon data loaded.";
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 {
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.oldThemeCh