The whole scene

Challenge 12 of 12

The whole topic in one picture: three shapes to colour, place and size, with the grid to measure everything against. Next the course turns to how shapes are styled — edges, thicknesses, and shapes with no fill at all.

Build the scene to match.

Your code JavaScript

Build the scene to match.

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 Coordinates & Sizes

Every position on the canvas is two numbers: x across and y down. x counts from the left edge. y counts from the TOP edge, so y gets bigger as you move DOWN the picture — that catches everybody out at first.

The canvas here is 400 by 400. That makes 0, 0 the top-left corner, 400, 400 the bottom-right, and 200, 200 the dead centre — a handy landmark to measure everything else from.

circle(200, 200, 90); puts the middle of a circle 200 across and 200 down and makes it 90 wide. The last number is the size, and shapes that need two sizes take two: width first, then height. Swapping those two does not cause an error, it just gives you a tall shape where a wide one belongs.

The grid over the picture is there so you can read numbers off rather than guess at them. The Grid button in the top bar changes how fine the grid is, or turns it off altogether.

One thing worth remembering: for a square or a rectangle the first two numbers are the top-left corner, while circles and ovals are placed by their middle. Two shapes given the very same pair of numbers will not line up.

And two shapes can be positioned relative to each other: give them the same y and they sit level, or the same x and they sit one above the other.