A function that moves

Challenge 7 of 12

A function is called again every frame, so giving it frameNumber makes what it draws move — frameNumber counts itself up by one each frame. Write drawBall for a MAGENTA circle 70 across at its number, 200 down, on BLACK.

Call it at frameNumber times 9.

Your code JavaScript

Call it at frameNumber times 9.

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

Everything in this topic starts the same way: an empty editor. There is nothing to fill in, because there is nothing there — the definition, the inputs and the calls are all yours.

The buttons above the editor do the fiddly part. Click function and you get the whole shape of a definition, curly brackets and all, with the cursor sitting inside it. Click everyFrame and you get the block that runs every frame. Nothing a button gives you is the answer; the name, what it takes and what it draws are still your decisions.

Two rules decide whether a function works, and both are about where lines sit rather than what they say. A definition can go above or below everyFrame — the sketch reads the whole file before it draws anything — but the drawing only happens when something calls the name. A definition on its own draws nothing at all, and that is the commonest reason a canvas comes back empty here.

An input is a name you invent inside the round brackets, and it means the caller decides. drawTree(x) draws its tree wherever the call says; drawTree(x, howBig) lets the call choose the size as well. Inside the function that name is just a number like any other, so it can go into a sum: x - 20 is twenty to the left of wherever it was sent.

A function can hand a number back instead of drawing, with return. Then it is not a picture but an answer, and the line that called it uses the answer wherever a number would go.

Press Run early and often. Write the definition, call it once, run it, and only then add the second call — one line at a time is far easier than eight lines and a blank canvas.