Animate Sine & Cosine From the Unit Circle | QuantumSketch
Animate sine and cosine by spinning a point around the unit circle: its height traces the sine wave and its shadow traces cosine. Here's the animation.
Animate sine and cosine by spinning a point around the unit circle: the point's height traces the sine wave, and its horizontal shadow traces cosine. The rotating angle and the unwinding wave stay in lockstep.
The core idea
A point on the unit circle at angle θ sits at:
- Height = sin θ
- Horizontal position = cos θ
Let θ increase steadily and plot height vs angle → the sine wave appears.
The animation, beat by beat
- Draw the unit circle with a radius arm at angle θ.
- Spin the arm — the tip rides the circle.
- Drop a dashed line from the tip to a graph on the right.
- Unwind the angle along the x-axis → the height pen traces sin θ.
- Add cosine — same idea, horizontal position → a wave 90° out of phase.
What it makes obvious
| Property | Why it's visible | |---|---| | Range [−1, 1] | Circle has radius 1 | | Period 2π | One full rotation | | Sine/cosine phase shift | Height vs width of same point |
This is the bridge from "SOH-CAH-TOA" triangles to waves in physics and signals — and it feeds straight into the Fourier transform.
Manim building blocks
Circle, a Line radius arm rotated by a ValueTracker, a Dot at the tip, a DashedLine linking to Axes, and a traced ParametricFunction for the wave.
The prompt
"Spin a point around the unit circle and trace its height to the right as the sine wave; then overlay cosine to show the 90° phase shift."
→ Render it at quantumsketch.app.
Written by Shihab Shahriar Antor · Shahriar Labs
FAQ
Q.How does the unit circle produce the sine and cosine waves?
A point moving around the unit circle has coordinates (cos θ, sin θ) where θ is the angle swept. As the point rotates, its vertical height is sin θ and its horizontal position is cos θ. If you let the angle increase steadily and plot the height against the angle on an axis to the right, the height traces out the sine wave; plotting the horizontal position traces the cosine wave. Animating the rotating point alongside the unwinding graph shows directly why sine and cosine are periodic, why they range from −1 to 1, and why they're 90° out of phase.
Q.How can I animate the connection between the circle and the wave?
Describe it as a prompt: 'Spin a point around the unit circle and trace its height to the right as the sine wave, showing the angle and the wave staying in sync.' QuantumSketch renders this as a narrated Manim animation. Manim's Circle, a rotating Dot driven by a ValueTracker, and a dashed line linking the point's height to the plotted curve make the circle-to-wave connection explicit. You can ask for cosine too, or both at once to show the phase difference.