The whole picture

Challenge 11 of 11

Everything this topic has covered on one picture: the right name, the right colour and the right size for each shape. Where they sit is filled in for you — reading those numbers off the grid yourself is the next topic.

Finish both shapes.

Your code JavaScript

Finish both shapes.

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 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. Where a shape sits is always given to you here, so the only numbers you set are sizes — working out a position for yourself is the whole of the next topic. 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.