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