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.

deer image missing.
epl image missing.
tux image missing.
dog image missing.
dragon image missing.

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.

Upload svg files.

Draw your own below!

What is a fourier series?

$$f(t) = \frac{1}{P}(c_{-N} \cdot e^{i2\pi t\frac{-N}{P}}) + ... + \frac{1}{P}(c_1 \cdot e^{i2\pi t\frac{1}{P}}) + ... + \frac{1}{P}(c_N \cdot e^{i2\pi t\frac{N}{P}}) = \frac{1}{P}\sum_{n=-N}^N c_n \cdot e^{i2\pi t\frac{n}{P}}$$

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

In our case, $\small e^{i2\pi 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 ($\small c_n$), where $\small n$ can be interpreted as the frequency of the $nth$ 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:

Firstly, complex numbers can be thought of as vectors, as the real and imaginary components give the "numbers", both magnitude and direction. Secondly, every complex number in polar form, lies on a circle by definition. Also observe that complex numbers in polar form can be neatly represented by euler's formula. For example: $\small z = x + iy = r(cos(t) + i sin(t)) = re^{i t}$. Now if we increase $\small 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 $\small 1$. If we keep walking around the circle we will eventually end up back where we started. Specifically, when $\small t=2\pi k$ ($\small 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?

What is the fourier transform?

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

The fourier transform is used to calculate the fourier coefficents ($\small 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.

I have open sourced the code and you can find it on my github.