p5: Iteration (for loops)

Interactive tutorial here


Nested loop structure


Another interactive lesson on for loops here

A better, longer explanation of nested loops



Save them in your openprocessing account and be prepared to post them at the beginning of the next session.

If you have some coding experience you can to do the advanced exercises down below.

Reproduce the drawing below using one for loop:

10 lines, 500×500 px canvas.

– Don’t start coding! Break down the problem on paper first
– Consider using a variable for the lines coordinates like startX, startY and endX, endY.
– Try to draw parallel lines first

Exercise 2

Reproduce the dynamic sketch captured below:

20 lines on each side, 500×500 px canvas.

Exercise 3

Reproduce the drawing below using nested for loops:

9×9 circles. 50px of distance between the centers, 500×500 px canvas.
The circles gradually fade to black.

. break down the problem in different sub-problems
. make a tiling of identical circles first
. implement a variable diameter and figure out a relation with the index variable
. do the same with the alpha channel

Advanced Exercises

If you have some coding experience you want to do these instead

Exercise 4

Reproduce the drawing below using nested for loops and appropriate variables for every quantity (eg. number of concentric circles):

Canvas 500x500px. Rows 4, columns 4, target diameter 80px, distance between centers 100px, target inner circles: 10.

Exercise 5

Reproduce the pattern using nested loops and random:

Based on Anni Albers’ Second Movement – 1978

Exercise 6

Reproduce this animation by psychedelic gif artist dvdp. You’ll need arc(), degrees() and radians() may help: