git.r.bdr.sh - rbdr/r.bdr.sh/blob - js/animation.js

   1 (function () {
   2
   3   var K = document.querySelector('canvas'),
   4       { random: R, PI, cos: C, sin: S, floor, atan2: A } = Math,
   5       r = x => floor(R() * x),
   6       sqr = i => {
   7         var p = pos(i)
   8         x.fillRect(p.x, p.y, siz, siz)
   9       },
  10       crc = i => {
  11         var p = pos(i)
  12         x.beginPath()
  13         x.arc(p.x, p.y, siz / 2, 0, 2 * PI)
  14         x.fill()
  15       },
  16       chs = i => {
  17         var p = pos(i)
  18         x.beginPath()
  19         x.moveTo(p.x, p.y)
  20         x.lineTo(p.x * 10 * C(i.a), p.y * 10 * S(i.a))
  21         x.lineTo(r(64), r(64))
  22         x.fill()
  23       },
  24       lch = i => {
  25         var p = pos(i)
  26         x.beginPath()
  27         x.lineWidth = 5
  28         x.strokeStyle = `rgb(${i.c.join(',')})`
  29         x.moveTo(p.x, p.y)
  30         x.lineTo(p.x * 10 * C(i.a), p.y * 10 * S(i.a))
  31         x.stroke()
  32       },
  33       hrt = i => {
  34         var p = pos(i)
  35         x.fillRect(p.x, p.y, siz, siz)
  36
  37         x.beginPath()
  38         x.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * PI, false)
  39         x.fill()
  40         x.closePath()
  41
  42         x.beginPath()
  43         x.arc(p.x + siz, p.y + siz / 2, siz / 2, 0, 2 * PI, false)
  44         x.fill()
  45         x.closePath()
  46       },
  47       id = p => p,
  48       spn = rad => (p => ({
  49         x: p.x + rad * C(l),
  50         y: p.y + rad * S(l)
  51       })),
  52       mov = i => {
  53         i.x = i.x + spd * C(i.a)
  54         i.y = i.y + spd * S(i.a)
  55
  56         if (i.x < 0 || i.x > 64) {
  57           i.a = A(S(i.a), -C(i.a))
  58         }
  59
  60         if (i.y < 0 || i.y > 64) {
  61           i.a = A(-S(i.a), C(i.a))
  62         }
  63       },
  64       ucl = i => i.c = i.c.map(c => (c + 5) % 256),
  65       frm = t => {
  66         window.requestAnimationFrame(frm)
  67
  68         var dt = t - l
  69
  70         if (dt > 1000 / f) {
  71           clr && x.clearRect(0, 0, 64, 64)
  72           for (var i of I) {
  73             x.fillStyle = `rgb(${i.c.join(',')})`
  74             draw(i)
  75             ccl && ucl(i)
  76             mov(i)
  77           }
  78
  79           l = t
  80         }
  81       },
  82       x = K.getContext('2d'),
  83       f = 24,
  84       l = 0,
  85       spd = 1,
  86       siz = 5 + r(10),
  87       clr = R() > 0.5,
  88       ccl = R() > 0.5,
  89       I = Array(r(10) + 6).fill().map(() => ({
  90         x: r(64),
  91         y: r(64),
  92         a: R() * 2 * PI,
  93         c: Array(3).fill(r(256))
  94       })),
  95       S = [sqr, crc, hrt, chs, lch],
  96       P = [id, spn(5), spn(15)],
  97       draw = S[r(S.length)],
  98       pos = P[r(P.length)]
  99
 100   frm()
 101 }
 102 )()