The Drawing Grid

Understand the coordinate system: where is (0,0)? Which way do x and y go? Why does y go DOWN? Learn to place things exactly where you want.

Where Is (0, 0)?

Every canvas has an origin — the point (0, 0). In Glitchlab (and most computer graphics), the origin is at the top-left corner. That's where x = 0 and y = 0. Let's prove it by drawing a circle right at (0, 0) — notice it's tucked into the corner!

0 / 17 lines

Loading editor...

size(400, 300); } function draw() { background("white"); // Draw a circle at the origin (0, 0) fill("tomato"); noStroke(); circle(0, 0, 30); // Label it fill(30); textSize(14); text("(0, 0) is up here!", 35, 20); }

Try it!

Try moving the circle to (200, 150) — where does it end up? That's the center of the canvas!

X Goes Right, Y Goes Down

Here's the big gotcha: y goes DOWN, not up! In math class, y goes up. But on a screen, y = 0 is at the top and gets bigger as you go down. Think of it like reading a page — you start at the top and move down. Meanwhile, x works like you'd expect: it starts at 0 on the left and gets bigger to the right.

0 / 32 lines

Loading editor...

size(400, 300); } function draw() { background("white"); noStroke(); // A row of circles going RIGHT (increasing x) fill("dodgerblue"); for (let i = 0; i < 5; i++) { circle(50 + i * 70, 80, 15); } fill(30); textSize(14); text("x increases →", 130, 120); // A column of circles going DOWN (increasing y) fill("tomato"); for (let i = 0; i < 4; i++) { circle(50, 80 + i * 55, 15); } fill(30); text("y increases ↓", 70, 200); // The key insight fill("mediumpurple"); textSize(16); text("y goes DOWN, not up!", 130, 250); text("(This is the opposite of math class!)", 80, 275); }

Placing Shapes by Coordinates

Now let's practice! Every shape function takes x and y as its first two arguments. For circle(x, y, radius), x and y are the center. For rect(x, y, w, h), x and y are the top-left corner. Let's place some shapes and label their positions.

0 / 36 lines

Loading editor...

size(400, 300); } function draw() { background("white"); noStroke(); // A circle at (200, 150) - center of canvas fill("dodgerblue"); circle(200, 150, 25); fill(30); textSize(12); text("circle(200, 150)", 155, 190); // A rect at (30, 30) - near top left fill("tomato"); rect(30, 30, 80, 50); fill("white"); textSize(12); text("rect(30, 30)", 35, 60); // A circle at (350, 250) - near bottom right fill("mediumseagreen"); circle(350, 250, 20); fill(30); text("circle(350, 250)", 280, 240); // Corner labels fill(150); textSize(11); text("(0, 0)", 5, 15); text("(400, 0)", 350, 15); text("(0, 300)", 5, 295); text("(400, 300)", 335, 295); }

Try it!

Try drawing a circle at (0, 300) — that's the bottom-left corner. Can you place one at each corner?

Using width and height

Hard-coding numbers like 400 and 300 works, but what if you change the canvas size? The built-in variables width and height always know the canvas dimensions. Use width / 2 and height / 2 to find the center, no matter what size your canvas is!

0 / 41 lines

Loading editor...

size(400, 300); } function draw() { background("white"); noStroke(); // Center fill("dodgerblue"); circle(width / 2, height / 2, 20); fill(30); textSize(12); text("center", width / 2 - 20, height / 2 + 30); // Top-right corner fill("tomato"); circle(width - 20, 20, 15); fill(30); text("top-right", width - 60, 45); // Bottom-left corner fill("mediumseagreen"); circle(20, height - 20, 15); fill(30); text("bottom-left", 5, height - 35); // Bottom-center fill("gold"); circle(width / 2, height - 20, 15); fill(30); text("bottom-center", width / 2 - 40, height - 35); // Centered rectangle let rw = 120, rh = 40; fill("mediumpurple"); rect(width / 2 - rw / 2, height / 2 - rh / 2 + 60, rw, rh, 6); fill("white"); textSize(11); text("centered rect!", width / 2 - 40, height / 2 + 64); }

Try it!

Change size(400, 300) to size(300, 200) — do all the shapes still land in the right spots?

A Coordinate Explorer

Let's build something useful: a coordinate explorer! It draws a subtle grid and shows you the exact (x, y) position of your mouse as you move it around. This is a great tool for figuring out where to place things in your own sketches.

0 / 44 lines

Loading editor...

size(400, 300); } function draw() { background("white"); // Draw grid lines stroke(230); strokeWeight(1); for (let x = 0; x <= width; x += 50) { line(x, 0, x, height); } for (let y = 0; y <= height; y += 50) { line(0, y, width, y); } // Label grid numbers noStroke(); fill(180); textSize(10); for (let x = 0; x <= width; x += 50) { text(x, x + 2, 12); } for (let y = 50; y <= height; y += 50) { text(y, 2, y - 2); } // Crosshair at mouse stroke("tomato"); strokeWeight(1); line(mouseX, 0, mouseX, height); line(0, mouseY, width, mouseY); // Mouse position label noStroke(); fill("tomato"); circle(mouseX, mouseY, 6); fill(30); textSize(14); let label = "(" + Math.round(mouseX) + ", " + Math.round(mouseY) + ")"; text(label, mouseX + 10, mouseY - 10); }

Try it!

Use this tool! Move your mouse to the center — is it near (200, 150)? Find all four corners.

What to try next

Draw a face using circles and lines — use the coordinate explorer to find the right positions first
Place 5 circles in a diagonal line from top-left to bottom-right (hint: both x and y increase together)
Draw a shape at the exact center of the canvas, then change the canvas size — does it stay centered if you used width/2 and height/2?
Create a "map" with labeled landmarks at specific coordinates, like a treasure map

← Your First Sketch Adding Color →