A butterfly — visuco

Challenge 10 of 20

Nothing but circles and one oval here. The wings are plain circles, and it is the overlapping that makes them read as wings — with no outlines, no seams show where they meet.

Write the six lines.

Your code JavaScript

Write the six 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.