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 14 kB
/*! tsParticles v1.42.2 by Matteo Bruni */ !function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i();else if("function"==typeof define&&define.amd)define([],i);else{var s=i();for(var o in s)("object"==typeof exports?exports:t)[o]=s[o]}}(window,(function(){return function(){"use strict";var t={d:function(i,s){for(var o in s)t.o(s,o)&&!t.o(i,o)&&Object.defineProperty(i,o,{enumerable:!0,get:s[o]})},o:function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},i={};t.r(i),t.d(i,{loadAbsorbersPlugin:function(){return I}});class s{constructor(){this.radius=0,this.mass=0}load(t){t&&(void 0!==t.mass&&(this.mass=t.mass),void 0!==t.radius&&(this.radius=t.radius))}}class o{constructor(){this.enable=!1,this.minimumValue=0}load(t){t&&(void 0!==t.enable&&(this.enable=t.enable),void 0!==t.minimumValue&&(this.minimumValue=t.minimumValue))}}class e{}e.generatedAttribute="generated",e.randomColorValue="random",e.midColorValue="mid",e.touchEndEvent="touchend",e.mouseDownEvent="mousedown",e.mouseUpEvent="mouseup",e.mouseMoveEvent="mousemove",e.touchStartEvent="touchstart",e.touchMoveEvent="touchmove",e.mouseLeaveEvent="mouseleave",e.mouseOutEvent="mouseout",e.touchCancelEvent="touchcancel",e.resizeEvent="resize",e.visibilityChangeEvent="visibilitychange",e.noPolygonDataLoaded="No polygon data loaded.",e.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;class r{constructor(t,i){let s,o;if(void 0===i){if("number"==typeof t)throw new Error("tsParticles - Vector not initialized correctly");const i=t;[s,o]=[i.x,i.y]}else[s,o]=[t,i];this.x=s,this.y=o}static clone(t){return r.create(t.x,t.y)}static create(t,i){return new r(t,i)}static get origin(){return r.create(0,0)}get angle(){return Math.atan2(this.y,this.x)}set angle(t){this.updateFromAngle(t,this.length)}get length(){return Math.sqrt(this.x**2+this.y**2)}set length(t){this.updateFromAngle(this.angle,t)}add(t){return r.create(this.x+t.x,this.y+t.y)}addTo(t){this.x+=t.x,this.y+=t.y}sub(t){return r.create(this.x-t.x,this.y-t.y)}subFrom(t){this.x-=t.x,this.y-=t.y}mult(t){return r.create(this.x*t,this.y*t)}multTo(t){this.x*=t,this.y*=t}div(t){return r.create(this.x/t,this.y/t)}divTo(t){this.x/=t,this.y/=t}distanceTo(t){return this.sub(t).length}getLengthSq(){return this.x**2+this.y**2}distanceToSq(t){return this.sub(t).getLengthSq()}manhattanDistanceTo(t){return Math.abs(t.x-this.x)+Math.abs(t.y-this.y)}copy(){return r.clone(this)}setTo(t){this.x=t.x,this.y=t.y}rotate(t){return r.create(this.x*Math.cos(t)-this.y*Math.sin(t),this.x*Math.sin(t)+this.y*Math.cos(t))}updateFromAngle(t,i){this.x=Math.cos(t)*i,this.y=Math.sin(t)*i}}new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function n(t){const i=h(t);let s=l(t);return i===s&&(s=0),Math.random()*(i-s)+s}function a(t){return"number"==typeof t?t:n(t)}function l(t){return"number"==typeof t?t:t.min}function h(t){return"number"==typeof t?t:t.max}function d(t,i){if(t===i||void 0===i&&"number"==typeof t)return t;const s=l(t),o=h(t);return void 0!==i?{min:Math.min(s,i),max:Math.max(o,i)}:d(s,o)}function c(t,i){const s=t.x-i.x,o=t.y-i.y;return{dx:s,dy:o,distance:Math.sqrt(s*s+o*o)}}function u(t,i){return c(t,i).distance}function b(t,i){return t===i||i instanceof Array&&i.indexOf(t)>-1}function v(t,i,s=!0){return t[void 0!==i&&s?i%t.length:function(t){return Math.floor(Math.random()*t.length)}(t)]}function y(t,i){return{bottom:t.y+i,left:t.x-i,right:t.x+i,top:t.y-i}}function f(t,i,s){let o=s;return o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(i-t)*o:o<.5?i:o<2/3?t+(i-t)*(2/3-o)*6:t}function p(t){if(t.startsWith("rgb")){const i=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return i?{a:i.length>4?parseFloat(i[5]):1,b:parseInt(i[3],10),g:parseInt(i[2],10),r:parseInt(i[1],10)}:void 0}if(t.startsWith("hsl")){const i=/hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return i?function(t){const i=m(t);return{a:t.a,b:i.b,g:i.g,r:i.r}}({a:i.length>4?parseFloat(i[5]):1,h:parseInt(i[1],10),l:parseInt(i[3],10),s:parseInt(i[2],10)}):void 0}if(t.startsWith("hsv")){const i=/hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return i?function(t){const i=x(t);return{a:t.a,b:i.b,g:i.g,r:i.r}}({a:i.length>4?parseFloat(i[5]):1,h:parseInt(i[1],10),s:parseInt(i[2],10),v:parseInt(i[3],10)}):void 0}{const i=/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,s=t.replace(i,((t,i,s,o,e)=>i+i+s+s+o+o+(void 0!==e?e+e:""))),o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(s);return o?{a:void 0!==o[4]?parseInt(o[4],16)/255:1,b:parseInt(o[3],16),g:parseInt(o[2],16),r:parseInt(o[1],16)}:void 0}}function g(t,i,s=!0){var o,r,n;if(void 0===t)return;const a="string"==typeof t?{value:t}:t;let l;if("string"==typeof a.value)l=a.value===e.randomColorValue?M():function(t){return p(t)}(a.value);else if(a.value instanceof Array){l=g({value:v(a.value,i,s)})}else{const t=a.value,i=null!==(o=t.rgb)&&void 0!==o?o:a.value;if(void 0!==i.r)l=i;else{const i=null!==(r=t.hsl)&&void 0!==r?r:a.value;if(void 0!==i.h&&void 0!==i.l)l=m(i);else{const i=null!==(n=t.hsv)&&void 0!==n?n:a.value;void 0!==i.h&&void 0!==i.v&&(l=x(i))}}}return l}function m(t){const i={b:0,g:0,r:0},s={h:t.h/360,l:t.l/100,s:t.s/100};if(0===s.s)i.b=s.l,i.g=s.l,i.r=s.l;else{const t=s.l<.5?s.l*(1+s.s):s.l+s.s-s.l*s.s,o=2*s.l-t;i.r=f(o,t,s.h+1/3),i.g=f(o,t,s.h),i.b=f(o,t,s.h-1/3)}return i.r=Math.floor(255*i.r),i.g=Math.floor(255*i.g),i.b=Math.floor(255*i.b),i}function x(t){const i={b:0,g:0,r:0},s=t.h/60,o=t.s/100,e=t.v/100,r=e*o,n=r*(1-Math.abs(s%2-1));let a;if(s>=0&&s<=1?a={r:r,g:n,b:0}:s>1&&s<=2?a={r:n,g:r,b:0}:s>2&&s<=3?a={r:0,g:r,b:n}:s>3&&s<=4?a={r:0,g:n,b:r}:s>4&&s<=5?a={r:n,g:0,b:r}:s>5&&s<=6&&(a={r:r,g:0,b:n}),a){const t=e-r;i.r=Math.floor(255*(a.r+t)),i.g=Math.floor(255*(a.g+t)),i.b=Math.floor(255*(a.b+t))}return i}function M(t){const i=null!=t?t:0;return{b:Math.floor(n(d(i,256))),g:Math.floor(n(d(i,256))),r:Math.floor(n(d(i,256)))}}new WeakMap;class w extends class{constructor(){this.random=new o,this.value=0}load(t){t&&("boolean"==typeof t.random?this.random.enable=t.random:this.random.load(t.random),void 0!==t.value&&(this.value=d(t.value,this.random.enable?this.random.minimumValue:void 0)))}}{constructor(){super(),this.density=5,this.random.minimumValue=1,this.value=50,this.limit=new s}load(t){t&&(super.load(t),void 0!==t.density&&(this.density=t.density),"number"==typeof t.limit?this.limit.radius=t.limit:this.limit.load(t.limit))}}class P{constructor(){this.value="#fff"}static create(t,i){const s=new P;return s.load(t),void 0!==i&&("string"==typeof i||i instanceof Array?s.load({value:i}):s.load(i)),s}load(t){void 0!==(null==t?void 0:t.value)&&(this.value=t.value)}}class A{constructor(){this.color=new P,this.color.value="#000000",this.draggable=!1,this.opacity=1,this.destroy=!0,this.orbits=!1,this.size=new w}load(t){void 0!==t&&(void 0!==t.color&&(this.color=P.create(this.color,t.color)),void 0!==t.draggable&&(this.draggable=t.draggable),this.name=t.name,void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.position&&(this.position={},void 0!==t.position.x&&(this.position.x=d(t.position.x)),void 0!==t.position.y&&(this.position.y=d(t.position.y))),void 0!==t.size&&this.size.load(t.size),void 0!==t.destroy&&(this.destroy=t.destroy),void 0!==t.orbits&&(this.orbits=t.orbits))}}class z{constructor(t,i,s,o){var e,n,l;this.absorbers=t,this.container=i,this.initialPosition=o?r.create(o.x,o.y):void 0,s instanceof A?this.options=s:(this.options=new A,this.options.load(s)),this.dragging=!1,this.name=this.options.name,this.opacity=this.options.opacity,this.size=a(this.options.size.value)*i.retina.pixelRatio,this.mass=this.size*this.options.size.density*i.retina.reduceFactor;const h=this.options.size.limit;this.limit={radius:h.radius*i.retina.pixelRatio*i.retina.reduceFactor,mass:h.mass},this.color=null!==(e=g(this.options.color))&&void 0!==e?e:{b:0,g:0,r:0},this.position=null!==(l=null===(n=this.initialPosition)||void 0===n?void 0:n.copy())&&void 0!==l?l:this.calcPosition()}attract(t){const i=this.container,s=this.options;if(s.draggable){const t=i.interactivity.mouse;if(t.clicking&&t.downPosition){u(this.position,t.downPosition)<=this.size&&(this.dragging=!0)}else this.dragging=!1;this.dragging&&t.position&&(this.position.x=t.position.x,this.position.y=t.position.y)}const o=t.getPosition(),{dx:e,dy:n,distance:a}=c(this.position,o),l=r.create(e,n);if(l.length=this.mass/Math.pow(a,2)*i.retina.reduceFactor,a<this.size+t.getRadius()){const o=.033*t.getRadius()*i.retina.pixelRatio;this.size>t.getRadius()&&a<this.size-t.getRadius()||void 0!==t.absorberOrbit&&t.absorberOrbit.length<0?s.destroy?t.destroy():(t.needsNewPosition=!0,this.updateParticlePosition(t,l)):(s.destroy&&(t.size.value-=o),this.updateParticlePosition(t,l)),(this.limit.radius<=0||this.size<this.limit.radius)&&(this.size+=o),(this.limit.mass<=0||this.mass<this.limit.mass)&&(this.mass+=o*this.options.size.density*i.retina.reduceFactor)}else this.updateParticlePosition(t,l)}resize(){const t=this.initialPosition;var i,s,o,e;this.position=t&&(i=t,s=this.container.canvas.size,function(t,i,s){let o=!0;return s&&"bottom"!==s||(o=t.top<i.height),!o||s&&"left"!==s||(o=t.right>0),!o||s&&"right"!==s||(o=t.left<i.width),!o||s&&"top"!==s||(o=t.bottom>0),o}(y(i,null!=o?o:0),s,e))?t:this.calcPosition()}draw(t){var i,s;t.translate(this.position.x,this.position.y),t.beginPath(),t.arc(0,0,this.size,0,2*Math.PI,!1),t.closePath(),t.fillStyle=(i=this.color,s=this.opacity,`rgba(${i.r}, ${i.g}, ${i.b}, ${null!=s?s:1})`),t.fill()}calcPosition(){var t,i;const s=this.container,o=this.options.position;return r.create(a(null!==(t=null==o?void 0:o.x)&&void 0!==t?t:100*Math.random())/100*s.canvas.size.width,a(null!==(i=null==o?void 0:o.y)&&void 0!==i?i:100*Math.random())/100*s.canvas.size.height)}updateParticlePosition(t,i){var s;if(t.destroyed)return;const o=this.container,e=o.canvas.size;if(t.needsNewPosition&&(t.position.x=Math.floor(Math.random()*e.width),t.position.y=Math.floor(Math.random()*e.height),t.velocity.setTo(t.initialVelocity),t.absorberOrbit=void 0,t.needsNewPosition=!1),this.options.orbits){if(void 0===t.absorberOrbit&&(t.absorberOrbit=r.create(0,0),t.absorberOrbit.length=u(t.getPosition(),this.position),t.absorberOrbit.angle=Math.random()*Math.PI*2),t.absorberOrbit.length<=this.size&&!this.options.destroy){const i=Math.min(e.width,e.height);t.absorberOrbit.length=i*(.2*Math.random()-.1+1)}void 0===t.absorberOrbitDirection&&(t.absorberOrbitDirection=t.velocity.x>=0?"clockwise":"counter-clockwise");const n=t.absorberOrbit.length,a=t.absorberOrbit.angle,l=t.absorberOrbitDirection;t.velocity.x=0,t.velocity.y=0;const h={x:"clockwise"===l?Math.cos:Math.sin,y:"clockwise"===l?Math.sin:Math.cos};t.position.x=this.position.x+n*h.x(a),t.position.y=this.position.y+n*h.y(a),t.absorberOrbit.length-=i.length,t.absorberOrbit.angle+=(null!==(s=t.retina.moveSpeed)&&void 0!==s?s:0)*o.retina.pixelRatio/100*o.retina.reduceFactor}else{const s=r.origin;s.length=i.length,s.angle=i.angle,t.velocity.addTo(s)}}}class O{constructor(t){this.container=t,this.array=[],this.absorbers=[],this.interactivityAbsorbers=[];const i=t;i.getAbsorber=t=>void 0===t||"number"==typeof t?this.array[t||0]:this.array.find((i=>i.name===t)),i.addAbsorber=(t,i)=>this.addAbsorber(t,i)}init(t){var i,s;if(!t)return;t.absorbers&&(t.absorbers instanceof Array?this.absorbers=t.absorbers.map((t=>{const i=new A;return i.load(t),i})):(this.absorbers instanceof Array&&(this.absorbers=new A),this.absorbers.load(t.absorbers)));const o=null===(s=null===(i=t.interactivity)||void 0===i?void 0:i.modes)||void 0===s?void 0:s.absorbers;if(o&&(o instanceof Array?this.interactivityAbsorbers=o.map((t=>{const i=new A;return i.load(t),i})):(this.interactivityAbsorbers instanceof Array&&(this.interactivityAbsorbers=new A),this.interactivityAbsorbers.load(o))),this.absorbers instanceof Array)for(const t of this.absorbers)this.addAbsorber(t);else this.addAbsorber(this.absorbers)}particleUpdate(t){for(const i of this.array)if(i.attract(t),t.destroyed)break}draw(t){for(const i of this.array)t.save(),i.draw(t),t.restore()}stop(){this.array=[]}resize(){for(const t of this.array)t.resize()}handleClickMode(t){const i=this.container,s=this.absorbers,o=this.interactivityAbsorbers;if("absorber"===t){let t;o instanceof Array?o.length>0&&(t=v(o)):t=o;const e=null!=t?t:s instanceof Array?v(s):s,r=i.interactivity.mouse.clickPosition;this.addAbsorber(e,r)}}addAbsorber(t,i){const s=new z(this,this.container,t,i);return this.array.push(s),s}removeAbsorber(t){const i=this.array.indexOf(t);i>=0&&this.array.splice(i,1)}}class k{constructor(){this.id="absorbers"}getPlugin(t){return new O(t)}needsPlugin(t){var i,s,o;if(void 0===t)return!1;const e=t.absorbers;let r=!1;return e instanceof Array?e.length&&(r=!0):(void 0!==e||(null===(o=null===(s=null===(i=t.interactivity)||void 0===i?void 0:i.events)||void 0===s?void 0:s.onClick)||void 0===o?void 0:o.mode)&&b("absorber",t.interactivity.events.onClick.mode))&&(r=!0),r}loadOptions(t,i){var s,o;if(!this.needsPlugin(t)&&!this.needsPlugin(i))return;const e=t;if(null==i?void 0:i.absorbers)if((null==i?void 0:i.absorbers)instanceof Array)e.absorbers=null==i?void 0:i.absorbers.map((t=>{const i=new A;return i.load(t),i}));else{let t=e.absorbers;void 0===(null==t?void 0:t.load)&&(e.absorbers=t=new A),t.load(null==i?void 0:i.absorbers)}const r=null===(o=null===(s=null==i?void 0:i.interactivity)||void 0===s?void 0:s.modes)||void 0===o?void 0:o.absorbers;if(r)if(r instanceof Array)e.interactivity.modes.absorbers=r.map((t=>{const i=new A;return i.load(t),i}));else{let t=e.interactivity.modes.absorbers;void 0===(null==t?void 0:t.load)&&(e.interactivity.modes.absorbers=t=new A),t.load(r)}}}async function I(t){const i=new k;await t.addPlugin(i)}return i}()}));