myFourierEpicycles.

This website allows you to draw your own fourier epicycle drawings, either by uploading an svg or by mouse. I had quite a bit fun creating this, so at the end there is a brief explanation trying to give the reader some mathematical intuition as to how revolving circles and the fourier transform are connected.

My motivation for this website is to try and fill a gap left by other work (mentioned at the end), and allow users to upload and draw their own fourier epicycles. The current implementation is far from perfect, but I think it's a good start.

Upload an image and see its epicycles.
For fast and clear drawings upload SVGs that are less than 50kb.
Unfortunately at this stage, SVGs that are large and have very complicated paths require a manual tinkering of parameters.

Draw your own below!

What is a fourier series?

$f (t) = \frac{1}{P} (c_{- N} \cdot e^{i 2 π t \frac{- N}{P}}) + . . . + \frac{1}{P} (c_{1} \cdot e^{i 2 π t \frac{1}{P}}) + . . . + \frac{1}{P} (c_{N} \cdot e^{i 2 π t \frac{N}{P}}) = \frac{1}{P} \sum_{n = - N}^{N} c_{n} \cdot e^{i 2 π t \frac{n}{P}}$

The fourier series (or inverse fourier transform) of a complex-valued function $f$ of real variable, is given by a sum of complex harmonic sinusoids ( $s i n e$ and $c o s i n e$ waves in the complex plane). Note, it is also possible to work with real fourier series, in which case $f$ is a real-valued function of real variable. However, this makes the formula somewhat messier and we will assume $f$ is complex valued throughout the rest of the article.

In our case, $e^{i 2 π t \frac{n}{P}}$ gives the family of complex harmonic sinusoids (expand using euler's formula to see why). These functions are scaled by fourier coefficients ( $c_{n}$ ), where $n$ can be interpreted as the frequency of the $n t h$ sinusoidal wave in the sum. However, what is the intuition behind revolving epicycles? The answer comes from complex numbers in polar form, having an intuitive geometric interpretation. The argument goes something like this:

Complex numbers can be thought of as vectors as their real and imaginary components give them both magnitude and direction. Additionally from euler's formula every complex number in polar form lies on some circle centered about the origin. For example: $z = x + i y = r (c o s (t) + i s i n (t)) = r e^{i t}$ . Now if we increase $t$ (or time) by 1 unit, the new complex number is equivalent to walking around a circle by 1 unit. The specific circle in question will have radius $r$ , be centred about the origin, have an initial phase equal to $1$ . If we keep walking around the circle we will eventually end up back where we started. Specifically, when $t = 2 π k$ ( $k = 0, 1, . . .$ ), we have walked all the way around the circle.

So therefore, since the fourier series expresses a function as a sum of complex sinusoids (these are also functions remember), and the outputs of these functions are entirely described by circles in the complex plane, means we can represent each complex sinusoid by a circle and a revolving vector. Hence, we can represent a function as a sum of revolving circles and vectors. Connected them tip to toe (i.e. adding them together) to find the final drawing.

Hopefully at this point you have some intuition as to why revolving circles can be used to represent waves. If not here is a neat animation.

What do those symbols mean?

$f (t)$ is a complex valued function of real variable. When implementing the discrete fourier transform on computers, $f$ will be an array of complex numbers, where $f (t)$ corresponds to the complex number at index $t$ . $f (t)$ can also be interpreted as the point of the function/drawing at time $t$ .
$c_{n}$ the fourier coefficient, is a complex number which encodes the amplitude(radius) and phase (initial position), of a vector on a circle of radius equivalent to length.
$e^{i 2 π t \frac{n}{P}}$ , is a complex function which can be interperated as a revolving vector, whose frequency is given by $\frac{n}{P}$ . i.e. Every $1$ unit of time the vector has done $\frac{n}{P}$ full rotations.
$\sum_{n = - N}^{N}$ , means that we are decomposing our arbitrary function $f (t)$ into a sum of harmonic sinusoids with frequencies in the range $[- N, N]$ .
$P$ , is the period of the function, i.e. the number of sample points or time considered. e.g $2 N$ in the equation above.

What is the fourier transform?

$c_{n} = \sum_{n = - N}^{N} f (x) \cdot e^{- i \frac{2 π n x}{P}}$

The fourier transform is used to calculate the fourier coefficents ( $c_{n}$ ) of a function. These coefficients are then used to express the function as weighted sum of harmonic sinusoids of different frequencies, phases and amplitudes. That's it.

Anyways this site leaves the maths there (see the end of the page for more resources), instead have some fun and draw or upload your own drawings.

Understanding the fourier transform

For those curious, these resources are good starting points in understanding the fourier transform and the drawing of epicycles. I recommend using the resources in the order presented.

3Blue1Brown - fourier series great, like really great explanation.

3Blue1Brown - fourier transform also great.

Wikepedia - fourier series well written and covers the math decently well.

Wikepedia - fourier transform ------------------------ | | ------------------------

'An interactive introduction to the fourier transform' this article really helped me a lot. Gives excellent animations with explanations.

The Coding Train gives a nice guide on how you can draw your own epicycles.