A house — visuco

Challenge 8 of 12

Four parts, four colours. Notice that the window is drawn after the wall it sits on, which is the only reason it shows at all.

Colour the roof, the walls, the door and the window.

Your code JavaScript

Colour the roof, the walls, the door and the window.

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 Putting It Together

Nothing new to learn here. This topic is for using what you already have: shapes, colours by name and by number, coordinates and sizes, outlines and thickness, words and text size.

One thing does change, though. Up to now a description usually told you which colour or which number to use. From here the target picture beside your code is the instruction — look at it, work out what would produce it, and try. That is the whole skill this topic is practising, and it is the one you will need when you write sketches of your own.

The pictures are built from several shapes at once, so the order you draw them in starts to matter — later lines are drawn on top of earlier ones. A window shows because it is drawn after its wall; a tree reads as one thing because its leaves are drawn after its trunk and cover the top of it. If part of your picture has vanished, check whether something drawn afterwards has covered it. The topic after this one is about exactly that.

A good habit for a bigger picture is to build from the back forwards: the background first, then the things furthest away, then the details on top.

Work one shape at a time and press Run often. You do not have to get a whole picture right in one go — the score tells you how close each run is, and the target is always there beside you to compare against.