From: Ruben Beltran del Rio Date: Fri, 16 Feb 2024 22:11:51 +0000 (+0100) Subject: Shorten a bit more X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/commitdiff_plain/ae9ee3d80337ae1167176a79ddc6754484e81e17?ds=sidebyside;hp=--cc Shorten a bit more --- ae9ee3d80337ae1167176a79ddc6754484e81e17 diff --git a/js/animation.js b/js/animation.js index b579fea..110faba 100644 --- a/js/animation.js +++ b/js/animation.js @@ -5,23 +5,23 @@ pi = Math.PI, cos = Math.cos, sin = Math.sin, - context = canvas.getContext('2d'), + ctx = canvas.getContext('2d'), fps = 24, - lastFrame = 0, - speed = 1, - size = 5 + rnd(10), - clear = !!(r() > 0.5), - changeColor = !!(r() > 0.5), - items = Array(rnd(10) + 6).fill(null).map(() => ({ + lst = 0, + spd = 1, + siz = 5 + rnd(10), + clr = !!(r() > 0.5), + ccl = !!(r() > 0.5), + I = Array(rnd(10) + 6).fill(null).map(() => ({ x: rnd(64), y: rnd(64), - angle: r() * 2 * pi, - color: Array(3).fill(rnd(256)) + a: r() * 2 * pi, + c: Array(3).fill(rnd(256)) })), - shapes = [sqr, crc, hrt, chs, lch], - positions = [id, spn(5), spn(15)], - draw = shapes[rnd(shapes.length)], - pos = positions[rnd(positions.length)]; + SHP = [sqr, crc, hrt, chs, lch], + POS = [id, spn(5), spn(15)], + draw = SHP[rnd(SHP.length)], + pos = POS[rnd(POS.length)]; function rnd (x) { return Math.floor(r() * x); @@ -30,58 +30,58 @@ function sqr(i) { var p = pos(i); - context.fillRect(p.x, p.y, size, size); + ctx.fillRect(p.x, p.y, siz, siz); } function crc(i) { var p = pos(i); - context.beginPath(); - context.arc(p.x, p.y, size / 2, 0, 2 * pi); - context.fill(); + ctx.beginPath(); + ctx.arc(p.x, p.y, siz / 2, 0, 2 * pi); + ctx.fill(); } function chs(i) { var p = pos(i); - context.beginPath(); - context.moveTo(p.x, p.y); - context.lineTo(p.x * 10 * cos(i.angle), p.y * 10 * sin(i.angle)); - context.lineTo(rnd(64), rnd(64)); - context.fill(); + ctx.beginPath(); + ctx.moveTo(p.x, p.y); + ctx.lineTo(p.x * 10 * cos(i.a), p.y * 10 * sin(i.a)); + ctx.lineTo(rnd(64), rnd(64)); + ctx.fill(); } function lch(i) { var p = pos(i); - context.beginPath(); - context.lineWidth = 5; - context.strokeStyle = `rgb(${i.color.join(',')})`; - context.moveTo(p.x, p.y); - context.lineTo(p.x * 10 * cos(i.angle), p.y * 10 * sin(i.angle)); - context.stroke(); + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.strokeStyle = `rgb(${i.c.join(',')})`; + ctx.moveTo(p.x, p.y); + ctx.lineTo(p.x * 10 * cos(i.a), p.y * 10 * sin(i.a)); + ctx.stroke(); } function sqr(i) { var p = pos(i); - context.fillRect(p.x, p.y, size, size); + ctx.fillRect(p.x, p.y, siz, siz); } function hrt(i) { var p = pos(i); - context.fillRect(p.x, p.y, size, size); + ctx.fillRect(p.x, p.y, siz, siz); - context.beginPath(); - context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * pi, false); - context.fill(); - context.closePath(); + ctx.beginPath(); + ctx.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * pi, false); + ctx.fill(); + ctx.closePath(); - context.beginPath(); - context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * pi, false); - context.fill(); - context.closePath(); + ctx.beginPath(); + ctx.arc(p.x + siz, p.y + siz / 2, siz / 2, 0, 2 * pi, false); + ctx.fill(); + ctx.closePath(); } function id(p) { @@ -93,53 +93,53 @@ return function (p) { return { - x: p.x + rad * cos(lastFrame), - y: p.y + rad * sin(lastFrame) + x: p.x + rad * cos(lst), + y: p.y + rad * sin(lst) } } } function mov(i) { - i.x = i.x + speed * cos(i.angle); - i.y = i.y + speed * sin(i.angle); + i.x = i.x + spd * cos(i.a); + i.y = i.y + spd * sin(i.a); if (i.x < 0 || i.x > 64) { - i.angle = Math.atan2(sin(i.angle), -cos(i.angle)) + i.a = Math.atan2(sin(i.a), -cos(i.a)) } if (i.y < 0 || i.y > 64) { - i.angle = Math.atan2(-sin(i.angle), cos(i.angle)) + i.a = Math.atan2(-sin(i.a), cos(i.a)) } } - function updateColor(i) { + function ucl(i) { - i.color = i.color.map((c) => { + i.c = i.c.map((c) => { c = c + 5; return c > 255 ? 0 : c; }) } - function frame(time) { + function frm(t) { - window.requestAnimationFrame(frame); + window.requestAnimationFrame(frm); - var delta = time - lastFrame; + var dt = t - lst; - if (delta > 1000 / fps) { - clear && context.clearRect(0, 0, 64, 64); - for (var i of items) { - context.fillStyle = `rgb(${i.color.join(',')})`; + if (dt > 1000 / fps) { + clr && ctx.clearRect(0, 0, 64, 64); + for (var i of I) { + ctx.fillStyle = `rgb(${i.c.join(',')})`; draw(i); - changeColor && updateColor(i); + ccl && ucl(i); mov(i); } - lastFrame = time; + lst = t; } } - frame(); + frm(); } )();