A chart with its own colours

Challenge 10 of 16

Two lists, one of heights and one of colours, and the bars stand on a ground line worked out from the height. This is everything the course has so far in one picture.

Set the five colours.

Your code JavaScript

Set the five colours.

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.