var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf = requestAnimationFrame;
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;

ctx.globalAlpha = 0.2;

function randint(n) { return Math.floor(n * Math.random()); }
function choose() { return arguments[randint(arguments.length)]; }

var UP = {};
var RIGHT = {};
var DOWN = {};
var LEFT = {};


var STEP = 5;

function Vector(x, y, d) {
  this.curr = {x: x, y: y};
  this.end = {x: x, y: y};
  this.dx = d[0]*STEP;
  this.dy = d[1]*STEP;
}

Vector.prototype.step = function() {
  var curr = this.curr, end = this.end;
  if (end.x <= 0 || end.x >= W || end.y <= 0 || end.y >= H) return false;
  curr = {x: end.x, y: end.y};
  end.x += this.dx;
  end.y += this.dy;
  return true;
};

var vs = [];
for (var i = 0; i < 2000; i++) {
  vs.push(new Vector(randint(W),
                     randint(H), 
                     choose([0, 1], [0, -1], [1, -1], [1, 0], 
                            [1, 1], [-1, -1], [-1, 0], [-1, 1])));
}

function addLinePath(p1, p2) {
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
}


ctx.strokeStyle = 'darkslategray';
function update() {
  var added = 0;
  ctx.beginPath();
  for (var i = 0; i < vs.length; i++) {
    var v = vs[i];
    if (v.step()) addLinePath(v.curr, v.end), added++;
  }
  ctx.closePath();
  ctx.stroke();
  if (added) raf(update);
}
raf(update)