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 } = Math,
   5       ctx = K.getContext('2d'),
   6       fps = 24,
   7       lst = 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     ctx.fillRect(p.x, p.y, siz, siz);
  31   }
  32
  33   function crc(i) {
  34
  35     var p = pos(i);
  36     ctx.beginPath();
  37     ctx.arc(p.x, p.y, siz / 2, 0, 2 * PI);
  38     ctx.fill();
  39   }
  40
  41   function chs(i) {
  42
  43     var p = pos(i);
  44     ctx.beginPath();
  45     ctx.moveTo(p.x, p.y);
  46     ctx.lineTo(p.x * 10 * c(i.a), p.y * 10 * s(i.a));
  47     ctx.lineTo(r(64), r(64));
  48     ctx.fill();
  49   }
  50
  51   function lch(i) {
  52
  53     var p = pos(i);
  54     ctx.beginPath();
  55     ctx.lineWidth = 5;
  56     ctx.strokeStyle = `rgb(${i.c.join(',')})`;
  57     ctx.moveTo(p.x, p.y);
  58     ctx.lineTo(p.x * 10 * c(i.a), p.y * 10 * s(i.a));
  59     ctx.stroke();
  60   }
  61
  62   function hrt(i) {
  63
  64     var p = pos(i);
  65     ctx.fillRect(p.x, p.y, siz, siz);
  66
  67     ctx.beginPath();
  68     ctx.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * PI, false);
  69     ctx.fill();
  70     ctx.closePath();
  71
  72     ctx.beginPath();
  73     ctx.arc(p.x + siz, p.y + siz / 2, siz / 2, 0, 2 * PI, false);
  74     ctx.fill();
  75     ctx.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(lst),
  86         y: p.y + rad * s(lst)
  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     if (i.x < 0 || i.x > 64) {
  96       i.a = atan2(s(i.a), -c(i.a))
  97     }
  98
  99     if (i.y < 0 || i.y > 64) {
 100       i.a = atan2(-s(i.a), c(i.a))
 101     }
 102   }
 103
 104   function ucl(i) {
 105
 106     i.c = i.c.map((c) => {
 107       c = c + 5;
 108       return c > 255 ? 0 : c;
 109     })
 110   }
 111
 112   function frm(t) {
 113
 114     window.requestAnimationFrame(frm);
 115
 116     var dt = t - lst;
 117
 118     if (dt > 1000 / fps) {
 119       clr && ctx.clearRect(0, 0, 64, 64);
 120       for (var i of I) {
 121         ctx.fillStyle = `rgb(${i.c.join(',')})`;
 122         draw(i);
 123         ccl && ucl(i);
 124         mov(i);
 125       }
 126
 127       lst = t;
 128     }
 129   }
 130
 131   frm();
 132 }
 133 )();