Fourier Series Animation
An interactive React web app that demonstrates how an arbitrary user-inputted line drawing can be approximated using the Fourier series. The concept is modelled through the visualisation of rotating vectors put end-to-end, with the Fourier series being used to determine the magnitude and initial position of each vector.
Inspired by 3Blue1Brown's video explaining and demonstrating the topic
Try it out directly here: https://jasonfyw.com/fourier-series/
Or clone it onto your own machine
$ git clone https://github.com/jasonfyw/fourier-series
Install the dependencies
$ cd fourier-series
$ npm install
And then start the development server
$ npm start
About the Fourier series
The Fourier series is a branch of Fourier analysis that aims to decompose a periodic function into a sum of exponentials (or trigonometric functions) with different frequencies and magnitudes. This is where the concept of rotating vectors placed end-to-end tracing out a function is derived.
Being able to do this allows for an arbitrary periodic function to be broken up into discrete terms that can then be easily manipulate. As a result, it has a lot of applications in physics such as with signal/image processing, quantum physics, electrical engineering and more.
In this particular demonstration, we are defining
The essential idea is to represent
The term for the vector that doesn't rotate at all is
and then distributing the definite integral:
Every term except for the one with
This yields the value for
For an arbitrary coefficient
Now, every term apart from that with
In this implementation, the program performs the computation numerically to find the Fourier series of an inputted function to a certain number of terms. For an exact representation of the original function, there would have to be infinitely many terms.
Using the computed coefficients, the program plots the resulting approximation of the function.