A ring, with no ring command

Challenge 7 of 12

There is no ring command in Visuco and there does not need to be one: a smaller circle on top of a bigger one leaves a ring behind. Three circles here, each smaller than the last, make two rings and a centre.

Colour all three.

Your code JavaScript

Colour all three.

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.