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