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       s = 1,
  14       z = 5 + r(10),
  15       k = R() > 0.5,
  16       c = 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 {x, y} = pos(i)
  35     X.fillRect(x, y, z, z)
  36   }
  37
  38   function crc(i) {
  39
  40     var {x, y} = pos(i)
  41     X.beginPath()
  42     X.arc(x, y, z / 2, 0, 2 * PI)
  43     X.fill()
  44   }
  45
  46   function chs(i) {
  47
  48     var {x, y} = pos(i)
  49     X.beginPath()
  50     X.moveTo(x, y)
  51     X.lineTo(x * 10 * C(i.a), y * 10 * S(i.a))
  52     X.lineTo(r(64), r(64))
  53     X.fill()
  54   }
  55
  56   function lch(i) {
  57
  58     var {x, y} = pos(i)
  59     X.beginPath()
  60     X.lineWidth = 5
  61     X.strokeStyle = `rgb(${i.c.join(',')})`
  62     X.moveTo(x, y)
  63     X.lineTo(x * 10 * C(i.a), y * 10 * S(i.a))
  64     X.stroke()
  65   }
  66
  67   function hrt(i) {
  68
  69     var {x, y} = pos(i)
  70     X.fillRect(x, y, z, z)
  71
  72     X.beginPath()
  73     X.arc(x + z / 2, y, z / 2, 0, 2 * PI, false)
  74     X.fill()
  75     X.closePath()
  76
  77     X.beginPath()
  78     X.arc(x + z, y + z / 2, z / 2, 0, 2 * PI, false)
  79     X.fill()
  80     X.closePath()
  81   }
  82
  83   function mov(i) {
  84
  85     i.x = i.x + s * C(i.a)
  86     i.y = i.y + s * 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     requestAnimationFrame(frm)
 103
 104     var dt = t - l
 105
 106     if (dt > 1000 / f) {
 107       k && X.clearRect(0, 0, 64, 64)
 108       for (var i of I) {
 109         X.fillStyle = `rgb(${i.c.join(',')})`
 110         draw(i)
 111         c && ucl(i)
 112         mov(i)
 113       }
 114
 115       l = t
 116     }
 117   }
 118
 119   frm()
 120 }
 121 )()