← All Labs
IDEA #30 · TRIGONOMETRY — FROM THE UNIT CIRCLE UP

Trigonometry — every identity is a triangle in disguise

Sine and cosine are not table entries to memorise; they are the shadows of a point walking around a circle. Cosine is how far east it has gone, sine how far north, and the whole subject — waves, phases, the angle-sum identities, even the strange multi-valuedness of arcsin — falls out of watching that one point move. The four tabs below share a single angle dial θ, so the point you set on the circle is the same point riding the wave and driving the identity. Everything is computed live from the real geometry; nothing is a canned plot.

SHARED ANGLE  θ drag here, or drag the point on the circle — every tab follows
TAB 1 · THE SOURCE
Unit circle
Spin the angle; sin, cos and tan spill out as projections and a tangent length.
TAB 2 · UNROLLED
Wave builder
The circling point traces a sine. Dial amplitude, frequency and phase.
TAB 3 · THE PROOF
Identities
sin(a+b) drawn as a dissected, rotated right triangle — no algebra.
TAB 4 · THE FOLD
Inverse trig
Why arcsin has to pick one answer from infinitely many.
01

Drive it — one point, three functions

Drag the point around the circle (or use the shared θ dial). Cosine is its x-shadow, sine its y-shadow, and tangent is the length cut on the vertical tangent line at x = 1.
DRIVE IT
Unit circle   radius = 1
point P = (cos θ, sin θ)
tan θ = sin θ / cos θ
cos θ (x-projection) sin θ (y-projection) tan θ (tangent length)
SIN θ
north shadow
COS θ
east shadow
TAN θ
slope of ray
Angle θ
Quadrant
Reference angle
sin²θ + cos²θ
02

Walkthrough

WALKTHROUGH
1
Drag the point to . It sits at (1, 0): cos = 1, sin = 0. The point is the pair of coordinates.
2
Sweep to 90°. The x-shadow (cos) shrinks to 0 while the y-shadow (sin) grows to 1. Cosine and sine are just how far across and how far up.
3
Watch the purple tangent segment on the right edge. It is where the extended ray hits the vertical line x = 1 — its length is tan θ, and it blows up toward 90° because the ray becomes parallel to that line.
4
Keep the "sin² + cos²" readout in view as you drag. It never budges from 1.000 — that is the Pythagorean theorem on the unit hypotenuse.
5
Press Spin and pass 360°. Everything repeats — sine and cosine are periodic because the point comes back to where it started.
03

Aha

AHA
THE INSIGHT
Sine and cosine aren't functions you look up — they're the two coordinates of a point walking around a circle. Everything else in trigonometry is bookkeeping about that walk.
04

Explanation

EXPLANATION

Fix a circle of radius 1 centred at the origin and start a ray at the positive x-axis. Rotate the ray anticlockwise by an angle θ. It pierces the circle at a single point P. By definition, the x-coordinate of P is cos θ and the y-coordinate is sin θ. That is the whole of trigonometry's foundation — two names for two coordinates.

Because P lies on the circle of radius 1, its coordinates satisfy x² + y² = 1, which is exactly the identity cos²θ + sin²θ = 1. It isn't a separate fact to memorise; it is the equation of the circle read aloud.

The tangent is the slope of the ray from the origin to P, rise over run, sin θ / cos θ. Geometrically it equals the height at which the ray crosses the vertical line x = 1 — the segment drawn in purple. As θ approaches 90° the run (cos θ) collapses to zero, the ray becomes vertical, and tan θ races to infinity.

The reference angle is the acute angle between the ray and the x-axis. In every quadrant the sizes of sin, cos and tan are the reference angle's values; only the signs change, following the sign of x (cos) and y (sin) in that quadrant. This is why "all-students-take-calculus" mnemonics work — they are just tracking which coordinate is negative.

Measuring θ in radians makes the circle's own arc length the unit: an angle of θ radians subtends an arc of length θ on the unit circle. A full turn is 2π because the circumference is 2π. Radians are what make calculus of sine clean — the derivative of sin is cos only when angle is measured this way.

Finally, rotating past 360° returns P to a previous position, so sin and cos repeat with period 2π. Periodicity is geometric: it is the statement that going all the way around brings you home.

05

Research note

