Two loops, two lists

Challenge 15 of 16

Two loops in one sketch each get their own counter and their own list, and neither knows the other exists. The row along the top uses one, the column down the side uses the other.

Set the count of each loop.

Your code JavaScript

Set the count of each loop.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson The Counter Picks the Item

Course 5 gave you a counter that counts. Topic 1 gave you an index that picks. This topic is the one line where the two of them meet:

for (var i = 0; i < 3; i = i + 1) {
circle(70 + i * 130, 200, sizes[i]);
}

Look at where i turns up in that line. On the left it is doing arithmetic — 70, then 200, then 330, spacing the circles out. On the right it is inside square brackets, choosing which item of the list to use. Same counter, two completely different jobs, and it is worth being able to point at each of them.

The second job is the new one. Every time round the loop, i is a different number, so sizes[i] is a different item. Turn 0 draws sizes[0]. Turn 1 draws sizes[1]. Turn 2 draws sizes[2]. Three lines of Topic 1, written once.

The counting lines up because both start at 0. That is the real reason a list counts from 0 rather than 1 — a loop that starts at 0 and an index that starts at 0 fit together with no adjusting.

Two things to watch, and you will meet both.

The loop and the list are separate. Nothing keeps them in step. A list of six with a loop that stops at 3 draws half the picture, and a loop that stops at 8 asks for items that were never there. That second one is the quiet one: there is no error, no red line, nothing in the panel. The shape just does not appear, because there was nothing to draw it from.

Anything can go in the square brackets, as long as it works out to a number. i is the usual one, but 3 - i walks the list backwards, and i + 1 looks one ahead. Whatever is in there is worked out first, then used as the item number.

For now the number the loop stops at is one you count yourself and type in. That is a nuisance, and it is what Topic 5 is about.