Two shapes that travel together

Challenge 5 of 12

A function can hold more than one shape, and then both move whenever a call changes. Write drawTree for a BROWN square 40 across at 20 before its number and 240 down, then a GREEN circle 120 across at its number, 210 down.

Call it at 110 and 290, on CYAN.

Your code JavaScript

Call it at 110 and 290, on CYAN.

Console print() output

0 / 30 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.