Expressions, variables and loops

← back to Creative Computing

by Allison Parrish

In the previous tutorial, I showed you how to download p5.js and make your first sketch. In this tutorial, I’m going to show you a few fundamental concepts of computer programming: expressions, variables, and loops.

Expressions

In the sketches in the previous tutorial, I showed you how to call functions (like ellipse) with parameters. The parameters were all numbers, like 100 or 300 and so forth. Numbers like 300 or 150 in Javascript are called a value. (Later in the class, I’ll show you types of values that aren’t numbers, but for now, let’s just assume that we’ll only be working with numeric values). In all of the sketches in the previous tutorial, each of the functions was called with individual values for parameters.

Individual values are fine, but they’re only the beginning of the story. It turns out that anywhere you find an individual value in Javascript, you can also write something called an expression. An expression is a way to make a new value by combining other values with operators.

I’ll talk more about how this works in a second. But first, let’s look at an example. Here’s a basic sketch that draws four circles:

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(255);
    fill(255);
    stroke(50);
    strokeWeight(8);
    ellipse(100, 100, 150, 150);
    ellipse(300, 100, 150, 150);
    ellipse(100, 300, 150, 150);
    ellipse(300, 300, 150, 150);
}

Simple so far. But any of these numerical values can be replaced by an expression. In its simplest form, an expression consists of an operator, with two values, one to the left of the operator and one to the right. For example, here’s the same sketch, but using the addition operator (+) to change the Y position of each of the ellipses by 50 pixels:

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(255);
    fill(255);
    stroke(50);
    strokeWeight(8);
    ellipse(100, 100 + 50, 150, 150);
    ellipse(300, 100 + 50, 150, 150);
    ellipse(100, 300 + 50, 150, 150);
    ellipse(300, 300 + 50, 150, 150);
}

Where I wrote 100 + 50 in that example is an example of an expression: two values, combined with an operator. The operator in this case was +, but all of the familiar mathematical operators from your childhood arithmetic days are supported, though some of them are written in unintuitive ways:

Here’s another sketch that plays around a bit with these operators:

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100 + 50, 150, 150);
  ellipse(300 - 25, 100, 150, 150);
  ellipse(100, 300 + 50, 150 / 3, 150);
  ellipse(300, 300, 150 * 2, 150);
}

The multiplication operator is written with * and the division operator with / (if you’re used to doing arithmetic or algebra, you can imagine that / as being sort of like the regular horizontal division bar, just tilted onto its side. The dividend goes on the left and the divisor on the right.)

If you’re a newcomer to programming, the example above probably looks horribly weird and complicated. Here’s how to read one of these lines without feeling like you’re looking into a wretched pool of punctuation madness. For a line like this:

ellipse(100, 300 + 50, 150 / 3, 150);

Here’s how to read it out loud:

• This is a call to the ellipse function.
• In function calls, parameters are separated by commas. There are three commas inside the parentheses, so there must be four parameters. (Commas only go between parameters, so there will be one fewer comma than parameters.)
• The parameters to the function, then, are 100, 300 + 50, 150 / 3, and 150.
• 100 and 150 are just plain values, but 300 + 50 and 150 / 3 are expressions. Javascript will turn these expressions into values when the sketch is running (the resulting values will be 350 and 50, respectively).
• The order of the parameters matters, but you don’t know which position has what meaning without consulting the documentation. Looking at the documentation reveals that the first parameter is the X position, the second parameter is the Y position, the third parameter is the width, and the fourth parameter is the height.
• So, this line of the code will result in an ellipse being drawn at X position 100, y position 350, with a X diameter of 50 and a Y diameter of 150. (Which is exactly what you see in the sketch!)

The process of turning an expression into a single value is called evaluation. Whenever you put an expression in your program, Javascript evaluates it in order to turn it into a value.

Note that the spaces before and after the operator are optional. This:

300 + 50

… means exactly the same thing as this:

300+50

Each programmer decides for themselves which style is more appropriate for them. (Personally I tend to switch between the two, depending on the context.)

Using p5.js as a calculator

