A labelled chart

Challenge 15 of 16

Three lists again, and the third one is words. Every bar gets its height, its colour and its name from the same item number, so the whole row is described three ways over.

Set the three words.

Your code JavaScript

Set the three words.

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 Lists of Anything

Square brackets are not a thing you do to coordinates. A list holds whatever a variable could hold, and up to now that has just happened to be places and sizes.

var colours = [RED, YELLOW, GREEN, BLUE];

That is a list of four colour names, and it works exactly like a list of four numbers. colours[0] is RED. colours[2] is GREEN. Hand one to shapeColour and the shape comes out that colour:

for (var i = 0; i < 4; i = i + 1) {
shapeColour(colours[i]);
square(20 + i * 95, 160, 80);
}

Four squares, four colours, one loop.

The order of the two lines in there matters, and it is the one thing in this topic that catches people. shapeColour sets the pen for everything drawn after it. Set the colour, then draw. Draw, then set the colour, and the shape comes out in whatever the pen was holding from last time round — which looks like the whole row being one colour behind.

The same goes for anything else a list can hold.

Words, with quote marks round them: var words = ["red", "green", "blue"] and then write(words[i], 60, 200).

Outline thicknesses: outlineThickness(thick[i]).

Text sizes: textSize(big[i]).

Outline colours, fills, both at once out of two different lists. None of it is new machinery. It is the same square brackets and the same counter, and the only thing that changed is what is sitting in the list.

One warning about colours in particular. A colour is checked exactly — it either is YELLOW or it is not, and there is no nearly. A width that is five out will still score most of its marks; a colour that is wrong scores none of them.

And notice what the loop is still doing at the end of every one of these. It stops at a number you counted off the list yourself. Add a colour and the loop does not know. That is the next topic.