Learn Trig Math

Graphs of Trig Functions

Sat, 19 Sep 2026 00:00:00 +0000

Sine and cosine waves

Plot $y = \sin\theta$ against $\theta$ and you get a wave oscillating between −1 and 1, repeating every $2\pi$. Cosine is the same wave shifted left by $\pi/2$:

$$ \sin(\theta + \tfrac{\pi}{2}) = \cos\theta $$

Key features of $y = \sin x$:

Zeros at $0, \pi, 2\pi, \dots$
Peaks (+1) at $\pi/2 + 2\pi k$, troughs (−1) at $3\pi/2 + 2\pi k$
Odd symmetry: $\sin(-x) = -\sin x$; cosine is even: $\cos(-x) = \cos x$

The general sinusoid

Almost every oscillation in code (sprite bobbing, audio tone, loading pulse) is:

Project: Analog Clock

Sat, 19 Sep 2026 00:00:00 +0000

The problem

Draw a working clock: 60 tick marks around a dial, plus hour, minute, and second hands that show the real time. Every hand is an angle problem — and screens measure angles differently than math class.

Angles on a screen

Math angles start at +x and go counterclockwise with y up. A clock starts at 12 and goes clockwise with y down. For a hand showing a fraction $f$ of a full turn (e.g. 15 minutes = 0.25), the clockwise-from-top angle is:

Project: Sound & Beats

Sat, 19 Sep 2026 00:00:00 +0000

The problem

A sine wave is not just a picture — it is a sound. Given the wave math from Graphs, generate real tones in the browser, combine two close pitches to hear beats, and shape notes with an envelope.

Tone math

A pure tone of frequency $f$ Hz at amplitude $A$ is:

$$ y(t) = A\sin(2\pi f t) $$

Musical pitch is logarithmic: A4 = 440 Hz and each semitone up multiplies by $2^{1/12}$:

The Unit Circle

Sat, 19 Sep 2026 00:00:00 +0000

Definition

The unit circle is a circle of radius 1 centered at the origin. For any angle $\theta$ measured from the positive x-axis:

$$ \cos\theta = x, \qquad \sin\theta = y $$

That is: go $\theta$ around the circle; your coordinates are cosine and sine. For acute angles this matches SOH-CAH-TOA with hypotenuse 1. For larger angles it extends the definitions.

import math
def point_on_circle(theta_rad, r=1.0):
    return (r * math.cos(theta_rad), r * math.sin(theta_rad))

print(point_on_circle(math.radians(180)))  # (-1.0, ~0)
print(point_on_circle(math.radians(270)))  # (~0, -1.0)

Key points to memorize

Angle	Coordinates $(\cos, \sin)$
0° ($0$)	(1, 0)
30° ($\pi/6$)	(√3/2 ≈ 0.866, 1/2)
45° ($\pi/4$)	(√2/2 ≈ 0.707, √2/2)
60° ($\pi/3$)	(1/2, √3/2 ≈ 0.866)
90° ($\pi/2$)	(0, 1)
180° ($\pi$)	(−1, 0)
270° ($3\pi/2$)	(0, −1)
360° ($2\pi$)	(1, 0)

Notice the symmetry: 30° and 60° swap coordinates; 45° is equal in both.

Trigonometry in Code

Sat, 19 Sep 2026 00:00:00 +0000

Cheat sheet

$$ x = r\cos\theta, \qquad y = r\sin\theta, \qquad \theta = \text{atan2}(y, x) $$

$$ \text{rad} = \text{deg}\cdot\tfrac{\pi}{180}, \qquad \text{deg} = \text{rad}\cdot\tfrac{180}{\pi} $$

All standard-library trig takes radians: Python math.sin/cos/tan/asin/acos/atan/atan2, JS Math.sin/cos/tan/asin/acos/atan/atan2.

Recipe 1: place objects on a circle

Clocks, radial menus, orbit systems:

import math
def circle_points(n, radius, cx=0.0, cy=0.0):
    return [
        (cx + radius * math.cos(2 * math.pi * i / n),
         cy + radius * math.sin(2 * math.pi * i / n))
        for i in range(n)
    ]
print(circle_points(4, 10))  # E, N, W, S in math coords (y up)

function circlePoints(n, radius, cx = 0, cy = 0) {
  return Array.from({ length: n }, (_, i) => {
    const t = 2 * Math.PI * i / n;
    return [cx + radius * Math.cos(t), cy + radius * Math.sin(t)];
  });
}

Note: screen coordinates have y down, so on Canvas/SVG the circle appears mirrored (clockwise). Negate y or add $\pi$ if you need math orientation.

What Is Trigonometry?

Sat, 19 Sep 2026 00:00:00 +0000

The one-sentence version

Trigonometry studies the relationship between angles and side lengths — mostly in triangles, and by extension in circles, waves, and rotations.

The three core functions take an angle and return a ratio:

