Processing Month, Day 7 - Bubbles
Posted on 2011-05-07 by Jan Vantomme
Tags:
processing, tutorial
Functions are great to draw multiple objects to the screen at once, but if you want to control each of those objects and animate them, you'll need something more powerful. Today, we'll venture into the world of OOP: Object-Oriented Programming.
If you've read each article this month, and tried out the examples, you already used some object oriented programming. I used the PVector class on day 1 to keep track of the x and y coordinates of points. Today we are going to create our own class to draw bubbles to the screen. The base class for our bubble looks like the piece of code below. Create a new tab in the editor, name the file Bubble and start typing this code:
class Bubble
{
Bubble()
{
}
}The method Bubble() is called the constructor, and is used to create a Bubble object and set values to the variables we need. Those variables need to be declared before Bubble(). If we would declare them inside our constructor, we wouldn't be able to use them in the other methods we are going to write for this class. So add this piece of code before the contstructor.
PVector loc;
float speed;
float radius;Once we have done this, we can set the values for those variables. Add the piece of code below inside the constructor.
loc = new PVector( random(width), random(height) );
speed = random(0.5, 2);
radius = random( 5, 10 );We'll add a method to draw the bubble to the screen, so we can test if our class works. I'll usually name my methods for drawing things to the screen render(). Since this method only draws something to the screen, and doesn't return a value, we need to use the void keyword before our method name.
void render()
{
stroke(59, 173, 224);
fill(59, 173, 224, 64);
for (int i = 1; i < 3; i++) {
ellipse( loc.x, loc.y, i * radius * 2, i * radius * 2 );
}
}The render method draws two circles to the screen. Note that I'm starting my for-loop with i = 1. If i would use i = 0, the first circle would be drawn with a diameter of zero, and we wouldn't see it. To draw a bubble to the screen, we need to create an object of the Bubble type inside the setup() function and call the render() method on that object.
Bubble b = new Bubble();
b.render();If everything goes right, you should see one bubble on the screen. You can find the code for this sketch in the folder processing_month_day_007_001.
If we want to draw more bubbles to the screen, we need to create an array of Bubble objects, just like we created an array of PVector objects on day 1. Add these two variables at the beginning of your sketch. And try to fill the array with new Bubble objects. (Tip: use a for-loop inside the setup() function).
int numBubbles = 50;
Bubble[] bubbles;To render all bubbles to the screen, you need to use a for-loop inside the draw() function. Just like this:
for (int i = 0; i < bubbles.length; i++) {
bubbles[i].render();
}The result will look like the image below. You can find the code for this sketch in the folder processing_month_day_007_002.
Tomorrow we'll add some new methods to our class to animate our bubbles. That's why we needed the speed variable in our class. So today's example won't end up on OpenProcessing. I'll post the full animated version tomorrow.
