“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)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:
- Purrier Series (Meow) and Making Images Speak
- CodingChallenges by Daniel Shiffman
- Advanced Mathematics – (Engineering Course) 高等数学（工科类）
- Signals & Systems (Second Edition) by Alan V. Oppenheim
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!