Right now you’re probably saying, “Wait, why should I write 300 + 50 in my program instead of just, you know, 350? I already know what 300 + 50 is.” And you’re right, the examples above aren’t particularly useful. Operators are mostly useful with variables, which we’ll discuss below. But in the mean time, I want to show you how you can use p5.js as a calculator. Say you have some arithmetic expression that is difficult to figure out by hand, like

427 * 54

You can use p5.js to calculate this! Simply start a new sketch in the web editor, and paste this code somewhere between the { and } following function setup():

console.log(427 * 54);

You can type any expression you want between the parentheses. When you press the run button, the sketch window will be empty, but the result of the expression will be displayed in the “Debug” area beneath the code panel. (It will also show up in your browser’s JavaScript console, which might be a more reliable place to find it!)

The console.log() function is a special function that doesn’t draw anything to the screen: its only purpose is to display the result of evaluating expressions to the debug area. (You’ll learn later how useful this can be for the purposes of identifying and diagnosing errors in your programs.)

More complex expressions and order of operation

An operator can have a value on either side of it, but it can also have another expression to either side. There’s no real limit to the number of embedded expressions that you can include in an expression that evaluates to a single value.

To use an expression as part of another expression, surround that expression in parentheses. For example:

console.log(4 + (5 * 6));

The expression in this bit of code is 4 + (5 * 6), which translates to: “Perform an addition operation. Add the value four to the result of multiplying 5 times 6.” (The result is 34.)

Even more complex:

console.log((18 / 3) - (3 + 2));

Here, we’re subtracting the result of 3 + 2 from the result of 18 / 3. Internally, Javascript performs these operations in a manner similar to how you would perform this operation by hand, by going from left to right, locating any expressions inside of parentheses and evaluating them. The steps of evaluation look something like this:

• (18 / 3) - (3 + 2)
• 6 - (3 + 2)
• 6 - 5
• 1

Exercise: What do you think the expression ((1 + 2) * (3 + 4)) / (9 - 2) would evaluate to? Try to work it out by hand first, and then check using console.log() to evaluate your guess. How would you characterize Javascript’s rules for evaluating expressions embedded within other expressions?

If you leave out the parentheses, Javascript tries its best to guess the order in which to evaluate parts of the expression. It uses the same rules that you learned in arithmetic: PEMDAS (parentheses, exponents, multiplication, division, addition, subtraction). So, for example, in the following expression:

4 + 5 * 6

Javascript evaluates the multiplication first (5 * 6) and the addition second (4 + 30), resulting in 34. To get Javascript to evaluate the addition first, you need to surround that expression in parentheses:

(4 + 5) * 6

… which evaluates to 54 (nine times six).

Personally, even though Javascript has okay rules about deciding what order to perform operations in, I find that my programs end up being less error-prone if I always use parentheses to disambiguate the order of operations.

Variables

Now that you have an understanding of values and expressions, I can start explaining one of the most powerful concepts in computer programming: variables.

Changing values with search and replace

To explain variables, let’s return to the four circles example from earlier. Here’s the sketch again:

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(255);
    fill(255);
    stroke(50);
    strokeWeight(8);
    ellipse(100, 100, 150, 150);
    ellipse(300, 100, 150, 150);
    ellipse(100, 300, 150, 150);
    ellipse(300, 300, 150, 150);
}

Looks good. But ugh, those circles are so big! I want them to be smaller—let’s say, 100 pixels in diameter instead of 150. But there are so many 150s to change! Life is too short to go through and change them all by hand, so instead I’m going to use the search and replace function.

Okay, that seems to have worked…

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(255);
    fill(255);
    stroke(50);
    strokeWeight(8);
    ellipse(100, 100, 100, 100);
    ellipse(300, 100, 100, 100);
    ellipse(100, 300, 100, 100);
    ellipse(300, 300, 100, 100);
}

But now… huh. They’re too small. Actually, I think I was wrong to begin with, and even 150 pixels was too small. Let’s go for broke and make those circles 200 pixels wide. All I need to do to make this change is just search and replace 100 with 200, right? Let’s see…

function setup() {
    createCanvas(400, 400);
    noLoop();
}

