Fourier Series plots…

Back in my TA days (or daze), I helped out on one course that was a mix of numeric methods and MatLab programming. Most students were ok, but there was a bit of a struggle with the Fourier series. Perhaps it was a problem with the integration or it was general issues with their math backgrounds.

A while ago, I read a book on making interactive graphics for the web and I thought it would be a great to use some of this new knowledge to make a tool to help explain key concepts of the Fourier series. So if I ever TA something related to the Fourier series ever again, I would be ready. Also, I thought that it would be a good project for myself so I could remember and practice some different math skills.

I have chosen some of the most popular functions to approximate with a Fourier series including: the square wave, the sawtooth wave, the parabolic wave, and a triangular wave. All of the graphics were implemented using Javascript and D3.

In the future, I am planning to implement some Fourier transform projects. Particularly using FFTs to in image processing.

Note about the Visualization

The visualization tool is just to assist in the understanding of the Fourier series. It does not stand alone, since it needs some type of reference (such as a book or a person) to explain key details.

The visualization contained three main components: 1) the original function; 2) the first few terms of the approximation (and with the constant term as well); 3) and the series results produced with the first few, 5, 10, and 15 terms.

The ‘Sum’ curves include the computed terms and the constant term. Hence the ‘Sum of the First Term’ includes the $a_0$ , $a_1$ , and $b_1$ terms.

Fourier Series

There are a ton of books and websites on there about the Fourier series. Recall that a periodic function (or even a portion of a regular function) can be approximated by a series of sine and cosine functions. Mathematically this is written as:

f(x) = a_0 + \sum_{n = 1}^\infty \left( a_n \cos nx + b_n \sin nx \right)

Where $a_0$ , $a_n$ , and $b_n$ are the Fourier coefficients and can be calculated by:

\begin{aligned} a_0 &= \frac{1}{2L} \int_{-L}^L f(x) dx \\ a_n &= \frac{1}{L} \int_{-L}^L f(x) \cos \left( \frac{n\pi x}{L} \right) dx \\ b_n &= \frac{1}{L} \int_{-L}^L f(x) \sin \left( \frac{n\pi x}{L} \right) dx \end{aligned}

Note that there is a variety of notation and minor differences out there. This includes integrating over the region of $-\pi$ to $\pi$ .

Square Wave

The square wave function can be defined over the interval [0, 2) as:

