Write both, back first

Challenge 10 of 12

Now you write the commands rather than filling numbers in. The comments say what to draw and in which order — the hill first so it lands at the back, the sun second so it sits in front.

Type both circle commands.

Your code JavaScript

Type both circle commands.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Layers

Your code runs from the top of everyFrame to the bottom, one line at a time, and each shape is painted over whatever is already there. That is the whole rule of layers: later covers earlier.

It sounds obvious, but it is a tool. Draw a big circle, then a smaller circle in the background colour on top of it, and you have made a ring — with no ring command anywhere. The same move gives you crescents, wedges and smiles, none of which Visuco has a command for.

The trick to see is this: a shape painted the same colour as what is behind it has not vanished. It is still there, still drawn, still counted — it simply cannot be told apart from its surroundings. That is why it looks like a hole.

Overlap joins things up as well as cutting them out. Several circles of the same colour, with no outlines between them, read as one blob rather than several.

It is also the first thing to check when a shape "does not appear". Very often it did appear, and something after it painted straight over the top.

In this topic you will stack shapes on purpose and work out, from the picture you are aiming at, what colour a shape has to be to carve a piece out of another.