function draw() {
    background(255);
    fill(255);
    stroke(50);
    strokeWeight(8);
    ellipse(200, 200, 200, 200);
    ellipse(300, 200, 200, 200);
    ellipse(200, 300, 200, 200);
    ellipse(300, 300, 200, 200);
}

Oh wait. Whoops. That’s not right. What happened?

Well, it turns out that 100 was not just the new value for the diameter of the circle, it was also the value for some of the X/Y coordinates of the circle. So when I tried to change that value with search and replace, I accidentally changed those values too. Troublesome. Problematic! Now my circles are all weird and I hate life.

Variables to the rescue

So, think a bit about how you would solve this problem. Basically: you want to be able to use the same value in multiple function calls, and if later you want to change that value, you want to only have to update it in one place, instead of everywhere in your sketch. It would be great if there were a way to tell Javascript something like, “Hey, I know usually you want me to type a number or an expression here as a function parameter. But actually, instead of looking in the function call for that number, look somewhere else. I made this post-it note over here labelled ‘diameter’ and it has a number written on it, and I know it’s a lot to ask because you’re a computer, but maybe you can just look at the post-it note and get the value from there instead of me having to type the number over and over again.”

It turns out that there is a way to make Javascript do this, and it’s called a variable.

Well, not exactly this: there’s no post-it note. But you can include a special line in your program that gives a particular value a name, and then you can use that name in your program to refer to that value, instead of typing the value itself. Here’s what it looks like:

let diameter = 200;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, diameter, diameter);
  ellipse(300, 100, diameter, diameter);
  ellipse(100, 300, diameter, diameter);
  ellipse(300, 300, diameter, diameter);
}

The line at the very top of the sketch—even before function setup() { is a variable declaration. A variable declaration has the following format:

• the keyword let, followed by
• the name of the variable (you get to pick this!), followed by
• an equals sign (=), follwed by
• an expression whose value you want to “assign” to the variable.

So in this sketch, I set a variable called diameter to the value 200. And everywhere in the sketch that I wanted to use this value, I wrote diameter instead of writing the value itself. Now, if I want to change the value of the diameter, I only need to make the change in one place:

let diameter = 40;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, diameter, diameter);
  ellipse(300, 100, diameter, diameter);
  ellipse(100, 300, diameter, diameter);
  ellipse(300, 300, diameter, diameter);
}

You can include as many variables in your program as you’d like. Let’s say I want to be able to control the height and width of the ellipses independently. In that case, I might make two variables, one for the height, and one for the width:

let ellHeight = 40;
let ellWidth = 80;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, ellWidth, ellHeight);
  ellipse(300, 100, ellWidth, ellHeight);
  ellipse(100, 300, ellWidth, ellHeight);
  ellipse(300, 300, ellWidth, ellHeight);
}

Let’s play around with it a bit:

let ellHeight = 250;
let ellWidth = 110;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, ellWidth, ellHeight);
  ellipse(300, 100, ellWidth, ellHeight);
  ellipse(100, 300, ellWidth, ellHeight);
  ellipse(300, 300, ellWidth, ellHeight);
}

Note that there is nothing special about the variable names diameter, ellWidth and ellHeight. You get to pick the names of the variables, and it’s common practice to pick names that have some mnemonic meaning for you, so it’s easier to keep track of what feature of the sketch each variable is connected to. But there’s nothing stopping you from doing something like:

let marriageability = 250;
let b7GxQrTto9 = 110;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, b7GxQrTto9, marriageability);
  ellipse(300, 100, b7GxQrTto9, marriageability);
  ellipse(100, 300, b7GxQrTto9, marriageability);
  ellipse(300, 300, b7GxQrTto9, marriageability);
}

As long as you make sure to use exactly the same spelling (matching upper and lowercase), your variable names will work regardless of what you call them.

You can see why it might be preferable to use variable names that remind you of what you’re going to use them for. But it’s not necessary. The sky and your imagination… are your only limit.

Naming variables

When you’re naming something in real life, you can use whatever combination of letters, numbers and punctuation you want. Javascript doesn’t care about what your variable names mean, but it does care about what individual characters make up the variable name. The rules for Javascript variable names are as follows:

