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