One line instead of five

Challenge 3 of 16

Topic 1 needed a line for every shape. This is the same picture as five of those lines, and the only thing that says how many there are is the number the loop stops before.

Set the loop so every bar in the list gets drawn.

Your code JavaScript

Set the loop so every bar in the list gets drawn.

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.