Every sketch you have written has had its drawing inside everyFrame, and the name is the whole truth: that block runs again for every frame you see, about ten to thirty times a second.

frameNumber counts those runs. On the first frame it is 1, on the second 2, and so on. It appears at the bottom of every picture in this topic so you can watch it climb, and the ‹ › arrows under the picture step one frame at a time so you can take it slowly.

The important thing is that frameNumber is an ordinary number. Everything Course 2 taught about sums works on it, and each sum does something different to the motion:

frameNumber + 150 starts the journey further along.
frameNumber * 6 makes each frame count for more, so it moves faster.
frameNumber / 2 makes each frame count for less, so it moves slower.
380 - frameNumber counts down, so it goes the other way. Order matters here, as it did with any take-away: frameNumber - 380 is not the same thing and sends the shape straight off the left.

And it does not have to be a position. Feed it to a size and the shape grows; feed it to two different arguments and it does two jobs at once.

There is a second way to watch, too. Run grades sixty frames and stops; the Try button just runs your sketch, with no marking and no frame limit, until you press it again. Use it whenever you want to watch something for longer than a run allows.

One thing frameNumber cannot do: stop, turn round, or go home. It only ever counts up. That is what the next few topics fix, by giving you a number of your own that you decide how to change.

Topic 1's numbers all came from the clock. These two come from you.

mouseX is how far across the pointer is, mouseY how far down — the same pair of numbers any shape takes for its position. So circle(mouseX, mouseY, 40); draws a circle wherever the pointer is, and that is a finished animation: no variable, no sum, nothing to set up.

They are values you read, never ones you set. You can take the number out of mouseX and use it, but you cannot put a number into it — the mouse decides, not your code.

Everything Course 2 and Topic 1 taught about sums works on them. mouseX + 80 is a fixed distance to the right of the pointer. 400 - mouseX is its mirror image, because the canvas is 400 across. And mouseX / 2 need not be a position at all — feed it to a size and the shape swells as you move right.

These challenges open in Try mode, and that is worth knowing about. Try mode means the picture is already live: the pointer is yours, so move it about and watch what happens. Nothing is being marked while you do, and changing the code updates the picture straight away — you never have to switch anything on.

Pressing Run is different. Then the pointer follows a path that was recorded for you, the same one every time, so your sketch and the target can be compared fairly — the dots on the playbar mark where it moves along that path.

So: play in Try mode until you understand what the challenge is asking, then press Run to be marked.

A number that remembers.

var x = 0; above everyFrame makes the number once, before the first frame. x = x + 6; inside everyFrame changes it on every frame after that. That second line looks wrong the first time you read it, because it looks like a claim about what x equals. It is not — it is an instruction, and the right-hand side happens first: take what x is, add 6, and make that the new x. Read it right to left and it makes sense.

Above, not inside.

If the var line goes inside everyFrame, the number is made again from scratch before every frame, so it is set back to its starting value every time and the shape stands still. Challenge 4 shows both at once, side by side. There is another block that runs once, start(), which you met when you set the canvas size — that one is for setting the sketch up, not for making numbers. A number made in there is invisible to everyFrame.

Two things to look at.

Every challenge in this topic prints its number along the bottom, on the target as well as on yours, so you can compare numbers instead of squinting at pixels. Drag the bar under the target to any frame and read what the number had reached — challenge 13 cannot be done any other way. And Try runs your sketch on its own, with no marking and no time limit, if you just want to watch it go.

Which way is forward.

x counts across from the left, y counts downward from the top. That second one catches everybody: adding to y sinks a shape, and taking away from it makes it climb. A negative speed is not "backwards" — it is whichever direction that axis counts from.

Two numbers, no conversation.

x = x + speedX; and y = y + speedY; are two separate instructions, and neither knows the other exists. Equal steps happen to draw a 45 degree line; make the across step three times the down step and you get a long shallow drift instead. The angle is just the ratio of the two numbers — challenges 6 and 7 are the same code with the numbers swapped, and they look nothing alike.