\mathsf{Square\ Wave}(x) = \left\{ \begin{array}{ll} \hphantom{-}1, & 0 \leq x < 1 \\ -1, & 1 \leq x < 2 \end{array} \right.

First we can determine $a_0$ . By inspection we can expect it to be zero, but we shall still figure it out for practice. Note that $L = 1$ and we are considering the interval [0, 2) instead of [-1, 1) since the function is periodic:

\begin{aligned} a_0 &= \frac{1}{2L} \int_{-L}^L f(x) dx \\ &= \frac{1}{2(1)} \int_{0}^{2} \mathsf{Square\ Wave}(x)\ dx \\ &= \frac{1}{2} \left[ \int_0^1 (1) dx + \int_1^2 (-1) dx \right] = \frac{1}{2} \left[ \left. \vphantom{\frac{1}{2}} x\right|^1_0 – \left. \vphantom{\frac{1}{2}} x\right|^2_1 \right] \\ &= \frac{1}{2} \left[ \vphantom{\frac{1}{2}} 1 – 0 – (2 – 1) \right] \\ &= 0 \end{aligned}

Next we shall look at $a_n$ . Again by inspection we can argue that since the function is odd that it cosine components since those are even. Anyways, we shall still work it out for practice. Note that the identity $\sin (2n\pi) = 0$ was used.

\begin{aligned} a_n &= \frac{1}{L} \int_{-L}^L f(x) \cos \left( \frac{n\pi x}{L} \right) dx \\ &= \frac{1}{(1)} \int_{0}^{2} \mathsf{Square\ Wave}(x)\cos \left( \frac{n\pi x}{1} \right) dx \\ &= \int_0^1 (1) \cos \left( n\pi x \right) dx + \int_1^2 (-1) \cos \left( n\pi x \right) dx \\ &= \left. \frac{1}{n \pi} \sin \left( n\pi x \right)\right|^1_0 – \left. \frac{1}{n \pi} \sin \left( n\pi x \right)\right|^2_1 \\ &= \frac{1}{n \pi} \left( \vphantom{\frac{1}{2}} \sin ( n\pi) – \sin(0) \right) – \frac{1}{n \pi} \left( \vphantom{\frac{1}{2}} \sin (2n\pi) – \sin(n\pi) \right) \\ &= 0 \end{aligned}

Now working out $b_n$. Note the following identity $\cos(n\pi) = -1, 1, -1, 1, \ldots$ can be written as $-1^n$ , so then:

\begin{aligned} b_n &= \frac{1}{L} \int_{-L}^L f(x) \sin \left( \frac{n\pi x}{L} \right) dx \\ &= \frac{1}{(1)} \int_0^2 \mathsf{Square\ Wave}(x) \sin \left( \frac{n\pi x}{1} \right) dx \\ &= \int_0^1 (1) \sin \left( n\pi x \right) + \int_1^2 (-1) \sin \left( n\pi x \right) dx \\ &= \left. -\frac{1}{n \pi} \cos \left( n\pi x \right)\right|^1_0 + \left. \frac{1}{n \pi} \cos \left( n\pi x \right)\right|^2_1 \\ &= -\frac{1}{n \pi} \left( \vphantom{\frac{1}{2}} \cos ( n\pi ) – \cos ( 0 ) \right) + \frac{1}{n \pi} \left( \vphantom{\frac{1}{2}} \cos(2n\pi) – \cos(n\pi) \right) \\ &= \frac{1}{n \pi} \left( \vphantom{\frac{1}{2}} 1 – \cos(n\pi) – \cos(n\pi) + 1\right) \\ &= \frac{2}{n \pi} \left( \vphantom{\frac{1}{2}} 1 – (-1)^n \right) \\ &= \frac{2}{n \pi} \left\{ \vphantom{\frac{1}{2}} 2, 0, 2, 0, \ldots \right\} \\ &= \frac{4}{n \pi} \left\{ \vphantom{\frac{1}{2}} 1, 0, 1, 0, \ldots \right\} \\ & \textrm{Therefore $b_n = 1$ for odd values of $n$ and $0$ for even values of $n$.} \\ & \textrm{To `select’ just the odd numbers, we can use $2n – 1$. } \\ &= \frac{4}{(2n – 1)\pi} \end{aligned}

And the final Fourier series is:

f(x) = \frac{4}{\pi} \sum^\infty_{n = 1} \frac{1}{2n – 1} \sin \left( (2n – 1) \pi \vphantom{\frac{1}{2}} x \right)

Click here to view the graph on a separate tab.

Sawtooth Wave

The square wave function can be defined over the interval [0, 2) as:

\mathsf{Sawtooth\ Wave}(x) = \frac{1}{2} x

The Fourier coefficients can then be determined (using integration by parts) to be:

\begin{aligned} a_0 &= \frac{1}{2} \\ a_n &= 0 \\ b_n &= – \frac{1}{n\pi} \end{aligned}

So the final Fourier series solution is:

f(x) = \frac{1}{2} – \frac{1}{\pi} \sum_{n=1}^\infty \frac{\sin (n\pi x)}{n}

Note that the complete mathematical derivations can be found in the following document in the Sawtooth wave section.

Click here to view the graph in a separate tab.

Parabolic Wave

The parabolic wave function can be defined over the interval [-1, 1) as:

\mathsf{Parabolic \ Wave}(x) = x^2

The Fourier coefficients can then be determined to be:

\begin{aligned} a_0 &= \frac{1}{3} \\ a_n &= \frac{4}{n^2\pi^2} (-1)^n \\ b_n &= 0 \end{aligned}

Therefore the final Fourier series solution is then:

f(x) = \frac{1}{3} + \frac{4}{\pi^2} \sum_{n = 1}^\infty \frac{-1^n}{n^2} \cos (n \pi x)

Note that the complete mathematical derivations can be found in the following document in the Parabolic wave section.

Click here to view the graph in a separate tab.

Triangular Wave

The triangle wave function can be defined over the interval [-1, 1) as:

\mathsf{Triangle\ Wave}(x) = \left\{ \begin{array}{ll} \hphantom{-}2x + 1 & -1 \leq x < 0 \\ -2x + 1 & \hphantom{-}0 \leq x < 1 \end{array} \right.

The Fourier coefficients can then be determined (using integration by parts) to be:

\begin{aligned} a_0 &= 0 \\ a_n &= \frac{8}{n^2\pi^2}\ \ \ \ \ \mathrm{When}\ n\ \mathrm{is\ odd } \\ b_n &= 0 \end{aligned}

Therefore the final Fourier series approximation is:

f(x) = \frac{8}{\pi^2} \sum_{n = 1}^\infty \frac{ \cos ( (2n – 1)\pi x ) }{(2n – 1)^2}

Note that the complete mathematical derivations can be found in the following document in the Triangle wave section.

Click here to view in a separate tab.

Code

Note that all of the code for the visualizations is available here.

Javascript Math