Hold it on screen

Challenge 5 of 20

Run this one first and watch it leave. The ball is 80 across so its middle can travel between 40 and 360, and it needs the one line that holds it inside those two.

Write the limit line.

Your code JavaScript

Write the limit line.

Console print() output

0 / 50 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 Animate It Yourself

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.

One topic still to come, and it takes the scaffolding away as well: an empty editor, and every line — everyFrame, the background, the variables, the sums — written by you. There is no readout line down there either, so the picture is all you get.