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