• Your variable name must begin with a letter (lowercase or uppercase A through Z).
• After the first letter, the name can consist of letters, numbers or underscores (_)
• A variable name can be as short as a single character, and can be as long as you want it to be (but please exercise restraint).

Additionally, there are several reserved keywords in Javascript, which you cannot use as variable names. You can read a full list of these words here.

You also should use the name of any built-in p5.js variable or function name. (E.g., don’t name a variable ellipse.) See the p5.js reference for a full list.

Errors with variables

The main problem you’re likely to run into with variables is accidentally failing to type the name of a variable consistently—i.e., you call it one thing in the declaration, but something else when you use it. When you do this, Javascript will give you an “Uncaught ReferenceError” error message, which means that you typed the name of a variable that Javascript didn’t recognize. The 6 in the screenshot above tells you on which line of your sketch Javascript thinks the problem occurred.

Variables and expressions

Okay, so, variables. You get it. They’re values that you give a name to, and then you can use that name in your sketch instead of the original value, which makes it easier to change that value later, since you only have to make the change in one place. Cool. Nice.

But the power of variables is that you can use them in any context that you would normally need to write a value. This means that you can use variables in expressions. For example, here’s our four circles sketch again, but this time using the diameter variable in an expression to vary the sizes of the circles slightly, from one circle to the next:

let diameter = 100;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, diameter, diameter);
  ellipse(300, 100, diameter+25, diameter+25);
  ellipse(100, 300, diameter+50, diameter+50);
  ellipse(300, 300, diameter+75, diameter+75);
}

The “base” diameter of each circle is set by the variable, which means that we can change it and still get similar-looking results just by modifying the variable:

let diameter = 25;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, diameter, diameter);
  ellipse(300, 100, diameter+25, diameter+25);
  ellipse(100, 300, diameter+50, diameter+50);
  ellipse(300, 300, diameter+75, diameter+75);
}

You can also use variables that have been previously declared to set the initial value of the variable in its declaration. Let’s say that we want each ellipse’s height to be exactly twice its width. Here’s how to write that:

let ellWidth = 110;
let ellHeight = ellWidth * 2;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, ellWidth, ellHeight);
  ellipse(300, 100, ellWidth, ellHeight);
  ellipse(100, 300, ellWidth, ellHeight);
  ellipse(300, 300, ellWidth, ellHeight);
}

You can change the ellWidth value and the proportions of the ellipse remain the same, without having to fiddle with the value of ellHeight:

let ellWidth = 50;
let ellHeight = ellWidth * 2;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  stroke(50);
  strokeWeight(8);
  ellipse(100, 100, ellWidth, ellHeight);
  ellipse(300, 100, ellWidth, ellHeight);
  ellipse(100, 300, ellWidth, ellHeight);
  ellipse(300, 300, ellWidth, ellHeight);
}

Here’s a sketch that puts it all together: it draws a row of five rectangles, using variables and expressions to introduce variations to each rectangle. You can fiddle with the variables to change how it looks, without messing with the actual code in the draw() function.

let fillG = 100;
let fillstep = 25;
let xpos = 50;
let ypos = 100;
let xstep = 50;
let ystep = xstep / 2;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  noStroke();

  fill(200, fillG, 200);
  rect(xpos, ypos, 100, 100);

  fill(200, fillG+fillstep, 200);
  rect(xpos+xstep, ypos + ystep, 100, 100);

  fill(200, fillG+(fillstep * 2), 200);
  rect(xpos+(xstep*2), ypos+(ystep*2), 100, 100);

  fill(200, fillG+(fillstep*3), 200);
  rect(xpos+(xstep*3), ypos+(ystep*3), 100, 100);

  fill(200, fillG+(fillstep*4), 200);
  rect(xpos+(xstep*4), ypos+(ystep*4), 100, 100);
}

Try replacing the variable values with other values and see what happens to the results. (What happens when you replace one of the values with a negative number, like -25 for xstep?) If you’re having trouble understanding how the code works, go through each function call and evaluate each expression by hand. (I.e., what does (xpos+(xstep*4)) evaluate to?)

NOTE: noStroke() works just like stroke() or strokeWeight(), except it tells p5.js to omit the stroke (i.e., just don’t draw it). The noFill() function does the same thing for the fill color of a shape. Try it out!