Reading two at once.

The readout along the bottom now shows both numbers, on the target as well as on yours. Challenge 13 gives you nothing else: drag to a frame, read what each number has reached, and work backwards to the steps.

Position was never special.

x = x + speed looked like it was about movement, but there is nothing about movement in it. It takes a number, adds another, and puts the answer back. Plug the result into a shape's third argument and you have a size; plug it into shapeColour and you have a colour that changes. The line does not know or care.

A colour is three numbers.

shapeColour(red, green, blue), each from 0 to 255, exactly as in "Colour by Numbers". Give one of them a variable and it can climb or drain a step at a time. Equal amounts of all three make a grey, which is why fading one number in all three places fades a shape to black. Keep them between 0 and 255 — above that a colour stops being a colour and the shape simply stops changing.

Seeing a number with nowhere to show.

A position you can watch. A colour number you cannot really read off the screen. print() writes a value into the console strip under your code — scroll down past the editor to find it — one line each time it runs, so you can see what your own number is actually doing. It shows your sketch's output, not the target's — it is for understanding your own work, not for finding the answer.

One new word.

limit(value, min, max) hands back the value, unless it is below the minimum (then you get the minimum) or above the maximum (then you get the maximum). Nothing else. Written on its own line as x = limit(x, 40, 360); it stops x ever leaving that range, so the shape it drives walks to the wall and waits.

Working out the number is the hard part.

A circle is drawn from its middle, so a circle 80 across has 40 either side of its centre and can only reach 360 before its edge leaves a 400-wide window. Ground whose top edge is at 320 holds a ball 80 across with its middle at 280. And if a shape is also growing, the wall depends on how big it ends up — challenge 11 is exactly that.

Both ends earn their keep.

A minimum is not decoration. A shrinking size would pass zero and go negative; a draining colour channel would leave the 0 to 255 that makes it a colour at all. Those are the two places a lower limit stops something meaningless from happening.

Overlay.

When a shape is supposed to come to rest in an exact spot, the Overlay button puts your sketch on top of the target instead of beside it, which is the easiest way to see whether you stopped in the right place or two pixels out.

The whole trick is a minus sign.

speed = -speed; takes whatever the speed is and makes it the opposite: 12 becomes -12, and -12 becomes 12. Nothing moves the ball backwards. The ball keeps doing exactly what it always did, adding its speed, and the speed is what changed.

What if does.

if (x > 360) { speed = -speed; } means: only do the thing in the curly brackets when the test in the round brackets is true. Every if in this topic is written for you, with a comment above it saying what it is watching for, so you never have to write one yourself. You choose the numbers.

One wall is never enough.

A ball that only checks the right-hand side turns around once and then leaves on the left, forever. Each edge you want it to come back from needs its own if — which is why the later challenges have four of them, one per side.

Use the arrows.

The turn happens in a single frame, and at normal speed you cannot see it. Step one frame at a time with the arrows either side of the playbar and watch the readout: the position stops climbing and starts falling, and nothing else on the line changed.

You already know all of this.

Every line this topic asks for is one you have read many times: a step (x = x + speed;), a limit (x = limit(x, 40, 360);), a shape (circle(x, y, 80);) or a colour (shapeColour(CYAN);). The comment above each empty line says what it needs to do. Nothing new arrives.

Order is not decoration.

Inside everyFrame the lines run top to bottom, every frame. The background has to come first or it paints over everything else. A colour has to be chosen before the shape that uses it. A limit has to come after the step that made the number too big, not before it.

The background is what wipes the last frame.

Leave it out and the frame you drew before is still there, so a moving shape smears across the window instead of moving. Challenge 7 shows you exactly that — run it before you fix it.

Read the error panel.

A typed line can be wrong in ways a number never was: a missing bracket, a misspelled name, a capital letter in the wrong place. The panel under the canvases names the line and says what went wrong. It is quicker than staring at the code.