A whole picture

Challenge 12 of 12

The last one, and every line is yours. The ground starts halfway down and fills the rest, so height / 2 does for its top and its height alike.

Draw a GREEN rectangle from 0, halfway down, the full width, then a YELLOW sun at 80, 80, 100 across, on CYAN.

Your code JavaScript

Draw a GREEN rectangle from 0, halfway down, the full width, then a YELLOW sun at 80, 80, 100 across, 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 — you write all of it.

That is a bigger step than it sounds, so the buttons above the editor do the fiddly part for you. Click everyFrame and the whole block appears, curly brackets and all, with the cursor already sitting inside it. Click circle and you get a circle line with numbers in it to change. Nothing a button gives you is ever the answer; it is a piece of the shape of the code, and the choosing is still yours.

Build the picture in the order it is painted. The background goes first, because it covers whatever was drawn before it. Then choose a colour, draw the shapes that colour, then choose the next one. A shape always comes out in whichever colour was chosen last, so a colour line in the wrong place is the commonest way for a picture to come out wrong.

Everything else here you already know: a variable to hold a number or a word, the four sums, joining words to numbers with a plus, and width and height for finding middles and quarters. Nothing new is being taught. What is new is that nobody is holding the pen.

Press Run early and often. One line at a time, checked as you go, is far easier than eight lines and a blank canvas — and when a name is misspelt the error panel says so, with the line number.