"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.
Chapter: Fourier Series
This chapter I implement Fourier Series curve visualization.
In mathematics, a Fourier series is a periodic function composed of harmonically related sinusoids, combined by a weighted summation.
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.
f(x) is a periodic function for
x∈[−π,π], and its period is
Then its trigonometric expression of Fourier series (sine-cosine form) is like:
And Fourier coefficients of $f(x)$ is:
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:
Now to visualize this curve using React.
I have forked and refactored a sine visualization:
I will do the Fourier stuff on the basis of above code.
It’s really clear to write code using React:
Still use React Hooks to update the data binded with Components:
As n increases, that is, the sine wave increases, the synthesized waveform gets closer to the square wave.
Talk is cheap. Show me the code!
This demo and the Coding Druid series is open source here:
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!