X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/8f2ed424421fc94e18fefe0e6a49de651b58a3ec..46678a65d19bf93828c894f83bb4c709144eb9cf:/js/animation.js diff --git a/js/animation.js b/js/animation.js index 907df5d..d5bc6b8 100644 --- a/js/animation.js +++ b/js/animation.js @@ -1,13 +1,15 @@ (function () { var canvas = document.querySelector('canvas'), + r = Math.random, + pi = Math.PI, + cos = Math.cos, + sin = Math.sin, context = canvas.getContext('2d'), fps = 30, lastFrame = 0, speed = 1, - size = 5 + rand(10), - r = Math.random, - pi = Math.PI; + size = 5 + rand(10); var clear = !!(r() > 0.5); var changeColor = !!(r() > 0.5); @@ -45,7 +47,7 @@ var p = position(item); context.beginPath(); context.moveTo(p.x, p.y); - context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle)); + context.lineTo(p.x * 10 * cos(item.angle), p.y * 10 * sin(item.angle)); context.lineTo(rand(64), rand(64)); context.fill(); } @@ -57,7 +59,7 @@ context.lineWidth = 5; context.strokeStyle = `rgb(${item.color.join(',')})`; context.moveTo(p.x, p.y); - context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle)); + context.lineTo(p.x * 10 * cos(item.angle), p.y * 10 * sin(item.angle)); context.stroke(); } @@ -92,23 +94,23 @@ return function (position) { return { - x: position.x + radius * Math.cos(lastFrame), - y: position.y + radius * Math.sin(lastFrame) + x: position.x + radius * cos(lastFrame), + y: position.y + radius * sin(lastFrame) } } } function move(item) { - item.x = item.x + speed * Math.cos(item.angle); - item.y = item.y + speed * Math.sin(item.angle); + item.x = item.x + speed * cos(item.angle); + item.y = item.y + speed * sin(item.angle); if (item.x < 0 || item.x > 64) { - item.angle = Math.atan2(Math.sin(item.angle), -Math.cos(item.angle)) + item.angle = Math.atan2(sin(item.angle), -cos(item.angle)) } if (item.y < 0 || item.y > 64) { - item.angle = Math.atan2(-Math.sin(item.angle), Math.cos(item.angle)) + item.angle = Math.atan2(-sin(item.angle), cos(item.angle)) } }