How to use it
On the first tab a heart is already being drawn by about 40 spinning circles. Drag the Number of circles slider down to 1 and you get a single circle; add a few and a smooth blob appears; add more and the heart sharpens. The error readout tells you how far the redrawn curve is from the original, as a percentage of the shape’s size.
Draw your own shape in the drawing area with one continuous stroke. The page closes it for you. Pick a preset, tap a bar in the spectrum to select a circle, then switch it off or change its radius and phase and watch the drawing deform.
The second tab, Build a wave, lets you mix 16 sine waves. Choose a preset such as Square or Sawtooth, change the number of harmonics, and optionally listen to the result.
Controls
- Mouse: drag in the drawing area to draw; click a spectrum bar to select a circle.
- Touch: draw with a finger (the page does not scroll while you draw); tap a bar to select it.
- Keyboard: Space plays or pauses, S steps, R resets; with the drawing area focused, Up and Down change the number of circles (hold Shift for steps of 10); with the spectrum focused, Left and Right move the selection.
How it works
Any repeating signal can be written as a sum of simple rotations. Treat each point of your drawing as a complex number z = x + i·y. The expression eiθ is simply a point going round a circle: its real part is cos θ and its imaginary part is sin θ. The drawing, traced once as time t runs from 0 to 1, is then
f(t) = Σ ck · ei·2π·k·t
Each term is one circle. The integer k is its frequency: k turns per cycle, counter-clockwise if positive and clockwise if negative. The size |ck| of the complex number ck is the circle’s radius, and its angle is the starting phase. Chain the circles tip to tail and the tip of the last one draws the shape.
To find the coefficients, the page resamples your stroke into N evenly spaced points zn and applies the discrete Fourier transform, ck = (1/N) · Σ zn · e−i·2π·k·n/N. It uses the fast version (the FFT) because N is a power of two. Keeping all N circles reproduces every sample point exactly. Keeping only the largest ones throws away the rest, and the squared error equals the sum of the squared radii you dropped.
That is why few circles give a smooth, blurry copy: slow circles describe the overall outline. Sharp corners and fine details need many fast, small circles. The same idea works for sound: a sound wave is a sum of sine waves whose frequencies are whole multiples of a base frequency, called harmonics.
A square wave is the sum (4/π)·Σ sin((2n−1)x)/(2n−1): only odd harmonics, and harmonic number m = 2n−1 has amplitude 1/m. Add more terms and the flat tops get flatter, but near each jump the sum always overshoots by about 9% of the jump. This is the Gibbs effect. More harmonics squeeze the overshoot closer to the jump without making it smaller. The overshoot readout measures it on the plotted sum.
Simplifications: the demo uses 256 or 512 sample points, so very fine detail in a shape is limited by that. Edits to a circle change the redrawn curve but not the original, which is why the error readout grows.
Fourier analysis is used wherever signals are studied or squeezed: audio processing and equalisers, image and music compression, radio, and many kinds of measurement.
Things to try
- Set the circles slider to 1, then 2, then 3. A circle, an ellipse and then a rounded blob appear. Note the error each time.
- Draw a square preset and slowly add circles. Look at the corners: they stay rounded until many circles are in use.
- Select the biggest bar in the spectrum and set its radius to 0. The whole shape collapses or shifts.
- Change the phase of one mid-sized circle and see which part of the drawing moves.
- Turn on Zoom to follow the tip and watch the tiny circles wiggling at the end of the chain.
- Wave tab: load Square with 3 harmonics, then 5, 9, 15. Watch the overshoot settle at about 9% instead of shrinking to zero.
- Compare Square, Sawtooth and Triangle by sound. Same pitch, different harmonics, different tone.
- Build your own sound: clear everything, then raise just harmonics 1 and 3 to hear how the tone changes.
Frequently asked questions
Why does the shape close by itself?
A chain of circles repeats after one cycle, so it always returns to the start. The page therefore joins the end of your stroke to its beginning with a straight line before analysing it.
Why do the circles have different sizes?
The size is how much of that frequency the shape contains. A smooth outline is mostly slow, large circles; detail adds small fast ones.
What do negative frequencies mean?
They are circles turning clockwise. A shape needs both directions to be an arbitrary curve; a pure ellipse needs just k = +1 and k = −1.
Why does the square wave never become perfectly flat?
With any finite number of harmonics the Gibbs overshoot remains. Only the infinite series equals the ideal square wave at every point except the jumps.
Is the sound safe?
Sound starts only when you press the button, at a low volume. Raise the volume gradually, especially with headphones.