diff --git a/dist/sparticles.esm.js b/dist/sparticles.esm.js index a1f39a2..5ecf987 100644 --- a/dist/sparticles.esm.js +++ b/dist/sparticles.esm.js @@ -1,6 +1,6 @@ /**! * Sparticles - Lightweight, High Performance Particles in Canvas - * @version 0.11.2 + * @version 0.12.0 * @license MPL-2.0 * @author simeydotme * @website http://sparticlesjs.dev @@ -671,8 +671,8 @@ Sparticle.prototype.renderRotate = function () { /** * Sparticles Constructor; * Create a , append to the given node, and start the particle effect - * @param {HTMLElement} [node] - element to which canvas is appended to - * @param {Object} [options] - settings to use for the particle effect + * @param {HTMLElement} [node=document.body] - element to which canvas is appended to + * @param {Object} [options={}] - settings to use for the particle effect * @param {String} [options.composition=source-over] - canvas globalCompositeOperation value for particles * @param {Number} [options.count=50] - number of particles on the canvas simultaneously * @param {Number} [options.speed=10] - default velocity of every particle @@ -697,22 +697,22 @@ Sparticle.prototype.renderRotate = function () { * @param {(String|String[])} [options.shape=circle] - shape of particles (any of; circle, square, triangle, diamond, line, image) or "random" * @param {(String|String[])} [options.imageUrl=] - if shape is "image", define an image url (can be data-uri, must be square (1:1 ratio)) * @param {Number} [width] - the width of the canvas element - * @param {Number} [height] - the height of the canvas element - * @returns - reference to a new Sparticles instance + * @param {Number} [height=width] - the height of the canvas element + * @returns {Object} - reference to a new Sparticles instance */ -var Sparticles = function Sparticles(node) { - var _this = this; - - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - var width = arguments.length > 2 ? arguments[2] : undefined; - var height = arguments.length > 3 ? arguments[3] : undefined; - - if (arguments.length === 1 && !(arguments[0] instanceof HTMLElement)) { - options = node; +var Sparticles = function Sparticles(node, options, width, height) { + if (arguments.length >= 1 && !(arguments[0] instanceof HTMLElement)) { + options = arguments[0]; + width = arguments[1]; + height = arguments[2]; node = undefined; } + if (width && !height) { + height = width; + } + var defaults = { alphaSpeed: 10, alphaVariance: 1, @@ -740,36 +740,51 @@ var Sparticles = function Sparticles(node) { }; this.el = node || document.body; this.settings = _objectSpread2({}, defaults, {}, options); - this.init(width, height); - window.addEventListener("resize", function () { - clearTimeout(_this.resizeTimer); - _this.resizeTimer = setTimeout(function () { - _this.setCanvasSize(); - - _this.createSparticles(); - }, 200); - }); - return this; + this.resizable = !width && !height; + this.width = this.resizable ? this.el.clientWidth : width; + this.height = this.resizable ? this.el.clientHeight : height; + return this.init(); }; /** * initialise the sparticles instance - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid + * @returns {Object} - reference to the Sparticles instance */ -Sparticles.prototype.init = function (width, height) { - var _this2 = this; +Sparticles.prototype.init = function () { + var _this = this; this.sparticles = []; this.createColorArray(); this.createShapeArray(); - this.setupMainCanvas(width, height); + this.setupMainCanvas(); this.setupOffscreenCanvasses(function () { - _this2.createSparticles(); + _this.createSparticles(); - _this2.start(); + _this.start(); }); + window.addEventListener("resize", this); + return this; +}; +/** + * debounce a canvas resize and reset the particles + */ + + +Sparticles.prototype.handleEvent = function (event) { + var _this2 = this; + + if (event.type === "resize") { + clearTimeout(this.resizeTimer); + this.resizeTimer = setTimeout(function () { + if (_this2.resizable) { + _this2.width = _this2.el.clientWidth; + _this2.height = _this2.el.clientHeight; + + _this2.setCanvasSize().resetSparticles(); + } + }, 200); + } }; /** * start/resume the sparticles animation @@ -804,7 +819,9 @@ Sparticles.prototype.destroy = function () { // stop the rendering and updating this.stop(); // remove the canvas element from the DOM - this.el.removeChild(this.canvas); // delete all the properties from the instance + this.el.removeChild(this.canvas); // remove the resize event for this instance + + window.removeEventListener("resize", this); // delete all the properties from the instance // to free up memory for (var prop in this) { @@ -814,30 +831,23 @@ Sparticles.prototype.destroy = function () { } }; /** - * set the canvas height and width based on either the input - * dom element, or the given width and height. - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid - * @returns {HTMLCanvasElement} - the canvas element of the instance + * set the canvas width and height + * @param {Number} width - the width of the canvas + * @param {Number} height - the height of the canvas + * @returns {Object} - the Sparticle instance (for chaining) */ Sparticles.prototype.setCanvasSize = function (width, height) { - if (typeof this.resizable === "undefined") { - this.resizable = !width && !height; - } - - if (this.resizable) { - this.width = this.el.clientWidth; - this.height = this.el.clientHeight; - } else { - this.width = width; - this.height = height; + if (width) { + this.resizable = false; } + this.width = width || this.width; + this.height = height || this.height; this.canvas.width = this.width; this.canvas.height = this.height; - return this.canvas; + return this; }; /** * convert the input color to an array if it isn't already @@ -881,17 +891,15 @@ Sparticles.prototype.createShapeArray = function () { /** * set up the canvas and bind to a property for * access later on, append it to the DOM - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid * @returns {HTMLCanvasElement} - the canvas element which was appended to DOM */ -Sparticles.prototype.setupMainCanvas = function (width, height) { +Sparticles.prototype.setupMainCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); this.ctx.globalCompositeOperation = this.settings.composition; - this.setCanvasSize(width, height); + this.setCanvasSize(); this.el.appendChild(this.canvas); return this.canvas; }; @@ -1310,7 +1318,7 @@ Sparticles.prototype.drawImageOffscreenCanvas = function (image, canvas, ctx, co */ -Sparticles.prototype.createSparticles = function () { +Sparticles.prototype.resetSparticles = Sparticles.prototype.createSparticles = function () { this.sparticles = []; for (var i = 0; i < this.settings.count; i++) { diff --git a/dist/sparticles.js b/dist/sparticles.js index cbfe0d4..f941217 100644 --- a/dist/sparticles.js +++ b/dist/sparticles.js @@ -1,6 +1,6 @@ /**! * Sparticles - Lightweight, High Performance Particles in Canvas - * @version 0.11.2 + * @version 0.12.0 * @license MPL-2.0 * @author simeydotme * @website http://sparticlesjs.dev @@ -674,8 +674,8 @@ var Sparticles = (function () { /** * Sparticles Constructor; * Create a , append to the given node, and start the particle effect - * @param {HTMLElement} [node] - element to which canvas is appended to - * @param {Object} [options] - settings to use for the particle effect + * @param {HTMLElement} [node=document.body] - element to which canvas is appended to + * @param {Object} [options={}] - settings to use for the particle effect * @param {String} [options.composition=source-over] - canvas globalCompositeOperation value for particles * @param {Number} [options.count=50] - number of particles on the canvas simultaneously * @param {Number} [options.speed=10] - default velocity of every particle @@ -700,22 +700,22 @@ var Sparticles = (function () { * @param {(String|String[])} [options.shape=circle] - shape of particles (any of; circle, square, triangle, diamond, line, image) or "random" * @param {(String|String[])} [options.imageUrl=] - if shape is "image", define an image url (can be data-uri, must be square (1:1 ratio)) * @param {Number} [width] - the width of the canvas element - * @param {Number} [height] - the height of the canvas element - * @returns - reference to a new Sparticles instance + * @param {Number} [height=width] - the height of the canvas element + * @returns {Object} - reference to a new Sparticles instance */ - var Sparticles = function Sparticles(node) { - var _this = this; - - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - var width = arguments.length > 2 ? arguments[2] : undefined; - var height = arguments.length > 3 ? arguments[3] : undefined; - - if (arguments.length === 1 && !(arguments[0] instanceof HTMLElement)) { - options = node; + var Sparticles = function Sparticles(node, options, width, height) { + if (arguments.length >= 1 && !(arguments[0] instanceof HTMLElement)) { + options = arguments[0]; + width = arguments[1]; + height = arguments[2]; node = undefined; } + if (width && !height) { + height = width; + } + var defaults = { alphaSpeed: 10, alphaVariance: 1, @@ -743,36 +743,51 @@ var Sparticles = (function () { }; this.el = node || document.body; this.settings = _objectSpread2({}, defaults, {}, options); - this.init(width, height); - window.addEventListener("resize", function () { - clearTimeout(_this.resizeTimer); - _this.resizeTimer = setTimeout(function () { - _this.setCanvasSize(); - - _this.createSparticles(); - }, 200); - }); - return this; + this.resizable = !width && !height; + this.width = this.resizable ? this.el.clientWidth : width; + this.height = this.resizable ? this.el.clientHeight : height; + return this.init(); }; /** * initialise the sparticles instance - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid + * @returns {Object} - reference to the Sparticles instance */ - Sparticles.prototype.init = function (width, height) { - var _this2 = this; + Sparticles.prototype.init = function () { + var _this = this; this.sparticles = []; this.createColorArray(); this.createShapeArray(); - this.setupMainCanvas(width, height); + this.setupMainCanvas(); this.setupOffscreenCanvasses(function () { - _this2.createSparticles(); + _this.createSparticles(); - _this2.start(); + _this.start(); }); + window.addEventListener("resize", this); + return this; + }; + /** + * debounce a canvas resize and reset the particles + */ + + + Sparticles.prototype.handleEvent = function (event) { + var _this2 = this; + + if (event.type === "resize") { + clearTimeout(this.resizeTimer); + this.resizeTimer = setTimeout(function () { + if (_this2.resizable) { + _this2.width = _this2.el.clientWidth; + _this2.height = _this2.el.clientHeight; + + _this2.setCanvasSize().resetSparticles(); + } + }, 200); + } }; /** * start/resume the sparticles animation @@ -807,7 +822,9 @@ var Sparticles = (function () { // stop the rendering and updating this.stop(); // remove the canvas element from the DOM - this.el.removeChild(this.canvas); // delete all the properties from the instance + this.el.removeChild(this.canvas); // remove the resize event for this instance + + window.removeEventListener("resize", this); // delete all the properties from the instance // to free up memory for (var prop in this) { @@ -817,30 +834,23 @@ var Sparticles = (function () { } }; /** - * set the canvas height and width based on either the input - * dom element, or the given width and height. - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid - * @returns {HTMLCanvasElement} - the canvas element of the instance + * set the canvas width and height + * @param {Number} width - the width of the canvas + * @param {Number} height - the height of the canvas + * @returns {Object} - the Sparticle instance (for chaining) */ Sparticles.prototype.setCanvasSize = function (width, height) { - if (typeof this.resizable === "undefined") { - this.resizable = !width && !height; - } - - if (this.resizable) { - this.width = this.el.clientWidth; - this.height = this.el.clientHeight; - } else { - this.width = width; - this.height = height; + if (width) { + this.resizable = false; } + this.width = width || this.width; + this.height = height || this.height; this.canvas.width = this.width; this.canvas.height = this.height; - return this.canvas; + return this; }; /** * convert the input color to an array if it isn't already @@ -884,17 +894,15 @@ var Sparticles = (function () { /** * set up the canvas and bind to a property for * access later on, append it to the DOM - * @param {Number} width - the width of the canvas if not fluid - * @param {Number} height - the height of the canvas if not fluid * @returns {HTMLCanvasElement} - the canvas element which was appended to DOM */ - Sparticles.prototype.setupMainCanvas = function (width, height) { + Sparticles.prototype.setupMainCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); this.ctx.globalCompositeOperation = this.settings.composition; - this.setCanvasSize(width, height); + this.setCanvasSize(); this.el.appendChild(this.canvas); return this.canvas; }; @@ -1313,7 +1321,7 @@ var Sparticles = (function () { */ - Sparticles.prototype.createSparticles = function () { + Sparticles.prototype.resetSparticles = Sparticles.prototype.createSparticles = function () { this.sparticles = []; for (var i = 0; i < this.settings.count; i++) { diff --git a/dist/sparticles.min.js b/dist/sparticles.min.js index 722013c..c540623 100644 --- a/dist/sparticles.min.js +++ b/dist/sparticles.min.js @@ -1,9 +1,9 @@ /**! * Sparticles - Lightweight, High Performance Particles in Canvas - * @version 0.11.2 + * @version 0.12.0 * @license MPL-2.0 * @author simeydotme * @website http://sparticlesjs.dev * @repository https://github.com/simeydotme/sparticles.git */ -var Sparticles=function(){"use strict";function t(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function e(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function i(i){for(var s=1;s0&&void 0!==arguments[0]?arguments[0]:function(){},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:60;this.fps=e,this.handler=t;var i=0;this.start=function(){var t=this;if(!this.started){var e=performance.now(),s=1e3/this.fps;i=requestAnimationFrame((function n(r){var a=r-e;i=requestAnimationFrame(n),a>=s-0&&(t.handler(a),e=r-a%s)})),this.started=!0}},this.stop=function(){cancelAnimationFrame(i),this.started=!1}},n=function(t){return[Math.cos(a(t-90)),Math.sin(a(t-90))]},r=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.max(e,Math.min(i,t))},a=function(t){return t*Math.PI/180},h=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Math.random();return t===e?i=t:(0!==t||1!==e)&&e>t&&(i=i*(e-t)+t),i},o=function(t){return t[Math.floor(h(0,t.length))]},c=function(t){return t>h()},l=function(t){return.5+t|0},p=function(t){return t?(this.canvas=t.canvas,this.images=t.images,this.settings=t.settings,this.ctx=t.canvas.getContext("2d"),this.setup(),this.init()):console.warn("Invalid parameters given to Sparticle()",arguments),this};p.prototype.setup=function(){var t=this.settings;this.frame=0,this.frameoffset=l(h(0,360)),this.size=l(h(t.minSize,t.maxSize)),this.da=this.getAlphaDelta(),this.dx=this.getDeltaX(),this.dy=this.getDeltaY(),this.dd=this.getDriftDelta(),this.dr=this.getRotationDelta(),this.shape=this.getShapeOrImage(),this.style=this.getStyle(),this.color=this.getColor(),this.rotation=t.rotate?a(h(0,360)):0},p.prototype.init=function(){var t=this.settings;this.alpha=0===t.speed&&t.alphaSpeed>0?0:h(t.minAlpha,t.maxAlpha),this.initPosition()},p.prototype.initPosition=function(){var t=this.settings,e=this.canvas;t.bounce?(this.px=l(h(2,e.width-this.size-2)),this.py=l(h(2,e.height-this.size-2))):(this.px=l(h(2*-this.size,e.width+this.size)),this.py=l(h(2*-this.size,e.height+this.size)))},p.prototype.reset=function(){this.setup(),this.py<0?this.py=this.canvas.height+2*this.size:this.py>this.canvas.height&&(this.py=0-2*this.size),this.px<0?this.px=this.canvas.width+2*this.size:this.px>this.canvas.width&&(this.px=0-2*this.size)},p.prototype.bounce=function(){(this.py<=0||this.py+this.size>=this.canvas.height)&&(this.dy=-this.dy),(this.px<=0||this.px+this.size>=this.canvas.width)&&(this.dx=-this.dx)},p.prototype.isOffCanvas=function(){var t=0-2*this.size,e=this.canvas.height+2*this.size,i=this.canvas.width+2*this.size;return this.pxi||this.pye},p.prototype.isTouchingEdge=function(){var t=this.canvas.height-this.size,e=this.canvas.width-this.size;return this.px<0||this.px>e||this.py<0||this.py>t},p.prototype.getColor=function(){if(Array.isArray(this.settings.color))return o(this.settings.color)},p.prototype.getShapeOrImage=function(){var t=this.settings.shape;if(Array.isArray(t))return"image"===t[0]&&this.images?o(this.images):o(t)},p.prototype.getStyle=function(){var t=this.settings.style;return"fill"!==t&&"stroke"!==t&&(t=o(["fill","stroke"])),t},p.prototype.getDelta=function(){var t=.1*this.settings.speed;return this.settings.speed&&this.settings.parallax?t+this.size*this.settings.parallax/50:t},p.prototype.getDeltaVariance=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=this.settings.speed||10;return t>0?h(-t,t)*e/100:0},p.prototype.getDeltaX=function(){var t=this.getDelta(),e=this.getDeltaVariance(this.settings.xVariance);return n(this.settings.direction)[0]*t+e},p.prototype.getDeltaY=function(){var t=this.getDelta(),e=this.getDeltaVariance(this.settings.yVariance);return n(this.settings.direction)[1]*t+e},p.prototype.getAlphaDelta=function(){var t=this.settings.alphaVariance,e=h(1,t+1);return c(.5)&&(e=-e),e},p.prototype.getDriftDelta=function(){return this.settings.drift?h(this.settings.drift-this.settings.drift/2,this.settings.drift+this.settings.drift/2):0},p.prototype.getRotationDelta=function(){var t=0;return this.settings.rotate&&this.settings.rotation&&(t=a(h(.5,1.5)*this.settings.rotation),c(.5)&&(t=-t)),t},p.prototype.update=function(){return this.frame+=1,this.updatePosition(),this.updateAlpha(),this},p.prototype.updateAlpha=function(){return this.settings.alphaSpeed>0&&(this.settings.twinkle?this.alpha=this.updateTwinkle():this.alpha=this.updateFade()),this.alpha},p.prototype.updateFade=function(){var t=this.da/1e3*this.settings.alphaSpeed*.5,e=this.alpha+t,i=this.da>0&&e>this.settings.maxAlpha,s=this.da<0&&ethis.settings.maxAlpha,s=t150&&this.settings.direction<210||this.settings.direction>330&&this.settings.direction<390||this.settings.direction>-30&&this.settings.direction<30?this.px+=n(this.frame+this.frameoffset)[0]*this.dd/(15*this.getDelta()):(this.settings.direction>60&&this.settings.direction<120||this.settings.direction>240&&this.settings.direction<300)&&(this.py+=n(this.frame+this.frameoffset)[1]*this.dd/(15*this.getDelta())))},p.prototype.render=function(t){var e=t[this.color][this.shape];"image"!==this.settings.shape[0]&&(e=t[this.color][this.shape][this.style]);var i=e.width,s=this.size/i,n=this.px/s,a=this.py/s;return this.renderRotate(),this.ctx.globalAlpha=r(this.alpha,0,1),this.ctx.transform(s,0,0,s,0,0),this.ctx.globalCompositeOperation!==this.settings.composition&&(this.ctx.globalCompositeOperation=this.settings.composition),this.ctx.drawImage(e,0,0,i,i,n,a,i,i),this.ctx.setTransform(1,0,0,1,0,0),this},p.prototype.renderRotate=function(){if(this.settings.rotate){var t=this.px+this.size/2,e=this.py+this.size/2;this.ctx.translate(t,e),this.ctx.rotate(this.rotation),this.ctx.translate(-t,-e)}};var g=function(t){var e=this,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0,r=arguments.length>3?arguments[3]:void 0;1!==arguments.length||arguments[0]instanceof HTMLElement||(s=t,t=void 0);var a={alphaSpeed:10,alphaVariance:1,bounce:!1,color:"rainbow",composition:"source-over",count:50,direction:180,drift:1,glow:0,imageUrl:"",maxAlpha:1,maxSize:10,minAlpha:0,minSize:1,parallax:1,rotate:!0,rotation:1,shape:"circle",speed:10,style:"fill",twinkle:!1,xVariance:2,yVariance:2};return this.el=t||document.body,this.settings=i({},a,{},s),this.init(n,r),window.addEventListener("resize",(function(){clearTimeout(e.resizeTimer),e.resizeTimer=setTimeout((function(){e.setCanvasSize(),e.createSparticles()}),200)})),this};return g.prototype.init=function(t,e){var i=this;this.sparticles=[],this.createColorArray(),this.createShapeArray(),this.setupMainCanvas(t,e),this.setupOffscreenCanvasses((function(){i.createSparticles(),i.start()}))},g.prototype.start=function(){var t=this;this.loop||(this.loop=new s((function(e){t.drawFrame(e)}))),this.loop.start()},g.prototype.stop=function(){this.loop.stop()},g.prototype.destroy=function(){for(var t in this.stop(),this.el.removeChild(this.canvas),this)this.hasOwnProperty(t)&&delete this[t]},g.prototype.setCanvasSize=function(t,e){return void 0===this.resizable&&(this.resizable=!t&&!e),this.resizable?(this.width=this.el.clientWidth,this.height=this.el.clientHeight):(this.width=t,this.height=e),this.canvas.width=this.width,this.canvas.height=this.height,this.canvas},g.prototype.createColorArray=function(){if(!Array.isArray(this.settings.color))if("rainbow"===this.settings.color){this.settings.color=[];for(var t=0;t<100;t++)this.settings.color[t]=(e=void 0,i=void 0,s=void 0,e=l(h(0,360)),i=l(h(90,100)),s=l(h(45,85)),"hsl(".concat(e,",").concat(i,"%,").concat(s,"%)"))}else this.settings.color=[this.settings.color];var e,i,s;return this.settings.color},g.prototype.createShapeArray=function(){return Array.isArray(this.settings.shape)||("random"===this.settings.shape?this.settings.shape=["square","circle","triangle","diamond"]:this.settings.shape=[this.settings.shape]),this.settings.shape},g.prototype.setupMainCanvas=function(t,e){return this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.ctx.globalCompositeOperation=this.settings.composition,this.setCanvasSize(t,e),this.el.appendChild(this.canvas),this.canvas},g.prototype.setupOffscreenCanvasses=function(t){var e=this;this.canvasses=this.canvasses||{},this.settings.color.forEach((function(i){e.canvasses[i]=e.canvasses[i]||{},"image"===e.settings.shape[0]?e.loadAndDrawImages(i,t):e.settings.shape.forEach((function(s){e.canvasses[i][s]=e.canvasses[i][s]||{},["fill","stroke"].forEach((function(n){e.canvasses[i][s][n]=document.createElement("canvas");var r=e.canvasses[i][s][n],a=r.getContext("2d");switch(s){case"square":e.drawOffscreenCanvasForSquare(r,a,i,n),t&&t();break;case"line":e.drawOffscreenCanvasForLine(r,a,i,n),t&&t();break;case"triangle":e.drawOffscreenCanvasForTriangle(r,a,i,n),t&&t();break;case"diamond":e.drawOffscreenCanvasForDiamond(r,a,i,n),t&&t();break;case"star":e.drawOffscreenCanvasForStar(r,a,i,n),t&&t();break;case"circle":default:e.drawOffscreenCanvasForCircle(r,a,i,n),t&&t()}}))}))}))},g.prototype.getGlowSize=function(t){return this.settings.glow},g.prototype.getLineSize=function(t){return r(t/20,1,5)},g.prototype.renderStyle=function(t,e,i,s){"fill"===s?t.fillStyle=e:(t.lineWidth=i,t.strokeStyle=e)},g.prototype.renderGlow=function(t,e,i){var s=this.getGlowSize(i)/2;t.shadowColor=e,t.shadowBlur=s},g.prototype.renderColor=function(t,e){"fill"===e?t.fill():t.stroke()},g.prototype.drawOffscreenCanvasForSquare=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n);return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.rect(a/2-n/2,a/2-n/2,n,n),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForLine=function(t,e,i,s){var n=2*this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n),h=a/2-n/2,o=a/2-n/2;return t.width=a,t.height=a,this.renderGlow(e,i,n),e.lineWidth=r,e.strokeStyle=i,e.beginPath(),e.moveTo(h,o),e.lineTo(h+n,o+n),e.stroke(),e.closePath(),t},g.prototype.drawOffscreenCanvasForTriangle=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n),h=n*(Math.sqrt(3)/2),o=a/2,c=a/2-n/2;return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.moveTo(o,c),e.lineTo(o-n/2,c+h),e.lineTo(o+n/2,c+h),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForDiamond=function(t,e,i,s){var n=this.settings.maxSize,r=n/2,a=this.getLineSize(n),h=n+a+this.getGlowSize(n),o=h/2,c=.08*n,l=.02*n,p=o-r,g=o;return t.width=h,t.height=h,this.renderGlow(e,i,n),this.renderStyle(e,i,a,s),e.beginPath(),e.moveTo(p+l,g),e.bezierCurveTo(o-c/2,o-2*c,o-2*c,o-c/2,o,o-r),e.bezierCurveTo(o+2*c,o-c/2,o+c/2,o-2*c,o+r-l,o),e.bezierCurveTo(o+c/2,o+2*c,o+2*c,o+c/2,o,o+r),e.bezierCurveTo(o-2*c,o+c/2,o-c/2,o+2*c,p+l,g),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForStar=function(t,e,i,s){var n=this.getLineSize(52),r=this.getGlowSize(52),a=52+2*n+r;return t.width=a,t.height=a,this.renderGlow(e,i,52),this.renderStyle(e,i,n,s),e.translate(n/2+r/2,n/2+r/2-1),e.beginPath(),e.moveTo(27.76,2.07),e.lineTo(34.28,15.46),e.translate(36.01480792437574,14.614221385040288),e.arc(0,0,1.93,2.687967128721911,1.7293919056045395,1),e.translate(-36.01480792437574,-14.614221385040288),e.lineTo(50.37,18.7),e.translate(50.10443046629834,20.601544851632347),e.arc(0,0,1.92,-1.4320339785975214,.8159284165499665,0),e.translate(-50.10443046629834,-20.601544851632347),e.lineTo(40.78,32.36),e.translate(42.13415324373887,33.735197801216785),e.arc(0,0,1.93,-2.3484841809999386,-3.3054346524687857,1),e.translate(-42.13415324373887,-33.735197801216785),e.lineTo(42.7,48.76),e.translate(40.81489078457234,49.06734873663269),e.arc(0,0,1.91,-.16161824093711977,2.052504457600845,0),e.translate(-40.81489078457234,-49.06734873663269),e.lineTo(26.83,43.76),e.translate(25.939999999999998,45.438660180024534),e.arc(0,0,1.9,-1.083293536758034,-2.0582991168317593,1),e.translate(-25.939999999999998,-45.438660180024534),e.lineTo(11.92,50.7),e.translate(11.046023488962076,49.00168758523234),e.arc(0,0,1.91,1.0955254432622383,3.3002085355055915,0),e.translate(-11.046023488962076,-49.00168758523234),e.lineTo(11.7,34),e.translate(9.820265754085725,33.66132734870218),e.arc(0,0,1.91,.178258078542773,-.7933922953534395,1),e.translate(-9.820265754085725,-33.66132734870218),e.lineTo(.57,21.85),e.translate(1.9278161466350117,20.478418681981545),e.arc(0,0,1.93,2.351151232528948,4.5627030955491055,0),e.translate(-1.9278161466350117,-20.478418681981545),e.lineTo(16.31,16.47),e.translate(16.062056630005188,14.576161547207466),e.arc(0,0,1.91,1.4406156600933306,.4870016654036473,1),e.translate(-16.062056630005188,-14.576161547207466),e.lineTo(24.33,2.07),e.translate(26.045,2.9107585860400085),e.arc(0,0,1.91,-2.6857849028374465,-.45580775075234703,0),e.translate(-26.045,-2.9107585860400085),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForCircle=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n);return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.ellipse(a/2,a/2,n/2,n/2,0,0,360),this.renderColor(e,s),t},g.prototype.loadAndDrawImages=function(t,e){var i=this,s=this.settings.imageUrl,n=Array.isArray(s)?s:[s],r=n.length,a=0;this.images=[],n.forEach((function(s,n){i.images.push("image"+n),i.canvasses[t]["image"+n]=document.createElement("canvas");var h=i.canvasses[t]["image"+n],o=h.getContext("2d"),c=new Image;c.onload=function(){a++,i.drawImageOffscreenCanvas(c,h,o,t),e&&a===r&&e()},c.onerror=function(){console.error("failed to load source image: ",s)},c.src=s}))},g.prototype.drawImageOffscreenCanvas=function(t,e,i,s){var n=t.width;return e.width=n,e.height=n,i.drawImage(t,0,0,n,n,0,0,n,n),i.globalCompositeOperation="source-atop",i.fillStyle=s,i.fillRect(0,0,n,n),e},g.prototype.createSparticles=function(){this.sparticles=[];for(var t=0;te.size})),this.sparticles},g.prototype.drawFrame=function(){this.ctx.clearRect(0,0,this.width,this.height);for(var t=0;t0&&void 0!==arguments[0]?arguments[0]:function(){},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:60;this.fps=e,this.handler=t;var i=0;this.start=function(){var t=this;if(!this.started){var e=performance.now(),s=1e3/this.fps;i=requestAnimationFrame((function n(r){var a=r-e;i=requestAnimationFrame(n),a>=s-0&&(t.handler(a),e=r-a%s)})),this.started=!0}},this.stop=function(){cancelAnimationFrame(i),this.started=!1}},n=function(t){return[Math.cos(a(t-90)),Math.sin(a(t-90))]},r=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.max(e,Math.min(i,t))},a=function(t){return t*Math.PI/180},h=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Math.random();return t===e?i=t:(0!==t||1!==e)&&e>t&&(i=i*(e-t)+t),i},o=function(t){return t[Math.floor(h(0,t.length))]},c=function(t){return t>h()},l=function(t){return.5+t|0},p=function(t){return t?(this.canvas=t.canvas,this.images=t.images,this.settings=t.settings,this.ctx=t.canvas.getContext("2d"),this.setup(),this.init()):console.warn("Invalid parameters given to Sparticle()",arguments),this};p.prototype.setup=function(){var t=this.settings;this.frame=0,this.frameoffset=l(h(0,360)),this.size=l(h(t.minSize,t.maxSize)),this.da=this.getAlphaDelta(),this.dx=this.getDeltaX(),this.dy=this.getDeltaY(),this.dd=this.getDriftDelta(),this.dr=this.getRotationDelta(),this.shape=this.getShapeOrImage(),this.style=this.getStyle(),this.color=this.getColor(),this.rotation=t.rotate?a(h(0,360)):0},p.prototype.init=function(){var t=this.settings;this.alpha=0===t.speed&&t.alphaSpeed>0?0:h(t.minAlpha,t.maxAlpha),this.initPosition()},p.prototype.initPosition=function(){var t=this.settings,e=this.canvas;t.bounce?(this.px=l(h(2,e.width-this.size-2)),this.py=l(h(2,e.height-this.size-2))):(this.px=l(h(2*-this.size,e.width+this.size)),this.py=l(h(2*-this.size,e.height+this.size)))},p.prototype.reset=function(){this.setup(),this.py<0?this.py=this.canvas.height+2*this.size:this.py>this.canvas.height&&(this.py=0-2*this.size),this.px<0?this.px=this.canvas.width+2*this.size:this.px>this.canvas.width&&(this.px=0-2*this.size)},p.prototype.bounce=function(){(this.py<=0||this.py+this.size>=this.canvas.height)&&(this.dy=-this.dy),(this.px<=0||this.px+this.size>=this.canvas.width)&&(this.dx=-this.dx)},p.prototype.isOffCanvas=function(){var t=0-2*this.size,e=this.canvas.height+2*this.size,i=this.canvas.width+2*this.size;return this.pxi||this.pye},p.prototype.isTouchingEdge=function(){var t=this.canvas.height-this.size,e=this.canvas.width-this.size;return this.px<0||this.px>e||this.py<0||this.py>t},p.prototype.getColor=function(){if(Array.isArray(this.settings.color))return o(this.settings.color)},p.prototype.getShapeOrImage=function(){var t=this.settings.shape;if(Array.isArray(t))return"image"===t[0]&&this.images?o(this.images):o(t)},p.prototype.getStyle=function(){var t=this.settings.style;return"fill"!==t&&"stroke"!==t&&(t=o(["fill","stroke"])),t},p.prototype.getDelta=function(){var t=.1*this.settings.speed;return this.settings.speed&&this.settings.parallax?t+this.size*this.settings.parallax/50:t},p.prototype.getDeltaVariance=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=this.settings.speed||10;return t>0?h(-t,t)*e/100:0},p.prototype.getDeltaX=function(){var t=this.getDelta(),e=this.getDeltaVariance(this.settings.xVariance);return n(this.settings.direction)[0]*t+e},p.prototype.getDeltaY=function(){var t=this.getDelta(),e=this.getDeltaVariance(this.settings.yVariance);return n(this.settings.direction)[1]*t+e},p.prototype.getAlphaDelta=function(){var t=this.settings.alphaVariance,e=h(1,t+1);return c(.5)&&(e=-e),e},p.prototype.getDriftDelta=function(){return this.settings.drift?h(this.settings.drift-this.settings.drift/2,this.settings.drift+this.settings.drift/2):0},p.prototype.getRotationDelta=function(){var t=0;return this.settings.rotate&&this.settings.rotation&&(t=a(h(.5,1.5)*this.settings.rotation),c(.5)&&(t=-t)),t},p.prototype.update=function(){return this.frame+=1,this.updatePosition(),this.updateAlpha(),this},p.prototype.updateAlpha=function(){return this.settings.alphaSpeed>0&&(this.settings.twinkle?this.alpha=this.updateTwinkle():this.alpha=this.updateFade()),this.alpha},p.prototype.updateFade=function(){var t=this.da/1e3*this.settings.alphaSpeed*.5,e=this.alpha+t,i=this.da>0&&e>this.settings.maxAlpha,s=this.da<0&&ethis.settings.maxAlpha,s=t150&&this.settings.direction<210||this.settings.direction>330&&this.settings.direction<390||this.settings.direction>-30&&this.settings.direction<30?this.px+=n(this.frame+this.frameoffset)[0]*this.dd/(15*this.getDelta()):(this.settings.direction>60&&this.settings.direction<120||this.settings.direction>240&&this.settings.direction<300)&&(this.py+=n(this.frame+this.frameoffset)[1]*this.dd/(15*this.getDelta())))},p.prototype.render=function(t){var e=t[this.color][this.shape];"image"!==this.settings.shape[0]&&(e=t[this.color][this.shape][this.style]);var i=e.width,s=this.size/i,n=this.px/s,a=this.py/s;return this.renderRotate(),this.ctx.globalAlpha=r(this.alpha,0,1),this.ctx.transform(s,0,0,s,0,0),this.ctx.globalCompositeOperation!==this.settings.composition&&(this.ctx.globalCompositeOperation=this.settings.composition),this.ctx.drawImage(e,0,0,i,i,n,a,i,i),this.ctx.setTransform(1,0,0,1,0,0),this},p.prototype.renderRotate=function(){if(this.settings.rotate){var t=this.px+this.size/2,e=this.py+this.size/2;this.ctx.translate(t,e),this.ctx.rotate(this.rotation),this.ctx.translate(-t,-e)}};var g=function(t,e,s,n){arguments.length>=1&&!(arguments[0]instanceof HTMLElement)&&(e=arguments[0],s=arguments[1],n=arguments[2],t=void 0),s&&!n&&(n=s);var r={alphaSpeed:10,alphaVariance:1,bounce:!1,color:"rainbow",composition:"source-over",count:50,direction:180,drift:1,glow:0,imageUrl:"",maxAlpha:1,maxSize:10,minAlpha:0,minSize:1,parallax:1,rotate:!0,rotation:1,shape:"circle",speed:10,style:"fill",twinkle:!1,xVariance:2,yVariance:2};return this.el=t||document.body,this.settings=i({},r,{},e),this.resizable=!s&&!n,this.width=this.resizable?this.el.clientWidth:s,this.height=this.resizable?this.el.clientHeight:n,this.init()};return g.prototype.init=function(){var t=this;return this.sparticles=[],this.createColorArray(),this.createShapeArray(),this.setupMainCanvas(),this.setupOffscreenCanvasses((function(){t.createSparticles(),t.start()})),window.addEventListener("resize",this),this},g.prototype.handleEvent=function(t){var e=this;"resize"===t.type&&(clearTimeout(this.resizeTimer),this.resizeTimer=setTimeout((function(){e.resizable&&(e.width=e.el.clientWidth,e.height=e.el.clientHeight,e.setCanvasSize().resetSparticles())}),200))},g.prototype.start=function(){var t=this;this.loop||(this.loop=new s((function(e){t.drawFrame(e)}))),this.loop.start()},g.prototype.stop=function(){this.loop.stop()},g.prototype.destroy=function(){for(var t in this.stop(),this.el.removeChild(this.canvas),window.removeEventListener("resize",this),this)this.hasOwnProperty(t)&&delete this[t]},g.prototype.setCanvasSize=function(t,e){return t&&(this.resizable=!1),this.width=t||this.width,this.height=e||this.height,this.canvas.width=this.width,this.canvas.height=this.height,this},g.prototype.createColorArray=function(){if(!Array.isArray(this.settings.color))if("rainbow"===this.settings.color){this.settings.color=[];for(var t=0;t<100;t++)this.settings.color[t]=(e=void 0,i=void 0,s=void 0,e=l(h(0,360)),i=l(h(90,100)),s=l(h(45,85)),"hsl(".concat(e,",").concat(i,"%,").concat(s,"%)"))}else this.settings.color=[this.settings.color];var e,i,s;return this.settings.color},g.prototype.createShapeArray=function(){return Array.isArray(this.settings.shape)||("random"===this.settings.shape?this.settings.shape=["square","circle","triangle","diamond"]:this.settings.shape=[this.settings.shape]),this.settings.shape},g.prototype.setupMainCanvas=function(){return this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.ctx.globalCompositeOperation=this.settings.composition,this.setCanvasSize(),this.el.appendChild(this.canvas),this.canvas},g.prototype.setupOffscreenCanvasses=function(t){var e=this;this.canvasses=this.canvasses||{},this.settings.color.forEach((function(i){e.canvasses[i]=e.canvasses[i]||{},"image"===e.settings.shape[0]?e.loadAndDrawImages(i,t):e.settings.shape.forEach((function(s){e.canvasses[i][s]=e.canvasses[i][s]||{},["fill","stroke"].forEach((function(n){e.canvasses[i][s][n]=document.createElement("canvas");var r=e.canvasses[i][s][n],a=r.getContext("2d");switch(s){case"square":e.drawOffscreenCanvasForSquare(r,a,i,n),t&&t();break;case"line":e.drawOffscreenCanvasForLine(r,a,i,n),t&&t();break;case"triangle":e.drawOffscreenCanvasForTriangle(r,a,i,n),t&&t();break;case"diamond":e.drawOffscreenCanvasForDiamond(r,a,i,n),t&&t();break;case"star":e.drawOffscreenCanvasForStar(r,a,i,n),t&&t();break;case"circle":default:e.drawOffscreenCanvasForCircle(r,a,i,n),t&&t()}}))}))}))},g.prototype.getGlowSize=function(t){return this.settings.glow},g.prototype.getLineSize=function(t){return r(t/20,1,5)},g.prototype.renderStyle=function(t,e,i,s){"fill"===s?t.fillStyle=e:(t.lineWidth=i,t.strokeStyle=e)},g.prototype.renderGlow=function(t,e,i){var s=this.getGlowSize(i)/2;t.shadowColor=e,t.shadowBlur=s},g.prototype.renderColor=function(t,e){"fill"===e?t.fill():t.stroke()},g.prototype.drawOffscreenCanvasForSquare=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n);return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.rect(a/2-n/2,a/2-n/2,n,n),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForLine=function(t,e,i,s){var n=2*this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n),h=a/2-n/2,o=a/2-n/2;return t.width=a,t.height=a,this.renderGlow(e,i,n),e.lineWidth=r,e.strokeStyle=i,e.beginPath(),e.moveTo(h,o),e.lineTo(h+n,o+n),e.stroke(),e.closePath(),t},g.prototype.drawOffscreenCanvasForTriangle=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n),h=n*(Math.sqrt(3)/2),o=a/2,c=a/2-n/2;return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.moveTo(o,c),e.lineTo(o-n/2,c+h),e.lineTo(o+n/2,c+h),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForDiamond=function(t,e,i,s){var n=this.settings.maxSize,r=n/2,a=this.getLineSize(n),h=n+a+this.getGlowSize(n),o=h/2,c=.08*n,l=.02*n,p=o-r,g=o;return t.width=h,t.height=h,this.renderGlow(e,i,n),this.renderStyle(e,i,a,s),e.beginPath(),e.moveTo(p+l,g),e.bezierCurveTo(o-c/2,o-2*c,o-2*c,o-c/2,o,o-r),e.bezierCurveTo(o+2*c,o-c/2,o+c/2,o-2*c,o+r-l,o),e.bezierCurveTo(o+c/2,o+2*c,o+2*c,o+c/2,o,o+r),e.bezierCurveTo(o-2*c,o+c/2,o-c/2,o+2*c,p+l,g),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForStar=function(t,e,i,s){var n=this.getLineSize(52),r=this.getGlowSize(52),a=52+2*n+r;return t.width=a,t.height=a,this.renderGlow(e,i,52),this.renderStyle(e,i,n,s),e.translate(n/2+r/2,n/2+r/2-1),e.beginPath(),e.moveTo(27.76,2.07),e.lineTo(34.28,15.46),e.translate(36.01480792437574,14.614221385040288),e.arc(0,0,1.93,2.687967128721911,1.7293919056045395,1),e.translate(-36.01480792437574,-14.614221385040288),e.lineTo(50.37,18.7),e.translate(50.10443046629834,20.601544851632347),e.arc(0,0,1.92,-1.4320339785975214,.8159284165499665,0),e.translate(-50.10443046629834,-20.601544851632347),e.lineTo(40.78,32.36),e.translate(42.13415324373887,33.735197801216785),e.arc(0,0,1.93,-2.3484841809999386,-3.3054346524687857,1),e.translate(-42.13415324373887,-33.735197801216785),e.lineTo(42.7,48.76),e.translate(40.81489078457234,49.06734873663269),e.arc(0,0,1.91,-.16161824093711977,2.052504457600845,0),e.translate(-40.81489078457234,-49.06734873663269),e.lineTo(26.83,43.76),e.translate(25.939999999999998,45.438660180024534),e.arc(0,0,1.9,-1.083293536758034,-2.0582991168317593,1),e.translate(-25.939999999999998,-45.438660180024534),e.lineTo(11.92,50.7),e.translate(11.046023488962076,49.00168758523234),e.arc(0,0,1.91,1.0955254432622383,3.3002085355055915,0),e.translate(-11.046023488962076,-49.00168758523234),e.lineTo(11.7,34),e.translate(9.820265754085725,33.66132734870218),e.arc(0,0,1.91,.178258078542773,-.7933922953534395,1),e.translate(-9.820265754085725,-33.66132734870218),e.lineTo(.57,21.85),e.translate(1.9278161466350117,20.478418681981545),e.arc(0,0,1.93,2.351151232528948,4.5627030955491055,0),e.translate(-1.9278161466350117,-20.478418681981545),e.lineTo(16.31,16.47),e.translate(16.062056630005188,14.576161547207466),e.arc(0,0,1.91,1.4406156600933306,.4870016654036473,1),e.translate(-16.062056630005188,-14.576161547207466),e.lineTo(24.33,2.07),e.translate(26.045,2.9107585860400085),e.arc(0,0,1.91,-2.6857849028374465,-.45580775075234703,0),e.translate(-26.045,-2.9107585860400085),e.closePath(),this.renderColor(e,s),t},g.prototype.drawOffscreenCanvasForCircle=function(t,e,i,s){var n=this.settings.maxSize,r=this.getLineSize(n),a=n+r+this.getGlowSize(n);return t.width=a,t.height=a,this.renderGlow(e,i,n),this.renderStyle(e,i,r,s),e.beginPath(),e.ellipse(a/2,a/2,n/2,n/2,0,0,360),this.renderColor(e,s),t},g.prototype.loadAndDrawImages=function(t,e){var i=this,s=this.settings.imageUrl,n=Array.isArray(s)?s:[s],r=n.length,a=0;this.images=[],n.forEach((function(s,n){i.images.push("image"+n),i.canvasses[t]["image"+n]=document.createElement("canvas");var h=i.canvasses[t]["image"+n],o=h.getContext("2d"),c=new Image;c.onload=function(){a++,i.drawImageOffscreenCanvas(c,h,o,t),e&&a===r&&e()},c.onerror=function(){console.error("failed to load source image: ",s)},c.src=s}))},g.prototype.drawImageOffscreenCanvas=function(t,e,i,s){var n=t.width;return e.width=n,e.height=n,i.drawImage(t,0,0,n,n,0,0,n,n),i.globalCompositeOperation="source-atop",i.fillStyle=s,i.fillRect(0,0,n,n),e},g.prototype.resetSparticles=g.prototype.createSparticles=function(){this.sparticles=[];for(var t=0;te.size})),this.sparticles},g.prototype.drawFrame=function(){this.ctx.clearRect(0,0,this.width,this.height);for(var t=0;t