loading...

Fourier Series Visualization Using React Hooks

avantcontra profile image Contra ・3 min read

"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, JavaScript (React), Python, and Unity:

sine-unity-croped

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

Mathematics

In mathematics, a Fourier series is a periodic function composed of harmonically related sinusoids, combined by a weighted summation.
(wikipedia)

And it can be explained as expressing a repetitive curve as sum of sine curves. (Purrier Series (Meow) and Making Images Speak)

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

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

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

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

Alt Text

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

Alt Text

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

Alt Text

Finally:

Alt Text

Above content refers to "Advanced Mathematics - (Engineering Course) (Vol.2)"

And the original Fourier series definition and detail explanation will be found in wikipedia.

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

Alt Text

Visualization

Now to visualize this curve using React.
I have forked and refactored a sine visualization:

sine-visualization-reactjs

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

Alt Text

fs-js-carbon-1

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

fs-js-carbon-2

Final curve:

fs-js-5

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

References


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.

You may buy me a coffee in my Patreon. 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.

Your encouragement is my driving energy!

Cheers~

Contra

Posted on by:

avantcontra profile

Contra

@avantcontra

Experimental coder, generative art, interactive media, creative applications, ex game/App/web developer. Find my works more: https://www.patreon.com/avantcontra

Discussion

pic
Editor guide