Read a whole scene off the target

Challenge 15 of 16

Everything in this topic, in one picture and with nothing given away. Six balloons, each with its own place from two lists and its own width from a third.

Read the target and fill all three lists.

Your code JavaScript

Read the target and fill all three lists.

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 Two Lists, One Shape

A place on the canvas is two numbers, and up to now only one of them has ever come out of a list. The other was a literal, or a sum with the counter in it — which is why every picture in the last topic came out as a row.

Give a shape both of its numbers from lists and that stops being true.

var xs = [50, 200, 350];
var ys = [300, 100, 250];

for (var i = 0; i < 3; i = i + 1) {
circle(xs[i], ys[i], 70);
}

Turn 0 draws a circle at 50 across and 300 down. Turn 1 draws one at 200 across and 100 down. Turn 2 at 350 and 250. Three circles, nowhere near a row, and no arithmetic anywhere in the picture — because the author simply said where each one goes.

The two lists are working as a pair. xs[1] and ys[1] belong together; they are the two halves of the same point. Lists used this way are called parallel lists, and the word is worth having because it names a promise: item number 2 in this list and item number 2 in that one are about the same thing.

Nothing enforces that promise. It is a habit, not a rule. If you add an across and forget to add a down, the lists stop being in step and the shape you were expecting quietly does not appear — the same silence as asking past the end, for the same reason. Whenever you edit one of a pair, look at the other.

Two lists is not the limit. A third holding sizes, a fourth holding something else — all read at the same i, all lining up item by item.

One thing that catches people out with lines. Joining point i to point i + 1 draws a path, but the loop then has to stop one turn early: five points make four lines, not five, and asking for point 5 of a five-item list gets you nothing.

And a list does not have to hold numbers. Put quote marks round the values and it holds words, read at an item number exactly the same way.