Loop-Counter

Code that counts itself

A loop is not a shape and it's not a color. It's a counter. It counts how many times a chunk of code should run, runs that chunk that many times, and then stops. That's the entire idea. Everything else this week is about controlling the counter: where it starts, when it should stop, and how it steps from one value to the next.

This isn't a brand-new concept, either. draw() has been a loop this whole time: p5 counts frames and calls your code again and again, roughly 60 times a second (Week 2). What's new this week is a loop you write, whose counter you control completely, that runs however many times you tell it to, right now, immediately, not spread out across frames.

That's the whole idea. Everything else this week (the three-part syntax, %, nesting one loop inside another) is just more control over the counter, and more places to send it.

The for loop

A for loop has a keyword, three pieces of setup packed into one set of parentheses and separated by semicolons, and a block in braces, the same block shape as if (Week 3), except this block can run more than once.

Read it as a sentence: starting with i at 0, keep going while i is less than 5, and add 1 to i after every pass. i is just a variable, short for “index,” declared with let right inside the parentheses, exactly the way you'd declare any other variable (Week 2).

What's getting looped, and how many times

Everything inside the braces (the loop body) is the code that's getting looped. Anything outside the braces, above or below the loop, runs exactly once, same as always. Only the lines between { and } repeat.

To find out how many times, trace the counter by hand: start at the start value, and count every value that still passes the exit test.

for (let i = 0; i < 5; i++) runs 5 times, and i takes every value from 0 up to 4, never 5. The exit-test number and the number of passes are almost always different by exactly one, which is a common counting mistake. Trace it; don't guess it.

Finding the formula that connects i to the canvas

A loop only helps when there's a pattern connecting the counter to what you draw: some formula that turns i into a position, a size, or a color. Spotting that formula is the real skill; the for syntax is just where you plug it in.

Say you'd hand-written four columns, 60px wide, side by side:

rect(0, 0, 60, height);
rect(60, 0, 60, height);
rect(120, 0, 60, height);
rect(180, 0, 60, height);

Look for the pattern in the numbers that change: 0, 60, 120, 180. Each one is 60 more than the last, and each is also 60 times which column this is: column 0 is 0 × 60, column 1 is 1 × 60, column 2 is 2 × 60. That's the formula: x position = counter × 60. As soon as you can see a pattern in a set of numbers like this, you can rewrite it as a loop:

for (let i = 0; i < 4; i++) {
  rect(i * 60, 0, 60, height);
}

One line in the loop body does the work of all four hardcoded calls. That line, rect(i * 60, 0, 60, height);, is the relationship: the single place where the counter i turns into something drawn on the canvas. It's the line to find first whenever you're reading someone else's loop, and the line to design first whenever you're writing your own.

Know about: %, the leftover

% is the modulo operator. a % b divides a by b and gives back whatever's left over, the remainder, not the answer to the division.

7 % 3   // 7 = 2 groups of 3, with 1 left over → 1
9 % 3   // 9 = 3 groups of 3, with 0 left over → 0
2 % 3   // 3 doesn't go into 2 at all, so all of it is left over → 2

Feed it a counter that keeps climbing, and the leftover doesn't climb with it: it keeps falling back to 0 and counting up again. That's why % produces patterns: it's the operator that makes a straight line of numbers wrap into a repeating cycle.

Once you can see that cycle, % pairs naturally with a conditional (Week 3) to alternate between two outcomes, such as a checkerboard fill, every other row a different shade:

if (i % 2 === 0) {
  fill(220);   // i is even, nothing left over when divided by 2
} else {
  fill(200);   // i is odd, 1 left over
}

Any pattern that repeats itself (alternating, cycling through a fixed set of colors, wrapping a value back into range) is a % pattern waiting to happen.

Two loops vs. one loop inside another

Two separate loops, one after another, each still only touch one dimension: a loop that draws one row of cells, followed by a second, independent loop that draws one column of cells. Neither knows about the other.

A grid needs both dimensions at once: every combination of a row and a column. That takes nesting: writing one loop's entire body inside another loop's body.

for (let row = 0; row < 3; row++) {
  for (let col = 0; col < 4; col++) {
    // this line runs once for every (row, col) pair
  }
}

The outer loop's counter changes once per pass, same as any loop, but for each single value of row, the entire inner loop runs from start to finish, every value of col, before row is allowed to step again.

Every combination of row and col gets exactly one pass through the innermost code, which is also how you count total iterations of a nested loop: multiply the two counts. Three rows, four columns, twelve cells, twelve passes.

Quick reference

for loop

% modulo

a % b → the remainder left over after dividing a by b. Cycles back to 0. The operator to reach for whenever a pattern repeats.

Nested loop template

for (let row = 0; row < numRows; row++) {
  for (let col = 0; col < numCols; col++) {
    // runs once per (row, col), numRows × numCols times total
  }
}

Be able to do

let total = 0;                 // runs once
for (let i = 0; i < 10; i++) {
  total += i;                  // this line is what's looped
}
print(total);                  // runs once, after the loop is done

for (let i = 0; i < 4; i++) {
  fill(220);
  rect(i * 60, 0, 60, height);   // ← the relationship
}

fill(220); rect(0,   0, 40, height);
fill(200); rect(40,  0, 40, height);
fill(220); rect(80,  0, 40, height);
fill(200); rect(120, 0, 40, height);
fill(220); rect(160, 0, 40, height);
fill(200); rect(200, 0, 40, height);
fill(220); rect(240, 0, 40, height);
fill(200); rect(280, 0, 40, height);
fill(220); rect(320, 0, 40, height);
fill(200); rect(360, 0, 40, height);

let colW = width / 10;   // 10 columns, 40px each on a 400-wide canvas

function draw() {
  noStroke();
  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
      fill(220);
    } else {
      fill(200);
    }
    rect(i * colW, 0, colW, height);
  }
}

let cellSize = 50;

function setup() {
  createCanvas(400, 300);   // 8 columns × 6 rows of 50px cells
}

function draw() {
  for (let row = 0; row < height / cellSize; row++) {
    for (let col = 0; col < width / cellSize; col++) {
      let x = col * cellSize;
      let y = row * cellSize;
      let hovering = mouseX > x && mouseX < x + cellSize &&
                     mouseY > y && mouseY < y + cellSize;

      if (hovering) {
        fill(255, 0, 60);
      } else {
        fill(220);
      }
      stroke(255);
      rect(x, y, cellSize, cellSize);
    }
  }
}