A chart that stands on the ground

Challenge 11 of 16

A bar that grows upwards has to start further up as well as be taller, so the height comes into the sum twice. Both numbers in each bar are worked out from the same item.

Set the baseline the bars stand on.

Your code JavaScript

Set the baseline the bars stand on.

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.