A boat — visuco

Challenge 5 of 20

Five shapes, and the order you write them in is the order they are drawn — the sail goes on after the mast, so it sits in front of it. Keep to the order the comments give.

Write the five lines.

Your code JavaScript

Write the five lines.

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 Draw It Yourself

The biggest step so far: bigger pictures, more shapes, and most of the drawing left to you.

What you are given is the scaffolding — the background, the colours, and a group of variables at the top holding the important positions and sizes. What you write is the shapes themselves.

One rule keeps this a variables topic: place every shape relative to a variable, or to width and height, and never by typing a raw pixel number. The comments are worded that way on purpose — "a quarter down", "70 above groundY" — so reach for the variable named at the top rather than working the number out in your head.

Most of these pictures are symmetrical, and that halves the work: write the left-hand shape, copy the line, and flip the sign. One catch, though. A circle is placed by its middle, so its mirror really is the same number with the sign changed. A rectangle is placed by its LEFT edge, so a mirrored pair needs its own width taken off one side — which is why you will see a pair like "25 left of the middle" and "21 right" for two rectangles four pixels wide. That is correct, not a typo.

And not everything that looks like a pair is one. Some are deliberately uneven — a castle with one tower taller than the other, a robot with one arm raised. The comments always say which, so read them rather than assuming.

Seven or eight shapes is a lot to hold in your head at once, so do not try. Write one line, press Run, check it landed where you meant it to, then write the next.