Lesson 4.2

Nested for loops

Watch: Nested Loops- p5.js Tutorial

Video for 4.2:

What is a nested loop?

If we wished to draw a set of circles across the top of the canvas,

we could write a normal loop.

If we wished to draw a set of circles along the side of the canvas

we could write another normal loop.

However, if we wished to draw a set of circles to cover the canvas we wish to repeat either the vertical or horizontal loop many times

so we can write a nested loop.

We can think of this as repeating not a single function, but a set of function calls represented by the vertical column, as many times as is needed to fill the canvas horizontally.Think of it in steps.

Step 1: A vertical column of circles will be drawn with x = 10 and y between 0 and the height of the canvas.

Step 2: The next column of circles will be drawn with x = 20 and y between 0 and the height of the canvas.

Step… We keep drawing columns of circles until we reach the right edge of the canvas.

Exercise 4.2a: Draw the following using a nested for loop. Do not worry about duplicating the color scheme – just use colors you like, but keep the border.

Exercise 4.2a

Exercise 4.2a help