Fourier Playground

Mix Sine-Waves of different frequencies and see what happens!

Use formulas to generate Series:
# of Vectors

Manually enter Vectors:
Frequency: Amplitude: Phase:

Frequency	Amplitude	Phase

Scale: 5
Resolution: 0.01

How does this work?

Technically this is an inverse fourrier transform.

Its actually quite simple!
Any Signal can be created throug the summation of sine waves with different frequencies and phases. That's what a fourrier Transform is all about. Read more about it here.

Here, every sine-wave is represented as a vector with an amplitude (length), frequency (rotation speed) and phase (starting rotation), which you can see on the left. These vectors are rotated by a certain ammount every frame, based on their frequency. Afterwards all of them are summed (start of one at the tip of the previous one) together and the vertcal position at the tip of the last one is drawn.

Formulas Used:

Square Wave
Triangle Wave
Sawtooth Wave

Further Information

A MUCH better explaination of fourrier series and transforms can be found here. And please do check out 3blue1brown's other videos!

This animation is written using p5.js. Furthermore, I believe that the source code is fairly readable. If you want you can take a look and/or contribute by clicking the link below.