Processing Month, Day 5 - Square Flowers, Part 1
Posted on 2011-05-05 by Jan Vantomme
Tags:
processing, tutorial
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.
