## 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*:

(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.

## 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.

Axes | Angles | ||
---|---|---|---|

math y-up | screen y-down | compass | |

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.