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, sin, floor, atan2 } = Math,
   5       ctx = K.getContext('2d'),
   6       fps = 24,
   7       lst = 0,
   8       spd = 1,
   9       siz = 5 + rnd(10),
  10       clr = r() > 0.5,
  11       ccl = r() > 0.5,
  12       I = Array(rnd(10) + 6).fill(null).map(() => ({
  13         x: rnd(64),
  14         y: rnd(64),
  15         a: r() * 2 * PI,
  16         c: Array(3).fill(rnd(256))
  17       })),
  18       SHP = [sqr, crc, hrt, chs, lch],
  19       POS = [id, spn(5), spn(15)],
  20       draw = SHP[rnd(SHP.length)],
  21       pos = POS[rnd(POS.length)];
  22
  23   function rnd (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 * cos(i.a), p.y * 10 * sin(i.a));
  47     ctx.lineTo(rnd(64), rnd(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 * cos(i.a), p.y * 10 * sin(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 function (p) {
  85
  86       return {
  87         x: p.x + rad * cos(lst),
  88         y: p.y + rad * sin(lst)
  89       }
  90     }
  91   }
  92
  93   function mov(i) {
  94
  95     i.x = i.x + spd * cos(i.a);
  96     i.y = i.y + spd * sin(i.a);
  97
  98     if (i.x < 0 || i.x > 64) {
  99       i.a = atan2(sin(i.a), -cos(i.a))
 100     }
 101
 102     if (i.y < 0 || i.y > 64) {
 103       i.a = atan2(-sin(i.a), cos(i.a))
 104     }
 105   }
 106
 107   function ucl(i) {
 108
 109     i.c = i.c.map((c) => {
 110       c = c + 5;
 111       return c > 255 ? 0 : c;
 112     })
 113   }
 114
 115   function frm(t) {
 116
 117     window.requestAnimationFrame(frm);
 118
 119     var dt = t - lst;
 120
 121     if (dt > 1000 / fps) {
 122       clr && ctx.clearRect(0, 0, 64, 64);
 123       for (var i of I) {
 124         ctx.fillStyle = `rgb(${i.c.join(',')})`;
 125         draw(i);
 126         ccl && ucl(i);
 127         mov(i);
 128       }
 129
 130       lst = t;
 131     }
 132   }
 133
 134   frm();
 135 }
 136 )();