Joining the dots

Challenge 7 of 16

Put i in one pair of brackets and i + 1 in the next, and each turn of the loop draws a line from one point to the one after it. The loop has to stop a turn early or the last line has nowhere to go.

Set the count and the second index.

Your code JavaScript

Set the count and the second index.

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.