UNPKG

tsparticles-confetti

Version:

Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

1,518 lines (1,505 loc) 272 kB
/*! * Author : Matteo Bruni * MIT license: https://opensource.org/licenses/MIT * Demo / Generator : https://particles.js.org/ * GitHub : https://www.github.com/matteobruni/tsparticles * How to use? : Check the GitHub README * v2.9.3 */ (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]; } })(this, () => { return /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ // The require scope /******/ var __webpack_require__ = {}; /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (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] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /************************************************************************/ var __webpack_exports__ = {}; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // EXPORTS __webpack_require__.d(__webpack_exports__, { "AnimatableColor": () => (/* reexport */ AnimatableColor), "AnimationOptions": () => (/* reexport */ AnimationOptions), "Background": () => (/* reexport */ Background), "BackgroundMask": () => (/* reexport */ BackgroundMask), "BackgroundMaskCover": () => (/* reexport */ BackgroundMaskCover), "Circle": () => (/* reexport */ Circle), "ClickEvent": () => (/* reexport */ ClickEvent), "Collisions": () => (/* reexport */ Collisions), "CollisionsAbsorb": () => (/* reexport */ CollisionsAbsorb), "CollisionsOverlap": () => (/* reexport */ CollisionsOverlap), "ColorAnimation": () => (/* reexport */ ColorAnimation), "DivEvent": () => (/* reexport */ DivEvent), "Events": () => (/* reexport */ Events), "ExternalInteractorBase": () => (/* reexport */ ExternalInteractorBase), "FullScreen": () => (/* reexport */ FullScreen), "HoverEvent": () => (/* reexport */ HoverEvent), "HslAnimation": () => (/* reexport */ HslAnimation), "HslColorManager": () => (/* reexport */ HslColorManager), "Interactivity": () => (/* reexport */ Interactivity), "ManualParticle": () => (/* reexport */ ManualParticle), "Modes": () => (/* reexport */ Modes), "Move": () => (/* reexport */ Move), "MoveAngle": () => (/* reexport */ MoveAngle), "MoveAttract": () => (/* reexport */ MoveAttract), "MoveCenter": () => (/* reexport */ MoveCenter), "MoveGravity": () => (/* reexport */ MoveGravity), "MovePath": () => (/* reexport */ MovePath), "MoveTrail": () => (/* reexport */ MoveTrail), "Opacity": () => (/* reexport */ Opacity), "OpacityAnimation": () => (/* reexport */ OpacityAnimation), "Options": () => (/* reexport */ Options), "OptionsColor": () => (/* reexport */ OptionsColor), "OutModes": () => (/* reexport */ OutModes), "Parallax": () => (/* reexport */ Parallax), "ParticlesBounce": () => (/* reexport */ ParticlesBounce), "ParticlesBounceFactor": () => (/* reexport */ ParticlesBounceFactor), "ParticlesDensity": () => (/* reexport */ ParticlesDensity), "ParticlesInteractorBase": () => (/* reexport */ ParticlesInteractorBase), "ParticlesNumber": () => (/* reexport */ ParticlesNumber), "ParticlesOptions": () => (/* reexport */ ParticlesOptions), "Point": () => (/* reexport */ Point), "Range": () => (/* reexport */ Range), "Rectangle": () => (/* reexport */ Rectangle), "ResizeEvent": () => (/* reexport */ ResizeEvent), "Responsive": () => (/* reexport */ Responsive), "RgbColorManager": () => (/* reexport */ RgbColorManager), "Shadow": () => (/* reexport */ Shadow), "Shape": () => (/* reexport */ Shape), "Size": () => (/* reexport */ Size), "SizeAnimation": () => (/* reexport */ SizeAnimation), "Spin": () => (/* reexport */ Spin), "Stroke": () => (/* reexport */ Stroke), "Theme": () => (/* reexport */ Theme), "ThemeDefault": () => (/* reexport */ ThemeDefault), "ValueWithRandom": () => (/* reexport */ ValueWithRandom), "Vector": () => (/* reexport */ Vector), "Vector3d": () => (/* reexport */ Vector3d), "ZIndex": () => (/* reexport */ ZIndex), "addColorManager": () => (/* reexport */ addColorManager), "addEasing": () => (/* reexport */ addEasing), "alterHsl": () => (/* reexport */ alterHsl), "animate": () => (/* reexport */ animate), "areBoundsInside": () => (/* reexport */ areBoundsInside), "arrayRandomIndex": () => (/* reexport */ arrayRandomIndex), "calcExactPositionOrRandomFromSize": () => (/* reexport */ calcExactPositionOrRandomFromSize), "calcExactPositionOrRandomFromSizeRanged": () => (/* reexport */ calcExactPositionOrRandomFromSizeRanged), "calcPositionFromSize": () => (/* reexport */ calcPositionFromSize), "calcPositionOrRandomFromSize": () => (/* reexport */ calcPositionOrRandomFromSize), "calcPositionOrRandomFromSizeRanged": () => (/* reexport */ calcPositionOrRandomFromSizeRanged), "calculateBounds": () => (/* reexport */ calculateBounds), "cancelAnimation": () => (/* reexport */ cancelAnimation), "circleBounce": () => (/* reexport */ circleBounce), "circleBounceDataFromParticle": () => (/* reexport */ circleBounceDataFromParticle), "clamp": () => (/* reexport */ clamp), "clear": () => (/* reexport */ clear), "collisionVelocity": () => (/* reexport */ collisionVelocity), "colorMix": () => (/* reexport */ colorMix), "colorToHsl": () => (/* reexport */ colorToHsl), "colorToRgb": () => (/* reexport */ colorToRgb), "confetti": () => (/* reexport */ confetti), "deepExtend": () => (/* reexport */ deepExtend), "divMode": () => (/* reexport */ divMode), "divModeExecute": () => (/* reexport */ divModeExecute), "drawLine": () => (/* reexport */ drawLine), "drawParticle": () => (/* reexport */ drawParticle), "drawParticlePlugin": () => (/* reexport */ drawParticlePlugin), "drawPlugin": () => (/* reexport */ drawPlugin), "drawShape": () => (/* reexport */ drawShape), "drawShapeAfterEffect": () => (/* reexport */ drawShapeAfterEffect), "drawTriangle": () => (/* reexport */ drawTriangle), "executeOnSingleOrMultiple": () => (/* reexport */ executeOnSingleOrMultiple), "findItemFromSingleOrMultiple": () => (/* reexport */ findItemFromSingleOrMultiple), "generatedAttribute": () => (/* reexport */ generatedAttribute), "getDistance": () => (/* reexport */ getDistance), "getDistances": () => (/* reexport */ getDistances), "getEasing": () => (/* reexport */ getEasing), "getHslAnimationFromHsl": () => (/* reexport */ getHslAnimationFromHsl), "getHslFromAnimation": () => (/* reexport */ getHslFromAnimation), "getLinkColor": () => (/* reexport */ getLinkColor), "getLinkRandomColor": () => (/* reexport */ getLinkRandomColor), "getParticleBaseVelocity": () => (/* reexport */ getParticleBaseVelocity), "getParticleDirectionAngle": () => (/* reexport */ getParticleDirectionAngle), "getRandom": () => (/* reexport */ getRandom), "getRandomRgbColor": () => (/* reexport */ getRandomRgbColor), "getRangeMax": () => (/* reexport */ getRangeMax), "getRangeMin": () => (/* reexport */ getRangeMin), "getRangeValue": () => (/* reexport */ getRangeValue), "getStyleFromHsl": () => (/* reexport */ getStyleFromHsl), "getStyleFromRgb": () => (/* reexport */ getStyleFromRgb), "getValue": () => (/* reexport */ getValue), "hasMatchMedia": () => (/* reexport */ hasMatchMedia), "hslToRgb": () => (/* reexport */ hslToRgb), "hslaToRgba": () => (/* reexport */ hslaToRgba), "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled), "isInArray": () => (/* reexport */ isInArray), "isPointInside": () => (/* reexport */ isPointInside), "isSsr": () => (/* reexport */ isSsr), "itemFromArray": () => (/* reexport */ itemFromArray), "itemFromSingleOrMultiple": () => (/* reexport */ itemFromSingleOrMultiple), "loadFont": () => (/* reexport */ loadFont), "loadOptions": () => (/* reexport */ loadOptions), "loadParticlesOptions": () => (/* reexport */ loadParticlesOptions), "mix": () => (/* reexport */ mix), "mouseDownEvent": () => (/* reexport */ mouseDownEvent), "mouseLeaveEvent": () => (/* reexport */ mouseLeaveEvent), "mouseMoveEvent": () => (/* reexport */ mouseMoveEvent), "mouseOutEvent": () => (/* reexport */ mouseOutEvent), "mouseUpEvent": () => (/* reexport */ mouseUpEvent), "paintBase": () => (/* reexport */ paintBase), "paintImage": () => (/* reexport */ paintImage), "parseAlpha": () => (/* reexport */ parseAlpha), "randomInRange": () => (/* reexport */ randomInRange), "rangeColorToHsl": () => (/* reexport */ rangeColorToHsl), "rangeColorToRgb": () => (/* reexport */ rangeColorToRgb), "rectBounce": () => (/* reexport */ rectBounce), "resizeEvent": () => (/* reexport */ resizeEvent), "rgbToHsl": () => (/* reexport */ rgbToHsl), "safeMatchMedia": () => (/* reexport */ safeMatchMedia), "setRandom": () => (/* reexport */ setRandom), "setRangeValue": () => (/* reexport */ setRangeValue), "singleDivModeExecute": () => (/* reexport */ singleDivModeExecute), "stringToAlpha": () => (/* reexport */ stringToAlpha), "stringToRgb": () => (/* reexport */ stringToRgb), "touchCancelEvent": () => (/* reexport */ touchCancelEvent), "touchEndEvent": () => (/* reexport */ touchEndEvent), "touchMoveEvent": () => (/* reexport */ touchMoveEvent), "touchStartEvent": () => (/* reexport */ touchStartEvent), "tsParticles": () => (/* reexport */ tsParticles), "visibilityChangeEvent": () => (/* reexport */ visibilityChangeEvent) }); ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/EventDispatcher.js class EventDispatcher { constructor() { this._listeners = new Map(); } addEventListener(type, listener) { var _a; this.removeEventListener(type, listener); if (!this._listeners.get(type)) { this._listeners.set(type, []); } (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener); } dispatchEvent(type, args) { var _a; (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args)); } hasEventListener(type) { return !!this._listeners.get(type); } removeAllEventListeners(type) { if (!type) { this._listeners = new Map(); } else { this._listeners.delete(type); } } removeEventListener(type, listener) { const arr = this._listeners.get(type); if (!arr) { return; } const length = arr.length, idx = arr.indexOf(listener); if (idx < 0) { return; } if (length === 1) { this._listeners.delete(type); } else { arr.splice(idx, 1); } } } ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Vector3d.js class Vector3d { constructor(xOrCoords, y, z) { if (typeof xOrCoords !== "number" && xOrCoords) { this.x = xOrCoords.x; this.y = xOrCoords.y; const coords3d = xOrCoords; this.z = coords3d.z ? coords3d.z : 0; } else if (xOrCoords !== undefined && y !== undefined) { this.x = xOrCoords; this.y = y; this.z = z !== null && z !== void 0 ? z : 0; } else { throw new Error("tsParticles - Vector3d not initialized correctly"); } } static get origin() { return Vector3d.create(0, 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.getLengthSq()); } set length(length) { this.updateFromAngle(this.angle, length); } static clone(source) { return Vector3d.create(source.x, source.y, source.z); } static create(x, y, z) { return new Vector3d(x, y, z); } add(v) { return Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z); } addTo(v) { this.x += v.x; this.y += v.y; this.z += v.z; } copy() { return Vector3d.clone(this); } distanceTo(v) { return this.sub(v).length; } distanceToSq(v) { return this.sub(v).getLengthSq(); } div(n) { return Vector3d.create(this.x / n, this.y / n, this.z / n); } divTo(n) { this.x /= n; this.y /= n; this.z /= n; } getLengthSq() { return this.x ** 2 + this.y ** 2; } mult(n) { return Vector3d.create(this.x * n, this.y * n, this.z * n); } multTo(n) { this.x *= n; this.y *= n; this.z *= n; } rotate(angle) { return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0); } setTo(c) { this.x = c.x; this.y = c.y; const v3d = c; this.z = v3d.z ? v3d.z : 0; } sub(v) { return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z); } subFrom(v) { this.x -= v.x; this.y -= v.y; this.z -= v.z; } updateFromAngle(angle, length) { this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; } } ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Vector.js class Vector extends Vector3d { constructor(xOrCoords, y) { super(xOrCoords, y, 0); } static get origin() { return Vector.create(0, 0); } static clone(source) { return Vector.create(source.x, source.y); } static create(x, y) { return new Vector(x, y); } } ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/NumberUtils.js let _random = Math.random; const easings = new Map(); function addEasing(name, easing) { if (!easings.get(name)) { easings.set(name, easing); } } function getEasing(name) { return easings.get(name) || (value => value); } function setRandom(rnd = Math.random) { _random = rnd; } function getRandom() { return clamp(_random(), 0, 1 - 1e-16); } 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 getRandom() * (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, { enable, 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, dy = pointA.y - pointB.y; return { dx: dx, dy: dy, distance: Math.sqrt(dx ** 2 + dy ** 2) }; } function getDistance(pointA, pointB) { return getDistances(pointA, pointB).distance; } function getParticleDirectionAngle(direction, position, center) { 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 "inside": return Math.atan2(center.y - position.y, center.x - position.x); case "outside": return Math.atan2(position.y - center.y, position.x - center.x); default: return getRandom() * 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 calcPositionFromSize(data) { return data.position && data.position.x !== undefined && data.position.y !== undefined ? { x: data.position.x * data.size.width / 100, y: data.position.y * data.size.height / 100 } : undefined; } function calcPositionOrRandomFromSize(data) { var _a, _b, _c, _d; return { x: ((_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * 100) * data.size.width / 100, y: ((_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * 100) * data.size.height / 100 }; } function calcPositionOrRandomFromSizeRanged(data) { var _a, _b; const position = { x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined, y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined }; return calcPositionOrRandomFromSize({ size: data.size, position }); } function calcExactPositionOrRandomFromSize(data) { var _a, _b, _c, _d; return { x: (_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * data.size.width, y: (_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * data.size.height }; } function calcExactPositionOrRandomFromSizeRanged(data) { var _a, _b; const position = { x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined, y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined }; return calcExactPositionOrRandomFromSize({ size: data.size, position }); } function parseAlpha(input) { return input ? input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input) : 1; } ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/Utils.js 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) { return res; } 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) { const res = executeOnSingleOrMultiple(selectors, selector => { return element.matches(selector); }); return res instanceof Array ? res.some(t => t) : res; } function isSsr() { return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document; } function hasMatchMedia() { return !isSsr() && typeof matchMedia !== "undefined"; } function safeMatchMedia(query) { if (!hasMatchMedia()) { return; } return matchMedia(query); } function animate() { return isSsr() ? callback => setTimeout(callback) : callback => (requestAnimationFrame || setTimeout)(callback); } function cancelAnimation() { return isSsr() ? handle => clearTimeout(handle) : handle => (cancelAnimationFrame || clearTimeout)(handle); } function isInArray(value, array) { return value === array || array instanceof Array && array.indexOf(value) > -1; } async function loadFont(font, weight) { try { await document.fonts.load(`${weight !== null && weight !== void 0 ? weight : "400"} 36px '${font !== null && font !== void 0 ? font : "Verdana"}'`); } catch (_a) {} } function arrayRandomIndex(array) { return Math.floor(getRandom() * array.length); } function itemFromArray(array, index, useIndex = true) { return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)]; } function isPointInside(point, size, offset, radius, direction) { return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction); } function areBoundsInside(bounds, size, offset, direction) { let inside = true; if (!direction || direction === "bottom") { inside = bounds.top < size.height + offset.x; } if (inside && (!direction || direction === "left")) { inside = bounds.right > offset.x; } if (inside && (!direction || direction === "right")) { inside = bounds.left < size.width + offset.y; } if (inside && (!direction || direction === "top")) { inside = bounds.bottom > offset.y; } 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, value = sourceDict[key], isObject = typeof value === "object", 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 !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode)); } function divModeExecute(mode, divs, callback) { executeOnSingleOrMultiple(divs, div => { const divMode = div.mode, divEnabled = div.enable; if (divEnabled && isInArray(mode, divMode)) { singleDivModeExecute(div, callback); } }); } function singleDivModeExecute(div, callback) { const selectors = div.selectors; executeOnSingleOrMultiple(selectors, selector => { callback(selector, div); }); } function divMode(divs, element) { if (!element || !divs) { return; } return findItemFromSingleOrMultiple(divs, div => { return checkSelector(element, div.selectors); }); } 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), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = getDistances(pos2, pos1); if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) { return; } const angle = -Math.atan2(yDist, xDist), m1 = p1.mass, m2 = p2.mass, u1 = p1.velocity.rotate(angle), u2 = p2.velocity.rotate(angle), v1 = collisionVelocity(u1, u2, m1, m2), v2 = collisionVelocity(u2, u1, m1, m2), vFinal1 = v1.rotate(-angle), 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(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), 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 executeOnSingleOrMultiple(obj, callback) { return obj instanceof Array ? obj.map((item, index) => callback(item, index)) : callback(obj, 0); } function itemFromSingleOrMultiple(obj, index, useIndex) { return obj instanceof Array ? itemFromArray(obj, index, useIndex) : obj; } function findItemFromSingleOrMultiple(obj, callback) { return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined; } ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/ColorUtils.js const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map(); function addColorManager(manager) { colorManagers.set(manager.key, manager); } function hue2rgb(p, q, t) { if (t < 0) { t += 1; } if (t > 1) { t -= 1; } if (t < 1 / 6) { return p + (q - p) * 6 * t; } if (t < 1 / 2) { return q; } if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; } return p; } function stringToRgba(input) { for (const [, manager] of colorManagers) { if (input.startsWith(manager.stringPrefix)) { return manager.parseString(input); } } const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexFixed = input.replace(shorthandRegex, (_, r, g, b, a) => { return r + r + g + g + b + b + (a !== undefined ? a + a : ""); }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed); return result ? { a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1, b: parseInt(result[3], 16), g: parseInt(result[2], 16), r: parseInt(result[1], 16) } : undefined; } function rangeColorToRgb(input, index, useIndex = true) { if (!input) { return; } const color = typeof input === "string" ? { value: input } : input; if (typeof color.value === "string") { return colorToRgb(color.value, index, useIndex); } if (color.value instanceof Array) { return rangeColorToRgb({ value: itemFromArray(color.value, index, useIndex) }); } for (const [, manager] of colorManagers) { const res = manager.handleRangeColor(color); if (res) { return res; } } } function colorToRgb(input, index, useIndex = true) { if (!input) { return; } const color = typeof input === "string" ? { value: input } : input; if (typeof color.value === "string") { return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(color.value); } if (color.value instanceof Array) { return colorToRgb({ value: itemFromArray(color.value, index, useIndex) }); } for (const [, manager] of colorManagers) { const res = manager.handleColor(color); if (res) { return res; } } } function colorToHsl(color, index, useIndex = true) { const rgb = colorToRgb(color, index, useIndex); return rgb ? rgbToHsl(rgb) : undefined; } function rangeColorToHsl(color, index, useIndex = true) { const rgb = rangeColorToRgb(color, index, useIndex); return rgb ? rgbToHsl(rgb) : undefined; } function rgbToHsl(color) { const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = { h: 0, l: (max + min) / 2, s: 0 }; if (max !== min) { res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min); res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min); } res.l *= 100; res.s *= 100; res.h *= 60; if (res.h < 0) { res.h += 360; } if (res.h >= 360) { 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 }, hslPercent = { h: hsl.h / 360, l: hsl.l / 100, s: hsl.s / 100 }; if (!hslPercent.s) { result.b = hslPercent.l; result.g = hslPercent.l; result.r = hslPercent.l; } else { const q = hslPercent.l < 0.5 ? hslPercent.l * (1 + hslPercent.s) : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, 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 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 colorMix(color1, color2, size1, size2) { let rgb1 = color1, 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 === randomColorValue) { return getRandomRgbColor(); } else if (linkColor === midColorValue) { const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), 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 === randomColorValue) { if (consent) { return rangeColorToRgb({ value: color }); } if (blink) { return randomColorValue; } return midColorValue; } else if (color === midColorValue) { return midColorValue; } else { return rangeColorToRgb({ 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; colorValue.decay = 1 - getRangeValue(colorAnimation.decay); colorValue.status = "increasing"; colorValue.loops = 0; colorValue.maxLoops = getRangeValue(colorAnimation.count); if (!colorAnimation.sync) { colorValue.velocity *= getRandom(); colorValue.value *= getRandom(); } colorValue.initialValue = colorValue.value; } else { colorValue.velocity = 0; } } ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/CanvasUtils.js 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.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)"; context.fillRect(0, 0, dimension.width, dimension.height); } function paintImage(context, dimension, image, opacity) { if (!image) { return; } context.globalAlpha = opacity; context.drawImage(image, 0, 0, dimension.width, dimension.height); context.globalAlpha = 1; } function clear(context, dimension) { context.clearRect(0, 0, dimension.width, dimension.height); } function drawParticle(data) { var _a, _b, _c, _d, _e; const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform } = data; const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = { sin: Math.sin(angle), cos: Math.cos(angle) }, transformData = { a: rotateData.cos * ((_a = transform.a) !== null && _a !== void 0 ? _a : 1), b: rotateData.sin * ((_b = transform.b) !== null && _b !== void 0 ? _b : 1), c: -rotateData.sin * ((_c = transform.c) !== null && _c !== void 0 ? _c : 1), d: rotateData.cos * ((_d = transform.d) !== null && _d !== void 0 ? _d : 1) }; context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y); context.beginPath(); 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 (colorStyles.fill) { context.fillStyle = colorStyles.fill; } const strokeWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0; context.lineWidth = strokeWidth; if (colorStyles.stroke) { context.strokeStyle = colorStyles.stroke; } drawShape(container, context, particle, radius, opacity, delta); if (strokeWidth > 0) { context.stroke(); } if (particle.close) { context.closePath(); } if (particle.fill) { context.fill(); } drawShapeAfterEffect(container, context, particle, radius, opacity, delta); context.globalCompositeOperation = "source-over"; context.setTransform(1, 0, 0, 1, 0, 0); } 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; } plugin.draw(context, delta); } function drawParticlePlugin(context, plugin, particle, delta) { if (!plugin.drawParticle) { return; } plugin.drawParticle(context, particle, delta); } function alterHsl(color, type, value) { return { h: color.h, s: color.s, l: color.l + (type === "darken" ? -1 : 1) * value }; } ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Constants.js const generatedAttribute = "generated"; const touchEndEvent = "touchend"; const mouseDownEvent = "pointerdown"; const mouseUpEvent = "pointerup"; const mouseMoveEvent = "pointermove"; const touchStartEvent = "touchstart"; const touchMoveEvent = "touchmove"; const mouseLeaveEvent = "pointerleave"; const mouseOutEvent = "pointerout"; const touchCancelEvent = "touchcancel"; const resizeEvent = "resize"; const visibilityChangeEvent = "visibilitychange"; ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Canvas.js function setTransformValue(factor, newFactor, key) { var _a; const newValue = newFactor[key]; if (newValue !== undefined) { factor[key] = ((_a = factor[key]) !== null && _a !== void 0 ? _a : 1) * newValue; } } class Canvas { constructor(container) { this.container = container; this.size = { height: 0, width: 0 }; this._context = null; this._generated = false; this._preDrawUpdaters = []; this._postDrawUpdaters = []; this._resizePlugins = []; this._colorPlugins = []; this._mutationObserver = !isSsr() && typeof MutationObserver !== "undefined" ? new MutationObserver(records => { for (const record of records) { if (record.type === "attributes" && record.attributeName === "style") { this._repairStyle(); } } }) : undefined; } get _fullScreen() { return this.container.actualOptions.fullScreen.enable; } clear() { const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill; if (options.backgroundMask.enable) { this.paint(); } else if (trail.enable && trail.length > 0 && trailFill) { if (trailFill.color) { this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity)); } else if (trailFill.image) { this._paintImage(trailFill.image, trailFill.opacity); } } else { this.draw(ctx => { clear(ctx, this.size); }); } } destroy() { var _a, _b; (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect(); if (this._generated) { (_b = this.element) === null || _b === void 0 ? void 0 : _b.remove(); } else { this._resetOriginalStyle(); } this.stop(); this._preDrawUpdaters = []; this._postDrawUpdaters = []; this._resizePlugins = []; this._colorPlugins = []; } draw(cb) { if (!this._context) { return; } return cb(this._context); } drawParticle(particle, delta) { var _a; if (particle.spawning || particle.destroyed) { return; } const radius = particle.getRadius(); if (radius <= 0) { return; } const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor; let [fColor, sColor] = this._getPluginParticleColors(particle); if (!fColor) { fColor = pfColor; } if (!sColor) { sColor = psColor; } if (!fColor && !sColor) { return; } this.draw(ctx => { var _a, _b, _c, _d; const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = (_c = (_a = particle.bubble.opacity) !== null && _a !== void 0 ? _a : (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1, strokeOpacity = (_d = particle.strokeOpacity) !== null && _d !== void 0 ? _d : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = { fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined }; colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill; this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform); drawParticle({ container: this.container, context: ctx, particle, delta, colorStyles, backgroundMask: options.backgroundMask.enable, composite: options.backgroundMask.composite, radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, opacity: zOpacity, shadow: particle.options.shadow, transform }); this._applyPostDrawUpdaters(particle); }); } drawParticlePlugin(plugin, particle, delta) { this.draw(ctx => { drawParticlePlugin(ctx, plugin, particle, delta); }); } drawPlugin(plugin, delta) { this.draw(ctx => { drawPlugin(ctx, plugin, delta); }); } async init() { var _a; this.resize(); this._initStyle(); this._initCover(); try { await this._initTrail(); } catch (e) { console.error(e); } this.initBackground(); if (this.element) { (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, { attributes: true }); } this.initUpdaters(); this.initPlugins(); this.paint(); } initBackground() { const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style; if (!elementStyle) { return; } if (background.color) { const color = rangeColorToRgb(background.color); elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : ""; } else { elementStyle.backgroundColor = ""; } elementStyle.backgroundImage = background.image || ""; elementStyle.backgroundPosition = background.position || ""; elementStyle.backgroundRepeat = background.repeat || ""; elementStyle.backgroundSize = background.size || ""; } initPlugins() { this._resizePlugins = []; for (const [, plugin] of this.container.plugins) { if (plugin.resize) { this._resizePlugins.push(plugin); } if (plugin.particleFillColor || plugin.particleStrokeColor) { this._colorPlugins.push(plugin); } } } initUpdaters() { this._preDrawUpdaters = []; this._postDrawUpdaters = []; for (const updater of this.container.particles.updaters) { if (updater.afterDraw) { this._postDrawUpdaters.push(updater); } if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) { this._preDrawUpdaters.push(updater); } } } loadCanvas(canvas) { var _a, _b; if (this._generated) { (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove(); } this._generated = canvas.dataset && generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated; this.element = canvas; this.element.ariaHidden = "true"; this._originalStyle = deepExtend({}, this.element.style); this.size.height = canvas.offsetHeight; this.size.width = canvas.offsetWidth; this._context = this.element.getContext("2d"); (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this.element, { attributes: true }); this.container.retina.init(); this.initBackground(); } paint() { const options = this.container.actualOptions; this.draw(ctx => { if (options.backgroundMask.enable && options.backgroundMask.cover) { clear(ctx, this.size); this._paintBase(this._coverColorStyle); } else { this._paintBase(); } }); } resize() { if (!this.element) { return; } const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = { width: this.element.offsetWidth * pxRatio, height: this.element.offsetHeight * pxRatio }; if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) { return; } const oldSize = Object.assign({}, size); this.element.width = size.width = this.element.offsetWidth * pxRatio; this.element.height = size.height = this.element.offsetHeight * pxRatio; if (this.container.started) { this.resizeFactor = { width: size.width / oldSize.width, height: size.height / oldSize.height }; } } stop() { this.draw(ctx => { clear(ctx, this.size); }); } async windowResize() { if (!this.element) { return; } this.resize(); const container = this.container, needsRefresh = container.updateActualOptions(); container.particles.setDensity(); this._applyResizePlugins(); if (needsRefresh) { await container.refresh(); } } _applyPostDrawUpdaters(particle) { var _a; for (const updater of this._postDrawUpdaters) { (_a = updater.afterDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle); } } _applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform) { var _a; for (const updater of this._preDrawUpdaters) { if (updater.getColorStyles) { const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity); if (fill) { colorStyles.fill = fill; } if (stroke) { colorStyles.stroke = stroke; } } if (updater.getTransformValues) { const updaterTransform = updater.getTransformValues(particle); for (const key in updaterTransform) { setTransformValue(transform, updaterTransform, key); } } (_a = updater.beforeDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle); } } _applyResizePlugins() { for (const plugin of this._resizePlugins) { if (plugin.resize) { plugin.resize(); } } } _getPluginParticleColors(particle) { let fColor, sColor; for (const plugin of this._colorPlugins) { if (!fColor && plugin.particleFillColor) { fColor = rangeColorToHsl(plugin.particleFillColor(particle)); } if (!sColor && plugin.particleStrokeColor) { sColor = rangeColorToHsl(plugin.particleStrokeColor(particle)); } if (fColor && sColor) { break; } } return [fColor, sColor]; } _initCover() { const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = rangeColorToRgb(color); if (coverRgb) { const coverColor = { r: coverRgb.r, g: coverRgb.g, b: coverRgb.b, a: cover.opacity }; this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a); } } _initStyle() { const element = this.element, options = this.container.actualOptions; if (!element) { return; } if (this._full