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">