Skip to content

jasonfyw/fourier-series

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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 $f(t)$ to be a periodic complex function with $t\in[0, 1]$. The exact data points in the codomain are given by a user-drawn input which are then mapped to the domain.

The essential idea is to represent $f(t)$ as a sum of exponential functions rotating at frequencies of $0, 1, -1, 2, -2, ...$ rotations per $t$. Each of these exponential functions will be multiplied by a complex coefficient, $c_n$ (where $n$ is the frequency), to determine its initial position and magnitude:

$$ f(t) = \dots + c_{-2}e^{-2\cdot 2\pi it} + c_{-1}e^{-1\cdot 2\pi it} + c_{0}e^{0\cdot 2\pi it} + c_{1}e^{1\cdot 2\pi it} + c_{2}e^{2\cdot 2\pi it} + \dots $$

The term for the vector that doesn't rotate at all is $c_0$. This can be though of as the 'centre' of the whole function – or the average of all the points in the function. This can be computed by taking the integral of the function across its domain:

$$ \int_0^1 f(t) dt $$

By expanding $f(t)$ in terms of its Fourier series:

$$ \int_0^1 f(t) dt = \int_0^1 (\dots + c_{-1}e^{-1\cdot 2\pi it} + c_{0}e^{0\cdot 2\pi it} + c_{1}e^{1\cdot 2\pi it} + \dots)dt $$

and then distributing the definite integral:

$$ \int_0^1 f(t) dt = \dots + \int_0^1c_{-1}e^{-1\cdot 2\pi it}dt + \int_0^1c_{0}e^{0\cdot 2\pi it}dt + \int_0^1c_{1}e^{1\cdot 2\pi it}dt + \dots $$

Every term except for the one with $c_0$ represents the average of a vector that makes a whole number of rotations, which cancel to zero. Hence,

$$ \int_0^1 f(t) dt = \dots + 0 + c_0 + 0 + \dots = c_0 $$

This yields the value for $c_0$.

For an arbitrary coefficient $c_n$, the integral above can be modified by multiplying $f(t)$ by the term $e^{-n2\pi it}$:

$$ \int_0^1 f(t)e^{-n2\pi it} dt $$

Upon expanding $f(t)$ and distributing the exponential term,

$$ \int_0^1 f(t)e^{-n2\pi it} dt = \int_0^1 (\dots + c_{0}e^{-2\cdot 2\pi it} + c_{1}e^{-1\cdot 2\pi it} + \dots + c_{n}e^{0\cdot 2\pi it} + \dots)dt $$

Now, every term apart from that with $c_n$ is an average over vectors that rotate a whole number of turns, which cancels out to zero. This leaves just the $c_n$ term remianing, resulting in the following generalised expression to find any arbitrary $c_n$:

$$ c_n = \int_0^1 f(t)e^{-n2\pi it} dt $$

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.

About

A web app demonstrating how the Fourier series can be used to approximate user-inputted line drawing

Topics

Resources

License

Stars

Watchers

Forks