var width = window.innerWidth;
var height = window.innerHeight;

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

var mouse = {};
var points = [];

mouse.x = width / 2;
mouse.y = height / 2;

function getDistance(p1, p2) {
  return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}

function Point(x, y, speed, width, color) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.color = color;
  this.alpha = Math.random() - 0.1; 
  this.speed = speed; 

  this.active = true;

  this.physx = function () {
    this.y += this.speed;

    if (this.y > canvas.height) this.kill();
  };

  this.kill = function () {
    points.splice( points.indexOf( this ), 1 );
    this.active = false;
  };

  this.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.width, 0, Math.PI * 2, true);
    ctx.fillStyle = this.color;
    ctx.lineWidth = this.width;

    // fade out
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.fill();
    ctx.restore();
  };
};

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  /*
  Add new points
  */
  for (var i = 0; i < 5; i++) {
    var posX = mouse.x + Math.random() * 10;
    var posY = mouse.y + Math.random() * 10;

    points.push(new Point(posX, posY, 1 + Math.random() * 2, 5, 'white'));
  }

  /*
  Draw Points
  */

  for (var i in points) {
    if (points[i].active) {
      points[i].draw();
      points[i].physx();
    }
  }

  // Start again
  requestAnimationFrame(draw);
}

draw();

$(document).mousemove(function (e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});