The column drifts

Challenge 10 of 12

A BLACK background and four YELLOW circles 50 wide at 60, 140, 220 and 300 down, all starting at 30 across. Every frame adds 5 to each across value in the list and puts it back, so the whole column slides right.

Write it.

Your code JavaScript

Write it.

Console print() output

0 / 40 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 Code it yourself

Same as the last topic, with the page left blank.

There is no starter here. The editor opens empty and a row of blocks sits above it. Click one and it drops the shape of the code in at the cursor, already indented, with the caret where you have to fill it in.

The Values row has the two list blocks:

var sizes = [40, 90, 140];

and

sizes.push(200);

The Structure row has everyFrame, for, if and else in it. Drawing and Style have the shapes and the colours. The two bits of list vocabulary that are not on a button are the ones that are not statements — sizes[0] and sizes.length — and both are a few keystrokes inside a line a button has already given you.

The description is the whole instruction. It tells you the background, every shape with its place and its size, every value that goes in a list, and what any input does. Every number you need is in it and nothing that is not, so read it as a list and work down.

Three things worth having in your head before you start.

Name a list in the plural for what it holds, and reach into it with the counter: sizes[i], places[i], colours[i]. Two lists read at the same i are two halves of the same thing.

Stop the loop with the list, not with a number you counted. i < sizes.length is right however long the list turns out to be, and it is the only version that still works after a push.

And a list is not just for drawing out of. Put a value back into it — xs[i] = xs[i] + 5 — and the shape remembers where it got to, which is what makes the moving ones move.

There is no readout along the bottom of these pictures. Turn the grid on if you want to check where a shape has actually landed. The two that react to the mouse are live from the moment they load, so try clicking on them before you press Run.