/Fourier

·sin(x)+·sin(x)+·sin(x)+·sin(x)+·sin(x)

circles5

What is this?

A wave built entirely out of spinning circles. Everything here has ▶ buttons that set up the circles next to it, so you can read a line and watch it happen. You can also grab any number in the formula: drag it to scrub, or tap it to type.

1. One circle, one wave

Start with a single circle and an arm spinning around it.

Watch the dot on the end of the arm, and only pay attention to how high it is. As it goes around it rises, falls, dips below the middle line and comes back up. Write that height down over time, sliding the older values off to the right, and you get the smooth curve next to it: a sine wave.

Two numbers describe it completely. Size is how big the circle is, which sets how tall the wave is. Speed is how fast it spins, which sets how bunched up the wave is. In the formula they're the two boxes in 1·sin(1x): size in front, speed inside.

2. Stacking circles adds waves

Now hang a second circle off the end of the first arm. It rides around on the first circle while spinning on its own, so the dot at the very end moves with both. Its height is the first wave plus the second. Adding circles is adding waves.

That's sin x + ⅓ sin 3x. Look at what the small, fast circle does. At the top of the big wave it's pointing down, so it shaves the peak off. Near the middle it's pointing the same way as the big circle, so it pushes the sides out. The top flattens and the sides get steeper.

3. Building the square wave

Keep going with the same rule. Each new circle spins at the next odd speed (5×, 7×, 9×…) and is that much smaller (⅕, ⅐, ⅑…).

Every new circle fixes some of the error the others left behind, at a finer scale. The flat parts get flatter, the jumps get sharper, and the sum gets closer and closer to a square wave: a signal that's simply on or off. Smooth circles, sharp corners. The faint line behind the wave is the perfect square it's aiming for.

for the nerds: the exact formula

\begin{aligned} \text{square}(x) &= \frac{4}{\pi}\left(\sin x + \frac{\sin 3x}{3} + \frac{\sin 5x}{5} + \cdots\right) \\ &= \frac{4}{\pi}\sum_{k=0}^{\infty} \frac{\sin\big((2k+1)x\big)}{2k+1} \end{aligned}

The $\tfrac{4}{\pi}$ makes the wave jump between exactly −1 and +1. The formula on this page leaves it out, like the reel did, and the drawing just scales itself to fit.

A bonus: at $x = \tfrac{\pi}{2}$ the square wave equals 1, and every $\sin\big((2k+1)\tfrac{\pi}{2}\big)$ is just ±1. So

1 = \frac{4}{\pi}\left(1 - \frac13 + \frac15 - \frac17 + \cdots\right)

and rearranging gives

\frac{\pi}{4} = 1 - \frac13 + \frac15 - \frac17 + \cdots

which is the Leibniz formula for π, falling out of a square wave.

4. Why only odd speeds, and why smaller?

A square wave's bottom half is its top half flipped upside down. Odd-speed circles have the same habit: half a turn of the big circle later, they're pointing the opposite way. Even-speed circles don't. After half a turn they're right back where they started, so they push the top and bottom halves the same way and wreck the symmetry.

The top and bottom don't match anymore. Drag the ½ in front of sin(2x) down to 0 and watch it heal.

The shrinking (⅓, ⅕, ⅐…) is exactly how big each circle has to be to cancel the error the others leave. Get it wrong and the shape falls apart:

for the nerds: where ⅓, ⅕, ⅐ come from

Any reasonable shape that repeats every $2\pi$ can be written as

f(x) = \frac{a_0}{2} + \sum_{n=1}^{\infty} \big(a_n \cos nx + b_n \sin nx\big)

The trick for finding each size is that different speeds are orthogonal: multiply two of them together and they cancel out over a full turn.

\int_{-\pi}^{\pi} \sin mx \,\sin nx \; dx = \begin{cases} \pi & m = n \\ 0 & m \neq n \end{cases}

So multiply both sides by $\sin nx$ and integrate. Every term except the $n$ th vanishes, leaving

b_n = \frac{1}{\pi}\int_{-\pi}^{\pi} f(x)\sin nx \; dx

For the square wave (−1 on $(-\pi, 0)$ , +1 on $(0, \pi)$ ) every $a_n$ is 0 because the wave is odd, and

\begin{aligned} b_n &= \frac{2}{\pi}\int_0^{\pi} \sin nx \; dx = \frac{2}{n\pi}\big(1 - \cos n\pi\big) \\ &= \begin{cases} \dfrac{4}{n\pi} & n \text{ odd} \\[4pt] 0 & n \text{ even} \end{cases} \end{aligned}

So the even circles aren't just unwanted. Their sizes come out as exactly zero. The symmetry argument says the same thing: if $f(x + \pi) = -f(x)$ , then since $\sin n(x+\pi) = (-1)^n \sin nx$ , only odd $n$ can survive.

5. The ripple that never goes away

Look closely at the corners, against the faint perfect square behind the wave. Right next to each jump the wave overshoots it and wobbles. You'd expect more circles to smooth that out.

They don't. The wobbles get squeezed tighter against the jump, but the first spike stays about 9% of the jump too tall no matter how many circles you add. This is the Gibbs phenomenon, and it shows up anywhere you build a sharp edge out of waves. It's behind the faint halos you sometimes see around sharp edges in heavily compressed photos.

for the nerds: why it's stuck at ~9%

With $N$ circles, the first peak sits at $x = \tfrac{\pi}{2N}$ . As $N$ grows, the peak moves toward the jump but its height doesn't shrink. It approaches

