Week 5: February 25: Critique + p5.js + Generative Design


    • Mini-Studio
    • Portfolio Critique
    • Review p5.js/Click Functions/Self Quiz
    • for Loops
    • Generative Design

Mini Studio

From 10AM – 10:30AM you’ll have time to put the finishing touches on your portfolio.


10:30AM – 11:30PM: Critique on Portfolio Site

p5.js Click Questions

Canvas as Background Sketch

To show some other uses of p5.js, let’s jump back in to look at mousePressed again and buttons.

mousePressed button event

Quiz Mini project

for Loops

A for loop is one of the main methods for iterating through a set of data.

let data = ["Graphic", "design", "is", "my", "Passion"];

Take the above array for example as our set of data. If I wanted to print out this set of data in sequence, I would use a loop to iterate through the array. Remember, to access an element of the array, we would type


This would give us the first element inside the array, would would be a string called Graphic. So to iterate through the data, I need to change the number that is inside the brackets, starting at 0, but going up to the length of the array. This is where a for loop comes in. Before we get there, one important function is .length. When this is added onto the end of a variable that contains an array, it will return the amount of contents inside an array as a number. Since this number can change dynamically, this is important to use when accessing arrays.


This would return 5, because there are 5 elements inside the array.

A basic for loop looks is set up like this:

for( initialization; test; update;){

The initialization gives the loop a place to start. The test says keep going through the loop until this condition becomes false. The update tells the loop how to change each time it goes through the loop. The statements are what actually happens inside the loop – either writing text, drawing images, etc.

For our loop to access the data array, we would write:

for( let i=0; i<data.length; i=i+1 ){
          console.log( data[i] );

The initialization, let i = 0; says start at a value of 0.
The test, i<data.length; says run the loop until we reach the end of the array, in this case, as long as i is less than 5.
The update, i=i+1; says add one to the value of i each time the program runs. This means each time the loop runs, it will start at 0, increase to 1, then 2, then 3, then 4, then stop at 5 and exit the loop.

The statement, console.log( data[i] ); tells console log to print the value of data[i]. Since i is a variable and used inside the loop, its value will change with each time through the loop. So it starts at 0, then becomes 1, etc. This means we get the values of data[0], then data[1], etc. Which means this prints to the console Graphic then design.

All together, this is what this mini-program would look like:

let data = ["Graphic", "design", "is", "my", "Passion"];

function setup() {

    for( let i=0; i<data.length; i=i+1 ){

    console.log( data[i] ); 


This is used to iterate through large sets of data, move shapes, create arrays, and much more.

Below is a sample for loop, open it up in the p5.js web editor and duplicate it to your account.

Sample For Loop!

Now let’s look at one with some shapes.

For loop with Shapes

Generative Design/Art

Girih tiling in the Darb-e Imam shrine in Isfahan

Japanese Yosegi decorations


Frieder Nake, 1967


Sol LeWitt, Wall Drawing, 1971



How Algorithms Shape our World – Ted Talk

MIT’s logo has over 40,000 permutations
And then they changed it again three years later…

Hint.FM – Fernanda Viégas and Martin Wattenberg


Jason Salavon, 117 Homes for Sale, Chicagoland   1999

Algorithmic Chair





Sample JSON Data Sets: https://github.com/dariusk/corpora/tree/master/data