$(function() {
  
  var TapFlow = function(canvas) {
  
  var canvas = $('canvas')[0];
  var context = canvas.getContext('2d');
  
  canvas.width = 400;
  canvas.height = 400;
  
  var flow = 0.5;
     
  var particles = [],
      particleIndex = 0,
      particleSize = 20,
      density = 20,
      gravity = 0;
  
  function Particle() {
    
    this.x = 100 + Math.random() * 150 - 25;
    this.y = -20;

    this.vx = (Math.random() * 1) - 0.5;
    this.vy = 3 + Math.random() * 2;
    
    particles[particleIndex] = this;
    this.id = particleIndex;
    
    particleIndex++;
  }
  
  Particle.prototype.blip = function() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += gravity;
    
    if(this.y > 550) {
      delete particles[this.id];
    }
  }
  
// setInterval(loop, 50);
  function loop() {
    for(var i=0;i<2;i++) {
      if(Math.random() > flow) {
        new Particle();
      }
    }
  
    context.clearRect(0,0, canvas.width, canvas.height);
    context.strokeStyle = '#400';
    
    for(var i in particles) {
      particles[i].blip();
      
      if(!particles[i])
        continue;
      
      var x = particles[i].x, y=particles[i].y;
      
      var gradient = context.createRadialGradient(x, y, particleSize, x -15, y+10, particleSize);
      gradient.addColorStop(0, "#fAbBc3");
	   gradient.addColorStop(1, "#8A3B43");
      context.fillStyle = gradient;
      context.beginPath();
      context.arc(particles[i].x+3, particles[i].y-3, particleSize, 0, Math.PI*2, true); 
      context.closePath();
      context.fill();
      context.stroke();
    }
  }
  
  (function animloop() {
    window.requestAnimationFrame(animloop);
    loop();
  }());
    
    return {
      setFlow: function(n) { flow = n; }
    }
    
  };
  
  
  new TapFlow('canvas').setFlow(0.8);
  
});