var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

'floor|random|round|abs|sqrt|PI|atan2|sin|cos|pow|max|min'
  .split('|')
  .forEach(function(p) { window[p] = Math[p]; });

var TAU = PI*2;

function r(n) { return random()*n; }
function rint(lo, hi) {
  return lo + floor(r(hi - lo + 1))
}
function choose() {
  return arguments[rint(0, arguments.length-1)];
}

/*---------------------------------------------------------------------------*/

var W, H, frame, t0, time;

function resize() {  
  W = canvas.width = innerWidth;
  H = canvas.height = innerHeight;
}

function loop(t) {
  frame = requestAnimationFrame(loop);
  draw();
  time++;
}

function pause() {
  cancelAnimationFrame(frame);
  frame = frame ? null : requestAnimationFrame(loop);
}

function reset() {
  cancelAnimationFrame(frame);
  resize();
  ctx.clearRect(0, 0, W, H);
  init();
  time = 0;
  frame = requestAnimationFrame(loop);
}

/*---------------------------------------------------------------------------*/

function circle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, TAU);
  ctx.fill();
}

function line(x1, y1, x2, y2, w) {
  if (!w) return;
  ctx.lineWidth = w;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

function concentrics(x, y, radius, step) {
  while (y += step, radius -= step, radius > 0)
    circle(x, y, radius);
}

function dot(r, t) {
  t = t < 0 ? 0 : t > 1 ? 1 : ease(t);
  var y = r*(t*2 - 1);
  circle(0, y, 5);
  line(0, 0, 0, y, 5 * (1 - abs(y)/r));
}

function ease(t) {
  return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
}

/*---------------------------------------------------------------------------*/

var t, dt;
var Radius;
var dots;

function init() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.translate(W/2, H/2);
  
  Radius = floor(min(W, H) / 2.5);
  dots = [];
  initDots();
  
  t = 0;
  dt = 0.01;
  
  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
}

function initDots() {
  for (var i = 0; i < 64; i++) dots[i] = - i/64;
}

function draw() {
  ctx.clearRect(-W/2, -H/2, W, H);
  ctx.save();
  ctx.rotate(t * PI);
  for (var i = 0; i < dots.length; i++) {
    ctx.save();
    ctx.rotate(i * TAU / dots.length);
    dot(Radius, dots[i]);
    dots[i] += dt;
    ctx.restore();
  }
  ctx.restore();
  if ((t+=dt) >= 2) {
    t = 0;
    initDots();
  }
}

/*---------------------------------------------------------------------------*/

document.onclick = pause;
document.ondblclick = reset;

reset();