Module 04 : Loops

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

Topics

• Repetition with loops

New processing syntax:

• while loop
• for loop

Resources

• pp. 40-44 of Ch. 4 of the Reas/Fry book (although this only demonstrates use of the for loop syntax)

• Watch Daniel Shiffman Video 6.0, While Loops (11 minutes)
  (available at learningprocessing.com and YouTube)
  

  We offer this with some apology as we are covering topics in slightly different order, and so this video relies on some techniques that we have not yet seen (but soon will).

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

Note: There is a lot to learn here, and I'll probably spend some time at the beginning of the class to give my own explanation of loops.

• my notes

In-Class Activities

Reas/Fry Example 4-6
We will begin by reviewing several of the examples given in Chapter 4 of Reas/Fry. The following is a variant of Example 4-6, but with choice of geometry that is easier to discern relative to our landmark grid.
(Spoiler: solution)

Reas/Fry Example 4-7
Similar to previous example, but showing that minor change in code can be used to alter spacing between lines and the stroke weight for all.
(Spoiler: solution)

Reas/Fry Example 4-8
And one more quick change to how we compute the x-coordinate of the bottom endpoint of each line.
(Spoiler: solution)

Reas/Fry Example 4-9
This time, replacing each single line with a pair of well-placed lines
(Spoiler: solution)

Bullseye
Here are a serious of co-centric circles. Please develop a program that defines a variable numRings at the beginning, and figures out the appropriate ring sizes based on that variable and the canvas size.
(Spoiler: solution)

Staircase
For this staircase, try to have a variable numLevels that can be set to determine the precise number of levels to draw, with the height of each level based on dividing the overall height of the canvas. You can assume the canvas has square shape.

int numLevels = 5;	int numLevels = 10;

Spoilers:

• solution using for loop over level numbers
• solution using while loop and y and levelWidth variables

Staircase Padded
This time, rather than using the entire canvas, we intentionally leave padding around the entire staircase, such that the amount of the padding is defined to be precisely half the height of one level.
(Spoiler: solution)

Staircase Colored
We can also use loops to play with colors, in this case, filling the rectangles of the previous sketch with varying shades of red, as we let the red component of the fill color vary in increments from 0 to 255.
(Spoiler: solution)

Pyramid Padded
We can vary the staircase another way, by changing the horizontal placement of each rectangle to produce the following pyramid.
(Spoiler: solution)

Our 100x100 Grid Lines
You have probably noticed by now that in most of our example figures thus far this year, we have been providing a convenient grid that marks off 100x100 pixel squares as landmarks for laying out the geometry of our sketches, but those grid lines aren't actually visible when running the sketches in Processing. That's because we've been hiding a few lines of code in all our sketches when producing the figures for these modules. Its time for you to learn how to make those grid lines on your own.

As our first version, we will begin by drawing solid lines for the grid. We ask you to design a sketch that simply draws horizontal and vertical grid lines at 100-pixel intervals. Please write your code in a way so that it automatically works based on the given window size. If the window size is not a multiple of 100, then its okay that there will be a partial row/column diagramed. For example, the following is the desired result for a 580x320 canvas.
(Spoiler: solution)

Another Grid

The previous grid was for fixed 100-pixel intervals, no matter the dimensions of the canvas. In this case, we ask that you instead divide the canvas evently into a number of rows and columns defined by initial variable declarations, such as the following:

int numRows = 5;
int numCols = 3;

Pie Slices
Let's divide a pie into n even pieces (and then omit one, to make the pie look more appetizing). We simply determine the appropriate angle for each slice and then use a loop to repeatedly draw the circular arc with the appropriate start and end angle.
(Spoiler: solution)

Line Art
Can you figure out the pattern to these lines? We connect (0,0) to (0,400), then connect (0,5) to (5,400), then (0,10) to (10,400), etc.
(Spoiler: solution)

Line Art 2
Variant in which we need not assume that the sketch canvas is a square, and where we define a numStrings variable to make it easier to adjust the design.
(Spoiler: solution)

Line Art 3
Hmm...how much can we get out of this technique?
(Spoiler: solution)

Line Art 4
This is the challenge round! In particular, can you figure out which of the sets of lines should be drawn first and which should be drawn last?
(Spoilers: Big hint, solution)

Color Gradient
In this sketch, we create a smooth color gradient by linearly interpolating the blue and red intensity for a series of vertical lines drawn at each x-coordinate. We want a formula so that the blue intensity transitions from 255 to 0 while the red intensity transitions from 0 to 255.
(Spoiler: solution)

Color Gradient 2
We can make the previous sketch more general by linearly interpolating between any two colors (rather than just specifically blue and red). To do this, we define the two reference colors and then do a component-by-component analysis to take (1-p)*left color + p*right color for a paramter p that ranges from 0 to 1. Note that you can retrieve a specific color component using a syntax such as blue(c) where c is a previously defined color variable.
(Spoiler: solution)

Bonus Lesson: The desire to linearly interpolate between two colors is a common task for Processing artists. For that reason, the language already includes a function, lerpColor, that performs such a calculation. We demonstrate its use in this alternate solution for the previous sketch.

Picket fence
For this next example, we begin by providing a sketch of a scene with a house (house.pde).

Your goal is to use a loop to add a nice picket fence in the yard.
(Spoiler: solution)

Staircase as a single shape
Revisiting one of our earlier staircases, our goal this time is to use the beginShape, endShape technique to create the staircase as a single polygon. A for loop can be used to produce most of the vertices (although two of them are better done outside that loop).
(Spoiler: solution)

Pyramid as a single shape
In similar style, here is the earlier pyramid, defined as a single polygon.
(Spoiler: solution)

Graphing a Parabola
We use an unfilled shape to graph the parabola defined by the function y = 0.01 * (x-300)².

(Keep in mind that the y-axis in computer graphics is inverted from the traditional mathematical coordinate system.)
(Spoiler: solution)

General graphic calculator
We can use the same technique to graph any function y=f(x), and can even take care to artificially invert and recenter the coordinate system. In this example, we graph a function of the form y = a * x³ + b * x² + c * x + d (Spoiler: solution)