Post

Trigonometry

Trigonometry is a branch of mathematics that deals with the relationships between the angles and sides of triangles. It is especially focused on right triangles and is foundational in fields such as geometry, physics, engineering, game development, and computer graphics.

Sine Cosine Tangent

Sine, cosine, and tangent are fundamental trigonometric functions that relate the angles of a right triangle to the lengths of its sides. In the unit circle, sine gives the y-coordinate, cosine gives the x-coordinate, and tangent (defined as sin(θ)/cos(θ)) represents the slope or steepness of the angle. These functions are essential for calculating angles, directions, and circular motion in game development.

The three most commonly used trigonometric functions are:

FunctionNameDescription
sin(θ)SineRatio of the opposite side to the hypotenuse — or opposite / hypotenuse
cos(θ)CosineRatio of the adjacent side to the hypotenuse — or adjecent / hypotenuse
tan(θ)TangentRatio of sine to cosine — or opposite / adjacent

These functions relate angles to ratios of side lengths in right triangles.

Unit Circle

The unit circle is a circle centered at the origin with a radius of 1. It’s used in trigonometry to define the sine and cosine of an angle, where any point on the circle at angle θ has coordinates (cos(θ), sin(θ)).

For any angle θ (measured in radians) from the positive x-axis:

  • The hypotenuse is always 1 in a unit circle.
  • The x-coordinate of the point on the circle equals cos(θ).
  • The y-coordinate of the point on the circle equals sin(θ).

Degrees and Radians

Angles can be measured in degrees or radians, and both are used frequently in trigonometry and game development.

  • A degree divides a full circle into 360 equal parts.
  • A radian is based on the arc length of a circle. There are $2\pi$ radians in a full circle, which is equal to 360°.

So:

  • $180^\circ = \pi$ radians
  • $360^\circ = 2\pi$ radians

Conversion Formulas

To convert between degrees and radians:

  • Degrees to Radians:
    $ \text{radians} = \text{degrees} \times \frac{\pi}{180} $

  • Radians to Degrees:
    $ \text{degrees} = \text{radians} \times \frac{180}{\pi} $

Radians are especially important in programming and math libraries, where many functions like sin(), cos(), and tan() expect angles in radians.

Rotating a 2D Point

To rotate a point in 2D space, we use trigonometry to transform its position into a new coordinate system that has been rotated by a certain angle.

Let’s say we have a point (x, y) that we want to rotate by an angle θ (in radians) around the origin (0, 0). The formulas to compute the new coordinates are:

\[x' = x \cdot \cos(θ) - y \cdot \sin(θ)\] \[y' = x \cdot \sin(θ) + y \cdot \cos(θ)\]

What this is doing is changing the coordinate system—rotating the entire space by angle θ—so that the point’s position is expressed in this new, rotated frame.

  • The cos(θ) and sin(θ) parts come from the unit circle.
  • You’re projecting the original x and y values onto the new x and y axes that have been rotated.
  • This transformation keeps the distance (length of the vector) the same—just rotates its direction.

Vector

Vector Length and Normalization

In game development, vectors are everywhere—they describe movement, direction, force, and more. A vector has both a direction and a magnitude (length). To find the length of a 2D vector $\vec{v} = (x, y)$, we use the Pythagorean Theorem:

\[\text{length} = \|\vec{v}\| = \sqrt{x^2 + y^2}\]

This is because a vector forms a right triangle with the x and y axes, where the vector itself is the hypotenuse.

Sometimes we want just the direction of a vector, not its magnitude. That’s where normalization comes in. To normalize a vector means to scale it to have a length of 1 while keeping its direction:

\[\hat{v} = \frac{\vec{v}}{\|\vec{v}\|} = \left( \frac{x}{\|\vec{v}\|}, \frac{y}{\|\vec{v}\|} \right)\]

This unit vector is useful in controlling speed, aiming, and physics-based movement without letting the magnitude of the vector interfere.

Game Trigonometry Essentials

Game development often involves working with directions, angles, and movement. Below are the most common trigonometric operations you’ll use.

To get the angle of a 2D vector, use atan2(y, x). This gives you the angle in radians from the positive x-axis to the vector. It’s perfect for aiming or rotating objects toward a target.

1
2
3
dx = targetX - originX;
dy = targetY - originY;
angle = Math.atan2(dy, dx);

To get the length (magnitude) of a vector, use the Pythagorean Theorem. This tells you how far a point is from the origin.

length = Math.sqrt(x * x + y * y);

To normalize a vector (make its length = 1), divide each component by its length. This is useful when you only care about direction, such as setting a movement direction without affecting speed.

1
2
3
length = Math.sqrt(x * x + y * y);
nx = x / length;
ny = y / length;

To generate a vector from an angle, use cos and sin. This creates a direction vector of length 1 pointing in the specified angle, commonly used for movement based on an object rotation.

1
2
x = Math.cos(angle);
y = Math.sin(angle);

To rotate a point around the origin, use this formula with cos and sin. This is helpful for rotating sprites and objects.

1
2
xr = x * Math.cos(angle) - y * Math.sin(angle);
yr = x * Math.sin(angle) + y * Math.cos(angle);

Trigonometric functions like sin() and cos() expect angles in radians, not degrees. Many developers and designers like to think about rotations in degrees. It is common to convert from one form to another.

  • To convert radians to degrees: degrees = radians * (180 / Math.PI);
  • To convert degrees to radians: radians = degrees * (Math.PI / 180);

Reference

Trigonometric Functions

FunctionNameDescription
sin(θ)SineOpposite / Hypotenuse — y-coordinate on the unit circle
cos(θ)CosineAdjacent / Hypotenuse — x-coordinate on the unit circle
tan(θ)Tangentsin(θ) / cos(θ) — Opposite / Adjacent
asin(x)ArcsineInverse of sine — returns the angle whose sine is x
acos(x)ArccosineInverse of cosine — returns the angle whose cosine is x
atan(x)ArctangentInverse of tangent — returns the angle whose tangent is x
sec(θ)Secant1 / cos(θ) — Reciprocal of cosine
csc(θ)Cosecant1 / sin(θ) — Reciprocal of sine
cot(θ)Cotangentcos(θ) / sin(θ) — Adjacent / Opposite

Mathematical Symbols and Notations

Symbol / NotationName / Spoken AsDescription
$\vec{v}$“vector v”A vector — has both direction and magnitude
$\hat{v}$“v hat”A normalized vector — unit length (magnitude = 1)
$| \vec{v} |$“norm of v” or “magnitude of v”Length (magnitude) of vector v
$\theta$“theta”Represents an angle, usually in radians
$\cdot$“dot”Dot product of two vectors
$\times$“cross”Cross product (in 3D) — gives a vector perpendicular
$(x, y)$“x comma y”A 2D point or vector
$\sin(\theta)$“sine of theta”Trigonometric function — opposite / hypotenuse
$\cos(\theta)$“cosine of theta”Trigonometric function — adjacent / hypotenuse
$\tan(\theta)$“tangent of theta”Trigonometric function — sine / cosine
$\pi$“pi”Ratio of a circle’s circumference to diameter (≈ 3.14159)
$\Delta$“delta”Change or difference (e.g., $\Delta t$ = change in time)
$\approx$“approximately equal”Used when values are close but not exact
This post is licensed under CC BY 4.0 by the author.