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^{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?

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

### 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.