ApliantFull spectrum
Each bar is a circle. Its position is the frequency k (how many turns it makes; negative = spins backwards) and its height is the radius. Almost the whole shape lives in the low frequencies!
Partial sums — the shape being born
Each tile adds more circles. Click one to use that N, or 🖨️ to save it for a 3D printer.
The two signals: x(t) and y(t)
A 2D outline is just a pair of periodic signals. Gray: the original shape · yellow: the Fourier sum · colored: the 3 largest circles alone.
Error × number of circles
Relative (RMS) error on a log scale. Click the chart to pick N.
Where is the error?
The original shape colored by its distance to the current approximation.
How many circles to get there?
The general recipe
Read it like this: the shape is a sum of spinning arrows. Each arrow has a length rk, a speed k and a starting angle φk. Time t goes from 0 to 2π (one full lap).
Hover a term to see it glow in the animation beside.
In real coordinates (x, y)
Coefficient table
🎧 Use headphones and start with a low volume.
Oscilloscope (X = left ear, Y = right ear)
This is drawn from the sound that is playing, not from the shape. If the sound is your shape, the shape appears.
Waterfall
The frequencies of the sound over time. Each peak is a circle you can hear. Newest at the front.
Sound waves: left and right
Yellow: left ear, x(t). Blue: right ear, y(t). Each repetition is one lap around the shape.
Overtone ladder
Overtone n vibrates n times faster than the base pitch. It mixes the circles k = +n and k = −n.
How does a shape become sound?
Sound is air pressure going up and down. A speaker plays any wave you give it. Your shape gives two waves: x(t) and y(t). We play one lap of the shape f₀ times per second, so the circle k becomes a pure tone at k × f₀.
Big circles are loud low overtones. Small circles are soft high overtones. Sharp corners need many high overtones, so they sound bright and buzzy. Smooth, round shapes sound soft, almost like a flute.
Musicians call this oscilloscope music: connect the left channel to X and the right channel to Y of an oscilloscope and the music draws pictures.
Keep only some circles
A filter lets some circles pass and blocks the others, by speed |k|. A low-pass keeps the slow circles: the big, smooth form. A high-pass keeps the fast ones: only the corners and small details. The filter applies to the whole app, so you can see it drawn and hear it.
Before and after
Gray: your shape with N circles. Yellow: what passes the filter (zoomed to fit).
What the filter lets through
Each bar is a circle. Inside the green band it passes; outside it is blocked.
Build a shape from circles
The other way around: choose the circles and discover the shape. Speed k is how many turns the circle makes per lap (negative = clockwise).
The bump that never goes away
A sharp corner is a jump. Here is the simplest one: a square wave that jumps from −1 to +1. Fourier circles can only make smooth curves, so near the jump the sum overshoots. Add more circles: the bump gets thinner, but its height stays at about 9% of the jump. This is the Gibbs effect (1899).
One period of the square wave
Gray: the square wave. Yellow: the sum of N circles. The box marks the corner shown below.
Zoom on the corner
The zoom follows the bump as it gets thinner. Its height does not change.
Height of the bump × N
It tends to 8.95%, not to zero. With Lanczos smoothing it falls to about 1%.
Why it matters
Every sharp corner of your shape is a small jump, so every corner gets this bump. More circles make the bump thinner, never smaller. That is why the app rounds the corners before computing the circles: a rounded corner has no jump, and the bump disappears.
Lanczos smoothing does the same in the circles: it makes the high circles smaller, step by step. The same trick is used in images and audio to avoid "ringing" near edges.
The wagon wheel
In films, wheels sometimes seem to spin backwards. The camera takes only a few pictures per second, so a fast turn looks like a slow one. Here one circle turns k times per lap, but we only look at it S times per lap. If k is not smaller than S/2 (the Nyquist limit), the samples show a different circle.
What really happens
The gray dot is the real circle. The yellow dots are the moments we look at it.
What the samples show
Only the samples, one after the other. This is all a computer (or a camera) sees.
Your shape with few samples
Now the same with your shape (with its current N circles). We keep only S points, compute the circles again from them and redraw. Circles faster than S/2 do not disappear: they disguise themselves as slower circles and bend the shape.
The shape redrawn from S samples
Gray: your shape. Dots: the samples. Yellow: the circles computed from the samples only.
Where each circle goes
Gray: the real circles. Yellow: what the samples measure. The green band is the safe zone (|k| < S/2). Arrows: fast circles folding into the band.
Keep only a few numbers
Your shape is a list of points, 2 numbers each. Suppose you may keep only a few numbers. Option 1: keep some points and join them with straight lines. Option 2: keep circles, 2 numbers each, from the slowest up (the order is fixed, so k is not stored). Same budget, different results. This is the idea behind JPEG and MP3.
Keeping points
Keeping circles
Error × how much you keep
Pink: keeping points. Yellow: circles, slowest first. Blue: circles, biggest first. Log scales. The white dots are your current choice.
Why it works
Points are all equally important: drop one and you lose that part of the shape. Circles are not: the slow circles carry almost the whole shape and the many fast ones carry only details. So you keep the slow ones and throw away the rest. This works best on smooth shapes like the heart or the cat.
It does not always win. The star is made of straight lines: its 10 corners are all you need, and no small set of circles can beat that. Real compressors choose the description that suits the data. JPEG, for example, is great for photos and bad for sharp drawings and text.
JPEG does this with 8×8 blocks of a photo, using waves of light instead of circles. MP3 does it with sound, and also drops what your ears cannot hear. Both also store each number with fewer bits: try lowering the bits and see how far you can go.
A shape becomes a moving complex number
Picture a tiny ant walking along the outline of the shape, always at the same speed, until it is back at the start. At each instant t it is at a point (x, y). Putting both into one complex number:
Since it always comes back to the start, z(t) is periodic — and anything periodic can be written as a sum of rotations. That is the big idea of Joseph Fourier (1807).
Each term is a spinning circle
eikt is a point spinning on a circle of radius 1, making k turns while t goes from 0 to 2π. Multiplying by ck changes the radius (|ck|) and the starting angle. If k is negative, it spins clockwise.
How do we find each circle?
This integral "spins the shape backwards" at speed k and takes the average. Everything that does not spin at exactly speed k cancels out; only the part that spins along remains. On a computer we use the FFT (Fast Fourier Transform), which computes every ck at once.
Adding = stacking circle on circle
We put the center of each circle on the tip of the previous one. The tip of the last one draws the shape! With few circles you get a "potato"; with more, the details appear. Sharp corners need many circles — that is why we round the corners during preprocessing.
And the error?
By Parseval's theorem, the "energy" of the shape is the sum of the squared radii. The error from throwing circles away is exactly the energy of the ones left out. That is why using the largest first is the most efficient choice.
Challenges
- With how many circles does Brazil become recognizable? And Italy (the boot)?
- Switch off the largest circle (click the first clock). What happens?
- Compare "largest first" with "by frequency" in the Error tab. Which one reaches 1% first?
- Set "Round the corners" to zero and then to the maximum. How many circles do you save?
- Draw your name freehand ("all parts" mode for separate letters) and export it for a friend.
- Zoom in 100× with the camera following the tip: the tiny circles are there, working!
- Why does the star need more circles than the heart?
Learn more
Videos, interactive pages and articles we like. Most of them are in English.
- ✋An Interactive Introduction to Fourier Transforms Jez Swanson Draw, listen and play: the same ideas as this lab, explained step by step.
- ▶But what is a Fourier series? 3Blue1Brown From heat flow to drawing with circles.
- ▶What is a Fourier Series? (Explained by drawing circles) SmarterEveryDay A friendly start, with real machines.
- ▶But what is the Fourier Transform? A visual introduction 3Blue1Brown Winding a signal around a circle to find its frequencies.
- 📖An Interactive Guide To The Fourier Transform BetterExplained The intuition first, the formulas after.
- ✋Fourier Series applet Paul Falstad Build waves from sines and hear them.
- 📖Fourier series Wikipedia The reference, with history and proofs.
- 📖Gibbs phenomenon Wikipedia Why the bump near a jump never goes away.
About
Science in Motion is created and maintained by Eduardo Correia, sponsored by Apliant.
Shortcuts
space pause · ←→ N ±1 · ↑↓ N ×2 / ÷2 · +− zoom · F follow · R restart · S show mode · hold → or ⏩ speed up · L lock the speed · H hide/show the menu