window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;

var particles = [];
for(i = 0; i < 33; i++) {
  setTimeout(function(){
    particles.push(new createParticle);
  }, i * 15);
}

function createParticle() {
  this.x = c.width / 2;
  this.y = c.height / 2;
  
  this.vx = Math.random() * 8 - 4;
  this.vy = Math.random() * 8 - 4;
  
  this.size = 20;
  
  this.life = Math.random() * 100;
  
  var r = '#2ecc71';
  var o = '#16a085';
  var y = '#3498db';
  var array = [r, o, y];
  this.color = array[Math.floor(Math.random() * 3)];
  
  this.reset = function() {
    this.x = c.width / 2;
    this.y = c.height / 2;
    this.vx = Math.random() * 8 - 4;
    this.vy = Math.random() * 8 - 4;
    this.size = 20;
    this.life = Math.random() * 33;
  }
}
  
function draw() {
  requestAnimFrame(draw);
  
  ctx.fillStyle = "#2c3e50";
  ctx.fillRect(0,0, c.width, c.height);
  
  for(t = 0; t < particles.length; t++) {
    var p = particles[t];
    
    ctx.beginPath();
    ctx.fillStyle = p.color;
    ctx.fillRect(p.x, p.y, p.size, p.size);
    
    p.x+=p.vx;
    p.y+=p.vy;
    
    p.life*=0.9;
    p.size*=0.89999;
    
    if(p.life < 1) {
      p.reset();
    }
  }  
}

draw();