A wave that keeps its shape

Challenge 12 of 16

Give every shape the same step and the row travels without changing, so whatever pattern the starting list held is carried down the canvas intact. The shape of it comes from the list, not from the movement.

Set the six acrosses.

Your code JavaScript

Set the six acrosses.

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.