The whole picture

Challenge 13 of 13

Everything this topic has covered, in one picture: the right name, the right colour, and the right numbers for each shape. Choosing those numbers precisely is what the next topic is all about.

Build both shapes to match the target.

Your code JavaScript

Build both shapes to match the target.

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 Shapes

A shape is drawn by naming it and giving it some numbers. circle(200, 200, 120); draws a circle: the name says what to draw, and the numbers in the round brackets say where it goes and how big it is. Get the name wrong and you get the wrong shape — not an error — so the target picture beside you is always the thing to check against.

There are five shapes, and this is the whole list:

circle(across, down, size) — the first two are its middle
square(across, down, size) — the first two are its top-left corner
rectangle(across, down, width, height) — corner first, then both sizes
oval(across, down, width, height) — middle first, then both sizes
triangle(x1, y1, x2, y2, x3, y3) — a pair of numbers for each corner

How many numbers a shape takes is a clue to which one it is: three for a circle or a square, four for a rectangle or an oval, six for a triangle. A square and a circle need only one size because they are equal all round; a rectangle and an oval need two, because their width and their height can differ.

The one thing worth committing to memory: circles and ovals are placed by their MIDDLE, while squares and rectangles are placed by their TOP-LEFT CORNER — so the very same pair of numbers puts them in different places.

This topic works through the names first, then the numbers each name needs. You never have to remember the lists: every challenge repeats them in a comment above the line, and the Reference button above your code has them all.