A city at night

Challenge 17 of 20

Each building is a quarter of the width wide and starts a quarter further across, so the four of them tile the window exactly. Only their heights differ, and that is what gives the skyline its shape.

Write the seven lines.

Your code JavaScript

Write the seven lines.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from 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.

One more topic after this one, and it takes the scaffolding away as well: an empty editor, and every line — including everyFrame itself — written by you.