Trigonometry

Core Idea

Sine and cosine do exactly one job: convert an angle into a coordinate. Given an angle θ on the unit circle, cos θ is the point’s x, sin θ its y — no protractor, no measuring, just a function call. That one conversion is most of the trigonometry graphics ever needs, and it’s what the whole garden above runs on: every reed is sin(t) wearing different clothes.

The Circle Is the Wave

Drag the point and watch the right panel: the wave is nothing separate — it’s the point’s height, plotted over time. The circle unrolled. That’s why sine repeats every 2π: once around the circle is once through the wave.

The gold arc is why radians win over degrees: a radian is the angle whose arc is exactly one radius long — a pure ratio, not a convention. Measure the arc in radii and the number is the angle; 2π ≈ 6.28 radii fit around any circle, so 2π is once around. Every Math.sin and every GLSL builtin speaks radians.

Anatomy of a Wave

All the sine-driven life on screen is one formula with three knobs — the hero’s three sliders:

value = amplitude · sin(frequency · t + phase)

• Amplitude — how far it swings.
• Frequency — how fast it cycles.
• Phase — where in the cycle it starts. Give each element a different phase (i·φ in the garden) and identical motion turns into a travelling wave — set phase to zero up there and watch the field snap into lockstep.

The same line runs at GPU speed in a vertex shader — pos.y += A · sin(k·pos.x + t) ripples a surface with one instruction per vertex. And when a single sine feels too mechanical, add a smaller faster one (the hero’s harmonic toggle): the sum stays periodic but reads organic.

Going Both Ways

Polar → cartesian is the forward machine; atan2 is the reverse gear:

x = r · cos θ,  y = r · sin θ        // angle + distance → position
θ = atan2(y, x)                      // position → angle, sign-safe

Forward: place n objects evenly on a ring with θᵢ = i · 2π/n. Backward: aim anything at anything — atan2(target.y − my.y, target.x − my.x) is the facing angle, with no quadrant ambiguity (plain atan can’t tell (1,1) from (−1,−1); atan2 can). The demo’s HUD runs it live: feed the point’s own (cos θ, sin θ) back in and θ comes out.

One caution: acos/atan2 are among the priciest math calls. When you only need to compare directions (“is the target within my field of view?”), skip the angle entirely — dot(a, b) > threshold answers without ever computing it. The fastest angle is the one you never compute; see dot product.

Connections

Angle-to-coordinate is the bridge between trigonometry and linear algebra: a rotation matrix’s columns are just (cos θ, sin θ) pairs — the basis vectors walked around the circle — and every rotation in transformations inherits its sin/cos from here. Polar ↔ cartesian is a change of description the way coordinate spaces are a change of frame. And where sine drives time-looping motion, interpolation’s eased t drives one-way journeys — the two halves of almost all animation.