var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),
    
    prob = .7,
    minSparks = 3,
    maxSparks = 10,
    minArea = 5,
    maxArea = 40,
    minVel = 10,
    maxVel = 50,
    
    particles = [],
    frame = 0;

function genParticles(){
  var x = Math.random()*w,
      y = Math.random()*h,
      color = 'hsl(hue, 80%, 50%)'.replace('hue', frame%360),
      sparks = Math.random() * (maxSparks - minSparks) + minSparks,
      area = Math.random() * (maxArea - minArea) + minArea,
      velocity = Math.random() * (maxVel - minVel) + minVel,
      
      rad = Math.PI*2/sparks;
  
  for(var p = 0; p < sparks; ++p){
    particles.push(new Particle(x, y, color, area, velocity, rad*p));
  }
}
function Particle(x, y, color, area, velocity, rad){
  this.x = x;
  this.y = y;
  this.vx = Math.cos(rad) * velocity;
  this.vy = Math.sin(rad) * velocity;
  this.color = color;
  this.area = area;
}
Particle.prototype.use = function(){
  this.x += this.vx *= .99;
  this.y += this.vy *= .99;
  
  ctx.fillStyle = ctx.shadowColor = this.color;
  ctx.shadowBlur = this.area;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.area/2, 0, Math.PI*2);
  ctx.fill();
}

function anim(){
  window.requestAnimationFrame(anim);
  
  ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  ctx.shadowBlur = 0;
  ctx.fillRect(0, 0, w, h);
  
  ++frame;
  
  if(Math.random() < prob) genParticles();
  
  for(var i = 0; i < particles.length; ++i){
    var part = particles[i];
    part.use();
    
    if(part.x < 0 || part.x > w ||
       part.y < 0 || part.y > h ||
       Math.random() < .01){
      particles.splice(i, 1);
      --i;
    }
  }
}
anim();