I've been told, to achieve this I would be better off using a looping array rather than recursion for the bubble popping effect, with a variable to control the size of the circles.

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 4-7: Filling variables with random values


float diam;
float x;
float y;

void setup() {
 size(200,100);
 background(255);
 smooth();    
}

void draw() {
 // Each time through draw(), new random numbers are picked for a new ellipse.
 fill(132,22,88,6);
 diam = random(80);
 x = random(width+2000);
//cutting off hanf of the process is probrably wasteful, but I don't know how to make real semi-circles
 y = 100;
 
 // Use values to draw an ellipse
   ellipse(x,y,diam,diam);


}





Its probably not the right way to do it but if I use
"x = random(width+2000);" the creation of bubbles slows down, but they eventually remain and the whole area blackens, where as I would like the bubble to pop and disappear.

I did not resist, as I wanted to play with this ArrayDeque...
Code:

class Bubble
{
  float diam;
  float x;
  float y;
  
  Bubble()
  {
    diam = random(80);
//    x = random(width + 2000);
    x = random(width + 20);
    y = 100;
  }
  
  void draw() // Not the global draw!
  {
    fill(132, 22, 88, 6);
    ellipse(x, y, diam, diam);
  }
}

ArrayDeque bubbles;
 
void setup() {
  size(200, 100);
  background(255);
  smooth();
  
  bubbles = new ArrayDeque();
}
 
void draw() {
  background(255);
  bubbles.add(new Bubble());
  Iterator it = bubbles.iterator();
  while (it.hasNext())
  {
    Bubble b = (Bubble) it.next();
    b.draw();
  }
  if (bubbles.size() > 20)
  {
    bubbles.removeFirst();
  }
} 
 

Ah, I see ArrayDeque have been added in Java 1.6... I tested it with Processing 0154 with my JDK 6. If you have an older version, you cannot run it.

Fortunately, you can actually get a very similar result with ArrayList, perhaps with a little slowdown, but I doubt it is perceptible.

Changes:
Code:

//~ ArrayDeque bubbles;
ArrayList bubbles;

void setup() {
  size(200, 100);
  background(255);
  smooth();

//~   bubbles = new ArrayDeque();
  bubbles = new ArrayList();
}

void draw() {
  background(255);
  bubbles.add(new Bubble());
  Iterator it = bubbles.iterator();
  while (it.hasNext())
  {
    Bubble b = (Bubble) it.next();
    b.draw();
  }
  if (bubbles.size() > 20)
  {
    bubbles.remove(0);
  }
}
 

I gave only the changed code, the Bubble class is given above and unchanged...

I don't understand the relation with JavaScript.

And indeed, I have heard that Java 1.6 is late or unstable on Mac OS (because Apple what to do it themselves, IIRC). I must remember to avoid 1.6 specific tricks...
I see in the release notes: "ABOUT REV 0150 - Updated Java to release 1.6.0_07 on Windows and Linux." and later, problems with Java 1.6 on Mac are reported: it might exist but it isn't very good.
Oh, and perhaps check Apple site for the update, if you want to upgrade.

Placing this on a white background makes it look seemless, except for the edges, that is I decided to have the bubble popping as a whole also, not just halves fizzing along the bottom. But I found that I had a window (with no visible edges) in my webpage and when the bubbles touched the end of the window you could tell where the edges were.

So easily enough I changed the y float to half of the height, which meant the bubbles would never touch the edges bu to change the x I would then have to give it a margin of 50 each side (the diameter being 100) but trying to add in "<50" it gave me a boolean error, I think it is this bit that needs to be changed:

   x = random(width + 20000);

Somehing there to stop it from touching the edges either side at half the diameter would keep the illusion.

Sorry I took the code as you posted it and just changed it so the bubbles are in the middle, that's just it, the bubbles do not overlap the top or bottom but as for the side edges I don't know?



class Bubble
{
 float diam;
 float x;
 float y;
 
 Bubble()
 {
   diam = random(80);
//    x = random(width + 2000);
   x = random(width + 20);
   y = 50;
 }
 
 void draw() // Not the global draw!
 {
   fill(132, 22, 88, 6);
   ellipse(x, y, diam, diam);
 }
}

//~ ArrayDeque bubbles;
ArrayList bubbles;

void setup() {
 size(200, 100);
 background(255);
 smooth();

//~   bubbles = new ArrayDeque();
 bubbles = new ArrayList();
}

void draw() {
 background(255);
 bubbles.add(new Bubble());
 Iterator it = bubbles.iterator();
 while (it.hasNext())
 {
   Bubble b = (Bubble) it.next();
   b.draw();
 }
 if (bubbles.size() > 20)
 {
   bubbles.remove(0);
 }
}

Hurray, another victory! Thanks as always! Any change chance of making it go a bit s l o w e r