\frac{2}{\pi}\operatorname{Si}(\pi) = \frac{2}{\pi}\int_0^{\pi} \frac{\sin t}{t}\,dt \approx 1.1790

The wave jumps from −1 to +1 (a jump of 2), so the overshoot is $0.179 / 2 \approx 8.95\%$ of the jump.

So in what sense does the series "become" a square wave? At every single point away from the jump, yes. In total squared error, $\int |f - S_N|^2 \to 0$ , also yes. But the worst-case error never drops below 0.179, so the convergence isn't uniform. A sum of smooth curves can't hug a jump everywhere at once.

6. Other recipes, other shapes

The square wave is one recipe: odd speeds, sizes 1/speed. Change the recipe and you get a different shape. The buttons in the top bar switch between them too.

Sawtooth uses every speed (1×, 2×, 3×…) with sizes 1, ½, ⅓, ¼… and alternating signs. You get a ramp that climbs steadily, then drops.

Triangle goes back to odd speeds, but the sizes shrink much faster: 1, 1/9, 1/25, 1/49 (one over the speed squared), again with alternating signs.

Notice how the triangle looks nearly perfect with just a few circles, while the square and the saw need dozens. That's a general rule: the smoother the shape, the faster the circles shrink, and the fewer you need. Shapes with jumps shrink like 1/speed. Shapes with corners but no jumps shrink like 1/speed². Perfectly smooth shapes shrink faster still.

Change any box in the formula and the recipe label switches to custom. You're building your own wave now.

for the nerds: the other two formulas

Sawtooth, for $-\pi < x < \pi$ (and repeating from there):

\begin{aligned} \frac{x}{2} &= \sin x - \frac{\sin 2x}{2} + \frac{\sin 3x}{3} - \cdots \\ &= \sum_{n=1}^{\infty} (-1)^{n+1}\frac{\sin nx}{n} \end{aligned}

Triangle:

\text{triangle}(x) = \frac{8}{\pi^2}\sum_{k=0}^{\infty} (-1)^k \frac{\sin\big((2k+1)x\big)}{(2k+1)^2}

Why smoothness controls the shrinking: integrate $b_n = \tfrac{1}{\pi}\int f(x)\sin nx\,dx$ by parts and you pick up a factor of $\tfrac{1}{n}$ while $f$ turns into $f'$ . A jump in $f$ stops you after one step, so $b_n \sim 1/n$ . A jump in $f'$ (a corner) stops you after two, so $b_n \sim 1/n^2$ . Every extra smooth derivative buys another factor of $n$ .

7. Fourier's big idea

In 1807, Joseph Fourier was working out how heat spreads through a solid. Sine waves were easy to handle in his equations, so he made a bold claim: any repeating shape, however jagged, can be built by adding up sine waves at whole-number speeds.

The leading mathematicians of the day, Lagrange among them, weren't convinced. How could smooth curves add up to a corner? His paper sat unpublished for years, and it took most of the next century to pin down exactly when the claim holds. But it holds for basically every shape you'd ever draw.

The upshot: every repeating signal is secretly a list of circles. The speeds tell you which "notes" are in it and the sizes tell you how loud each one is. That list is called its spectrum, and finding it is what a Fourier transform does.

Try it. Sketch any wiggle you like and the page works out the circles for it: a size, a speed and a starting angle for each one. Then slide the circles up and watch the copy sharpen.

Let the circles spin both ways and they can draw pictures, not just waves. A plain circle is the easy one: it takes exactly one. Draw any outline and watch how many circles it takes to get it right.

Hit spectrum in the top bar to see it for whatever you've built: one bar per circle, placed by speed, as tall as its size. You can drag the bars too.

for the nerds: why circles?

In complex numbers, a point spinning around a circle of radius $r$ at speed $n$ is

r\,e^{inx} = r\cos nx + i\,r\sin nx

Its height (the imaginary part) is $r \sin nx$ , exactly one term of the series. So the chain on this page is the sum $\sum b_n e^{inx}$ , and the wave is the height of its tip. (Its sideways position traces a different series, $\sum b_n \cos nx$ , which the page ignores.)

The full complex Fourier series lets circles spin both ways:

f(x) = \sum_{n=-\infty}^{\infty} c_n e^{inx}

c_n = \frac{1}{2\pi}\int_{-\pi}^{\pi} f(x)\,e^{-inx}\,dx

With both directions available, a chain of circles can trace any closed shape in the plane, not just a wave. That's how those videos of circles drawing portraits work.

8. Where you meet this every day

Sound. A note from an instrument is a base circle plus a stack of faster ones (harmonics). Their sizes are why a piano and a violin playing the same note sound different. A clarinet's sound is mostly odd harmonics, like this square wave, which is a big part of why it sounds hollow. Classic synthesizers start from square and saw waves and filter circles out. Hear it for yourself (turn your volume down first):listen in the top bar plays whatever you've built. Drag a size while it plays and the sound changes with it.
Music files. MP3 and AAC split sound into frequencies and throw away the ones your ears won't miss.
Photos. JPEG does the same thing in 2D, with cosine waves across little 8×8 blocks of pixels. It keeps the big, slow waves and drops the fine detail.
Radio, Wi-Fi and phones. Each station or channel sits at its own frequency. Your device listens for one circle speed and ignores the rest.
And more: MRI scanners, earthquake analysis, and the equalizer in your music app.