X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/8f2ed424421fc94e18fefe0e6a49de651b58a3ec..5d1f6d5f5143881ce3c41f6466dcca3e9714183d:/js/animation.js?ds=sidebyside diff --git a/js/animation.js b/js/animation.js index 907df5d..f7642ee 100644 --- a/js/animation.js +++ b/js/animation.js @@ -1,26 +1,27 @@ (function () { var canvas = document.querySelector('canvas'), + r = Math.random, + pi = Math.PI, + cos = Math.cos, + sin = Math.sin, context = canvas.getContext('2d'), - fps = 30, + fps = 24, lastFrame = 0, speed = 1, size = 5 + rand(10), - r = Math.random, - pi = Math.PI; - - var clear = !!(r() > 0.5); - var changeColor = !!(r() > 0.5); - var items = Array(rand(10) + 6).fill(null).map(() => ({ - x: rand(64), - y: rand(64), - angle: r() * 2 * 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)]; + 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(r() * x); @@ -45,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(); } @@ -57,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(); } @@ -92,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)) } }