Drawing Images with Fourier Series
Before I begin explaining what the hell is Fourier Series let me show you the magic that it can do ✨.
Pretty cool huh?
tokyo-sAnd yeah, this can be done with any image, the only constraint, for now, is that it should be a .svg file.
Now, let’s go through some of the basics of the Fourier Series to understand how this works.
How does this work?
The principal component of these drawings is rotation. What does it mean?
Imagine that you have an arrow ↑, and you rotate it clockwise with a fixed starting point, what does it do?
Right, a circle. Now, what if we combine more arrows with one other another and rotate them?
Specifically, in this case, the arrows even have a different direction of rotation, and actually, the output depends also on the number of arrows and the speed of rotations for each arrow.
So, by combining a lot of arrows, and tweaking their parameters of rotations like direction, speed, and size, we can get something like this:
Deep Dive (almost)
The formula that you see is called Euler’s identity, the formula that is considered the most beautiful math formula. Using this formula we can create any rotation that is needed. here the numbers just show the direction where the positive number is counterclockwise and the negative is clockwise.
Something that may confuse you is the letter ‘i’ in the formula, part of the power of ‘e’.
The letter ‘i’ means the imaginary number, and if you didn’t hear about complex numbers, don’t worry, you just have to understand the main logic.
One of the features of imaginary numbers is their way how multiplication works. ‘i’ is equal to √-1, and the power of i is that i² = -1, if we continue then i³=-i and i⁴ = i²*i² = -1*-1 = 1, and the process repeats in cycles of 4.
Usually, a complex number is written by the formula a+bi where a represents the real part and bi represents the imaginary part. Any number actually can be represented by a complex number, you just put b=0 as in 64 = 64+0i.
Why do we use complex numbers? We need them to create the rotations, and specifically, we need to do all our operations in a complex space.
The only difference between a simple space and a complex space is that on the x-axis you have the real part of the complex number, and on the y-axis, you have the imaginary part, the ‘i’ part.
Still, why do we use complex space, and how does it help to do the rotation?
All are pretty simple, we use the power rule that we just described, if you remember the pattern: 1, i, -1, -i, 1…., well, if you look at the complex space axis, this just describes all 4 directions of the two axes, and the multiplication by i just makes you a 90 degree counterclockwise rotation, let’s go through an example:
let’s imagine you have a point in complex space 1+0i which happens to be on the right side of the x-axis, multiply it by i and you get 1i+0 which already is the upper part of the y axis, a rotation. If you continue like, multiply by i, you will get -1+0i (left x-axis) and after another one -1i+0 (bottom y-axis).
Now when we know how the rotations are done, the only thing that is not clear is how the algorithm determines which should be the speed, direction, and size of every arrow, to create a very beautiful copy of the image.
But honestly, it is not the easiest thing to understand, because it contains some formulas with integrals that may not be that easy for everyone. But I will leave the link to the video which explains it very well if you are interested.
But right now, let us speak about the problem I found.
The Problem
Though this is cool and hard, this only works on pictures that consist of just one line, meaning you can draw all the picture without the need to raise your hand from the paper, an example would be the dinosaur that you saw earlier, it is a big picture, but it is just a one-liner. The pictures that have more than one, won’t work, here we have to invent something different.
The Solution
Because we are using a .svg file, I already have all the functions that represent every line of the image, so the solution is simple, iterate through lines, and repeat the drawing process. (the hardest part of this was to center all the drawings and get a real copy of an image)
Future Plans
In the future versions, I plan to add an automatic img to SVG converter to automate 100% of this process and not make users make it by hand. I plan to use some API from a known converter website.
If you have any ideas of what I can do toimprovee this app, please contact me with the links below or write me a letter at vladimir.stojoc@gmail.com
Additional links
- 3blue1brown
The video from which I took some screens and one of my favorite videos, from my favorite math content maker, this is how I found out about this concept. If you love math I recommend this youtube channel, it’s the best that you can find.
Thank you very much for reading this post!