Processing Month, Day 5 - Square Flowers, Part 1

Posted by Jan Vantomme on 05 May 2011.

Today, we’re going to take a look at how we can create a flower by drawing rectangles on top of each other. You’ll learn how the translate() and rotate() functions work.

The first thing you need to do is use rectMode(CENTER) to make sure your rectangles are drawn from the center. The rect() function normally draws a rectangle from the upper left corner.

Before we draw anything to the screen, we need to set a few variables. The angle will be used to rotate each square. Note that I’ve set the angle in degrees here. The steps variable is the number of squares that will be used to draw the flower. The flowerSize variable is the size of the biggest rectangle in our flower, and the stepSize variable controls how much smaller the rectangles get each step.

float angle 6;
int   steps 50;
float flowerSize 150;
float stepSize 3

We want to draw the flower to the center of the screen so we’ll use translate(width/2, height/2) function to put the (0, 0) coordinate at the center of the window. We need to do this so we can draw all our rectangles at (0, 0) and rotate each one of them. The rotate() function rotates around the (0, 0) coordinate. If we don’t use the translate() function and draw the rectangle like this: rect(width/2, height/2, flowerSize, flowerSize), we would end up with a different result.

Drawing squares without using the translate function

So the algorithm to draw the flower looks like this. I’m using the radians() function to convert the value of angle which is set in degrees, to a value in radians needed for the rotate() function.

for ( 
int i 0stepsi++ ) {
radiansangle ) );
rect00flowerSize - (stepSize i), flowerSize - (stepSize i) );

Tomorrow, we’ll take a look at how you can create a function to draw lots of different flowers to the screen.


The example is also on OpenProcessing.

Square Flowers, Made with Processing

Square Flowers, Made with Processing

Square Flowers, Made with Processing



Sketch for Processing Month, Day 5

Tweet this article