test1:test2

 </div><div data-lake-id="07087660849a14c938d12edfc8c4a620">    window.onload = init();</div><div data-lake-id="a1afe22896ccd946015b32f57b51b0f0">    function init() {</div><div data-lake-id="4c7239cfbfc63a76e2c823a29259b664">      canvas = document.getElementById('canvas');  </div><div data-lake-id="02fce2b3289b8a39d66c2f08d1eda099">      context = canvas.getContext('2d');</div><div data-lake-id="8940e410e3003e7c4a207d44b053f9a5">      canvas.height = window.innerHeight;</div><div data-lake-id="47b528c20696d01680795eb8390d8bc9">      canvas.width = window.innerWidth;</div><div data-lake-id="c26f51f626bbef9dcbcb9e110e422d39">      mouse = {x:0,y:0};</div><div data-lake-id="934d701868b89f83cfe1dac577b605b4">      colors = [</div><div data-lake-id="96d96a919f4392603a05d97b61e63ef6">  '#af0','#7CD14E','#1CDCFF','#FFFF00','#FF0000','#aee137','#bef202','#00b2ff','#7fff24','#13cd4b','#c0fa38','#f0a','#a0f','#0af','#000000' ];</div><div data-lake-id="91c37ac1223e24f61a862e916c7eae43">   </div><div data-lake-id="2e1f98b686416eb4a559351270637e8a">      canvas.addEventListener('mousemove',MouseMove,false);</div><div data-lake-id="771b7b4e6af45063a8962dd41b877cb4">      canvas.addEventListener('mousedown',MouseDown,false);</div><div data-lake-id="717df71ab99ec934987a94c88aba56fe">      canvas.addEventListener('mouseup',MouseUp,false);</div><div data-lake-id="56b66529cf2e91385f7bc51e351ec1d6">      window.addEventListener('resize',canvasResize,false);</div><div data-lake-id="9729094f676b7658f30fc0e4270a986e">      dotsHolder = [];</div><div data-lake-id="769c9fc215c0db60f55a73ede51f0ff9">      mouseMove = false;</div><div data-lake-id="52e8f0e42ab09b8b0cc31e2404102e5a">      mouseDown = false;</div><div data-lake-id="a51009a07a948f76646d7fa0df131a1a">      for(i = 0;i < 100;i++){</div><div data-lake-id="55486dee630310fa1db73b4e7fb0fcc0">          dotsHolder.push(new dots());</div><div data-lake-id="e0990bc1eb0f80789c0d54e4956d4d63">      }</div><div data-lake-id="5e4e96d1d7d7257ee0f43ba67037845b">   </div><div data-lake-id="b676e63754c262b4a9e60ebcc58f6e16">    /*REQUEST ANIMATION FRAME*/</div><div data-lake-id="1b994c5a298b5f32309821a8b76c54cf">    (function() {</div><div data-lake-id="54a8d78453d3a5f347b55a9db21e880d">      var lastTime = 0;</div><div data-lake-id="0fcc18fb0a614fee066fdfb3fad1d94f">      var vendors = ['ms', 'moz', 'webkit', 'o'];</div><div data-lake-id="89d67ba551f1446eca69bab5948f4331">      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {</div><div data-lake-id="07747779054aed0abdd5872e9b4a5f56">          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];</div><div data-lake-id="378d1722819fcf4354817af520a1265a">          window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']</div><div data-lake-id="aedd0839a529f8b3d8b49d8414e9bc8f">                                     || window[vendors[x]+'CancelRequestAnimationFrame'];</div><div data-lake-id="59908367caadb6846b1cb9c22f23ea2b">      }</div><div data-lake-id="21bd31ff7b2a9850699be34e20273148">   </div><div data-lake-id="433b32dc8bf5b8c15cdef4845844ad16">      if (window.requestAnimationFrame)</div><div data-lake-id="76eae00844cc4999f0478ae3d6bfeac8">          window.requestAnimationFrame = function(callback, element) {</div><div data-lake-id="4bbe0ce2615a2ef297e964fb4b795a46">              var currTime = new Date().getTime();</div><div data-lake-id="9ab76288254d441eb5823ef123f6596f">              var timeToCall = Math.max(0, 16 - (currTime - lastTime));</div><div data-lake-id="e8865cd31f88c491882f96555d34d1d4">              console.log("timetoCall : " + timeToCall);</div><div data-lake-id="ccae26c2ae368d485ef5776c8421cf0c">              var id = window.setTimeout(function() { callback(currTime + timeToCall); },</div><div data-lake-id="df6f3cc919605f4f4814dc451c75a872">                timeToCall);</div><div data-lake-id="1284f266d8834319c5b3760e5cfb4f46">              console.log("id: " + id);</div><div data-lake-id="c1dda01420b7f5301e23a6a89df0c64a">              lastTime = currTime + timeToCall;</div><div data-lake-id="a4ab94af90dc90a7e0ed4f383486ace3">              console.log("last time: " + lastTime);</div><div data-lake-id="59c67767b7946c87afd03a8147f885b6">              //return id;</div><div data-lake-id="7f21fb508bfb22822325e5b7768efe2c">          };</div><div data-lake-id="0dcc488b4c8c485b40cf03b60e1e598c">   </div><div data-lake-id="fde527e6bd1af30f983e7a78c744301b">      if (!window.cancelAnimationFrame)</div><div data-lake-id="66c2c7f0e9bab47ef78301eba0276f96">          window.cancelAnimationFrame = function(id) {</div><div data-lake-id="a7630a4a462fe584204e77d65516e0fb">              clearTimeout(id);</div><div data-lake-id="d909d50586d0feea3f6c750cb40f643e">          };</div><div data-lake-id="901ab985dfb2845cad5d21301607b110">  }());</div><div data-lake-id="f40efff91d2b18012033893642e0454c">   </div><div data-lake-id="aec892d8c00e807218077e25debb0aea">  }</div><div data-lake-id="9f07903a593785835ec1e151bf6a2375">  function canvasResize(event)</div><div data-lake-id="902450212cf7a94e4d6b77a14c66de2b">  {</div><div data-lake-id="8082c7219443d64076a23bba033f63ac">   canvas.height = window.innerHeight;</div><div data-lake-id="947c264433edd552523c5a045ca4a0d5">   canvas.width = window.innerWidth;</div><div data-lake-id="1a45fcbfac533626af6655cb05c4474b">   cancelAnimationFrame(animate);</div><div data-lake-id="a500c8ba9e2aab4fdae4333869be6ff9">   </div><div data-lake-id="92db57e9e4a23009a46e74675a1ee725">   </div><div data-lake-id="bafb13cf4994fb64416bb180eff19a37">  }</div><div data-lake-id="e0cdd7848e6dede47b5fc7aeaa6e0a91">  function MouseUp(event)</div><div data-lake-id="8c2836e3de2ff2afab9603b599885475">    {</div><div data-lake-id="a54434b8126cdf66155aaf091f9abd6e">     </div><div data-lake-id="f3bdbc8ee9655fe48b989424ac609d17">  if(mouseMove)</div><div data-lake-id="ae22aba038a2f908b8e7776c1cee83c2">  {</div><div data-lake-id="4df1bce730832f66cf447ffd6194fb69">    mouseMove = false;}  </div><div data-lake-id="ad003326933e87a2a645687ba654d060">      if(mouseDown)</div><div data-lake-id="b40595d9bf67c3986978e37ae591e294">      {</div><div data-lake-id="0c364a565aa6d2a3c5f846d428a4c958">        mouseDown = false;</div><div data-lake-id="a0051b26d5037aafdac916d87d7e78f0">      }</div><div data-lake-id="cdf9fd27edeac9a66892457bb410f9f7">     </div><div data-lake-id="99a428fd70677271c3dcf8dd9145246f">    }</div><div data-lake-id="0dec87a60ebb1e344e2997506f3754b1">  function MouseDown(event)</div><div data-lake-id="1ac663b9c103b360f2ce2c8ac7b9830d">    {</div><div data-lake-id="9f5cb2f1903cee34d90f8f8c079a2693">     </div><div data-lake-id="afdaf79ce22a0e7ce49c55236d9d7594">      mouseDown = true;</div><div data-lake-id="d68fbe53b11264f51f1fadfbe885f464">     </div><div data-lake-id="b717d1aaefb7b83277c1134bea5e8c14">    }</div><div data-lake-id="6fa378d4c9474330367dffe2a81950e4">  function MouseMove(event)</div><div data-lake-id="0e89e52f44c67593d664f3a34a0ac925">    {</div><div data-lake-id="50ffde6ef4cf32150a9c958dc429f0eb">          mouse.x = event.pageX - canvas.offsetLeft;</div><div data-lake-id="0bfa42ca4e50278e71b71e2fda2d422c">          mouse.y = event.pageY - canvas.offsetTop;</div><div data-lake-id="7452dfe25da3180377251f4a907d74fb">      if(mouseMove)</div><div data-lake-id="95d560b9aaf376bf0fba1075cb99a23c">      {</div><div data-lake-id="e1ceedf36071c57027ca9f6ab1a61491">       context.lineTo(mouseX,mouseY);</div><div data-lake-id="3b638677cef59c01258e430c4f0d1308">       context.stroke();</div><div data-lake-id="d89d48bac39712992eb7c92e87c31267">       </div><div data-lake-id="1e86f6bd04f05dfaa9226d15829efadd">      }</div><div data-lake-id="0d85880d3a07f5dd857730aa4c65a3dd">    }</div><div data-lake-id="63ad3bea8f2f0fedf1a10b7e0f9763a8">  function dots(){</div><div data-lake-id="37aabf059bf0ffa6b42b113f8f6fb365">   this.xPos = Math.random()*canvas.width;</div><div data-lake-id="6b4836158042a5462d1b4c84c69aab2f">   this.yPos = Math.random()*canvas.height;</div><div data-lake-id="8624bf2d00ec1119fd567a6bad01fac0">   this.color = colors[Math.floor(Math.random()*colors.length)];</div><div data-lake-id="785ac38ca988ea1bf7c28564c66dcbd8">   this.radius = Math.random()*10;  </div><div data-lake-id="87916ab88211f2848577fe26ec206a11">   this.vx = Math.cos(this.radius);</div><div data-lake-id="6e1de28aec01ddebd7d981b95f1fc1f1">   this.vy = Math.sin(this.radius);</div><div data-lake-id="836b0cf84194a24666a1220833e36b6d">   this.stepSize = Math.random() / 10;</div><div data-lake-id="5182579a2579d18d0cb469ec1eea1148">   this.step = 0;</div><div data-lake-id="581d58e8886c189f4c4461f3ecfcead7">   this.friction = 7;</div><div data-lake-id="1699ab8c94c788e5ce83f7758378fd14">   this.speedX = this.vx;</div><div data-lake-id="20a49e7ef6432fcb4ffc82452cfe4e65">   this.speedY = this.vy;</div><div data-lake-id="4cbaa90cc33a97896b7c417b74192b22">   </div><div data-lake-id="f2d96aa502859543998fbc31b4a4dbda">   </div><div data-lake-id="a29ef24b3432b49db9d23aed554ea5d0">  }  </div><div data-lake-id="b643050ac16b03292b19e2becaa3f15b">  dots.draw = function()</div><div data-lake-id="169bf1d9c7caacfbb21a01d1f642cd6a">  {</div><div data-lake-id="c4ccbed06c6823c97596951655472531">   </div><div data-lake-id="0177eb37663411c9aa355550d50fdeff">      context.clearRect(0,0,canvas.width,canvas.height);</div><div data-lake-id="56adb695b3c41e895f6f6f171da66a5b">      for(var c = 0; c < dotsHolder.length;c++)</div><div data-lake-id="cf3f150f7d674a7b3e41f11aa3fb8f17">      {</div><div data-lake-id="bfd851858a2fd5911bf6481f78699da9">          dot = dotsHolder[c];  </div><div data-lake-id="d9af2823ceca0f6c682dfc7b3ff6386a">          context.beginPath();</div><div data-lake-id="9e6fb581d400a4d4113adf165a3e8b7e">          distanceX = dot.xPos - mouse.x;</div><div data-lake-id="1701cf02c2770ad39d01851e0119416c">          distanceY = dot.yPos - mouse.y;</div><div data-lake-id="5e2a68f784c9cf52dc2e1df956f005b8">          var particleDistance =  Math.sqrt(distanceX*distanceX + distanceY*distanceY);</div><div data-lake-id="3531835322da0add3fadb306a294f48a">          var particleMouse = Math.max( Math.min( 75 / ( particleDistance /dot.radius ), 7 ), 1 );</div><div data-lake-id="289f737ee3672dda646cdb8651cccede">          context.fillStyle = dot.color;</div><div data-lake-id="eddae13000c831a0c50649c2119d028f">          dot.xPos += dot.vx;</div><div data-lake-id="91dacb85843000f1659f2d33b415937f">          dot.yPos += dot.vy;</div><div data-lake-id="cd4bec7f3041bcb823d6b8421e868051">          if(dot.xPos < -50) {</div><div data-lake-id="824dcc83e25493895f1e2a9fecfeb9d9">              dot.xPos = canvas.width+50;</div><div data-lake-id="e68c7e4f7ad819a64f9d8081fda53ca6">          }</div><div data-lake-id="a619aa890e566d22ce0b81a35266e486">          if(dot.yPos < -50) {</div><div data-lake-id="b3a6ff184b8bc44ebcd7ee428b7c3629">              dot.yPos = canvas.height+50;</div><div data-lake-id="b9c00ab1406c67455f1bd928d58bfe4c">          }</div><div data-lake-id="18e76cac6d37e41aad17f8d91108ba09">          if(dot.xPos > canvas.width+50) {</div><div data-lake-id="71eb69337aa27cab5803a093d0627783">              dot.xPos = -50;</div><div data-lake-id="6b8a7e21c88ff74a4ca3eefd50445a3f">          }</div><div data-lake-id="876aece3657d79510720c43214140ff1">          if(dot.yPos > canvas.height+50) {</div><div data-lake-id="6368ab7e5b3bf47d327584cf59a47a87">              dot.yPos = -50;</div><div data-lake-id="75befff3e94d37837e53b4548b452df2">          }</div><div data-lake-id="8ae18bd8641604fbd6a8d7c67871ff98">          context.arc(dot.xPos,dot.yPos,(dot.radius/2.5)*particleMouse,0,2*Math.PI,false);</div><div data-lake-id="25d1a2622432521f4051356fa813be9b">          //console.log("circle x: " + dot.xPos + " y: " + dot.yPos);</div><div data-lake-id="efa2fa29cd8ea45f31a3fd64e621bc9c">          context.fill();</div><div data-lake-id="d2a3d85fa1b80a94505d5a5cbc33d7ef">          if(mouseDown) {</div><div data-lake-id="5c77f52c75cbf56d53094a5337a9ba56">          var minimumDistance = 164,</div><div data-lake-id="9e9ddf8d5271c828c8e92369ca7df4fd">          distance = Math.sqrt((dot.xPos - mouse.x) * (dot.xPos - mouse.x) + (dot.yPos - mouse.y) * (dot.yPos - mouse.y)),</div><div data-lake-id="0ea8967f2ed04901cb87da4ce8096868">          distanceX = dot.xPos - mouse.x,</div><div data-lake-id="9b25eea67d0d5a2982fe5279d613414b">          distanceY = dot.yPos - mouse.y;  </div><div data-lake-id="bea0a09689b32ef61bbbcdd8fdc3a019">          if (distance < minimumDistance) {</div><div data-lake-id="422b14f0184932935641917e038338d8">              var forceFactor = minimumDistance / (distance * distance),</div><div data-lake-id="0046aeba544b7df6b9ea44b1c7149a03">                  xforce = (mouse.x - dot.xPos) % distance/7,</div><div data-lake-id="ec1e96ab4f3122920c7fcac0601f6196">                  yforce = (mouse.y - dot.yPos) % distance/dot.friction,</div><div data-lake-id="4d16302c1e8f285cec99eb94400d9b1d">                  forceField = forceFactor * 2/dot.friction;</div><div data-lake-id="3ef46e1812fc8b94927eb323f56be549">              dot.vx -= forceField * xforce;</div><div data-lake-id="7d88245b91174b2f76f7876c50fa2aa1">              dot.vy -= forceField * yforce;</div><div data-lake-id="94e2d25326a17ef8d377f41c30481ecf">          }</div><div data-lake-id="2f679a64aefe0df8149ce37f196fa938">       </div><div data-lake-id="4a90e92c1bd4c6b95ea616c4cc34e0b9">        if(dot.vx > dot.speed) {</div><div data-lake-id="348bd8de4fbee34ebcd87328e21b46ef">            dot.vx = dot.speed/dot.friction;  </div><div data-lake-id="b24ce37db74d4ff1211645f1f004d29f">            dot.vy = dot.speed/dot.friction;</div><div data-lake-id="a6a308d294b172c2ad0b2113a40b67d3">         </div><div data-lake-id="7432addd9d7183cf9ce1cb3e00c260c1">        }</div><div data-lake-id="d2f3c5f6b689b605487c5afa8a4c4d81">        else if (dot.vy > dot.speed) {</div><div data-lake-id="33b9dfca07d054278ece0697edb39cdc">            dot.vy = dot.speed/dot.friction;  </div><div data-lake-id="d28fff703f90382f5df4ee22de333f5a">       }</div><div data-lake-id="4b49c7ffa51572adc35e5187d1c6469c">     }</div><div data-lake-id="6947415dbc6f4e9d5bc58dd4c2b87f21">   }</div><div data-lake-id="e0625c7ab011b76fb8aabc55369126e3">   </div><div data-lake-id="2a68bd1faf0a30cabed413bfbe951aa4">  }</div><div data-lake-id="0adf2bd97c29f20f93d0aa2b95bb9d63">  function animate(){</div><div data-lake-id="f4fa555774b863d5d6457d3bf1e4282b">  requestAnimationFrame(animate);</div><div data-lake-id="d4c27b5c3dded07965be28c95035c296">    dots.draw();</div><div data-lake-id="f4d3b1292c86bd00da9d0cb895b79d0d">  }</div><div data-lake-id="c6e322d544ab709abb45d1b58f4608b0">  animate();</div><div data-lake-id="fe1410111aa500d8f25d0c0301e33bcc">