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