(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports;}
var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports;}
__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter});}};__webpack_require__.r=function(exports){if(typeof Symbol!=='undefined'&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:'Module'});}
Object.defineProperty(exports,'__esModule',{value:true});};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if((mode&4)&&typeof value==='object'&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,'default',{enumerable:true,value:value});if(mode&2&&typeof value!='string')for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key];}.bind(null,key));return ns;};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module['default'];}:function getModuleExports(){return module;};__webpack_require__.d(getter,'a',getter);return getter;};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property);};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s="./assets/js/hero.js");})
({"./assets/js/hero.js":/*!***************************!*\
!*** ./assets/js/hero.js ***!
\***************************//*!no static exports found*/(function(module,exports,__webpack_require__){"use strict";eval("\n\n__webpack_require__(/*! particles.js */ \"./node_modules/particles.js/particles.js\");\n\nvar heros = window.syna.api.getScope('hero');\nObject.keys(heros).forEach(function (key) {\n  var config = heros[key];\n  /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */\n  particlesJS(config.selector, config.config || {\n    \"particles\": {\n      \"number\": {\n        \"value\": 80,\n        \"density\": {\n          \"enable\": true,\n          \"value_area\": 800\n        }\n      },\n      \"color\": {\n        \"value\": \"#ffffff\"\n      },\n      \"shape\": {\n        \"type\": \"circle\",\n        \"stroke\": {\n          \"width\": 0,\n          \"color\": \"#000000\"\n        },\n        \"polygon\": {\n          \"nb_sides\": 5\n        },\n        \"image\": {\n          \"src\": \"img/github.svg\",\n          \"width\": 100,\n          \"height\": 100\n        }\n      },\n      \"opacity\": {\n        \"value\": 0.5,\n        \"random\": false,\n        \"anim\": {\n          \"enable\": false,\n          \"speed\": 1,\n          \"opacity_min\": 0.1,\n          \"sync\": false\n        }\n      },\n      \"size\": {\n        \"value\": 3,\n        \"random\": true,\n        \"anim\": {\n          \"enable\": false,\n          \"speed\": 40,\n          \"size_min\": 0.1,\n          \"sync\": false\n        }\n      },\n      \"line_linked\": {\n        \"enable\": true,\n        \"distance\": 150,\n        \"color\": \"#ffffff\",\n        \"opacity\": 0.4,\n        \"width\": 1\n      },\n      \"move\": {\n        \"enable\": true,\n        \"speed\": 6,\n        \"direction\": \"none\",\n        \"random\": false,\n        \"straight\": false,\n        \"out_mode\": \"out\",\n        \"bounce\": false,\n        \"attract\": {\n          \"enable\": false,\n          \"rotateX\": 600,\n          \"rotateY\": 1200\n        }\n      }\n    },\n    \"interactivity\": {\n      \"detect_on\": \"canvas\",\n      \"events\": {\n        \"onhover\": {\n          \"enable\": true,\n          \"mode\": \"repulse\"\n        },\n        \"onclick\": {\n          \"enable\": true,\n          \"mode\": \"push\"\n        },\n        \"resize\": true\n      },\n      \"modes\": {\n        \"grab\": {\n          \"distance\": 400,\n          \"line_linked\": {\n            \"opacity\": 1\n          }\n        },\n        \"bubble\": {\n          \"distance\": 400,\n          \"size\": 40,\n          \"duration\": 2,\n          \"opacity\": 8,\n          \"speed\": 3\n        },\n        \"repulse\": {\n          \"distance\": 200,\n          \"duration\": 0.4\n        },\n        \"push\": {\n          \"particles_nb\": 4\n        },\n        \"remove\": {\n          \"particles_nb\": 2\n        }\n      }\n    },\n    \"retina_detect\": true\n  });\n});\n\n//# sourceURL=webpack:///./assets/js/hero.js?");}),"./node_modules/particles.js/particles.js":/*!************************************************!*\
!*** ./node_modules/particles.js/particles.js ***!
\************************************************//*!no static exports found*/(function(module,exports){eval("/* -----------------------------------------------\n/* Author : Vincent Garreau  - vincentgarreau.com\n/* MIT license: http://opensource.org/licenses/MIT\n/* Demo / Generator : vincentgarreau.com/particles.js\n/* GitHub : github.com/VincentGarreau/particles.js\n/* How to use? : Check the GitHub README\n/* v2.0.0\n/* ----------------------------------------------- */\n\nvar pJS = function(tag_id, params){\n\n  var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');\n\n  /* particles.js variables with default values */\n  this.pJS = {\n    canvas: {\n      el: canvas_el,\n      w: canvas_el.offsetWidth,\n      h: canvas_el.offsetHeight\n    },\n    particles: {\n      number: {\n        value: 400,\n        density: {\n          enable: true,\n          value_area: 800\n        }\n      },\n      color: {\n        value: '#fff'\n      },\n      shape: {\n        type: 'circle',\n        stroke: {\n          width: 0,\n          color: '#ff0000'\n        },\n        polygon: {\n          nb_sides: 5\n        },\n        image: {\n          src: '',\n          width: 100,\n          height: 100\n        }\n      },\n      opacity: {\n        value: 1,\n        random: false,\n        anim: {\n          enable: false,\n          speed: 2,\n          opacity_min: 0,\n          sync: false\n        }\n      },\n      size: {\n        value: 20,\n        random: false,\n        anim: {\n          enable: false,\n          speed: 20,\n          size_min: 0,\n          sync: false\n        }\n      },\n      line_linked: {\n        enable: true,\n        distance: 100,\n        color: '#fff',\n        opacity: 1,\n        width: 1\n      },\n      move: {\n        enable: true,\n        speed: 2,\n        direction: 'none',\n        random: false,\n        straight: false,\n        out_mode: 'out',\n        bounce: false,\n        attract: {\n          enable: false,\n          rotateX: 3000,\n          rotateY: 3000\n        }\n      },\n      array: []\n    },\n    interactivity: {\n      detect_on: 'canvas',\n      events: {\n        onhover: {\n          enable: true,\n          mode: 'grab'\n        },\n        onclick: {\n          enable: true,\n          mode: 'push'\n        },\n        resize: true\n      },\n      modes: {\n        grab:{\n          distance: 100,\n          line_linked:{\n            opacity: 1\n          }\n        },\n        bubble:{\n          distance: 200,\n          size: 80,\n          duration: 0.4\n        },\n        repulse:{\n          distance: 200,\n          duration: 0.4\n        },\n        push:{\n          particles_nb: 4\n        },\n        remove:{\n          particles_nb: 2\n        }\n      },\n      mouse:{}\n    },\n    retina_detect: false,\n    fn: {\n      interact: {},\n      modes: {},\n      vendors:{}\n    },\n    tmp: {}\n  };\n\n  var pJS = this.pJS;\n\n  /* params settings */\n  if(params){\n    Object.deepExtend(pJS, params);\n  }\n\n  pJS.tmp.obj = {\n    size_value: pJS.particles.size.value,\n    size_anim_speed: pJS.particles.size.anim.speed,\n    move_speed: pJS.particles.move.speed,\n    line_linked_distance: pJS.particles.line_linked.distance,\n    line_linked_width: pJS.particles.line_linked.width,\n    mode_grab_distance: pJS.interactivity.modes.grab.distance,\n    mode_bubble_distance: pJS.interactivity.modes.bubble.distance,\n    mode_bubble_size: pJS.interactivity.modes.bubble.size,\n    mode_repulse_distance: pJS.interactivity.modes.repulse.distance\n  };\n\n\n  pJS.fn.retinaInit = function(){\n\n    if(pJS.retina_detect && window.devicePixelRatio > 1){\n      pJS.canvas.pxratio = window.devicePixelRatio; \n      pJS.tmp.retina = true;\n    } \n    else{\n      pJS.canvas.pxratio = 1;\n      pJS.tmp.retina = false;\n    }\n\n    pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;\n    pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;\n\n    pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;\n    pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;\n    pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;\n    pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;\n    pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;\n    pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;\n    pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;\n    pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;\n    pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;\n\n  };\n\n\n\n  /* ---------- pJS functions - canvas ------------ */\n\n  pJS.fn.canvasInit = function(){\n    pJS.canvas.ctx = pJS.canvas.el.getContext('2d');\n  };\n\n  pJS.fn.canvasSize = function(){\n\n    pJS.canvas.el.width = pJS.canvas.w;\n    pJS.canvas.el.height = pJS.canvas.h;\n\n    if(pJS && pJS.interactivity.events.resize){\n\n      window.addEventListener('resize', function(){\n\n          pJS.canvas.w = pJS.canvas.el.offsetWidth;\n          pJS.canvas.h = pJS.canvas.el.offsetHeight;\n\n          /* resize canvas */\n          if(pJS.tmp.retina){\n            pJS.canvas.w *= pJS.canvas.pxratio;\n            pJS.canvas.h *= pJS.canvas.pxratio;\n          }\n\n          pJS.canvas.el.width = pJS.canvas.w;\n          pJS.canvas.el.height = pJS.canvas.h;\n\n          /* repaint canvas on anim disabled */\n          if(!pJS.particles.move.enable){\n            pJS.fn.particlesEmpty();\n            pJS.fn.particlesCreate();\n            pJS.fn.particlesDraw();\n            pJS.fn.vendors.densityAutoParticles();\n          }\n\n        /* density particles enabled */\n        pJS.fn.vendors.densityAutoParticles();\n\n      });\n\n    }\n\n  };\n\n\n  pJS.fn.canvasPaint = function(){\n    pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);\n  };\n\n  pJS.fn.canvasClear = function(){\n    pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);\n  };\n\n\n  /* --------- pJS functions - particles ----------- */\n\n  pJS.fn.particle = function(color, opacity, position){\n\n    /* size */\n    this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;\n    if(pJS.particles.size.anim.enable){\n      this.size_status = false;\n      this.vs = pJS.particles.size.anim.speed / 100;\n      if(!pJS.particles.size.anim.sync){\n        this.vs = this.vs * Math.random();\n      }\n    }\n\n    /* position */\n    this.x = position ? position.x : Math.random() * pJS.canvas.w;\n    this.y = position ? position.y : Math.random() * pJS.canvas.h;\n\n    /* check position  - into the canvas */\n    if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius;\n    else if(this.x < this.radius*2) this.x = this.x + this.radius;\n    if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;\n    else if(this.y < this.radius*2) this.y = this.y + this.radius;\n\n    /* check position - avoid overlap */\n    if(pJS.particles.move.bounce){\n      pJS.fn.vendors.checkOverlap(this, position);\n    }\n\n    /* color */\n    this.color = {};\n    if(typeof(color.value) == 'object'){\n\n      if(color.value instanceof Array){\n        var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];\n        this.color.rgb = hexToRgb(color_selected);\n      }else{\n        if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){\n          this.color.rgb = {\n            r: color.value.r,\n            g: color.value.g,\n            b: color.value.b\n          }\n        }\n        if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){\n          this.color.hsl = {\n            h: color.value.h,\n            s: color.value.s,\n            l: color.value.l\n          }\n        }\n      }\n\n    }\n    else if(color.value == 'random'){\n      this.color.rgb = {\n        r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),\n        g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),\n        b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)\n      }\n    }\n    else if(typeof(color.value) == 'string'){\n      this.color = color;\n      this.color.rgb = hexToRgb(this.color.value);\n    }\n\n    /* opacity */\n    this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;\n    if(pJS.particles.opacity.anim.enable){\n      this.opacity_status = false;\n      this.vo = pJS.particles.opacity.anim.speed / 100;\n      if(!pJS.particles.opacity.anim.sync){\n        this.vo = this.vo * Math.random();\n      }\n    }\n\n    /* animation - velocity for speed */\n    var velbase = {}\n    switch(pJS.particles.move.direction){\n      case 'top':\n        velbase = { x:0, y:-1 };\n      break;\n      case 'top-right':\n        velbase = { x:0.5, y:-0.5 };\n      break;\n      case 'right':\n        velbase = { x:1, y:-0 };\n      break;\n      case 'bottom-right':\n        velbase = { x:0.5, y:0.5 };\n      break;\n      case 'bottom':\n        velbase = { x:0, y:1 };\n      break;\n      case 'bottom-left':\n        velbase = { x:-0.5, y:1 };\n      break;\n      case 'left':\n        velbase = { x:-1, y:0 };\n      break;\n      case 'top-left':\n        velbase = { x:-0.5, y:-0.5 };\n      break;\n      default:\n        velbase = { x:0, y:0 };\n      break;\n    }\n\n    if(pJS.particles.move.straight){\n      this.vx = velbase.x;\n      this.vy = velbase.y;\n      if(pJS.particles.move.random){\n        this.vx = this.vx * (Math.random());\n        this.vy = this.vy * (Math.random());\n      }\n    }else{\n      this.vx = velbase.x + Math.random()-0.5;\n      this.vy = velbase.y + Math.random()-0.5;\n    }\n\n    // var theta = 2.0 * Math.PI * Math.random();\n    // this.vx = Math.cos(theta);\n    // this.vy = Math.sin(theta);\n\n    this.vx_i = this.vx;\n    this.vy_i = this.vy;\n\n    \n\n    /* if shape is image */\n\n    var shape_type = pJS.particles.shape.type;\n    if(typeof(shape_type) == 'object'){\n      if(shape_type instanceof Array){\n        var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];\n        this.shape = shape_selected;\n      }\n    }else{\n      this.shape = shape_type;\n    }\n\n    if(this.shape == 'image'){\n      var sh = pJS.particles.shape;\n      this.img = {\n        src: sh.image.src,\n        ratio: sh.image.width / sh.image.height\n      }\n      if(!this.img.ratio) this.img.ratio = 1;\n      if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){\n        pJS.fn.vendors.createSvgImg(this);\n        if(pJS.tmp.pushing){\n          this.img.loaded = false;\n        }\n      }\n    }\n\n    \n\n  };\n\n\n  pJS.fn.particle.prototype.draw = function() {\n\n    var p = this;\n\n    if(p.radius_bubble != undefined){\n      var radius = p.radius_bubble; \n    }else{\n      var radius = p.radius;\n    }\n\n    if(p.opacity_bubble != undefined){\n      var opacity = p.opacity_bubble;\n    }else{\n      var opacity = p.opacity;\n    }\n\n    if(p.color.rgb){\n      var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')';\n    }else{\n      var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')';\n    }\n\n    pJS.canvas.ctx.fillStyle = color_value;\n    pJS.canvas.ctx.beginPath();\n\n    switch(p.shape){\n\n      case 'circle':\n        pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);\n      break;\n\n      case 'edge':\n        pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2);\n      break;\n\n      case 'triangle':\n        pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2);\n      break;\n\n      case 'polygon':\n        pJS.fn.vendors.drawShape(\n          pJS.canvas.ctx,\n          p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX\n          p.y - radius / (2.66/3.5), // startY\n          radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength\n          pJS.particles.shape.polygon.nb_sides, // sideCountNumerator\n          1 // sideCountDenominator\n        );\n      break;\n\n      case 'star':\n        pJS.fn.vendors.drawShape(\n          pJS.canvas.ctx,\n          p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX\n          p.y - radius / (2*2.66/3.5), // startY\n          radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength\n          pJS.particles.shape.polygon.nb_sides, // sideCountNumerator\n          2 // sideCountDenominator\n        );\n      break;\n\n      case 'image':\n\n        function draw(){\n          pJS.canvas.ctx.drawImage(\n            img_obj,\n            p.x-radius,\n            p.y-radius,\n            radius*2,\n            radius*2 / p.img.ratio\n          );\n        }\n\n        if(pJS.tmp.img_type == 'svg'){\n          var img_obj = p.img.obj;\n        }else{\n          var img_obj = pJS.tmp.img_obj;\n        }\n\n        if(img_obj){\n          draw();\n        }\n\n      break;\n\n    }\n\n    pJS.canvas.ctx.closePath();\n\n    if(pJS.particles.shape.stroke.width > 0){\n      pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;\n      pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;\n      pJS.canvas.ctx.stroke();\n    }\n    \n    pJS.canvas.ctx.fill();\n    \n  };\n\n\n  pJS.fn.particlesCreate = function(){\n    for(var i = 0; i < pJS.particles.number.value; i++) {\n      pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));\n    }\n  };\n\n  pJS.fn.particlesUpdate = function(){\n\n    for(var i = 0; i < pJS.particles.array.length; i++){\n\n      /* the particle */\n      var p = pJS.particles.array[i];\n\n      // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;\n      // var f = -BANG_SIZE / d;\n      // if ( d < BANG_SIZE ) {\n      //     var t = Math.atan2( dy, dx );\n      //     p.vx = f * Math.cos(t);\n      //     p.vy = f * Math.sin(t);\n      // }\n\n      /* move the particle */\n      if(pJS.particles.move.enable){\n        var ms = pJS.particles.move.speed/2;\n        p.x += p.vx * ms;\n        p.y += p.vy * ms;\n      }\n\n      /* change opacity status */\n      if(pJS.particles.opacity.anim.enable) {\n        if(p.opacity_status == true) {\n          if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;\n          p.opacity += p.vo;\n        }else {\n          if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;\n          p.opacity -= p.vo;\n        }\n        if(p.opacity < 0) p.opacity = 0;\n      }\n\n      /* change size */\n      if(pJS.particles.size.anim.enable){\n        if(p.size_status == true){\n          if(p.radius >= pJS.particles.size.value) p.size_status = false;\n          p.radius += p.vs;\n        }else{\n          if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;\n          p.radius -= p.vs;\n        }\n        if(p.radius < 0) p.radius = 0;\n      }\n\n      /* change particle position if it is out of canvas */\n      if(pJS.particles.move.out_mode == 'bounce'){\n        var new_pos = {\n          x_left: p.radius,\n          x_right:  pJS.canvas.w,\n          y_top: p.radius,\n          y_bottom: pJS.canvas.h\n        }\n      }else{\n        var new_pos = {\n          x_left: -p.radius,\n          x_right: pJS.canvas.w + p.radius,\n          y_top: -p.radius,\n          y_bottom: pJS.canvas.h + p.radius\n        }\n      }\n\n      if(p.x - p.radius > pJS.canvas.w){\n        p.x = new_pos.x_left;\n        p.y = Math.random() * pJS.canvas.h;\n      }\n      else if(p.x + p.radius < 0){\n        p.x = new_pos.x_right;\n        p.y = Math.random() * pJS.canvas.h;\n      }\n      if(p.y - p.radius > pJS.canvas.h){\n        p.y = new_pos.y_top;\n        p.x = Math.random() * pJS.canvas.w;\n      }\n      else if(p.y + p.radius < 0){\n        p.y = new_pos.y_bottom;\n        p.x = Math.random() * pJS.canvas.w;\n      }\n\n      /* out of canvas modes */\n      switch(pJS.particles.move.out_mode){\n        case 'bounce':\n          if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;\n          else if (p.x - p.radius < 0) p.vx = -p.vx;\n          if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;\n          else if (p.y - p.radius < 0) p.vy = -p.vy;\n        break;\n      }\n\n      /* events */\n      if(isInArray('grab', pJS.interactivity.events.onhover.mode)){\n        pJS.fn.modes.grabParticle(p);\n      }\n\n      if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){\n        pJS.fn.modes.bubbleParticle(p);\n      }\n\n      if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){\n        pJS.fn.modes.repulseParticle(p);\n      }\n\n      /* interaction auto between particles */\n      if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){\n        for(var j = i + 1; j < pJS.particles.array.length; j++){\n          var p2 = pJS.particles.array[j];\n\n          /* link particles */\n          if(pJS.particles.line_linked.enable){\n            pJS.fn.interact.linkParticles(p,p2);\n          }\n\n          /* attract particles */\n          if(pJS.particles.move.attract.enable){\n            pJS.fn.interact.attractParticles(p,p2);\n          }\n\n          /* bounce particles */\n          if(pJS.particles.move.bounce){\n            pJS.fn.interact.bounceParticles(p,p2);\n          }\n\n        }\n      }\n\n\n    }\n\n  };\n\n  pJS.fn.particlesDraw = function(){\n\n    /* clear canvas */\n    pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);\n\n    /* update each particles param */\n    pJS.fn.particlesUpdate();\n\n    /* draw each particle */\n    for(var i = 0; i < pJS.particles.array.length; i++){\n      var p = pJS.particles.array[i];\n      p.draw();\n    }\n\n  };\n\n  pJS.fn.particlesEmpty = function(){\n    pJS.particles.array = [];\n  };\n\n  pJS.fn.particlesRefresh = function(){\n\n    /* init all */\n    cancelRequestAnimFrame(pJS.fn.checkAnimFrame);\n    cancelRequestAnimFrame(pJS.fn.drawAnimFrame);\n    pJS.tmp.source_svg = undefined;\n    pJS.tmp.img_obj = undefined;\n    pJS.tmp.count_svg = 0;\n    pJS.fn.particlesEmpty();\n    pJS.fn.canvasClear();\n    \n    /* restart */\n    pJS.fn.vendors.start();\n\n  };\n\n\n  /* ---------- pJS functions - particles interaction ------------ */\n\n  pJS.fn.interact.linkParticles = function(p1, p2){\n\n    var dx = p1.x - p2.x,\n        dy = p1.y - p2.y,\n        dist = Math.sqrt(dx*dx + dy*dy);\n\n    /* draw a line between p1 and p2 if the distance between them is under the config distance */\n    if(dist <= pJS.particles.line_linked.distance){\n\n      var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;\n\n      if(opacity_line > 0){        \n        \n        /* style */\n        var color_line = pJS.particles.line_linked.color_rgb_line;\n        pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';\n        pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;\n        //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */\n        \n        /* path */\n        pJS.canvas.ctx.beginPath();\n        pJS.canvas.ctx.moveTo(p1.x, p1.y);\n        pJS.canvas.ctx.lineTo(p2.x, p2.y);\n        pJS.canvas.ctx.stroke();\n        pJS.canvas.ctx.closePath();\n\n      }\n\n    }\n\n  };\n\n\n  pJS.fn.interact.attractParticles  = function(p1, p2){\n\n    /* condensed particles */\n    var dx = p1.x - p2.x,\n        dy = p1.y - p2.y,\n        dist = Math.sqrt(dx*dx + dy*dy);\n\n    if(dist <= pJS.particles.line_linked.distance){\n\n      var ax = dx/(pJS.particles.move.attract.rotateX*1000),\n          ay = dy/(pJS.particles.move.attract.rotateY*1000);\n\n      p1.vx -= ax;\n      p1.vy -= ay;\n\n      p2.vx += ax;\n      p2.vy += ay;\n\n    }\n    \n\n  }\n\n\n  pJS.fn.interact.bounceParticles = function(p1, p2){\n\n    var dx = p1.x - p2.x,\n        dy = p1.y - p2.y,\n        dist = Math.sqrt(dx*dx + dy*dy),\n        dist_p = p1.radius+p2.radius;\n\n    if(dist <= dist_p){\n      p1.vx = -p1.vx;\n      p1.vy = -p1.vy;\n\n      p2.vx = -p2.vx;\n      p2.vy = -p2.vy;\n    }\n\n  }\n\n\n  /* ---------- pJS functions - modes events ------------ */\n\n  pJS.fn.modes.pushParticles = function(nb, pos){\n\n    pJS.tmp.pushing = true;\n\n    for(var i = 0; i < nb; i++){\n      pJS.particles.array.push(\n        new pJS.fn.particle(\n          pJS.particles.color,\n          pJS.particles.opacity.value,\n          {\n            'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,\n            'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h\n          }\n        )\n      )\n      if(i == nb-1){\n        if(!pJS.particles.move.enable){\n          pJS.fn.particlesDraw();\n        }\n        pJS.tmp.pushing = false;\n      }\n    }\n\n  };\n\n\n  pJS.fn.modes.removeParticles = function(nb){\n\n    pJS.particles.array.splice(0, nb);\n    if(!pJS.particles.move.enable){\n      pJS.fn.particlesDraw();\n    }\n\n  };\n\n\n  pJS.fn.modes.bubbleParticle = function(p){\n\n    /* on hover event */\n    if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){\n\n      var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,\n          dy_mouse = p.y - pJS.interactivity.mouse.pos_y,\n          dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),\n          ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;\n\n      function init(){\n        p.opacity_bubble = p.opacity;\n        p.radius_bubble = p.radius;\n      }\n\n      /* mousemove - check ratio */\n      if(dist_mouse <= pJS.interactivity.modes.bubble.distance){\n\n        if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){\n          \n          /* size */\n          if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){\n\n            if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){\n              var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio);\n              if(size >= 0){\n                p.radius_bubble = size;\n              }\n            }else{\n              var dif = p.radius - pJS.interactivity.modes.bubble.size,\n                  size = p.radius - (dif*ratio);\n              if(size > 0){\n                p.radius_bubble = size;\n              }else{\n                p.radius_bubble = 0;\n              }\n            }\n\n          }\n\n          /* opacity */\n          if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){\n\n            if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){\n              var opacity = pJS.interactivity.modes.bubble.opacity*ratio;\n              if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){\n                p.opacity_bubble = opacity;\n              }\n            }else{\n              var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio;\n              if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){\n                p.opacity_bubble = opacity;\n              }\n            }\n\n          }\n\n        }\n\n      }else{\n        init();\n      }\n\n\n      /* mouseleave */\n      if(pJS.interactivity.status == 'mouseleave'){\n        init();\n      }\n    \n    }\n\n    /* on click event */\n    else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){\n\n\n      if(pJS.tmp.bubble_clicking){\n        var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,\n            dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,\n            dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),\n            time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000;\n\n        if(time_spent > pJS.interactivity.modes.bubble.duration){\n          pJS.tmp.bubble_duration_end = true;\n        }\n\n        if(time_spent > pJS.interactivity.modes.bubble.duration*2){\n          pJS.tmp.bubble_clicking = false;\n          pJS.tmp.bubble_duration_end = false;\n        }\n      }\n\n\n      function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){\n\n        if(bubble_param != particles_param){\n\n          if(!pJS.tmp.bubble_duration_end){\n            if(dist_mouse <= pJS.interactivity.modes.bubble.distance){\n              if(p_obj_bubble != undefined) var obj = p_obj_bubble;\n              else var obj = p_obj;\n              if(obj != bubble_param){\n                var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);\n                if(id == 'size') p.radius_bubble = value;\n                if(id == 'opacity') p.opacity_bubble = value;\n              }\n            }else{\n              if(id == 'size') p.radius_bubble = undefined;\n              if(id == 'opacity') p.opacity_bubble = undefined;\n            }\n          }else{\n            if(p_obj_bubble != undefined){\n              var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),\n                  dif = bubble_param - value_tmp;\n                  value = bubble_param + dif;\n              if(id == 'size') p.radius_bubble = value;\n              if(id == 'opacity') p.opacity_bubble = value;\n            }\n          }\n\n        }\n\n      }\n\n      if(pJS.tmp.bubble_clicking){\n        /* size */\n        process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');\n        /* opacity */\n        process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');\n      }\n\n    }\n\n  };\n\n\n  pJS.fn.modes.repulseParticle = function(p){\n\n    if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {\n\n      var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,\n          dy_mouse = p.y - pJS.interactivity.mouse.pos_y,\n          dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);\n\n      var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse},\n          repulseRadius = pJS.interactivity.modes.repulse.distance,\n          velocity = 100,\n          repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);\n      \n      var pos = {\n        x: p.x + normVec.x * repulseFactor,\n        y: p.y + normVec.y * repulseFactor\n      }\n\n      if(pJS.particles.move.out_mode == 'bounce'){\n        if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;\n        if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;\n      }else{\n        p.x = pos.x;\n        p.y = pos.y;\n      }\n    \n    }\n\n\n    else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {\n\n      if(!pJS.tmp.repulse_finish){\n        pJS.tmp.repulse_count++;\n        if(pJS.tmp.repulse_count == pJS.particles.array.length){\n          pJS.tmp.repulse_finish = true;\n        }\n      }\n\n      if(pJS.tmp.repulse_clicking){\n\n        var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3);\n\n        var dx = pJS.interactivity.mouse.click_pos_x - p.x,\n            dy = pJS.interactivity.mouse.click_pos_y - p.y,\n            d = dx*dx + dy*dy;\n\n        var force = -repulseRadius / d * 1;\n\n        function process(){\n\n          var f = Math.atan2(dy,dx);\n          p.vx = force * Math.cos(f);\n          p.vy = force * Math.sin(f);\n\n          if(pJS.particles.move.out_mode == 'bounce'){\n            var pos = {\n              x: p.x + p.vx,\n              y: p.y + p.vy\n            }\n            if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;\n            else if (pos.x - p.radius < 0) p.vx = -p.vx;\n            if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;\n            else if (pos.y - p.radius < 0) p.vy = -p.vy;\n          }\n\n        }\n\n        // default\n        if(d <= repulseRadius){\n          process();\n        }\n\n        // bang - slow motion mode\n        // if(!pJS.tmp.repulse_finish){\n        //   if(d <= repulseRadius){\n        //     process();\n        //   }\n        // }else{\n        //   process();\n        // }\n        \n\n      }else{\n\n        if(pJS.tmp.repulse_clicking == false){\n\n          p.vx = p.vx_i;\n          p.vy = p.vy_i;\n        \n        }\n\n      }\n\n    }\n\n  }\n\n\n  pJS.fn.modes.grabParticle = function(p){\n\n    if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){\n\n      var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,\n          dy_mouse = p.y - pJS.interactivity.mouse.pos_y,\n          dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);\n\n      /* draw a line between the cursor and the particle if the distance between them is under the config distance */\n      if(dist_mouse <= pJS.interactivity.modes.grab.distance){\n\n        var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;\n\n        if(opacity_line > 0){\n\n          /* style */\n          var color_line = pJS.particles.line_linked.color_rgb_line;\n          pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';\n          pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;\n          //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */\n          \n          /* path */\n          pJS.canvas.ctx.beginPath();\n          pJS.canvas.ctx.moveTo(p.x, p.y);\n          pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);\n          pJS.canvas.ctx.stroke();\n          pJS.canvas.ctx.closePath();\n\n        }\n\n      }\n\n    }\n\n  };\n\n\n\n  /* ---------- pJS functions - vendors ------------ */\n\n  pJS.fn.vendors.eventsListeners = function(){\n\n    /* events target element */\n    if(pJS.interactivity.detect_on == 'window'){\n      pJS.interactivity.el = window;\n    }else{\n      pJS.interactivity.el = pJS.canvas.el;\n    }\n\n\n    /* detect mouse pos - on hover / click event */\n    if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){\n\n      /* el on mousemove */\n      pJS.interactivity.el.addEventListener('mousemove', function(e){\n\n        if(pJS.interactivity.el == window){\n          var pos_x = e.clientX,\n              pos_y = e.clientY;\n        }\n        else{\n          var pos_x = e.offsetX || e.clientX,\n              pos_y = e.offsetY || e.clientY;\n        }\n\n        pJS.interactivity.mouse.pos_x = pos_x;\n        pJS.interactivity.mouse.pos_y = pos_y;\n\n        if(pJS.tmp.retina){\n          pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;\n          pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;\n        }\n\n        pJS.interactivity.status = 'mousemove';\n\n      });\n\n      /* el on onmouseleave */\n      pJS.interactivity.el.addEventListener('mouseleave', function(e){\n\n        pJS.interactivity.mouse.pos_x = null;\n        pJS.interactivity.mouse.pos_y = null;\n        pJS.interactivity.status = 'mouseleave';\n\n      });\n\n    }\n\n    /* on click event */\n    if(pJS.interactivity.events.onclick.enable){\n\n      pJS.interactivity.el.addEventListener('click', function(){\n\n        pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;\n        pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;\n        pJS.interactivity.mouse.click_time = new Date().getTime();\n\n        if(pJS.interactivity.events.onclick.enable){\n\n          switch(pJS.interactivity.events.onclick.mode){\n\n            case 'push':\n              if(pJS.particles.move.enable){\n                pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);\n              }else{\n                if(pJS.interactivity.modes.push.particles_nb == 1){\n                  pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);\n                }\n                else if(pJS.interactivity.modes.push.particles_nb > 1){\n                  pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);\n                }\n              }\n            break;\n\n            case 'remove':\n              pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);\n            break;\n\n            case 'bubble':\n              pJS.tmp.bubble_clicking = true;\n            break;\n\n            case 'repulse':\n              pJS.tmp.repulse_clicking = true;\n              pJS.tmp.repulse_count = 0;\n              pJS.tmp.repulse_finish = false;\n              setTimeout(function(){\n                pJS.tmp.repulse_clicking = false;\n              }, pJS.interactivity.modes.repulse.duration*1000)\n            break;\n\n          }\n\n        }\n\n      });\n        \n    }\n\n\n  };\n\n  pJS.fn.vendors.densityAutoParticles = function(){\n\n    if(pJS.particles.number.density.enable){\n\n      /* calc area */\n      var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;\n      if(pJS.tmp.retina){\n        area = area/(pJS.canvas.pxratio*2);\n      }\n\n      /* calc number of particles based on density area */\n      var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;\n\n      /* add or remove X particles */\n      var missing_particles = pJS.particles.array.length - nb_particles;\n      if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));\n      else pJS.fn.modes.removeParticles(missing_particles);\n\n    }\n\n  };\n\n\n  pJS.fn.vendors.checkOverlap = function(p1, position){\n    for(var i = 0; i < pJS.particles.array.length; i++){\n      var p2 = pJS.particles.array[i];\n\n      var dx = p1.x - p2.x,\n          dy = p1.y - p2.y,\n          dist = Math.sqrt(dx*dx + dy*dy);\n\n      if(dist <= p1.radius + p2.radius){\n        p1.x = position ? position.x : Math.random() * pJS.canvas.w;\n        p1.y = position ? position.y : Math.random() * pJS.canvas.h;\n        pJS.fn.vendors.checkOverlap(p1);\n      }\n    }\n  };\n\n\n  pJS.fn.vendors.createSvgImg = function(p){\n\n    /* set color to svg element */\n    var svgXml = pJS.tmp.source_svg,\n        rgbHex = /#([0-9A-F]{3,6})/gi,\n        coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {\n          if(p.color.rgb){\n            var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')';\n          }else{\n            var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')';\n          }\n          return color_value;\n        });\n\n    /* prepare to create img with colored svg */\n    var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),\n        DOMURL = window.URL || window.webkitURL || window,\n        url = DOMURL.createObjectURL(svg);\n\n    /* create particle img obj */\n    var img = new Image();\n    img.addEventListener('load', function(){\n      p.img.obj = img;\n      p.img.loaded = true;\n      DOMURL.revokeObjectURL(url);\n      pJS.tmp.count_svg++;\n    });\n    img.src = url;\n\n  };\n\n\n  pJS.fn.vendors.destroypJS = function(){\n    cancelAnimationFrame(pJS.fn.drawAnimFrame);\n    canvas_el.remove();\n    pJSDom = null;\n  };\n\n\n  pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){\n\n    // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/\n    var sideCount = sideCountNumerator * sideCountDenominator;\n    var decimalSides = sideCountNumerator / sideCountDenominator;\n    var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;\n    var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians\n    c.save();\n    c.beginPath();\n    c.translate(startX, startY);\n    c.moveTo(0,0);\n    for (var i = 0; i < sideCount; i++) {\n      c.lineTo(sideLength,0);\n      c.translate(sideLength,0);\n      c.rotate(interiorAngle);\n    }\n    //c.stroke();\n    c.fill();\n    c.restore();\n\n  };\n\n  pJS.fn.vendors.exportImg = function(){\n    window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');\n  };\n\n\n  pJS.fn.vendors.loadImg = function(type){\n\n    pJS.tmp.img_error = undefined;\n\n    if(pJS.particles.shape.image.src != ''){\n\n      if(type == 'svg'){\n\n        var xhr = new XMLHttpRequest();\n        xhr.open('GET', pJS.particles.shape.image.src);\n        xhr.onreadystatechange = function (data) {\n          if(xhr.readyState == 4){\n            if(xhr.status == 200){\n              pJS.tmp.source_svg = data.currentTarget.response;\n              pJS.fn.vendors.checkBeforeDraw();\n            }else{\n              console.log('Error pJS - Image not found');\n              pJS.tmp.img_error = true;\n            }\n          }\n        }\n        xhr.send();\n\n      }else{\n\n        var img = new Image();\n        img.addEventListener('load', function(){\n          pJS.tmp.img_obj = img;\n          pJS.fn.vendors.checkBeforeDraw();\n        });\n        img.src = pJS.particles.shape.image.src;\n\n      }\n\n    }else{\n      console.log('Error pJS - No image.src');\n      pJS.tmp.img_error = true;\n    }\n\n  };\n\n\n  pJS.fn.vendors.draw = function(){\n\n    if(pJS.particles.shape.type == 'image'){\n\n      if(pJS.tmp.img_type == 'svg'){\n\n        if(pJS.tmp.count_svg >= pJS.particles.number.value){\n          pJS.fn.particlesDraw();\n          if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);\n          else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);\n        }else{\n          //console.log('still loading...');\n          if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);\n        }\n\n      }else{\n\n        if(pJS.tmp.img_obj != undefined){\n          pJS.fn.particlesDraw();\n          if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);\n          else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);\n        }else{\n          if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);\n        }\n\n      }\n\n    }else{\n      pJS.fn.particlesDraw();\n      if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);\n      else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);\n    }\n\n  };\n\n\n  pJS.fn.vendors.checkBeforeDraw = function(){\n\n    // if shape is image\n    if(pJS.particles.shape.type == 'image'){\n\n      if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){\n        pJS.tmp.checkAnimFrame = requestAnimFrame(check);\n      }else{\n        //console.log('images loaded! cancel check');\n        cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);\n        if(!pJS.tmp.img_error){\n          pJS.fn.vendors.init();\n          pJS.fn.vendors.draw();\n        }\n        \n      }\n\n    }else{\n      pJS.fn.vendors.init();\n      pJS.fn.vendors.draw();\n    }\n\n  };\n\n\n  pJS.fn.vendors.init = function(){\n\n    /* init canvas + particles */\n    pJS.fn.retinaInit();\n    pJS.fn.canvasInit();\n    pJS.fn.canvasSize();\n    pJS.fn.canvasPaint();\n    pJS.fn.particlesCreate();\n    pJS.fn.vendors.densityAutoParticles();\n\n    /* particles.line_linked - convert hex colors to rgb */\n    pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);\n\n  };\n\n\n  pJS.fn.vendors.start = function(){\n\n    if(isInArray('image', pJS.particles.shape.type)){\n      pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);\n      pJS.fn.vendors.loadImg(pJS.tmp.img_type);\n    }else{\n      pJS.fn.vendors.checkBeforeDraw();\n    }\n\n  };\n\n\n\n\n  /* ---------- pJS - start ------------ */\n\n\n  pJS.fn.vendors.eventsListeners();\n\n  pJS.fn.vendors.start();\n  \n\n\n};\n\n/* ---------- global functions - vendors ------------ */\n\nObject.deepExtend = function(destination, source) {\n  for (var property in source) {\n    if (source[property] && source[property].constructor &&\n     source[property].constructor === Object) {\n      destination[property] = destination[property] || {};\n      arguments.callee(destination[property], source[property]);\n    } else {\n      destination[property] = source[property];\n    }\n  }\n  return destination;\n};\n\nwindow.requestAnimFrame = (function(){\n  return  window.requestAnimationFrame ||\n    window.webkitRequestAnimationFrame ||\n    window.mozRequestAnimationFrame    ||\n    window.oRequestAnimationFrame      ||\n    window.msRequestAnimationFrame     ||\n    function(callback){\n      window.setTimeout(callback, 1000 / 60);\n    };\n})();\n\nwindow.cancelRequestAnimFrame = ( function() {\n  return window.cancelAnimationFrame         ||\n    window.webkitCancelRequestAnimationFrame ||\n    window.mozCancelRequestAnimationFrame    ||\n    window.oCancelRequestAnimationFrame      ||\n    window.msCancelRequestAnimationFrame     ||\n    clearTimeout\n} )();\n\nfunction hexToRgb(hex){\n  // By Tim Down - http://stackoverflow.com/a/5624139/3493650\n  // Expand shorthand form (e.g. \"03F\") to full form (e.g. \"0033FF\")\n  var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n     return r + r + g + g + b + b;\n  });\n  var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result ? {\n      r: parseInt(result[1], 16),\n      g: parseInt(result[2], 16),\n      b: parseInt(result[3], 16)\n  } : null;\n};\n\nfunction clamp(number, min, max) {\n  return Math.min(Math.max(number, min), max);\n};\n\nfunction isInArray(value, array) {\n  return array.indexOf(value) > -1;\n}\n\n\n/* ---------- particles.js functions - start ------------ */\n\nwindow.pJSDom = [];\n\nwindow.particlesJS = function(tag_id, params){\n\n  //console.log(params);\n\n  /* no string id? so it's object params, and set the id with default id */\n  if(typeof(tag_id) != 'string'){\n    params = tag_id;\n    tag_id = 'particles-js';\n  }\n\n  /* no id? set the id to default id */\n  if(!tag_id){\n    tag_id = 'particles-js';\n  }\n\n  /* pJS elements */\n  var pJS_tag = document.getElementById(tag_id),\n      pJS_canvas_class = 'particles-js-canvas-el',\n      exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);\n\n  /* remove canvas if exists into the pJS target tag */\n  if(exist_canvas.length){\n    while(exist_canvas.length > 0){\n      pJS_tag.removeChild(exist_canvas[0]);\n    }\n  }\n\n  /* create canvas element */\n  var canvas_el = document.createElement('canvas');\n  canvas_el.className = pJS_canvas_class;\n\n  /* set size canvas */\n  canvas_el.style.width = \"100%\";\n  canvas_el.style.height = \"100%\";\n\n  /* append canvas */\n  var canvas = document.getElementById(tag_id).appendChild(canvas_el);\n\n  /* launch particle.js */\n  if(canvas != null){\n    pJSDom.push(new pJS(tag_id, params));\n  }\n\n};\n\nwindow.particlesJS.load = function(tag_id, path_config_json, callback){\n\n  /* load json config */\n  var xhr = new XMLHttpRequest();\n  xhr.open('GET', path_config_json);\n  xhr.onreadystatechange = function (data) {\n    if(xhr.readyState == 4){\n      if(xhr.status == 200){\n        var params = JSON.parse(data.currentTarget.response);\n        window.particlesJS(tag_id, params);\n        if(callback) callback();\n      }else{\n        console.log('Error pJS - XMLHttpRequest status: '+xhr.status);\n        console.log('Error pJS - File config not found');\n      }\n    }\n  };\n  xhr.send();\n\n};\n\n//# sourceURL=webpack:///./node_modules/particles.js/particles.js?");})});