Middled, whatever the length

Challenge 11 of 16

A row that fills from the left is easy; one that stays in the middle has to know its own total width, which is the gap times the length. Work the left edge out and the row centres itself.

Set the gap and what it is multiplied by.

Your code JavaScript

Set the gap and what it is multiplied by.

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 How Long Is It?

Look back at any loop from the last three topics and you will find a number somebody counted:

for (var i = 0; i < 5; i = i + 1) {

That 5 is a guess. It is right until somebody adds a colour to the list and forgets to come back and change it, and then it is quietly wrong — either the last shape stops appearing, or the loop asks for an item that is not there and, again, the shape stops appearing. Neither of those says anything in the error panel.

A list knows how long it is, and will tell you:

sizes.length

That is a number, the count of items in sizes. Note the shape of it: a dot, then the word, and no brackets. It is not something the list does, it is something the list is.

Put it where the guess was:

for (var i = 0; i < sizes.length; i = i + 1) {

and the loop fits the list. Add an item, and it draws one more. Take two away, and it draws two fewer. You never touch the loop again.

The counting-from-0 thing shows up here once more, and this is the form it usually bites in. A list of five has length 5, and its items are numbered 0 to 4. There is no item 5. So the last one is:

sizes[sizes.length - 1]

with the minus one. Leave it off and you are asking past the end.

The other half of this is that a length is just a number, and it can go anywhere a number goes. Divide the canvas by it to get a gap that always fits. Multiply by it to find out how wide the whole row will be. Halve it to draw only the first part. None of that is about stopping a loop at all.

The line along the bottom of the picture is showing you the length as the sketch sees it. Add an item and watch it go up.

And there is a bigger reason to stop hand-counting than tidiness. A loop that asks the list is ready for a list that changes while the sketch is running — which up to now has never happened. That is what Growing a List, two topics on, is about.