jparticles/browser/particle.js

A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

this.JParticles=this.JParticles||{},this.JParticles.Particle=function(t,e){"use strict";function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=a(t),o=function(t,e){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])})(t,e)};var i,s,r,p=function(){return(p=Object.assign||function(t){for(var e,a=1,n=arguments.length;a<n;a++)for(var o in e=arguments[a])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},l=!!window.DeviceOrientationEvent;return Function.prototype.toString.call(Object),/msie\s8.0/i.test(navigator.userAgent),function(t){t.DESTROY="DESTROY",t.RESIZE="RESIZE"}(i||(i={})),function(t){t.PROGRESS="PROGRESS",t.FINISHED="FINISHED"}(s||(s={})),function(t){t.FINISHED="FINISHED"}(r||(r={})),function(t){function a(e,n){var o=t.call(this,a.defaultConfig,e,n)||this;return o.mouseX=0,o.mouseY=0,o.bootstrap(),o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function a(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(a.prototype=e.prototype,new a)}(a,t),a.prototype.init=function(){this.ownResizeEvent(),this.optionsNormalize(),this.options.range>0&&(this.positionX=Math.random()*this.canvasWidth,this.positionY=Math.random()*this.canvasHeight,this.defineLineShape(),this.positionEvent()),this.mouseX=this.mouseY=0,this.parallaxEvent(),this.createDots()},a.prototype.optionsNormalize=function(){var t=this.canvasWidth,a=this.options;["num","proximity","range"].forEach((function(n){a[n]=e.pInt(e.calcQuantity(a[n],t))})),e.isElement(a.eventElem)||a.eventElem===document||(a.eventElem=this.canvas)},a.prototype.defineLineShape=function(){var t=this,e=this.options,a=e.proximity,n=e.range;switch(e.lineShape){case"cube":this.lineShapeMaker=function(e,o,i,s,r){var p=t,l=p.positionX,h=p.positionY;Math.abs(e-i)<=a&&Math.abs(o-s)<=a&&Math.abs(e-l)<=n&&Math.abs(o-h)<=n&&Math.abs(i-l)<=n&&Math.abs(s-h)<=n&&r()};break;default:this.lineShapeMaker=function(e,o,i,s,r){var p=t,l=p.positionX,h=p.positionY;Math.abs(e-i)<=a&&Math.abs(o-s)<=a&&(Math.abs(e-l)<=n&&Math.abs(o-h)<=n||Math.abs(i-l)<=n&&Math.abs(s-h)<=n)&&r()}}},a.prototype.createDots=function(){for(var t=this,a=t.canvasWidth,n=t.canvasHeight,o=t.getColor,i=this.options,s=i.maxR,r=i.minR,p=i.maxSpeed,l=i.minSpeed,h=i.parallaxLayer,c=i.spin,f=i.spinMaxSpeed,u=i.spinMinSpeed,v=h.length,m=this.options.num;m--;){var d=e.randomInRange(s,r);this.elements.push({r:d,x:e.randomInRange(a-d,d),y:e.randomInRange(n-d,d),vx:e.randomSpeed(p,l),vy:e.randomSpeed(p,l),color:o(),shape:this.getShapeData(),parallaxLayer:h[Math.floor(Math.random()*v)],parallaxOffsetX:0,parallaxOffsetY:0,rotate:c?e.randomInRange(0,360):0,rotateSpeed:e.randomSpeed(f,u)})}},a.prototype.draw=function(){var t=this,e=this.ctx,a=this.options.lineWidth;this.clearCanvasAndSetGlobalAttrs(),e.lineWidth=a,this.updateXY(),this.elements.forEach((function(e){var a=e.x,n=e.y,o=e.parallaxOffsetX,i=e.parallaxOffsetY;t.updateElementRotate(e),t.drawShape(p(p({},e),{x:a+o,y:n+i}))})),this.connectDots(),this.requestAnimationFrame()},a.prototype.updateElementRotate=function(t){this.options.spin&&!this.isPaused&&(t.rotate+=t.rotateSpeed,t.rotate>=360&&(t.rotate=t.rotate-360))},a.prototype.connectDots=function(){if(!(this.options.range<=0)){var t=this,e=t.elements,a=t.ctx,n=t.lineShapeMaker,o=e.length;e.forEach((function(t,i){for(var s=t.x+t.parallaxOffsetX,r=t.y+t.parallaxOffsetY,p=function(){var o=e[i],p=o.x+o.parallaxOffsetX,l=o.y+o.parallaxOffsetY;null==n||n(s,r,p,l,(function(){a.save(),a.beginPath(),a.moveTo(s,r),a.lineTo(p,l),a.strokeStyle=t.color,a.stroke(),a.restore()}))};++i<o;)p()}))}},a.prototype.updateXY=function(){var t=this,e=t.isPaused,a=t.mouseX,n=t.mouseY,o=t.canvasWidth,i=t.canvasHeight,s=this.options,r=s.parallax,p=s.parallaxStrength;e||this.elements.forEach((function(t){if(r){var e=p*t.parallaxLayer;t.parallaxOffsetX+=(a/e-t.parallaxOffsetX)/10,t.parallaxOffsetY+=(n/e-t.parallaxOffsetY)/10}t.x+=t.vx,t.y+=t.vy;var s=t.r,l=t.parallaxOffsetX,h=t.parallaxOffsetY,c=t.x,f=t.y;f+=h,(c+=l)+s>=o?t.vx=-Math.abs(t.vx):c-s<=0&&(t.vx=Math.abs(t.vx)),f+s>=i?t.vy=-Math.abs(t.vy):f-s<=0&&(t.vy=Math.abs(t.vy))}))},a.prototype.getEventElemOffset=function(){var t=this.options.eventElem;return t===document?null:e.offset(t)},a.prototype.eventProxy=function(t,a){var n,o=this,i=this.options.eventElem;l&&(n=function(t){o.isPaused||e.isNull(t.beta)||a(Math.min(Math.max(t.beta,-90),90),t.gamma)},window.addEventListener("deviceorientation",n));var s=function(e){if(!o.isPaused){var a=e.pageX,n=e.pageY,i=o.getEventElemOffset();i&&(a-=i.left,n-=i.top),t(a,n)}};i.addEventListener("mousemove",s),this.onDestroy((function(){window.removeEventListener("deviceorientation",n),i.removeEventListener("mousemove",s)}))},a.prototype.positionEvent=function(){var t=this,e=this.options.range;e>this.canvasWidth&&e>this.canvasHeight||this.eventProxy((function(e,a){t.positionX=e,t.positionY=a}),(function(e,a){t.positionX=-(a-90)/180*t.canvasWidth,t.positionY=-(e-90)/180*t.canvasHeight}))},a.prototype.parallaxEvent=function(){var t=this;this.options.parallax&&this.eventProxy((function(e,a){t.mouseX=e-t.canvasWidth/2,t.mouseY=a-t.canvasHeight/2}),(function(e,a){t.mouseX=-a*t.canvasWidth/180,t.mouseY=-e*t.canvasHeight/180}))},a.prototype.ownResizeEvent=function(){var t=this;this.onResize((function(e,a){t.options.range>0&&(t.positionX*=e,t.positionY*=a,t.mouseX*=e,t.mouseY*=a)}))},a.defaultConfig={num:.12,maxR:2.4,minR:.6,maxSpeed:1,minSpeed:.1,proximity:.2,range:.2,lineWidth:.2,lineShape:"spider",eventElem:null,parallax:!1,parallaxLayer:[1,2,3],parallaxStrength:3,spin:!1,spinMaxSpeed:5,spinMinSpeed:1},a}(n.default)}(JParticles.classes.Shape,JParticles.utils);