Repetition with variation

If you’ve entered into the programmer’s mindset, you might have had a thought about that previous example. “There’s a lot of repetition there,” you probably said to yourself. “I had to type essentially the same thing, multiple times. And typing is for nerds and dorks. Isn’t the whole point of computer programming to save me from having to type things out by hand? I mean, come on. COME ON.”

Let’s write a somewhat simpler example to better illustrate the wanton redundancy. This sketch simply displays five circles, all in a row:

let ypos = 200;
let xpos = 80;
let xstep = 60;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  ellipse(xpos, ypos, 40, 40);
  ellipse(xpos + xstep, ypos, 40, 40);
  ellipse(xpos + (xstep * 2), ypos, 40, 40);
  ellipse(xpos + (xstep * 3), ypos, 40, 40);
  ellipse(xpos + (xstep * 4), ypos, 40, 40);
}

So we’ve drawn five circles, each exactly like the last but with one difference: its X position on the screen. Clear enough, but there are some problems with this approach. Consider:

• What if I wanted to change the number of circles I wanted to draw? Adding one more circle is easy, but what if I wanted to add a hundred, or a million? (That might sound ridiculous right now, but by the end of this course, drawing a million things to the screen will seem like no big deal.)
• What if I wanted to change the diameter of the circles? I could use a variable, of course, but do I really have to use that variable as many times as there are circles? What if I wanted to change the name of that variable later?
• What if I want other attributes of the circle to change in subsequent repetitions, like what happened with the repeated squares example above?

All good questions. Ideally, what we want is a language structure that allows us to tell p5.js that what we want is not just an individual shape, but a whole series of shapes that share particular attributes: a means to communicate the concept of repetition with variation.

You can see that each of those ellipse() lines is basically doing the same thing, using the same values. To make it a bit more clear, let’s re-write the example so that every call to ellipse() has some multiplication, not just the final three:

let ypos = 200;
let xpos = 80;
let xstep = 60;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  ellipse(xpos + (xstep * 0), ypos, 40, 40);
  ellipse(xpos + (xstep * 1), ypos, 40, 40);
  ellipse(xpos + (xstep * 2), ypos, 40, 40);
  ellipse(xpos + (xstep * 3), ypos, 40, 40);
  ellipse(xpos + (xstep * 4), ypos, 40, 40);
}

This code makes it clearer that every call to ellipse() is exactly the same, except for the number value on the right side of the multiplication operator. Surely there’s some way to “factor out” this difference between the lines, to more compactly express this set of instructions. Surely!

The for loop

In fact, there is! The name commonly given to a structure in a programming language that enables repetition with variation is a loop. (Called a “loop” because it causes the computer to follow a list of instructions, and then start again from the beginning, possibly many times.) There are several different loop structures in Javascript, but the one we’re going to learn first is called the for loop. The for loop is a very flexible structure that can be used in different ways, but to start out with we’re only going to use one particular syntax, and it looks like this:

for (let i = 0; i < times; i++) {
    ... put the thing you want to repeat here ...
}

Replace the word times in the code snippet above with the number of times you want the contents of the loop to run.

In between the curly braces ({ and }), you should put the statements that you want to repeat. Wherever you normally would have written a number that was gradually incrementing, put the variable i instead. (The variable i is available only inside the for loop.)

This is all very abstract and weird, so here’s an example that puts it into context.

let ypos = 200;
let xpos = 80;
let xstep = 60;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  for (let i = 0; i < 5; i++) {
    ellipse(xpos + (xstep * i), ypos, 40, 40);
  }
}

And just like that, we’ve managed to write two lines of code that do the job that took five lines of code in the previous example. Not bad! Here’s another version of the code that draws nine circles, instead of five (I’ve adjusted the values for xstep and the circle diameters accordingly):

let ypos = 200;
let xpos = 80;
let xstep = 30;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  for (let i = 0; i < 9; i++) {
    ellipse(xpos + (xstep * i), ypos, 20, 20);
  }
}

Play around with this example and see what else you can do. This sketch adds in some variation on the size of the ellipses, and adds a call to fill() to change the background color of each shape, and loops up until 12 instead of just 9:

