Drawing a pattern with For Loops

In this example, we will learn how to draw a pattern by repeatedly calling a function. In a previous example, we saw how we could draw lots of different versions of pacman by calling a function several times and changing the parameters. We draw  the same shape  over and over again without having to cut and paste lots of function calls. We control how often it repeats, and how much the position of the shape changes with a For Loop.

pacman_pattern
You can change the pattern by changing the size and colour of the pacman.

pacman_pattern

 

If you want to see how the Ikamvacoders modified the “for” loop, take a look here.

Basically the for loop lets you control a repeated action, such as drawing a pattern. We’re using the drawPacman function we created in a previous lesson.

for(x=0;x<width;x+=radius){
  pacman(x, y, pink, false, radius, 1);  
  }
}

There are three parts you need to understand to create a For Loop:

  1. init – this is the starting point of your value. In our example,  the init value of x is 0 so that we can start drawing our pacman pattern on the left edge of the sketch. Can you work out how you could get the first pacman to display properly
  2. test – This is a statement about your value that the program must test and decide whether it evaluates true or false. In our example, the test works out whether x is still smaller than the width of the sketch (because that is where we want to stop drawing the pattern). This test  must be true for the For loop to continue.
  3. update: the update changes the value you’re working with, In our example we add the radius of pacman to the value of x every time. x+=radius means the same as x=x+radius. This way our pacmen don’t overlap.

Each part must be separated by a semicolon (;). If the test evaluates true, then the For loop executes the statements in the curly brackets below. If it evaluates false, then it doesn’t execute them and the loop stops.You need to ensure that you don’t create an endless loop by setting a test that will never become false. Here’s a more precise description from the Processing website, where you can see other examples of For Loops:

1. The init statement is run.
2. The test is evaluated to be true or false.
3. If the test is true, jump to step 4. If the test is false, jump to step 6.
4. Run the statements within the block.
5. Run the update statement and jump to step 2.
6. Exit the loop.

You can see the code below, or try out the code in a sketchpad. Can you change the pattern? See whether you can figure out how to get a vertical pacman pattern instead of a horizontal one.

///Draw a row of pacman characters using a function
float x;
float y;
color pink = color(255,134,241,125);
//set the radius variable for the pacman characters
int radius = 50;
//boolean to set the sex of the pacman characters
Boolean female = true;
void setup() 
{
  size(600,radius*3);
  //set initial values for the pacman coordinates
x=0;  
//position pacman correctly for background graphic
  y=height/2;
}
//the draw() function executes repeatedly to create the animation
void draw() 
{
  smooth();
  //draw background
   background(255);

   //use for loop to draw series of pink pacmans across the screen
for(x=0;x<width;x+=radius){
  drawPacman(x, y, pink, false, radius, 1);  
  }
}

void drawPacman(float pacX, float pacY, color clr, Boolean ms, int pacRadius, int direction)
{
fill(clr);
noStroke();

if (direction==0)
  {
    //draw pacman facing right
    arc(pacX, pacY, radius,radius, radians(45), radians(315));
  }
else
  {
    //draw pacman facing left
    arc(pacX, pacY, radius,radius, radians(225), radians(360+135));
   }
//draw eyes
fill(0);
ellipse(pacX,pacY-radius/3,radius/5,radius/5);
if (female == true)
  {
    //draw ribbon for ms pacman
    fill(255, 0, 0, 200);
    triangle(pacX,pacY-radius/2,pacX+radius/3,pacY-(radius/3)*2,pacX+radius/3,pacY-radius/3);
    triangle(pacX-radius/3,pacY-(radius/3)*2,pacX,pacY-radius/2,pacX-radius/3,pacY-radius/3);
  }
 //save a screenshot of the image
  if (mousePressed) {
    if (mouseButton == RIGHT) {
       save("pacman_pattern.png");
    }
  }
}
Advertisements

3 thoughts on “Drawing a pattern with For Loops

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s