Tutorials › The Drawing Grid Simple Mode

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.

1

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 / 14 lines
Loading editor...
size(400 300) 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!

2

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 / 29 lines
Loading editor...
size(400 300) 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); }
3

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 / 33 lines
Loading editor...
size(400 300) 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?

4

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 / 38 lines
Loading editor...
size(400 300) 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?

5

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 / 41 lines
Loading editor...
size(400 300) 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 SketchAdding Color →