UNPKG

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.

2 lines 7.25 kB
/*! tsParticles v1.42.2 by Matteo Bruni */ !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var s=t();for(var n in s)("object"==typeof exports?exports:e)[n]=s[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,s){for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[n]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function s(e,t){const s=e.x-t.x,n=e.y-t.y;return{dx:s,dy:n,distance:Math.sqrt(s*s+n*n)}}function n(e,t){switch(t){case"ease-out-quad":return 1-(1-e)**2;case"ease-out-cubic":return 1-(1-e)**3;case"ease-out-quart":return 1-(1-e)**4;case"ease-out-quint":return 1-(1-e)**5;case"ease-out-expo":return 1===e?1:1-Math.pow(2,-10*e);case"ease-out-sine":return Math.sin(e*Math.PI/2);case"ease-out-back":{const t=1.70158;return 1+(t+1)*Math.pow(e-1,3)+t*Math.pow(e-1,2)}case"ease-out-circ":return Math.sqrt(1-Math.pow(e-1,2));default:return e}}function i(e,t){if(t instanceof Array){for(const s of t)if(e.matches(s))return!0;return!1}return e.matches(t)}function o(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}function r(e,t){const s=e.selectors;if(s instanceof Array)for(const n of s)t(n,e);else t(s,e)}e.r(t),e.d(t,{loadExternalRepulseInteraction:function(){return p}});class a{constructor(e,t){this.position={x:e,y:t}}}class c extends a{constructor(e,t,s){super(e,t),this.radius=s}contains(e){return t=e,n=this.position,s(t,n).distance<=this.radius;var t,n}intersects(e){const t=e,s=e,n=this.position,i=e.position,o=Math.abs(i.x-n.x),r=Math.abs(i.y-n.y),a=this.radius;if(void 0!==s.radius){return a+s.radius>Math.sqrt(o*o+r+r)}if(void 0!==t.size){const e=t.size.width,s=t.size.height,n=Math.pow(o-e,2)+Math.pow(r-s,2);return!(o>a+e||r>a+s)&&(o<=e||r<=s||n<=a*a)}return!1}}class u{}u.generatedAttribute="generated",u.randomColorValue="random",u.midColorValue="mid",u.touchEndEvent="touchend",u.mouseDownEvent="mousedown",u.mouseUpEvent="mouseup",u.mouseMoveEvent="mousemove",u.touchStartEvent="touchstart",u.touchMoveEvent="touchmove",u.mouseLeaveEvent="mouseleave",u.mouseOutEvent="mouseout",u.touchCancelEvent="touchcancel",u.resizeEvent="resize",u.visibilityChangeEvent="visibilitychange",u.noPolygonDataLoaded="No polygon data loaded.",u.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;class l extends a{constructor(e,t,s,n){super(e,t),this.size={height:n,width:s}}contains(e){const t=this.size.width,s=this.size.height,n=this.position;return e.x>=n.x&&e.x<=n.x+t&&e.y>=n.y&&e.y<=n.y+s}intersects(e){const t=e,s=e,n=this.size.width,i=this.size.height,o=this.position,r=e.position;if(void 0!==s.radius)return s.intersects(this);if(void 0!==t.size){const e=t.size,s=e.width,a=e.height;return r.x<o.x+n&&r.x+s>o.x&&r.y<o.y+i&&r.y+a>o.y}return!1}}class h{constructor(e,t){let s,n;if(void 0===t){if("number"==typeof e)throw new Error("tsParticles - Vector not initialized correctly");const t=e;[s,n]=[t.x,t.y]}else[s,n]=[e,t];this.x=s,this.y=n}static clone(e){return h.create(e.x,e.y)}static create(e,t){return new h(e,t)}static get origin(){return h.create(0,0)}get angle(){return Math.atan2(this.y,this.x)}set angle(e){this.updateFromAngle(e,this.length)}get length(){return Math.sqrt(this.x**2+this.y**2)}set length(e){this.updateFromAngle(this.angle,e)}add(e){return h.create(this.x+e.x,this.y+e.y)}addTo(e){this.x+=e.x,this.y+=e.y}sub(e){return h.create(this.x-e.x,this.y-e.y)}subFrom(e){this.x-=e.x,this.y-=e.y}mult(e){return h.create(this.x*e,this.y*e)}multTo(e){this.x*=e,this.y*=e}div(e){return h.create(this.x/e,this.y/e)}divTo(e){this.x/=e,this.y/=e}distanceTo(e){return this.sub(e).length}getLengthSq(){return this.x**2+this.y**2}distanceToSq(e){return this.sub(e).getLengthSq()}manhattanDistanceTo(e){return Math.abs(e.x-this.x)+Math.abs(e.y-this.y)}copy(){return h.clone(this)}setTo(e){this.x=e.x,this.y=e.y}rotate(e){return h.create(this.x*Math.cos(e)-this.y*Math.sin(e),this.x*Math.sin(e)+this.y*Math.cos(e))}updateFromAngle(e,t){this.x=Math.cos(e)*t,this.y=Math.sin(e)*t}}new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;new WeakMap;class d extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e)}isEnabled(){const e=this.container,t=e.actualOptions,s=e.interactivity.mouse,n=t.interactivity.events,i=function(e,t){return t instanceof Array?!!t.find((t=>t.enable&&o(e,t.mode))):o(e,t.mode)}("repulse",n.onDiv);if(!(i||n.onHover.enable&&s.position||n.onClick.enable&&s.clickPosition))return!1;const r=n.onHover.mode,a=n.onClick.mode;return o("repulse",r)||o("repulse",a)||i}reset(){}async interact(){const e=this.container,t=e.actualOptions,s=e.interactivity.status===u.mouseMoveEvent,n=t.interactivity.events,i=n.onHover.enable,a=n.onHover.mode,c=n.onClick.enable,l=n.onClick.mode,h=n.onDiv;s&&i&&o("repulse",a)?this.hoverRepulse():c&&o("repulse",l)?this.clickRepulse():function(e,t,s){if(t instanceof Array)for(const n of t){const t=n.mode;n.enable&&o(e,t)&&r(n,s)}else{const n=t.mode;t.enable&&o(e,n)&&r(t,s)}}("repulse",h,((e,t)=>this.singleSelectorRepulse(e,t)))}singleSelectorRepulse(e,t){const s=this.container,n=document.querySelectorAll(e);n.length&&n.forEach((e=>{const n=e,o=s.retina.pixelRatio,r={x:(n.offsetLeft+n.offsetWidth/2)*o,y:(n.offsetTop+n.offsetHeight/2)*o},a=n.offsetWidth/2*o,u="circle"===t.type?new c(r.x,r.y,a):new l(n.offsetLeft*o,n.offsetTop*o,n.offsetWidth*o,n.offsetHeight*o),h=function(e,t){if(t&&e)return e instanceof Array?e.find((e=>i(t,e.selectors))):i(t,e.selectors)?e:void 0}(s.actualOptions.interactivity.modes.repulse.divs,n);this.processRepulse(r,a,u,h)}))}hoverRepulse(){const e=this.container,t=e.interactivity.mouse.position;if(!t)return;const s=e.retina.repulseModeDistance;this.processRepulse(t,s,new c(t.x,t.y,s))}processRepulse(e,t,i,o){var r;const a=this.container,c=a.particles.quadTree.query(i),u=a.actualOptions.interactivity.modes.repulse;for(const i of c){const{dx:a,dy:c,distance:f}=s(i.position,e),y=(null!==(r=null==o?void 0:o.speed)&&void 0!==r?r:u.speed)*u.factor,v=(l=n(1-f/t,u.easing)*y,d=0,p=u.maxSpeed,Math.min(Math.max(l,d),p)),x=h.create(0===f?y:a/f*v,0===f?y:c/f*v);i.position.addTo(x)}var l,d,p}clickRepulse(){const e=this.container;if(e.repulse.finish||(e.repulse.count||(e.repulse.count=0),e.repulse.count++,e.repulse.count===e.particles.count&&(e.repulse.finish=!0)),e.repulse.clicking){const t=e.retina.repulseModeDistance,n=Math.pow(t/6,3),i=e.interactivity.mouse.clickPosition;if(void 0===i)return;const o=new c(i.x,i.y,n),r=e.particles.quadTree.query(o);for(const t of r){const{dx:o,dy:r,distance:a}=s(i,t.position),c=a**2,u=e.actualOptions.interactivity.modes.repulse.speed,l=-n*u/c;if(c<=n){e.repulse.particles.push(t);const s=h.create(o,r);s.length=l,t.velocity.setTo(s)}}}else if(!1===e.repulse.clicking){for(const t of e.repulse.particles)t.velocity.setTo(t.initialVelocity);e.repulse.particles=[]}}}async function p(e){await e.addInteractor("externalRepulse",(e=>new d(e)))}return t}()}));