RESEARCH NOTE
The definitions, the Pythagorean identity, and the arc-length meaning of radians:
$$P(\theta)=(\cos\theta,\ \sin\theta),\qquad \cos^2\theta+\sin^2\theta=1,\qquad \tan\theta=\frac{\sin\theta}{\cos\theta}$$
$$\text{arc length on the unit circle} = \theta \ \text{(radians)},\qquad 360^\circ = 2\pi\ \text{rad}$$
Go deeper: the unit-circle definition extends sine and cosine from acute-triangle ratios to all real angles, and then — via e = cos θ + i sin θ (Euler's formula) — to the complex plane, where rotation and exponentiation become the same operation. See any calculus text's treatment of the exponential of an imaginary argument, or 3Blue1Brown's "Euler's formula" for the circular-motion view used here.
01

Drive it — unroll the circle into a wave

The point circles on the left; its height is dropped straight across to trace the sine on the right. Dial amplitude A, angular frequency k and phase φ and watch the same curve reshape.
DRIVE IT
y = A·sin(k·x + φ)
the marker sits at the shared angle θ
A·sin(kx+φ) A·cos(kx+φ) marker at θ
AMPLITUDE A1.00
ANGULAR FREQ k1.00
PHASE φ
Value at marker θ
Period (2π / k)
Frequency (k / 2π)
Peak height
02

Walkthrough

WALKTHROUGH
1
Press Roll. The point goes around the circle at a steady rate and its height is copied across — the wave is the record of the circle's height over time.
2
Raise amplitude A. The wave gets taller but keeps the same timing: A scales the circle's radius, so it stretches height, not width.
3
Raise frequency k. The point spins faster, so more wiggles fit in the same window; the period shrinks to 2π/k.
4
Drag phase φ. The whole wave slides left or right — φ is just a head start on the angle.
5
Tick the cosine partner. It's the identical wave shifted 90° — because cos θ = sin(θ + 90°), the x-shadow leads the y-shadow by a quarter turn.
03

Aha

AHA
THE INSIGHT
A sine wave isn't a new object — it's a circle unrolled in time. Amplitude, frequency and phase are just the radius, the spin rate, and the head start of the point going around.
04

Explanation

EXPLANATION

Let a point move around a circle of radius A at a steady angular rate k, starting from an angle offset φ. At "time" x its angle is kx + φ, so its height is A·sin(kx + φ). Plotting that height against x is precisely the wave on the right. The three sliders map one-to-one onto three physical facts about the circle: how big it is, how fast it turns, and where it started.

Amplitude A is the radius, the maximum height reached. Angular frequency k is radians of turn per unit x; the wave completes one full cycle when kx advances by 2π, giving a period of 2π/k and an ordinary frequency of k/2π cycles per unit. Phase φ shifts the pattern along x by −φ/k without changing its shape.

The cosine partner is the same motion read on the other axis. Since the x-shadow always leads the y-shadow by a quarter turn, cos θ = sin(θ + 90°): cosine is sine with a 90° head start. That single phase relationship is why sines and cosines can always be traded for one another.

This "circle unrolled" picture is the doorway to Fourier analysis: any repeating signal, however jagged, is a sum of such circular motions at different radii, rates and head starts. Sound, light, tides and alternating current are all read this way — each is a chorus of rotating points, and the wave you see is their combined shadow.

05

Research note

RESEARCH NOTE
The general sinusoid and its period / frequency, plus the quarter-turn link to cosine:
$$y(x)=A\sin(kx+\varphi),\qquad T=\frac{2\pi}{k},\qquad f=\frac{k}{2\pi},\qquad \cos\theta=\sin\!\left(\theta+\tfrac{\pi}{2}\right)$$
Go deeper: the leap from "one circle" to "sum of circles" is the Fourier series, in which any 2π-periodic function is written as Σ aₙ cos(nx) + bₙ sin(nx). See the repo's fourier-epicycles-drawing-name and fourier-uncertainty-tradeoff labs, which build directly on the wave you just shaped here.
01

Drive it — sin(a+b) as a stacked triangle

Two stacked right triangles inside a rotated rectangle prove the angle-sum formula by area/length, not algebra. Drag angles a and b; the coloured segments read off each term of the identity.
DRIVE IT
sin(a+b) = sin a cos b + cos a sin b
cos(a+b) = cos a cos b − sin a sin b
sin a·cos b cos a·sin b total height = sin(a+b)
ANGLE a30°
ANGLE b25°
sin a · cos b
cos a · sin b
their sum
sin(a + b) directly
match?
02

Walkthrough

WALKTHROUGH
1
The outer segment is a unit ray turned through the total angle a+b. Its height is, by definition, sin(a+b) — the purple bar on the right.
2
Now read the same height in two pieces up the staircase: a first rise of sin a·cos b (teal), then a second rise of cos a·sin b (orange).
3
Watch the readout: teal + orange equals the direct sin(a+b) to the last digit. The picture is the proof.
4
Flip to cos(a+b). Now the horizontal legs combine — one subtracts, which is where the minus sign in cos(a+b) = cos a cos b − sin a sin b comes from.
5
Press a = b. The formula collapses to the double-angle identity sin 2a = 2 sin a cos a — same diagram, mirrored.
03

Aha

AHA
THE INSIGHT
The angle-sum identities aren't formulas to memorise — they're what you get when you measure the height of a tilted triangle two different ways and insist the answers agree.
04

Explanation

EXPLANATION

Start with a right triangle whose hypotenuse is the unit ray at angle a+b. We build it in two stages. First rotate by b and draw a small right triangle with hypotenuse 1; its far corner sits at height sin b and horizontal reach cos b. Then, on top of that triangle, we rotate by a further a.

The clever move is to erect a second right triangle on the slanted top edge of the first. Projecting the whole staircase onto the vertical axis, the total height splits cleanly into sin a·cos b (the rise contributed by the long horizontal leg of length cos b, tilted by a) plus cos a·sin b (the rise contributed by the short vertical leg of length sin b). Their sum is the height of the outer ray, which is sin(a+b).

Projecting the same staircase onto the horizontal axis gives the cosine identity. Here the two contributions point in opposite directions — cos a·cos b reaches forward while sin a·sin b pulls back — so they subtract: cos(a+b) = cos a cos b − sin a sin b. The lone minus sign that trips up students is simply two legs pointing opposite ways.

Every other identity is a corollary of these two. Setting b = a gives the double-angle formulas. Adding and subtracting the sine and cosine versions gives the product-to-sum rules that turn multiplication of waves into interference. And the same construction, done with the complex exponential ei(a+b) = eiaeib, produces both identities in one line — the diagram and the algebra are the same statement.

05

Research note

RESEARCH NOTE
The angle-sum pair, and the one-line complex-exponential derivation that contains them both:
$$\sin(a+b)=\sin a\cos b+\cos a\sin b,\qquad \cos(a+b)=\cos a\cos b-\sin a\sin b$$
$$e^{i(a+b)}=e^{ia}e^{ib}\ \Longrightarrow\ \cos(a{+}b)+i\sin(a{+}b)=(\cos a+i\sin a)(\cos b+i\sin b)$$
Go deeper: equating real and imaginary parts of the product above reproduces both boxed identities instantly — the geometric dissection here and the algebra of complex multiplication are two faces of the same fact. See the repo's complex-functions-domain-colouring lab for the multiplication-as-rotation view.
01

Drive it — fold the sine to invert it

Set a target height y with the slider (or the shared angle picks it). Every place the sine wave reaches that height is a valid angle — arcsin must pick just one. Watch the principal branch light up.
DRIVE IT
y = sin x is many-to-one
arcsin picks the branch in [−90°, 90°]
all solutions of sin x = y principal value arcsin y target height y
TARGET y = sin x0.57
Principal arcsin y
Second solution in [0,2π)
General solution
Solutions shown
02

Walkthrough

WALKTHROUGH
1
Set y = ½. The gold line crosses the sine wave over and over — 30°, 150°, 390°, … all have sine ½. The question "what angle has this sine?" has infinitely many answers.
2
A function must return one value, so arcsin restricts its input to the band [−90°, 90°] — the highlighted strip where the sine climbs once, monotonically.
3
Inside that band there is exactly one crossing: the principal value, drawn in teal. That's the number your calculator returns.
4
Slide y toward 1. The two nearest crossings rush together and merge at 90° — arcsin has a vertical tangent there, which is why its derivative blows up at the edges.
5
Read the general solution box: every answer is either the principal value plus a full turn, or its mirror across 90°. That single rule catches all the crossings.
03

Aha

AHA
THE INSIGHT
Sine throws away information — many angles share one height — so inverting it means choosing a rule for which angle to hand back. arcsin's rule is "the one between −90° and 90°," and the multivaluedness never really goes away.
04

Explanation

EXPLANATION

A function can be inverted only if it is one-to-one — each output must come from a single input. Sine is emphatically not: it is periodic, so any height it reaches is reached again every full turn, and within a single turn it reaches most heights twice (once climbing, once falling). Feeding a height back through "which angle?" therefore returns an infinite family.

To manufacture a genuine inverse we amputate the domain, keeping only the stretch [−90°, 90°] where sine rises steadily from −1 to 1 without repeating. On that restricted piece sine is one-to-one, and its inverse — arcsin, with outputs confined to that same interval — is well defined. This chosen output range is called the principal branch.

The full solution set is easy to reconstruct from the principal value α = arcsin y. Because sine is symmetric about 90°, the other solution in a turn is 180° − α, and because it is periodic, you may add any whole number of full turns. So x = α + 360°k or x = (180° − α) + 360°k for any integer k — exactly the crossings you see on screen.

The merging of solutions as y → 1 is the geometric reason arcsin has infinite slope at the endpoints: near a crest the sine is nearly flat, so a tiny change in height corresponds to a large change in angle. The same amputation strategy defines arccos (branch [0°, 180°]) and arctan (branch (−90°, 90°)); every inverse trig function is a deliberate choice of one slice from a repeating pattern.

05

Research note

RESEARCH NOTE
The principal branch, the general solution it generates, and why the slope diverges at the edges:
$$\arcsin:[-1,1]\to\left[-\tfrac{\pi}{2},\tfrac{\pi}{2}\right],\qquad \sin x = y \iff x = \arcsin y + 2\pi k \ \text{ or }\ x = \pi-\arcsin y + 2\pi k$$
$$\frac{d}{dy}\arcsin y=\frac{1}{\sqrt{1-y^2}}\ \xrightarrow[\ y\to\pm1\ ]{}\ \infty$$
Go deeper: the "many answers, pick one branch" idea is the elementary shadow of a deep phenomenon — Riemann surfaces, where multi-valued functions like arcsin, log and √ become single-valued on a layered domain. The branch cut you see as the band edges here becomes a seam between sheets. See the repo's complex-functions-domain-colouring lab.
Idea #30 · Trigonometry from the unit circle up — single self-contained HTML · Canvas + KaTeX · one shared angle dial across four tabs.