Axes and Angles

from Red Blob Games
25 Sep 2019

Table of Contents

I created this page for myself because I was using several different axes and angle systems and wanted to keep track of the formulas.

 1  Axes#

In math, we typically have X pointing right and Y pointing up. But in 2D graphics for computer screens, including SVG and HTML5 Canvas, we usually have Y pointing down:

+x-x+y-y0,0math+x-x-y+y0,0screen

(Historical note: we use Y down because that’s how CRT electron guns scanned the lines for TVs. But IBM OS/2 used Y up for its 2D graphics!)

When working with 3D you have to be extra careful about axes. Both DirectX and OpenGL have Y pointing up, but DirectX and OpenGL textures have Y pointing down. DirectX has a Z axis pointing away from the screen and OpenGL has a Z axis pointing towards the screen. Unity uses Y pointing up for graphics and Y pointing down for UI elements.

 2  Angles#

In math we have a standard angle system where 0° is east, 90° north, and angles grow counterclockwise. But in navigation we have a compass angle system where 0° is north, 90° east, and angles grow clockwise. And you might also have a math angle system flipped upside down to match the screen.

180°90°270°math y-up180°270°90°screen y-down90°270°180°compass

 3  Trigonometry#

These rules are independent of the coordinate systems you’re using:

θ = atan2(A, B)
A = sin(θ)
B = cos(θ)

They always have to match up; it’s a nice way to double check consistency.

AxesAngles
math y-upscreen y-downcompass
math
y-up
θ = atan2(y, x)
y = sin(θ)
x = cos(θ)
θ = atan2(-y, x)
y = -sin(θ)
x = cos(θ)
θ = atan2(x, y)
x = sin(θ)
y = cos(θ)
screen
y-down
θ = atan2(-y, x)
y = -sin(θ)
x = cos(θ)
θ = atan2(y, x)
y = sin(θ)
x = cos(θ)
θ = atan2(x, -y)
x = sin(θ)
y = -cos(θ)

(Is this right? need to double check)

I find it easiest to remember things when θ = atan2(y, x), either math angles + math axes, or screen angles + screen axes, but sometimes I need to use another system for the project.

Email me, or tweet @redblobgames, or comment: