Three numbers in one box

Challenge 1 of 12

A variable can hold more than one value. Square brackets round the lot and commas in between make a list, and the three circles take their widths from it in order.

Read the target and set the last number in the list.

Your code JavaScript

Read the target and set the last number in the list.

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 A List of Numbers

A variable is a box with one thing in it. A list is a box with several things in it, in order.

var sizes = [120, 40, 80];

Square brackets round the lot, commas between the items. That is one variable called sizes, and it is holding three numbers.

To get at one of them you say which one you want, in square brackets:

sizes[0]

and that is the first number, 120. The next one is sizes[1], which is 40, and the last is sizes[2], which is 80.

The thing to make peace with early is that the counting starts at 0. The first item is number 0, the second is number 1, the third is number 2. So a list of three items has a last item numbered 2, and there is no sizes[3] — asking for it gets you nothing at all, and the shape you were drawing quietly disappears with no error to tell you why.

sizes[0] behaves exactly like a number wherever you put it. You can draw with it:

circle(100, 200, sizes[0]);

You can do sums with it. You can read the same item twice. Nothing about it is special except where the value came from.

Why bother, when three ordinary variables would do the same job? Because the three numbers belong together. They are three of the same kind of thing, and keeping them in one box means the sketch can talk about all of them at once — which is what the rest of this course is about.

One habit worth starting now: name a list for what it holds, in the plural. sizes, heights, places. It reads properly when you index it, because sizes[1] really is one of the sizes.

There are no loops in this topic. Every shape gets its own line and its own number, written out longhand, and by the last challenge that will be annoying. That is the point, and the next topic is the answer to it.