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

   1 (function () {
   2
   3   var canvas = document.querySelector('canvas'),
   4       context = canvas.getContext('2d'),
   5       fps = 30,
   6       lastFrame = 0,
   7       speed = 1,
   8       size = 5 + rand(10),
   9       r = Math.random,
  10       pi = Math.PI;
  11
  12   var clear = !!(r() > 0.5);
  13   var changeColor = !!(r() > 0.5);
  14   var items = Array(rand(10) + 6).fill(null).map(() => ({
  15     x: rand(64),
  16     y: rand(64),
  17     angle: r() * 2 * pi,
  18     color: Array(3).fill(rand(256))
  19   }));
  20   var shapes = [square, circle, heart, chaos, lineChaos];
  21   var positions = [identity, spin(5), spin(15)];
  22   var draw = shapes[rand(shapes.length)];
  23   var position = positions[rand(positions.length)];
  24
  25   function rand (x) {
  26     return Math.floor(r() * x);
  27   }
  28
  29   function square(item) {
  30
  31     var p = position(item);
  32     context.fillRect(p.x, p.y, size, size);
  33   }
  34
  35   function circle(item) {
  36
  37     var p = position(item);
  38     context.beginPath();
  39     context.arc(p.x, p.y, size / 2, 0, 2 * pi);
  40     context.fill();
  41   }
  42
  43   function chaos(item) {
  44
  45     var p = position(item);
  46     context.beginPath();
  47     context.moveTo(p.x, p.y);
  48     context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle));
  49     context.lineTo(rand(64), rand(64));
  50     context.fill();
  51   }
  52
  53   function lineChaos(item) {
  54
  55     var p = position(item);
  56     context.beginPath();
  57     context.lineWidth = 5;
  58     context.strokeStyle = `rgb(${item.color.join(',')})`;
  59     context.moveTo(p.x, p.y);
  60     context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle));
  61     context.stroke();
  62   }
  63
  64   function square(item) {
  65
  66     var p = position(item);
  67     context.fillRect(p.x, p.y, size, size);
  68   }
  69
  70   function heart(item) {
  71
  72     var p = position(item);
  73     context.fillRect(p.x, p.y, size, size);
  74
  75     context.beginPath();
  76     context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * pi, false);
  77     context.fill();
  78     context.closePath();
  79
  80     context.beginPath();
  81     context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * pi, false);
  82     context.fill();
  83     context.closePath();
  84   }
  85
  86   function identity(position) {
  87
  88     return position;
  89   }
  90
  91   function spin(radius) {
  92     return function (position) {
  93
  94       return {
  95         x: position.x + radius * Math.cos(lastFrame),
  96         y: position.y + radius * Math.sin(lastFrame)
  97       }
  98     }
  99   }
 100
 101   function move(item) {
 102
 103     item.x = item.x + speed * Math.cos(item.angle);
 104     item.y = item.y + speed * Math.sin(item.angle);
 105
 106     if (item.x < 0 || item.x > 64) {
 107       item.angle = Math.atan2(Math.sin(item.angle), -Math.cos(item.angle))
 108     }
 109
 110     if (item.y < 0 || item.y > 64) {
 111       item.angle = Math.atan2(-Math.sin(item.angle), Math.cos(item.angle))
 112     }
 113   }
 114
 115   function updateColor(item) {
 116
 117     item.color = item.color.map((c) => {
 118       c = c + 5;
 119       return c > 255 ? 0 : c;
 120     })
 121   }
 122
 123   function frame(time) {
 124
 125     window.requestAnimationFrame(frame);
 126
 127     var delta = time - lastFrame;
 128
 129     if (delta > 1000 / fps) {
 130       clear && context.clearRect(0, 0, 64, 64);
 131       for (var item of items) {
 132         context.fillStyle = `rgb(${item.color.join(',')})`;
 133         draw(item);
 134         changeColor && updateColor(item);
 135         move(item);
 136       }
 137
 138       lastFrame = time;
 139     }
 140   }
 141
 142   frame();
 143 }
 144 )();