Question

I have a “bubble generator” that is mostly working, but is not properly clearing the bubbles and I can’t figure out why. Been staring at this for a while now. Specifically, some of the bubbles are getting “cleared” as they float up, others aren’t, and I can’t see why. ARGH!

http://jsfiddle.net/Dud2q/7/ (slowed waaay down so that you can easily watch a single bubble)

Logic flow (this just describes the code in the fiddle):

1. Create an imageData array (long list of pixels)

   imgData = ctx.getImageData(0, 0, w, h);
   

2. push new random bubbles onto the beginning of the “bubbles array” which draws bottom-up:

   for(var i=0, l=generators.length; i<l; i++){
       for(var j=0, m=0|Math.random()*6; j<m; j++){
           newBubbles.push( 0|generators[i] + j );
       }
       generators[i] = Math.max(0, Math.min(w, generators[i] + Math.random()*10 - 5));
   }
   bubbles.unshift(newBubbles);
   

3. loop all bubbles to be drawn and:

   1. clear the bubbles that were drawn in the last loop by setting alpha channel to 0 (transparent):

      if(i<(l-1)){
          x = 0|bubbles[i+1][j];
          offset = y * w * 4 + x * 4;
          pixels[offset+3] = 0;
      }
      

   2. draw new bubbles (offset+1 = g, offset+2 = b, offset+3 = alpha):

      x = 0|(bubbles[i][j] += Math.random() * 6 - 3);
      offset = y * w * 4 + x * 4;
      pixels[offset+1] = 0x66;
      pixels[offset+2] = 0x99;
      pixels[offset+3] = 0xFF;
      

Answer 1

Increasing the number of generators to a higher number seems to make it work.

Eg. 50..times(createBubbleGenerator); almost works.

Cheers!!!