# 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

## Usage

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

By expanding

and then distributing the definite integral:

Every term except for the one with

This yields the value for

For an arbitrary coefficient

Upon expanding

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.