Fourier Series Visualization Using React Hooks
Tags: react, fourierseries, visualization, math
Published: 2019-08-31 16:15:30

---
title: Fourier Series Visualization Using React Hooks
published: true
description: This chapter I implement Fourier Series curve visualization. And start with JavaScript and React Hooks this section.
tags: React, Fourier Series, visualization, math
---

**"Coding Druid"** series is my **horizontal programming** practice notes, each part around a topic like mathematical, physics, electronic, graphics, sound, etc., implemented in several programming languages.

----

**Coding Druid**
**Part**: Math
**Chapter**: Fourier Series
**Section**: Javascript (React)

In the previous Chapter, I visualized Trigonometric function (Sine and unit circle) separately using [MaxMSP](https://www.floatbug.com/2019/07/04/trigonometric-function-visualization-using-maxmsp%e2%80%8a-%e2%80%8acoding-druid/), [JavaScript (React)](https://dev.to/avantcontra/sine-function-visualization-using-javascript-react-3b85), [Python](https://dev.to/avantcontra/sine-function-visualization-using-python-2ogo), and [Unity](https://dev.to/avantcontra/sine-function-visualization-using-unity3d-4747):


![sine-unity-croped](http://floatcc.intplusplus.org/sine-unity-croped.gif)



This chapter I implement **Fourier Series** curve visualization.
And start with **JavaScript and React** this section.

<br/>

### Mathematics

In mathematics, a Fourier series is a periodic function composed of harmonically related sinusoids, combined by a weighted summation.
([wikipedia](https://en.wikipedia.org/wiki/Fourier_series))

And it can be explained as expressing a repetitive curve as sum of sine curves. ([Purrier Series (Meow) and Making Images Speak](http://bilimneguzellan.net/en/purrier-series-meow-and-making-images-speak/))


For example, suppose there is a square wave, and it can be interpreted into sine waves:

<!-- ![Fourier_series_and_transform](assets/Fourier_series_and_transform.gif) -->
<img src="http://floatcc.intplusplus.org/Fourier_series_and_transform.gif"  width="800px" >

The more sine waves you have, the preciser square wave you will get.

<!-- ![474px-Fourier_Series.svg.png](assets/474px-Fourier_Series.svg.png) -->
<img src="http://floatcc.intplusplus.org/474px-Fourier_Series.svg.png"  height="600px" >


<br/>

<br/>

Now Let's see the process of Fourier series expansion.

Assume that `f(x)` is a periodic function for `x∈[−π,π]`, and its period is `2π`.
Its expression:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u0hziw8rdcvijzph8sr2.png)

<br/>

Then its trigonometric expression of Fourier series (sine-cosine form) is like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e6ohbxzdnv7vmsz29ydc.png)

<br/>

And Fourier coefficients of $f(x)$ is:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/reorvbf7aqr4bqy5iao1.png)

<br/>

**Finally**:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/swi9cek92qchwwsba6ws.png)

<br/>

*Above content refers to ["Advanced Mathematics - (Engineering Course) (Vol.2)"](https://www.amazon.com/s?k=9787810824088&i=stripbooks&linkCode=qs)*

*And the original Fourier series definition and detail explanation will be found in [wikipedia](https://en.wikipedia.org/wiki/Fourier_series).*


<br/>


Sums of lengths the first four terms, and showing how the approximation to a square wave:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vcz8wxkobevzgihvla4n.png)

<!-- ![Fourier_series_square_wave_circles_animation](assets/Fourier_series_square_wave_circles_animation.gif) -->
<img src="http://floatcc.intplusplus.org/Fourier_series_square_wave_circles_animation.gif"  width="500px" >


<br/>
<br/>

### Visualization

Now to visualize this curve using React.
I have forked and refactored a [sine visualization](https://dev.to/avantcontra/sine-function-visualization-using-javascript-react-3b85):

![sine-visualization-reactjs](http://floatcc.intplusplus.org/sine-visualization-reactjs.gif)

I will do the Fourier stuff on the basis of above code.

It’s really clear to write code using React:

![fs-js-carbon-0](http://floatcc.intplusplus.org/fs-js-carbon-0.png)

<br/>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x7l2n15zfwa6it1vr4k4.png)

![fs-js-carbon-1](http://floatcc.intplusplus.org/fs-js-carbon-1.png)

<br/>

Still use **React Hooks** to update the data binded with Components:

![fs-js-carbon-2](http://floatcc.intplusplus.org/fs-js-carbon-2.png)

<br/>

**Final curve**:

![fs-js-5](http://floatcc.intplusplus.org/fs-js-5.gif)

As n increases, that is, the sine wave increases, the synthesized waveform gets closer to the square wave.

<br/>

#### References

- [Wikipedia](https://en.wikipedia.org/wiki/Fourier_series)

- [Purrier Series (Meow) and Making Images Speak](http://bilimneguzellan.net/en/purrier-series-meow-and-making-images-speak/)

- [CodingChallenges by Daniel Shiffman](https://thecodingtrain.com/CodingChallenges/125-fourier-series.html)

- [Advanced Mathematics - (Engineering Course) 高等数学（工科类）](https://www.amazon.com/s?k=9787810824088&i=stripbooks&linkCode=qs)
 
- **[Signals & Systems (Second Edition) by Alan V. Oppenheim](https://www.amazon.com/Signals-Systems-2nd-Alan-Oppenheim/dp/0138147574)**

- [[干货]---Fourier级数](https://zhuanlan.zhihu.com/p/35679341)

- **[傅立叶变换如何理解？美颜和变声都是什么原理？李永乐老师告诉你](https://www.youtube.com/watch?v=0LuyxzqI3Hk)**


----



**Talk is cheap. Show me the code!**

This demo and the **Coding Druid** series is open source here:
https://github.com/avantcontra/coding-druid


You can find more resources in my site [floatbug.com](https://www.floatbug.com).

You may **buy me a coffee** in my [Patreon](https://www.patreon.com/avantcontra). There are many articles, patches, source code and some **advanced Patron-only content** there. 

Also you can get some free patches/codes in [Gumroad shop](https://gumroad.com/avantcontra).

 Your encouragement is my driving energy!


Cheers~

Contra

- Website: [floatbug.com](https://www.floatbug.com)
- Github: [avantcontra](https://github.com/avantcontra)
- Facebook: [avantcontra](https://facebook.com/avantcontra)
- Twitter: [avantcontra](https://twitter.com/avantcontra)
- Instagram: [avantcontra](https://www.instagram.com/avantcontra)
- Gumroad (buy codes directly): [avantcontra](https://gumroad.com/avantcontra)
- Patreon (advanced content): [avantcontra](https://www.patreon.com/avantcontra)