Interactive Series: Bubbles!

So everybody knows what the inside of a soda looks like, right?
A lot of bubbles. Dark fluid. That sort of stuff. It’s actually really easy to simulate, and I can show you how.

So first, let’s start off with us putting a mentos in a soda. Or rather, a video of that.

Video by Scary Taco. Courtesy of YouTube.

We won’t simulate the stuff coming out of the coke, so…

We’ll be able to simulate something like the carbonation that happens inside of the soda. You know, like all of the bubbles that are inside of it.

So first, we start out by setting up the program, along with some universal variables. By the way, we use colormode(HSB) because we will be creating sort of a rainbow effect with the bubbles. We set the values to (width, height, 100) so that we don’t have to do any confusing conversions.

float bubY = 0;
float bubX = 0;
void setup() {
  size(600,600);
  colorMode(HSB,width,height,100);
  strokeWeight(3);
  stroke(0);
  noFill();
  strokeCap(ROUND);
  frameRate(40);
}

Then, we create a void function for making the bubbles. This is the part where the mouseX and mouseY change the hue and saturation of the color, respectively, in the stroke() function.

void bubble(float x, float y, float r, float sw) {
  ellipseMode(CENTER);
  stroke(mouseX, mouseY, 100);
  ellipse(x, y, r*2, r*2);
  arc(x,y, 2*r*.8 - sw, 2*r*.8 - sw, radians(259), radians(260));
  arc(x,y, 2*r*.8 - sw , 2*r*.8 - sw, radians(190), radians(245));
}

After that, we start drawing. At one time, 101 bubbles will appear on the screen in random positions, according to the code. We also make the background black because the colors are bright and when the saturation = 0, the colors will appear white since the brightness is always set to 100, the highest value. This code also makes it so that the bubbles closer to the mouse are smaller and the bubbles further away from the mouse are larger.

void draw() {
  background(0,0,0);
  for (int i = 0; i < 101; i++){
    bubY = random(0, height);
    bubX = random(0,width);
    bubble(bubX, bubY,   dist (mouseX, mouseY,bubX, bubY)/25 - 3 , random(1, 2.5));
  }
}

That’s it! Here’s the end result:

The end product.

You can check out my code on GitHub here.