Now that we know the basics of drawing with p5.js, we can begin to make complex designs based on algorithmic rules. So far, our code has worked by executing each line of code one after another. If we were to draw four lines, we would write four separate calls to the line() function. Instead, we can use the for loop to draw multiple shapes without having to repeat the code. We can also produce interesting patterns by modifying arguments of shape and style functions upon each iteration.

Let’s take a look at the sketch below that draws three lines:

function draw() {
  line(75, 0, 75, height);
  line(150, 0, 150, height);
  line(225, 0, 225, height);
}

Notice that each line we draw uses the same y positions, but each x position increments by 75 pixels. We can simplify the above sketch by using a for loop and adding multiples of 75 to each iteration’s x position.

function draw() {
  for(let lineX = 0; lineX < 4; lineX++){
    line(75 + lineX * 75, 0, 75 + lineX * 75, height);
  }
}

This might not seem like a lot now, but what if you want to draw 99 lines?

function draw() {
  for(let lineX = 0; lineX < 99; lineX++){
    line(4 + lineX * 4, 0, 4 + lineX * 4, height);
  }
}

You can use use for loops to change a number of parameters such as position, fill, stroke, color, size, and more! Take a look at the sketch below that draws 255 ellipses. With each iteration, the fill color increments from black to white, and the size decrements from 255 to 1.

function draw() {
  background(220);
  for(let i = 0; i < 255; i++){
    fill(i);
    circle(width/2, height/2, 255-i);
  }
}

You can put any code within a for loop, so why not another for loop? A common use case for nested for loops is to make grids of shapes. You use one for loop to form a row, and another for loop to repeat the row to form a grid!

function draw() {
  for(let posX = 0; posX < 4; posX++)  {
    for(let posY = 0; posY < 4; posY++)  {
      circle(posX * 25, posY * 25, 50);
    }
  }
}