Coordinate Systems
Where Things Are
Where Things Are
Every point in 2D space can be described with just two numbers: how far right (X) and how far up (Y).
In 1637, this French mathematician invented a way to connect algebra and geometry. His idea: use numbers to describe positions! The Cartesian plane is named after him.
In math class, (0,0) is in the center and Y goes up. But on your computer screen...
Origin at center, Y goes UP
Origin at TOP-LEFT, Y goes DOWN
To move something UP on screen, you SUBTRACT from Y. To move DOWN, you ADD to Y. It's the opposite of what you'd expect from math class!
This quirk goes back to the very first computer monitors...
Old monitors drew images by shooting electrons at the screen. The beam started at the top-left and scanned left-to-right, top-to-bottom - just like reading a book! So pixel (0,0) was naturally the first pixel drawn.
Even though we use flat screens now, this convention stuck. Every web page, video game, and phone app still uses top-left as the origin!
Click anywhere on the canvas below to see its screen coordinates:
Click the corners! Top-left is (0,0) and bottom-right is (599, 349) - that's 600 pixels wide by 350 tall.
Games often have a large "world" that's bigger than your screen. The camera decides what part you see!
2D has X and Y. For 3D, we add Z for depth! Drag to orbit, scroll to zoom.
Different systems disagree! In some, Z points UP (common in CAD software). In others, Z points toward you (common in games). Always check the documentation!
Sometimes it's easier to describe positions by angle and distance instead of X and Y.
Perfect for circular motion (orbits, radar sweeps), aiming at targets, and anything involving rotation!
When wrapping images onto 3D objects, we use UV coordinates - always from 0 to 1, regardless of image size!
Makes UVs independent of resolution! (0.5, 0.5) is always the center, whether the texture is 64×64 or 4096×4096.
In OpenGL, V=0 is at the bottom. In DirectX, V=0 is at the top. This causes many "flipped texture" bugs!
Click on the exact coordinates shown. How fast can you find them?
After 5 seconds, a hint circle will appear around the target!
Now you know how computers describe where things are - from 2D screens to 3D worlds!
Screen coordinates start at top-left with Y going DOWN - the opposite of math class.
Game worlds can be huge - the camera shows just a portion at screen coordinates.
Adding Z creates depth - but which way Z points depends on the software!
Sometimes angles work better than X/Y. UV coordinates (0-1) map textures to 3D.
Put your new knowledge into practice!