git.r.bdr.sh - rbdr/r.bdr.sh/blob - js/animation.js

   1 (function () {
   2
   3 if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
   4
   5 var K=document.querySelector('canvas'),
   6 {random:R,PI,cos:C,sin:S,atan2:A} = Math,
   7 id = p => p,
   8 spn = r => p => ({
   9     x: p.x + r * C(l),
  10     y: p.y + r * S(l)
  11 }),
  12 X = K.getContext('2d'), F = X.fill.bind(X), B = X.beginPath.bind(X),
  13 f = 24, l = 0, s = 1, z = 5 + r(10),
  14 k = R() > 0.5, c = R() > 0.5,
  15 I = Array(r(10) + 6).fill().map(() => ({
  16   x: r(64), y: r(64),
  17   a: R() * 2 * PI, c: r(100)
  18 })),
  19 H = [sqr, crc, hrt, chs, lch], P = [id, spn(5), spn(15)],
  20 dr = H[r(H.length)], pos = P[r(P.length)],
  21 Z = 1
  22
  23 function r(x) {
  24   return ~~(R() * x)
  25 }
  26 function sqr(i) {
  27   var p = pos(i)
  28   X.fillRect(p.x, p.y, z, z)
  29 }
  30 function crc(i) {
  31   var p = pos(i)
  32   B()
  33   X.arc(p.x, p.y, z / 2, 0, 2 * PI)
  34   F()
  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 function lch(i) {
  45   var {x, y} = pos(i)
  46   B()
  47   X.lineWidth = 5
  48   X.strokeStyle = `hsl(0,0%,${i.c}%)`
  49   X.moveTo(x, y)
  50   X.lineTo(x * 10 * C(i.a), y * 10 * S(i.a))
  51   X.stroke()
  52 }
  53 function hrt(i) {
  54   var {x, y} = pos(i)
  55   X.fillRect(x, y, z, z)
  56
  57   B()
  58   X.arc(x + z / 2, y, z / 2, 0, 2 * PI, false)
  59   F()
  60   X.closePath()
  61
  62   B()
  63   X.arc(x + z, y + z / 2, z / 2, 0, 2 * PI, false)
  64   F()
  65   X.closePath()
  66 }
  67 function mv(i) {
  68   i.x = i.x + s * C(i.a)
  69   i.y = i.y + s * S(i.a)
  70
  71   if (i.x < 0 || i.x > 64) {
  72     i.a = A(S(i.a), -C(i.a))
  73   }
  74   if (i.y < 0 || i.y > 64) {
  75     i.a = A(-S(i.a), C(i.a))
  76   }
  77 }
  78 function ucl(i) {i.c = (i.c + 2) % 101}
  79 function frm(t) {
  80   if (Z) requestAnimationFrame(frm)
  81   var dt = t - l
  82   if (dt > 1000 / f) {
  83     k && X.clearRect(0, 0, 64, 64)
  84     for (var i of I) {
  85       X.fillStyle = `hsl(0,0%,${i.c}%)`
  86       dr(i)
  87       c && ucl(i)
  88       mv(i)
  89     }
  90
  91     l = t
  92   }
  93 }
  94
  95 K.addEventListener('click', () => ((Z=Z?0:1)&&frm()))
  96 frm()
  97 })()