$$ \sin(\theta), \quad \cos(\theta), \quad \tan(\theta) $$

If you know an angle (plus one side), you can find every other side. If you know sides, you can recover the angles. That two-way bridge is the whole superpower.

Angles, Degrees, and Radians

Sat, 19 Sep 2026 00:00:00 +0000

Degrees

A full rotation is split into 360 degrees (°). Familiar benchmarks:

90° = quarter turn (right angle)
180° = half turn (straight line)
270° = three-quarter turn
360° = full turn

Degrees are convenient for humans (divisible by 2, 3, 4, 6, 9, …), which is why CSS, SVG rotations, and compass bearings use them.

Radians

A radian measures rotation by arc length: one radian is the angle that subtends an arc exactly one radius long. Since a full circle’s circumference is $2\pi r$:

Fundamental Identities

Sat, 19 Sep 2026 00:00:00 +0000

Why identities matter

Identities are equations true for every angle. They let you rewrite expressions, verify code (e.g. assert $\sin^2 + \cos^2 \approx 1$), and simplify shaders or physics formulas before implementing them.

Pythagorean identities

From $x^2 + y^2 = 1$ on the unit circle, with $x = \cos\theta$, $y = \sin\theta$:

$$ \sin^2\theta + \cos^2\theta = 1 $$

Dividing by $\cos^2\theta$ or $\sin^2\theta$ gives the other two:

Project: Easing & Motion

Sat, 19 Sep 2026 00:00:00 +0000

The problem

Objects that move at constant speed and stop instantly look robotic. Real motion — and good UI — eases: slow start, fast middle, gentle stop. The smoothest easings are sine curves.

The three sine easings

For progress $t \in [0, 1]$, mapping to eased progress $e(t) \in [0, 1]$:

$$ \text{easeInSine: } e = 1 - \cos\!\left(\tfrac{\pi}{2}t\right), \qquad \text{easeOutSine: } e = \sin\!\left(\tfrac{\pi}{2}t\right), \qquad \text{easeInOutSine: } e = -\tfrac{1}{2}\left(\cos(\pi t) - 1\right) $$

Check the boundaries: at $t = 0$ all give 0, at $t = 1$ all give 1. The difference is the slope: ease-in starts flat (zero velocity) and ease-out ends flat. Ease-in-out does both — which is why it is the default choice for moving things on screen.

Project: Projectile Lab

Sat, 19 Sep 2026 00:00:00 +0000

The problem

Launch a projectile at speed $v_0$ and angle $\theta$. Where does it land? How high does it go? This is parametric motion — $x$ and $y$ each driven by trig of the launch angle.

The equations

Split the launch velocity into components, then let gravity act on $y$ (y up, $g = 9.81$):

$$ x(t) = v_0\cos\theta \cdot t, \qquad y(t) = v_0\sin\theta \cdot t - \tfrac{1}{2}gt^2 $$

Setting $y = 0$ gives flight time $T = 2v_0\sin\theta / g$, and substituting back gives the famous results:

Special Right Triangles

Sat, 19 Sep 2026 00:00:00 +0000

Why “special”?

Most triangles need a calculator. Two shapes give exact values with square roots, so they appear constantly in tests, graphics (diagonals, hex grids), and interview problems.

45-45-90 (isosceles right)

Angles: 45°, 45°, 90°. Legs equal; hypotenuse is leg × √2.

$$ \text{legs } 1 : 1, \quad \text{hypotenuse } \sqrt{2} \;\; \Rightarrow \;\; 1 : 1 : \sqrt{2} $$

Derivation: legs $1, 1$ → hypotenuse $\sqrt{1^2+1^2} = \sqrt{2}$ by Pythagoras.

Inverse Trig Functions

Sat, 19 Sep 2026 00:00:00 +0000

The idea

Forward trig: angle → ratio. Inverse trig: ratio → angle.

$$ \theta = \arcsin x \iff \sin\theta = x, \qquad \theta = \arccos x \iff \cos\theta = x, \qquad \theta = \arctan x \iff \tan\theta = x $$

Also written $\sin^{-1}, \cos^{-1}, \tan^{-1}$ — the $-1$ means inverse function, not reciprocal ($\sin^{-1}x \ne 1/\sin x = \csc x$).

Restricted ranges (principal values)

Since $\sin$ repeats, inverses return one canonical angle:

Project: Maps & Bearings

Sat, 19 Sep 2026 00:00:00 +0000

The problem

Two staples of maps, games with minimaps, and robotics: which direction is the target (compass bearing), and how far is it over the curved Earth (great-circle distance).

Bearings from `atan2`

A compass bearing $\beta$ is measured clockwise from north, in $[0°, 360)$. With $x$ = east offset and $y$ = north offset (note the swapped argument order versus the usual math convention):

$$ \beta = \operatorname{atan2}(x,\; y), \qquad \beta_{deg} = (\beta \cdot \tfrac{180}{\pi} + 360) \bmod 360 $$

