Nested for Loops

Building from the last page, how could you use a for loop to do something across both axis of the entire screen? I.E. In every row and every column? Essentially touching the entire grid?

The brute force way, would be to write a for loop that does something across the X-axis. Like the following, which currently draws a line of circles across the X-axis;

Then to add another row, below the first, we could simply, copy, paste, and update where the Y-axis position will be.

This, of course, raises the same issues, and inefficiencies discussed back on the first page of this weeks content. Specifically, that this is fine for a small number of iterations. But is impractical for larger numbers. It also suffers from the problem of not being easily editable. (If you want to change one thing, you must do so in every place that it occurs.)

Obviously, instead, we should create some sort of looped process to automate the task…

LIKE A FOR LOOP!

The eloquent solution is to create a second for loop that handles the movement of the for loop drawing circles across rows on the X-axis. This additional for loop will cause the X-axis for loop to move down every iteration, thereby drawing a new row.

The code for this might look something like the following;

With 2 additional lines of code, it becomes possible to execute any number of X-axis-based for loops.

The outer for loop essentially handles specifying the Y-position. You will notice that this outer for lop defines and uses the Number variable y, which is passed as the “y” parameter to the ellipse function.

As before in the above examples, the inner for loop handles the placement of circles along the X-axis.

For the moment, lets assume that the variable pad is set to 100.

In this scenario, the outer for loop (Y-Loop), is initialized such that y=50 (or the circleSize variable’s value). This for loop then executes the contents of its function block. This of course contains the inner for loop (X-Loop).

This inner for loop (X-Loop) initializes the variable x to the value of 50, or circleSize. Since this is less than width, it executes its function block contents. Which create a random color and draws a circle, positioned at the values of x and y or (x:50, y:50).

Upon completion of this process, the inner for loop (X-Loop) then updates its variable value by adding 100 to x, or the value of pad. The inner for loop (X-Loop) then checks whether this is less than width. Since it is, the inner for loop (X-Loop) executes its function block again. This time drawing a circle at (x:150, y:50). For a window that is 300px wide, this process would occur one more time, drawing a circle at (x:250, y:50). After the execution and drawing of this circle, the update statement would set x to 350. The conditional statement would return false, meaning x is greater than width. In this case, the inner for loop (X-Loop) exits.

Since the inner for loop (X-Loop) is wrapped in the outer for loop (Y-Loop), this for loop then has to check its state and values. At the end of execution of the inner for loop, the outer for loop (Y-Loop) executes its update statement thereby setting y tp 150. Assuming a canvas with a height of 200, the conditional statement would return true that y is less than height. In which case, the outer for loop (Y-Loop) would execute its function block again. This would result in the inner for loop (X-Loop) executing again, as though it had not before. The variable x will be re-initialized and defined to the value of circleSize or 50. It will therefor execute 3 times again, drawing circles at;

• (x:50, y:150)
• (x:150, y:150)
• (x:250, y:150)

Afterwards, the inner for loop would exit again, return control to the outer for loop again. This would continue until the y value is greater than height, thereby triggering the outer for loop to exit.

More Examples

Please look at the following examples from “Make: Getting started with p5”. Notice how with slight modifications, quite interesting patterns can be achieved.

Example 1 of more nested for loops

Example 2 of more nested for loops

Example 3, Crazy Options

NOTE: Click with your mouse on the next example.