EARTH 801
Computation and Visualization in the Earth Sciences

Lesson 2: Wrapping up for loops

PrintPrint

Nested loops

You can write for loops inside of other for loops. I think of this kind of thing kind of like tiling a cookie tray with the dough for a batch of cookies. Let's say you've made enough dough for 1 dozen cookies and you have a cookie tray. Here's a way to think of a pair of nested loops that explains how to put the dough blobs on the tray into 4 columns of 3 blobs each. (I think following along with my written description is a spatial visualization exercise, what do you think?)You go to first position in the upper left corner of the tray, then you execute a loop 3 times so that at the end of the loop, you have put 3 dough blobs on the tray in a column. That loop finishes and then you move one position to the right. You execute the same loop three more times so that you make a new column of dough blobs next to the first column. Keep going until you've got four columns with three cookies in each column. Here's how you'd write in Processing what I just explained in English.

int doughBlobSize = 20; 
for (int xpos = 10; xpos < 100; xpos = xpos + 25) {
   for(int ypos = 10; ypos < 100; ypos = ypos + 40) {
      println("xpos =" + xpos, "ypos =" + ypos);
      ellipse(xpos, ypos, doughBlobSize, doughBlobSize); 
   } 
}

I put the println() command in there so that when the program runs, you can check that the loops are doing what you thought they were doing. In general, sticking a println() command into your code somewhere is a good idea when you get unexpected output or an error and you want to double check that variables have the values you thought they did.

Let me break down the syntax println("xpos =" + xpos, "ypos =" + ypos);

The part that goes "xpos =" says to print the string xpos =

The part that goes + xpos says to print the value assigned to the variable named xpos

The comma tells Processing to put in a white space

The part that goes "ypos =" says to print the string ypos =

The part that goes + ypos says to print the value assigned to the variable named ypos

The commands are executed very fast but that println command gets executed 12 times, and each time the value of xpos and ypos have changed so it prints the new value to the screen. If you look at all the values in the console and cross-check that information with the display window output, you should be able to see the order in which the position of each dough blob was determined, even though they all get plotted at once in the blink of a human eye.

A screenshot of the program and its output:

Screenshot of a Processing program demonstrating a nested for loop, see text description in link below

A program demonstrating a nested for loop. Click for text.

Code Displayed

//12 cookies on a tray

int doughBlobSize=20;

for (int xpos=10;xpos<100;xpos=xpos+25) {
   for (int ypos=10;ypos<100;ypos=ypos+40){
      println("xpos=" +pos, "ypos=" +ypos);
      ellipse(xpos,ypos,doughBlobSize,doughBlobSize);
   }
}

Output Displayed

xpos=10 ypos=10
xpos=10 ypos=50
xpos=10 ypos=90
xpos=35 ypos=10
xpos=35 ypos=50
xpos=35 ypos=90
xpos=60 ypos=10
xpos=60 ypos=50
xpos=60 ypos=90
xpos=85 ypos=10
xpos=85 ypos=50
xpos=85 ypos=90

There is also a pop-up window displayed showing 3 rows of 4 white circles (or 4 columns of 3 white circles, depending on your point of view).

One more example

size(200, 200);
stroke(255);
line(10, 0, 10, 100);
stroke(0);
for (int i = 10; i < 200; i = i + 10) {
   println(i);
   fill(i);
   ellipse(i, i, 10, 10);
}
stroke(255);
line(30, 0, 30, 100);

This program first draws a white vertical line, then it starts a loop in which it draws a diagonal series of circles, each one lighter in color that the last. Then it leaves the loop and draws another vertical white line. This program demonstrates loops and command order. You can tell that the first white line was set before the loop started because the circles plot on top of it. The second white line came after the loop because it is drawn on top of the circles. The circles go in a diagonal line instead of tiled because I am incrementing both x and y at the same time instead of nesting one loop inside another loop.

display window output of a Processing program demonstrating loops and command order, see text above

Exercises

2.5 Rewrite the dough blob program so that you place the blobs in the same configuration, but you start from the bottom right corner and work upwards and to the left.

2.6 Use at least one for loop to draw your custom shape from Exercise 2.4 several times.

Turning in your work

Turn in Exercise 2.6 to the Lesson 2 dropbox by the due date indicated on this lesson's overview page. Here's what I am looking for in your program: correct use of beginShape(), endShape(), and vertex(), use of variables to set the vertices, and correct use of a for loop to draw the shape multiple times. Name your file lastname2_6.pde