let ypos = 200;
let xpos = 80;
let xstep = 30;
let hstep = 15;
let fillstep = 20;

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  for (let i = 0; i < 12; i++) {
    fill(200, 255-(fillstep*i), 200);
    ellipse(xpos+(xstep*i), ypos, 20, 20+(hstep*i));
  }
}

You can put as many statements inside of a for loop as you’d like. (By “inside of a for loop” I mean “inside of the curly brackets.”) Each of those statements will be executed over and over again

EXERCISE: Take one of the examples that uses a for loop and “unroll” it: write out by hand all of the statements that you would have had to write if the sketch hadn’t used a for loop.

Digging deeper into for

At its core, a for loop is just a way of counting. An easy way to illustrate this is with console.log(). Put the following code between the { and } following function setup() in a new sketch and run the sketch:

for (let i = 0; i < 10; i++) {
    console.log(i);
}

The console output should display this:

0
1
2
3
4
5
6
7
8
9

As you can see, this code simply displays the numbers from zero to nine (i.e., ten iterations, starting with 0).

The for loop can also be used to do slightly more sophisticated counting, using the following code snippet:

for (let i = start; i < end; i += step) {
  ... your statements here ...
}

In the above snippet, perform the following replacements:

• start: replace with the value you want the loop to start counting at
• end: replace with the value you want the loop to stop at
• step: replace with how much you want to increment the number between each step

For example, this loop counts from 100 up to (but not including) 300 in steps of 40:

for (let i = 100; i < 300; i += 40) {
  console.log(i);
}

And this one displays all even numbers from 10 up to (but not including) 50:

for (let i = 10; i < 50; i += 2) {
  console.log(i);
}

You can use this format of the for loop to write repetitions without separate values to keep track of the step. For example:

let origx = 200;
let origy = 100;
let destx = 200;
let desty = 300;
function setup() {
  createCanvas(400, 400);
  noLoop();
}
function draw() {
    background(255);
    fill(255);
    strokeWeight(3);
    for (let i = 25; i < 400; i += 25) {
      stroke(50);
      line(i, 200, origx, origy);
      stroke(240);
      line(i, 200, destx, desty);
    }
}

Nested loops

What if we wanted to draw a grid of circles, instead of just a line of circles? One way, of course, would be to simply copy and paste:

let ypos = 140;
let ystep = 30;
let xpos = 80;
let xstep = 30;
function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  for (let i = 0; i < 9; i++) {
    ellipse(xpos+(xstep*i), ypos+(ystep*0), 20, 20);
  }
  for (let i = 0; i < 9; i++) {
    ellipse(xpos+(xstep*i), ypos+(ystep*1), 20, 20);
  }
  for (let i = 0; i < 9; i++) {
    ellipse(xpos+(xstep*i), ypos+(ystep*2), 20, 20);
  }
  for (let i = 0; i < 9; i++) {
    ellipse(xpos+(xstep*i), ypos+(ystep*3), 20, 20);
  }
  for (let i = 0; i < 9; i++) {
    ellipse(xpos+(xstep*i), ypos+(ystep*4), 20, 20);
  }
}

But wait. That looks fishy. We’re doing that same thing where we’re repeating code with just a tiny variation, counting from zero up to another number. Isn’t this exactly the kind of problem that for loops were designed to solve? Well, yes. And it turns out that you can put a for loop inside another for loop, for occasions just like this one. I’m going to take the entire original loop, and put that inside another loop. When you use a second for loop, you have to use a different variable from i for the second loop; I’m going to pick j. Here’s what the code looks like:

let ypos = 140;
let ystep = 30;
let xpos = 80;
let xstep = 30;
function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  fill(50);
  noStroke();

  for (let j = 0; j < 5; j++) {
    for (let i = 0; i < 9; i++) {
      ellipse(xpos+(xstep*i), ypos+(ystep*j), 20, 20);
    }
  }
}

NOTE: The number of circles drawn is exactly 45—i.e., 5 times 9. Explain in your own words why this is the case.

EXERCISE: Take the example above and add further variation based on the loop variables i and j. Change the fill color, the stroke, the size of the circles, etc.!