# Processing Month, Day 5 - Square Flowers, Part 1

Posted by Jan Vantomme on 05 May 2011.
Tags:

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.

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.

``` translate( width/2, height/2 );for ( int i = 0; i < steps; i++ ) {    rotate( radians( angle * i ) );    rect( 0, 0, flowerSize - (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.

### Examples

The example is also on OpenProcessing.