Generation STEM
Learning LibraryCore Coding LibraryKids

x and y: where things go on the screen

To place anything on the screen, you give it two numbers: x for how far across, and y for how far down. Together they pin it to an exact spot.

The big idea

A position is an (x, y) pair: x measures across, y measures down, and both start at 0 in the top-left corner.

See it in code

1Start simple

A position is just two numbers together: x across and y down, written as an (x, y) pair. Here are two stars that share the same x but sit at different heights:

python
top_star = (250, 80)
bottom_star = (250, 420)
print("top star:", top_star)
print("bottom star:", bottom_star)
Run it — same x (250), different y:
top star: (250, 80)
bottom star: (250, 420)

Both stars are 250 across, but the top one has the smaller y. That's the twist: a small y means near the top.

2A step further

Watch y climb and see where the star goes. We keep x fixed at 250 and add 100 to y each time — every step slides the star further down the screen:

python
x = 250
for i in range(4):
    y = 80 + i * 100
    print("star at", (x, y))
Run it — bigger y, lower down:
star at (250, 80)
star at (250, 180)
star at (250, 280)
star at (250, 380)

As y grows 80 → 180 → 280 → 380, the star drops lower and lower. On a screen, bigger y always means further down.

3In our world

Now on the real canvas (500 across, 500 down). We place four stars — one high, one low, one left, one right — to see that top-down y in action:

python
from art import Canvas, star

screen = Canvas.create()
Canvas.fill(screen)

star(screen, 250, 80, size=60)    # top-middle: small y
star(screen, 250, 420, size=60)   # bottom-middle: big y
star(screen, 80, 250, size=60)    # left side
star(screen, 420, 250, size=60)   # right side
Run it — the star with the small y sits up high:
Four stars on a dark canvas: one near the top, one near the bottom, one on the left, one on the right, forming a diamond.

The star at y = 80 is near the top, and the one at y = 420 is near the bottom — just like the counting warm-up. That's the trick to remember: on a screen, y counts down, not up.

How x and y locate a point on the canvas A square canvas with its origin, point zero zero, at the top-left corner. The x value grows to the right along the top; the y value grows downward along the left side, which is the opposite of graphs in math class. A star sits partway across and partway down, with dashed lines back to each edge. x grows to the right → y grows downward ↓ (0, 0) (250, 180)
The corner (0, 0) is top-left. x counts across, y counts down — so bigger y means lower on the screen.
The same idea, everywhere

Every screen works this way — games, art, apps, phones. A ship's spot, where you tap, a button's place: all are (x, y). Once you can read the two numbers, you can put anything exactly where you want it.

Try it yourself

Move a star to (250, 250) — the exact middle. Then try (10, 10), which lands in the top-left corner, near where (0, 0) is.

The common mistake

Expecting y to grow upward like in math class. On a screen it's flipped: y = 0 is the top and bigger y goes down. Forget this and your stars end up upside-down from what you pictured.

What it unlocks

Coordinates power for loops that space things out, and every drawing you make on the canvas.

Related concepts