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