Everything moving at once

Challenge 16 of 16

Five lists, one loop, and a picture no single variable could hold: place, place, size, colour and speed, all read at the same item number and one of them written back.

Set the five speeds and the five colours.

Your code JavaScript

Set the five speeds and the five colours.

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 Lists that Move

Course 3 animated one thing, because it had one variable to keep the answer in. A list is many variables at once, so this topic animates many things — and each of them can move differently, which is the part that was impossible before.

The new line is this one:

xs[i] = xs[i] + 5;

Every square bracket you have written so far has been a read. That one is on the left of an equals sign, so it is a write: take item i, add 5, and put the answer back where it came from. Next frame it reads the new value and adds 5 again, and the shape drifts across.

One list, and one speed for everybody. Two lists, and everybody gets their own:

for (var i = 0; i < xs.length; i = i + 1) {
xs[i] = xs[i] + speeds[i];
circle(xs[i], 60 + i * 80, 50);
}

Item 0 moves at speeds[0] and item 3 moves at speeds[3]. They start level and they do not stay level. That is a picture Course 3 could not draw at all, and Course 5 could only draw by making every shape identical.

A few things worth knowing.

A negative step goes the other way. A step of 0 stands still. A speed list can hold both, and the row splits.

Whatever a list can hold, it can be written back into. Sizes grow. Speeds themselves speed up, if you add to them each frame before you use them. The colours in these sketches never change, and the reason is simply that nothing ever writes to the colour list.

An if inside the loop asks about one item and writes the answer back into another list at the same number. That is a bounce: once xs[i] has gone past the wall, speeds[i] becomes minus itself, and only that shape turns round.

Set the colour inside the loop, immediately before the shape it belongs to. The pen carries over from one frame to the next as well as from one shape to the next, so a colour set at the bottom of everyFrame is still in the pen at the top of the following frame.

And solid shapes that grow in the same place turn into one blob. Rings do not, which is why the growing challenges here use noShapeColour with an outline.

The line along the bottom is the frame number. Step across it one frame at a time and watch the items pull apart.

That is the last new idea in the course. The next topic has none at all: whole lines go missing instead of numbers, and everything you have to write to fill them in is something on this page.