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 rrng(lo, hi) { return lo + r(hi-lo); }
function rint(lo, hi) { return lo + floor(r(hi - lo + 1)); }
function choose(args) { return args[rint(0, args.length-1)]; }

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

var W, H, frame, t0, time, DPR;

function resize() {
  var w = innerWidth;
  var h = innerHeight;
  DPR = devicePixelRatio || 1;
  
  canvas.style.width = w+'px';
  canvas.style.height = h+'px';
  
  W = canvas.width = w * DPR;
  H = canvas.height = h * DPR;
}

function loop(t) {
//  console.log(1000/(t-t0)); t0 = 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 Particle(x, y, vx, vy, color) {
  this.px = x;
  this.py = y;
  this.x = x + vx;
  this.y = y + vy;
  this.vx = vx;
  this.vy = vy;
  this.color = color;
}

Particle.prototype.integrate = function() {
  this.vx = this.x - this.px;
  this.vy = this.y - this.py;
  this.px = this.x;
  this.py = this.y
  this.vy *= DAMP;
  this.vx *= DAMP;
};

Particle.prototype.move = function() {
  this.x += this.vx;
  this.y += this.vy;
};

Particle.prototype.gravitateTo = function(x, y) {
  var dx = x - this.x;
  var dy = y - this.y;
  var d = sqrt(dx*dx + dy*dy);
  this.vx += dx/d;
  this.vy += dy/d;
};

Particle.prototype.draw = function() {
  ctx.moveTo(this.px, this.py);
  ctx.lineTo(this.x, this.y);
};

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

var DAMP = 1;
var particles;
var gravitrons, G;

function color(n) {
  n = 64+floor(64*n);
  return 'rgba('+0+','+n+','+n+', 0.05)';
}

function init() {
  spawnParticles();
  DAMP = 0.89;
}

function spawnParticles() {
  N = 0;
  particles = [];
  for (var x = W/2 - 35; x < W/2 + 35; x += 1) 
    for (var y = H/2 - 35; y < H/2 + 35; y += 1)
      particles[N++] = new Particle(x, y, 0, 0, color(0.5));
      
  for (var i = 0; i < N; i++)
    particles[i].friend = choose(particles);
}

function draw() {
  ctx.beginPath();
  for (var i = 0; i < N; i++) {
    var p = particles[i];
    var f = p.friend;
    p.draw();
   // p.integrate();
    p.gravitateTo(f.x, f.y);
    p.move();
  }
  ctx.strokeStyle = color((time < 300 ? time : 600 - time) / 300);
  ctx.stroke();
  if (time == 600) time = 0;
  DAMP *= 0.99996;
}

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

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

reset();