window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);

window.requestAnimationFrame = 
  window.requestAnimationFrame       || 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  function (callback) {
  window.setTimeout(callback, 1000/70);
};

var canvas, ctx, w, h, particles = [], probability = 40,
    xPoint, yPoint;


function onLoad() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  resizeCanvas();


 window.requestAnimationFrame(updateWorld);

} // fin de onLoad();

function resizeCanvas() {
  if (!!canvas) {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }
} // fin de resizeCanvas();

function updateWorld() {
  update();
  paint();
  window.requestAnimationFrame(updateWorld);
} // fin de update();

function update() {
  if (particles.length < 500 && Math.random() < probability) {
    createFirework();
  }
  var alive = [];
  for (var i=0; i<particles.length; i++) {
    if (particles[i].move()) {
      alive.push(particles[i]);
    }
  }
  particles = alive;
} // fin de update();

function paint() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = "rgba(0,0,0,.1)";
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = 'lighter';
  for (var i=0; i<particles.length; i++) {
    particles[i].draw(ctx);
  }
} // fin de paint();

function createFirework() {
  xPoint = Math.random()*(w-400)+100;
  yPoint = Math.random()*(h-200)+100;
  var nFire = Math.random()*2+100;
  var c = "rgb("+(~~(Math.random()*255+10))+","
  +(~~(Math.random()*215+1))+","+(~~(Math.random()*0+10))+")";
  for (var i=0; i<nFire; i++) {
    var particle = new Particle();
    particle.color = c;
    var vy = Math.sqrt(20-particle.vx*particle.vx);
    if (Math.abs(particle.vy) > vy) {
      particle.vy = particle.vy>0 ? vy: -vy;
    }
    particles.push(particle);
  }
} // fin de createParticles();

function Particle() {
  this.w = this.h = Math.random()*1+1;
  // Position
  this.x = xPoint-this.w/4;
  this.y = yPoint-this.h/2;
  // Velocidades x e y entre -5 y +5
  this.vx = (Math.random()-0.5)*10;
  this.vy = (Math.random()-0.5)*10;
  // Tiempo de vida
  this.alpha = Math.random()*.5+.5;
  // color
  this.color;
} // fin de Particle();

Particle.prototype = {
  gravity: 0.1,
  move: function () {
    this.x += this.vx;
    this.vy += this.gravity;
    this.y += this.vy;
    this.alpha -= 0.01;
    if (this.x <= -this.w || this.x >= screen.width ||
        this.y >= screen.height ||
        this.alpha <= 0) {
      return false;
    }
    return true;
  },
  draw: function (c) {
    c.save();
    c.beginPath();

    c.translate(this.x+this.w/4, this.y+this.h/5);
    c.arc(0, 0, this.w, 0, Math.PI*18);
    c.fillStyle = this.color;
    c.globalAlpha = this.alpha;

    c.closePath();
    c.fill();
    c.restore();
  }
} // fin de Particle.prototype;