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); } } }
Instructions
The p5.js sketch to the right draws a row of rectangles made by calling the rect()
function five times. Refactor the code to draw the row of rectangles using one for
loop.
Let’s add another for
loop inside the one you just created to draw a 5 by 5 grid of rectangles.