A picture out of your own words

Challenge 12 of 12

The last one, and every line is yours. Write drawSky (CYAN background, YELLOW circle 100 across at 80, 80), drawGround (GREEN rectangle at 0, 300, 400 by 100) and drawHut (BROWN square 100 across at its number, 200 down).

Call drawHut at 100 and 240.

Your code JavaScript

Call drawHut at 100 and 240.

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.