Check: due east $(1, 0)$ → $\operatorname{atan2}(1, 0) = 90°$ ✓. Due south $(0, −1)$ → 180° ✓.

Project: Turret Aiming

Sat, 19 Sep 2026 00:00:00 +0000

The problem

A turret sits at fixed $(t_x, t_y)$. It should rotate to face the mouse, and clicked shots should fly straight along the barrel. This is the core loop of tower defense, twin-stick shooters, and aiming UI.

Aim with `atan2`

Given mouse $(m_x, m_y)$, the barrel angle is:

$$ a = \operatorname{atan2}(m_y - t_y,\; m_x - t_x) $$

On a y-down canvas this angle is clockwise-positive — which exactly matches ctx.rotate(), so drawing the barrel is one call. (This is why Inverse Trig Functions insisted on atan2 over atan: full-circle aiming needs all four quadrants.)

Right-Triangle Trigonometry

Sat, 19 Sep 2026 00:00:00 +0000

The three ratios

Pick an acute angle $\theta$ in a right triangle. Name the sides relative to $\theta$:

Hypotenuse (H): opposite the right angle, always the longest side.
Opposite (O): across from $\theta$.
Adjacent (A): next to $\theta$, not the hypotenuse.

Then:

$$ \sin\theta = \frac{\text{opposite}}{\text{hypotenuse}}, \qquad \cos\theta = \frac{\text{adjacent}}{\text{hypotenuse}}, \qquad \tan\theta = \frac{\text{opposite}}{\text{adjacent}} $$

Mnemonic: SOH-CAH-TOA (Sine = Opposite/Hypotenuse, Cosine = Adjacent/Hypotenuse, Tangent = Opposite/Adjacent).

Tangent is also the ratio of sine to cosine:

Solving Triangles

Sat, 19 Sep 2026 00:00:00 +0000

Standard notation

Sides $a, b, c$ opposite angles $A, B, C$. Angles sum to 180°:

$$ A + B + C = 180^\circ $$

Law of Sines

Use when you know two angles + any side (AAS, ASA) or two sides + a non-included angle (SSA, careful — ambiguous case below).

$$ \frac{a}{\sin A} = \frac{b}{\sin B} = \frac{c}{\sin C} = 2R $$

($R$ is the circumradius — the common ratio equals the diameter of the circumscribed circle.)

JS Playground

Sat, 19 Sep 2026 00:00:00 +0000

Try it live

Pick a target below, then press Run (or Ctrl+Enter). Your code runs locally in your browser — nothing is uploaded anywhere.

Tips

Every JavaScript snippet in the lessons has a Run in playground button — it loads the code here in the right mode automatically.

Angle	Coordinates \((\cos, \sin)\)
0° (\(0\))	(1, 0)
30° (\(\pi/6\))	(√3/2 ≈ 0.866, 1/2)
45° (\(\pi/4\))	(√2/2 ≈ 0.707, √2/2)
60° (\(\pi/3\))	(1/2, √3/2 ≈ 0.866)
90° (\(\pi/2\))	(0, 1)
180° (\(\pi\))	(−1, 0)
270° (\(3\pi/2\))	(0, −1)
360° (\(2\pi\))	(1, 0)

Learn Trig Math

Graphs of Trig Functions

Sine and cosine waves link

The general sinusoid link

Project: Analog Clock

The problem link

Angles on a screen link

Project: Sound & Beats

The problem link

Tone math link

The Unit Circle

Definition link

Key points to memorize link

Trigonometry in Code

Cheat sheet link

Recipe 1: place objects on a circle link

What Is Trigonometry?

The one-sentence version link

Angles, Degrees, and Radians

Degrees link

Radians link

Fundamental Identities

Why identities matter link

Pythagorean identities link

Project: Easing & Motion

The problem link

The three sine easings link

Project: Projectile Lab

The problem link

The equations link

Special Right Triangles

Why “special”? link

45-45-90 (isosceles right) link

Inverse Trig Functions

The idea link

Restricted ranges (principal values) link

Project: Maps & Bearings

The problem link

Bearings from atan2 link

Project: Turret Aiming

The problem link

Aim with atan2 link

Right-Triangle Trigonometry

The three ratios link

Solving Triangles

Standard notation link

Law of Sines link

JS Playground

Try it live link

Tips link

Sine and cosine waves

The general sinusoid

The problem

Angles on a screen

The problem

Tone math

Definition

Key points to memorize

Cheat sheet

Recipe 1: place objects on a circle

The one-sentence version

Degrees

Radians

Why identities matter

Pythagorean identities

The problem

The three sine easings

The problem

The equations

Why “special”?

45-45-90 (isosceles right)

The idea

Restricted ranges (principal values)

The problem

Bearings from `atan2`

The problem

Aim with `atan2`

The three ratios

Standard notation

Law of Sines

Try it live

Tips