Processing Month, Day 6 - Square Flowers, Part 2

Posted by Jan Vantomme on 06 May 2011.
Tags:

For the first five days, we’ve only drawn one object to the screen. Today we are going to take a look at how we can write a flexible function so we can draw multiple flowers to the screen.

We’ll start by defining a function at the bottom of our sketch, right after the draw() function. The void keyword before the name of the function means that the function doesn’t return a value.

void squareFlower()
{

The next thing is to setup some variables between the curly brackets of our function. We need the same variables as in Square Flowers - Part 1, and an extra variable for the color.

float x random(width);
float y random(height);
float steps floorrandom(1020) );
float angle random820 );
float startSize random(80120);
color c color128 random(128), 00); 

To draw the flower to the screen we’ll use the algorithm we used yesterday, but need to add two important functions: pushMatrix() and popMatrix(). If we don’t use pushMatrix() before translate(), we’ll only be able to draw the first flower inside draw() on the right coordinates. That’s ok if you only draw one flower each frame, but if you want to draw more flowers, you’ll need to use pushMatrix() and popMatrix().

stroke);
fill);
pushMatrix();
translate(xy);
for ( 
int i 0stepsi++ ) {
    rotate
radiansangle ) );
    
rect00startSize 5*istartSize 5*i);
}
popMatrix
(); 

Now that our function is ready, we can call drawFlower() inside draw(), so our sketch will draw a flower each frame. If you want to draw more flowers each frame, you’ll need to call drawFlower() more than once, preferably with a for-loop.

Examples.

This example is also available at OpenProcessing.

Square Flowers, Made with Processing

Square Flowers, Made with Processing

Download

Sketch for Processing Month, Day 6

Tweet this article