X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/e99de7cc171b341527a6a71d643e1d81783f83eb..1203ab0c3d0865ed94ff2d6fdd1a999eb5eaf58e:/js/animation.js diff --git a/js/animation.js b/js/animation.js index fc6246e..9566132 100644 --- a/js/animation.js +++ b/js/animation.js @@ -1,27 +1,30 @@ (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); - - var clear = !!(Math.random() > 0.5); - var changeColor = !!(Math.random() > 0.5); - var items = Array(rand(10) + 6).fill(null).map(() => ({ - x: rand(64), - y: rand(64), - angle: Math.random() * 2 * Math.PI, - color: Array(3).fill(rand(256)) - })); - var shapes = [square, circle, heart, chaos, lineChaos]; - var positions = [identity, spin(5), spin(15)]; - var draw = shapes[rand(shapes.length)]; - var position = positions[rand(positions.length)]; + size = 5 + rand(10), + clear = !!(r() > 0.5), + changeColor = !!(r() > 0.5), + items = Array(rand(10) + 6).fill(null).map(() => ({ + x: rand(64), + y: rand(64), + angle: r() * 2 * pi, + color: Array(3).fill(rand(256)) + })), + shapes = [square, circle, heart, chaos, lineChaos], + positions = [identity, spin(5), spin(15)], + draw = shapes[rand(shapes.length)], + position = positions[rand(positions.length)]; function rand (x) { - return Math.floor(Math.random() * x); + return Math.floor(r() * x); } function square(item) { @@ -34,7 +37,7 @@ var p = position(item); context.beginPath(); - context.arc(p.x, p.y, size / 2, 0, 2 * Math.PI); + context.arc(p.x, p.y, size / 2, 0, 2 * pi); context.fill(); } @@ -43,7 +46,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(); } @@ -55,7 +58,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(); } @@ -71,12 +74,12 @@ context.fillRect(p.x, p.y, size, size); context.beginPath(); - context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * Math.PI, false); + context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * pi, false); context.fill(); context.closePath(); context.beginPath(); - context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * Math.PI, false); + context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * pi, false); context.fill(); context.closePath(); } @@ -90,23 +93,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)) } }