Line them up — visuco

Challenge 7 of 12

Shapes given the same y all sit level with each other, and it is their x values that space them out. The target has these three evenly spread across the middle of the canvas.

Set the x and y of all three.

Your code JavaScript

Set the x and y of all three.

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.