People say art is for creatives, but even art can sometimes hide some really cool mathematical patterns behind it!
Welcome to Maths but Pretty - a series of blog posts that explores generating art by applying mathematical concepts using code.
Today we're going to explore something called Fourier Series & Transforms and see how they can be used to make almost any art you can think of!
Before we dive into it, let's look at something we can build using these concepts...
Now isn't that cool !!
Before jumping into the fun parts, we need to dive a bit into what the heck Fourier series even is. Why should you even care?
Well, the idea of Fourier series doesn't even come from pure mathematics... it came into being when Joseph Fourier was studying heat flow in his research work published in Théorie analytique de la chaleur (The Analytical Theory of Heat). This publication paved the path for three main important contributions - one mathematical and two physical. The mathematical contribution was:
Any function of a variable, whether continuous or discontinuous, can be expanded in a series of sines of multiples of the variable.
Although this wasn't entirely correct, he was the first one to suggest that discontinuous functions can be represented as the sum of infinite series. Years later, another mathematician named Peter Gustav Lejeune Dirichlet fixed it and gave a satisfactory demonstration, and that work laid the foundation of what we know today as Fourier Transforms.
Enough of history , let's dive into the actual stuff !!
There are mainly two different things - Fourier Series and Fourier Transforms. Well, they're not different at all, but we'll consider them so for the ease of understanding. By the time you finish this article, you'll have a good understanding of why they're essentially different ways of saying the same thing.
Fourier Series
Fourier series can decompose any periodic function into a sum of sine and cosine waves of different frequencies and amplitudes. It's the format you'll find in most math textbooks. In mathematical terms, it is:
Here in the formula :
- a₀ is the average value (DC component)
- aₙ is the amplitude (strength) of the cosine wave at the n'th harmonic
- bₙ is the amplitude of the sine wave at the n'th harmonic
- cos(2π(n/P)x) is the cosine function at the n'th harmonic. The argument 2π(n/P)x) ensures the correct frequency, where P is the period of the original function. The same logic applies to sine as well.
There are some formulae to calculate a₀, aₙ, and bₙ too. They are as follows:
As is evident from the original formula, the need for aₙ and bₙ is to find the strength or how much sine/cosine is needed to reconstruct the whole wave (that's why the integration). The reason behind multiplying aₙ and bₙ with cos and sine respectively can be deduced from the fact that sine and cosine functions are orthogonal over the interval [−L,L], meaning their integrals (when multiplied together) are zero unless they are at the same frequency.
Hence, if we take any regular waveform, it can be decomposed into a summation of sine and cosine waves...
Lets try to re-create this for different wave-forms...
1. Sine Wave
If we calculate the above formula for a function switching between -1 and +1 and then calculate a₀, aₙ, bₙ it transforms into a sum of sines. The resultant equation looks something like this:
And now if we put n = 1 and try to visualize it, we get something quite satisfying:
2. Square Wave
After visualizing the sine wave above, let's change it up a little more. Let's increase the number of harmonics or the value of n.
If you look in the bottom left corner, then you'll find that as the number increases, it slowly takes the form of a square wave. The number here is nothing but the value of n. As the number n increases, so does the number of smaller circles with faster speeds, and the curve starts looking closer to the actual curve.
3. Saw-tooth Wave
We used the same formula to calculate the sine wave and the square wave thereafter. Let's try to apply a different f(x) in different limits and approximate the sawtooth wave function. A little math gives us the formula as:
Similar to what we did before, it starts with a simple sine wave, but as we increase the value of n (look at the bottom left corner of the video) - aka the number of harmonics - it starts approximating the actual sawtooth wave.
4. Triangular Wave
Let's try another one: a triangular wave. The function, when applied to the above formula, gives something a bit more complex like this:
Visualising this using the same methods as above gives us something like this:
Now that we have a good understanding of what Fourier series is, let's move on to a more interesting topic - the thing that lets us make any art we want.
Fourier Transforms
We can describe Fourier Transforms as a complex form of Fourier series. It comes from applying the famous Euler's Formula to the original Fourier Series equation. It is defined as:
The Fourier Transform is a mathematical operation that transforms a function of time (or space) into a function of frequency. It basically decomposes a signal into its constituent frequencies.
Formally ( or, mathematically ) for a function , the Fourier transform is defined as :
where :
- f(x) is the original function
- F(k) is the Fourier Transform of frequency k
- The exponential term e represents complex sinusoidals at frequency k.
The shift from sinusoidal waves (the sine waves we talked about in the previous section) to circles is possible because of Euler's formula, as mentioned earlier. What Euler's formula does is transform the sinusoids into a complex form - a circular path.
We can calculate the phase, frequency, and amplitude of the circle from this equation too! But the true trick behind drawing something from this formula is to use something called Epicycles.
We've already used it before in this article. Remember the small circles circling around the big circles? Well, the formal name for that is Epicycles. We can truly approximate any closed curve using this trick of Fourier transforms and epicycles. The more complex the curve, the more the number of smaller epicycles needed.
Now, to make the implementation of this Fourier Transform easier, we use something called DFT, i.e., Discrete Fourier Transform. It's the same Fourier Transform but using summation instead of integrals. Frankly, because it's not that easy to implement integration with code, but it's quite easy to implement summation in code!
More specifically we will be implementing this formula :
Let's see the implementation !!
The code for DFT in JavaScript looks something like this :
function dft(x){
let X = []
let N = x.length
for(let k=0 ; k < N ; k++){
let re=0
let im =0
for(let n=0;n < N;n++){
let angle = ( TWO_PI *k*n)/N
re+= x[n] * cos(angle)
im-= x[n] * sin(angle)
}
re = re/N
im = im/N
let freq = k
let amp = sqrt(re*re + im*im)
let phase = atan2(im , re)
X[k] ={ re, im , freq , amp , phase} ;
}
return X
}
And on screen it looks like :
If you look closely, the whole name is traced in one single closed loop. If it wasn't, then it wouldn't be able to trace the name so cleanly!
The basic process to create any art using DFT is as follows:
Implement DFT in any programming language of your choice. Preferably choose one with a graphics processing library (makes your life easier).
Implement the concept of epicycles and rendering of waves.
Take any vector design software like Adobe Illustrator or Inkscape and make the closed loop vector design.
Fetch the coordinates of the loop from the design using a script (The script I used).
Modify your DFT code to follow the coordinates and voila! You have your own art getting drawn by Fourier Transforms!
And that's how you can draw any art using Fourier Transforms.
I know this wasn't a very deep introduction to what Fourier Transforms or Fourier Series is all about, so here are some more resources to learn about it that go really deep into the concepts!
Articles :
Interactive drawing using FT's
A good basic on Fourier Series
On Discrete Fourier Transforms
Videos :
A video on Fourier Series by the legendary 3Blue1Brown
Video on Fourier Transforms by 3b1b
Fourier Series explained mathematically by Mathology
A detailed analysis into Fourier Transforms by GoldenPlatedGoof
If you're reading this, thanks for reading until the end! I hope you ended up creating something close to your heart using this!
Do consider giving us a follow because more cool stuff will be coming your way.
Till then, adios!
Happy coding!
Top comments (0)