X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/59f6606b915c93ad38d3d9ce74c600e975dd1031..8f2ed424421fc94e18fefe0e6a49de651b58a3ec:/js/animation.js?ds=inline diff --git a/js/animation.js b/js/animation.js index e0a543f..907df5d 100644 --- a/js/animation.js +++ b/js/animation.js @@ -5,14 +5,16 @@ fps = 30, lastFrame = 0, speed = 1, - size = 5 + rand(10); + size = 5 + rand(10), + r = Math.random, + pi = Math.PI; - var clear = !!(Math.random() > 0.5); - var changeColor = !!(Math.random() > 0.5); + var clear = !!(r() > 0.5); + var changeColor = !!(r() > 0.5); var items = Array(rand(10) + 6).fill(null).map(() => ({ - x: rand(100), - y: rand(100), - angle: Math.random() * 2 * Math.PI, + x: rand(64), + y: rand(64), + angle: r() * 2 * pi, color: Array(3).fill(rand(256)) })); var shapes = [square, circle, heart, chaos, lineChaos]; @@ -21,7 +23,7 @@ var position = positions[rand(positions.length)]; function rand (x) { - return Math.floor(Math.random() * x); + return Math.floor(r() * x); } function square(item) { @@ -34,7 +36,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(); } @@ -44,7 +46,7 @@ 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(rand(100), rand(100)); + context.lineTo(rand(64), rand(64)); context.fill(); } @@ -71,12 +73,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(); } @@ -101,11 +103,11 @@ item.x = item.x + speed * Math.cos(item.angle); item.y = item.y + speed * Math.sin(item.angle); - if (item.x < 0 || item.x > 100) { + if (item.x < 0 || item.x > 64) { item.angle = Math.atan2(Math.sin(item.angle), -Math.cos(item.angle)) } - if (item.y < 0 || item.y > 100) { + if (item.y < 0 || item.y > 64) { item.angle = Math.atan2(-Math.sin(item.angle), Math.cos(item.angle)) } } @@ -125,7 +127,7 @@ var delta = time - lastFrame; if (delta > 1000 / fps) { - clear && context.clearRect(0, 0, 100, 100); + clear && context.clearRect(0, 0, 64, 64); for (var item of items) { context.fillStyle = `rgb(${item.color.join(',')})`; draw(item);