Module 05 : Nested Loops

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• Nesting Loops
• Random Number Generators

New processing syntax:

Simply the fact that the body of a loop can contain whatever logic we wish including, perhaps, yet another loop.

Resources

• pp. 44-46 of Ch. 4 of the Reas/Fry book

• Watch Daniel Shiffman Video 6.5, Nested Loops (7 minutes)
  (available at learningprocessing.com and YouTube)

• Bonus topic: Watch Daniel Shiffman Video 4.2, Random Number Generator (12 minutes)
  (available at learningprocessing.com and YouTube)
  although I know we still will need to go back to his Chapter 3 videos soon to explore interactive sketches that are used in this video.

In-Class Activities

Before exploring nested loop, we consider a few more examples of single loops but with the addition of the random() function to add some variety.

Random Circles
To begin, we simply drawn 200 circles on the screen, but using randomness to vary their size, position, color, and transparency.
(Spoiler: solution)

House with Birds
For our next example, we begin by providing a sketch of a scene with a house (house.pde).

Your task is to add a bunch of birds to the sky at random locations (but please keep them in the sky).
(Spoiler: solution)

House with Stars
And a night-time scene with a bunch of random stars in the sky.
(Spoiler: solution)

Reas/Fry Example 4-10 and 4-11
To begin our exploration of nested loops, we review several of the examples given in Chapter 4 of Reas/Fry, starting with sketches 4-10 and 4-11 which demonstrate the significant difference between two nested loops and two independent loops.

(Spoiler: solution)

(Spoiler: solution)

Reas/Fry Example 4-12
We can start to really have fun with the power of loops.
(Spoiler: solution)

Reas/Fry Example 4-13
(Spoiler: solution)

Our 100x100 Grid Lines
It is finally time to show how we produced the default gridlines in so many earlier sketches. We need nested loops because we wanted to make a series of dashed lines and each dashed line is created by using a loop to make each individual dash.
(Spoiler: solution)

Staircase Nested
The high-level logic for this is the same as the original. However, instead of drawing one wide rectangle for a level, we use an inner loop to draw a series of squares.
(Spoiler: solution)

Pyramid Nested
(Spoiler: solution)

Brick Wall
This is a bit more challenging, especially because of the alternating pattern from one row to the next. To achieve that offset, we can use a trick which is that if row is an integer variable that counts what row number we are in, the expression (row % 2) will be 0 when an even-numbered row and 1 when an odd-numbered row.
(Spoiler: solution)

Color Mixing
We end with some color mixing. Unlike the previous gradients that consisted of solid lines, we use nested loops in these cases to cover the entire canvas with individual points, while adjusting the colors of those points to be mixed in proportion to the x and y coordinates (using different formulas for our two examples).

(Spoiler: solution)	(Spoiler: solution)

Sample Quiz Question

We will change our style for this quiz. Instead of you writing your own Processing program, we will provide a Processing program and ask you to draw the sketch which it produces. Of course, you will NOT be allowed to use the computer. Instead, we want you to understand the use of loops and be able to accurately predict how that code would behave.

For example, perhaps we might ask what picture is produced by the following:

size(400, 400);

int numSteps = 10;
float stepSize = 40;

for (int level = 0; level < numSteps; level += 1) {
  for (int block = 0; block < 1+level; block++) {
    rect(block*stepSize, level*stepSize, stepSize, stepSize);
  }
}