Instantly share code, notes, and snippets.

Created August 22, 2016 08:48
Maths & trigonometry cheat sheet for 2D & 3D games

### Conventions

• A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
• lengths are in any unit (ex: pixels)
• code snippets are in JavaScript

angleRad = angleDeg * Math.PI / 180;

angleDeg = angleRad * 180 / Math.PI;

## 2D

### Distance between two points (Pythagore)

• dist = function(A,B){ return Math.sqrt((xB - xA)*(xB - xA) + (yB - yA)*(yB - yA)) } // ES5
• dist = (A, B) => Math.hypot(xB - xA, yB - yA) // ES6

### Line passing through 2 points

• line equation: y = ax + b
• a = (yB - yA) / (xB - xA) = tan θ
• θ = angle between line and x axis
• b = yA - a * xA (because yA = a * xA + b)

### Intersection of 2 secant lines

• line 1: y = a * x + b
• line 2: y' = a' * x + b'
• intersection point P:
• xP = (a - a')/(b' - b);
• yP = a * xP + b;
• Ex with y = 5 * x + 1 and y' = 2 * x + 8:
• xP = 7/3;
• yP = 12.666;

### Angle in radians between the x axis at the origin and a point on the plane

angle = Math.atan2(Ax, Ay)

### Angle in radians between two points and the origin

angle = Math.atan2(By - Ay, Bx - Ax);

### Rotate a point of the plane around the origin (angle in radians)

• Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
• Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
• It's the same as applying the following rotation matrix:
``````vec2 (
+cos(a), -sin(a)
+sin(a), +cos(a)
)
``````

### Project any point of the plane on the trigonometric circle (center: origin, radius: 1)

• Anew_x = Math.cos(atan2(Ax, Ay))
• Anew_y = Math.sin(atan2(Ax, Ay))

### 2D jumps / gravity (ex: for side-view platform games)

• let x, y the position of the object (ex: 0, 0)
• let vx, vy the horizontal and vertical speed of the object (ex: 0, 0)
• let g, the gravity (which is a downwards acceleration, ex: -10)
• during the frame at the start of the jump: set vy to a high value, ex: 50
• during all the frames of the jump:
• Add g to vy (ex: 40, 30, 20, 10, 0, -10, ...)
• Add vy to y (ex: 40, 70, 90, 100, 100, 90, ...)
• place the object at [x,y]

Also applicable to all kind of accelerations in x or y directions.

### Framerate-independant 2D jumps

Use time instead of frames to make the animation. Demo: https://jsfiddle.net/subzey/p1ftrar0/

### Minimal distance between a point and a line

• line: a * x + b * y + c = 0
• point: xA, yA
• distance: d = Math.abs(a * xA + b * yA + c) / Math.sqrt(a * a + b * b)

### Lerp (Blend / shortest path between two angles)

``````lerpDeg = function(start,end,amt){
ver dif=end-start;
dif = dif%360;
if(dif>180.0)	{
dif-=360.0;
}
else if (dif<-180.0)	{
dif+=360.0;
}
return start+dif*amt;
}
``````

## 3D

### 3D rotations

In order to create a 3d rotation, just take the idenity matrix:

``````vec3 (
1, 0, 0,
0, 1, 0,
0, 0, 1
)
``````

And fill in the sines and cosines:

``````vec3 (
+cos(a), -sin(a), 0,
+sin(a), +cos(a), 0,
0     ,  0     , 1
) // Rotation in XY plane

vec3 (
+cos(a), 0, -sin(a),
0     , 1, 0      ,
+sin(a), 0, +cos(a)
) // Rotation in XZ plane

vec3 (
1,  0     ,  0     ,
0, +cos(a), -sin(a),
0, +sin(a), +cos(a)
) // Rotation in YZ plane
``````

### Sphere trigonometry

http://bit.ly/bm1ftU