Fourier Series

Introduction

Can Circles do more for us than draw these lovely patterns? Can they give us an alphabet, a universal way of generating and representing many forms of interest? Can we treat them like a bunch of kitchen ingredients, that we throw into a recipe to conjure up new dishes that look different?

Inspiration

Take a look at these paintings:

Also see: https://x.com/jagarikin/status/962449509782495232

What is the Fourier Series?

Important

A Fourier Series is a way of composing/decomposing a complex waveform into a set of harmonically related sine Oscillations, which are summed up to create the original waveform.

In Circles, we saw how we could make symmetric patterns from rotating circles. We did not have a pattern in mind, except for the symmetry order. So, when we chose number of circles $M$ and their complex amplitudes $a_j$, $j=1..M$ relying on our (hopefully growing) intuition, we could systematically generate symmetric patterns based on the idea of rolling circles. By trial and error, we can design both the value of $M$ and the values for $a_j$, $j=1..M$. So far, so good.

But how about the other way around? What if we had a pattern in mind, and wanted to compute the circles, their number and amplitudes, that would generate that pattern? This is where the Fourier Series comes in.

The best way to form this intuition is to play some of the Wave Game that is available on the University of Colorado PHET Simulations website:

Rolling Circles and the Fourier Series

By sliding the amplitudes of various sine Oscillators (whose number you could choose), you were hopefully able to visually create a waveform that looked very close the one on the screen. This was a way of doing waveform synthesis. How did you know, visually speaking, how to set the amplitude?

A. Correlation of Time waveforms: We adjusted the slider on each sine wave when the selected sine Oscillation that you were manipulating had the best possible correlation with the target waveform!! But how does this correlation work here, with waveforms, instead of data variables?

We all know what Pearson Correlations are: we take the product of two (scaled and centered) quantitative variables, value by value, and take the average of these products. With waveforms, we can intuitively do the same thing to determine the coefficient of each component of the Fourier Series:

$$coeffforsin({\omega }_c\ast t)=AverageProduct(sin({\omega }_c\ast t)\ast target.waveform)$$

$$\begin{array}{}\text{(1)}& =\frac{1}{WaveformPeriod}\ast {\displaystyle {\int }_0^{WaveformPeriod}sin({\omega }_c\ast t)\ast target.waveform\ast dt}\end{array}$$

OK, but how does one make use of these time-waveform correlations?

B. Orthogonal Waveforms: We need one more concept here: that of “orthogonal waveforms”: these are waveforms whose correlations, as defined above, are zero! But which are these? Our good old sine and cosine waves!!

When we take sine/cosine waves whose frequencies are integer multiples of some base frequency, then all such waveforms are orthogonal.

$$\frac{1}{WaveformPeriod}\ast \int sin(m\ast {\omega }_c\ast t)\ast sin(n\ast {\omega }_c\ast t)\ast dt=0$$ $$\begin{array}{}\text{(2)}& \text{where m and n are multiples of some base frequency}\end{array}$$

Note

For more on Orthogonality, see here: https://qr.ae/pATe4W

C: “Base Frequency”: So what is this base frequency we have been assuming? It is determined by the target waveform:

$$\begin{array}{}\text{(3)}& BaseFrequency=\frac{1}{PeriodofTargetWaveform}\end{array}$$

How does the Fourier Series Compute?

So now we are ready to define the steps in computing the Fourier Series:

1. Compute the base-time-period $T$ of the target waveform, and calculate the base frequency $f_c=\frac{1}{T}$ using Equation 3.
2. Take say $M$ integer multiples of this base frequency ($n=1.....M$) and create sine waves with these. These are called harmonics.
3. Compute the correlations of each harmonic with the target waveform, as indicated in Equation 1. These are the coefficients (i.e. amplitudes) for each of these harmonics.
4. Write the Fourier Series for the target waveform as:

$$targetwaveform\sim \sum _{i=1}^{M}corr(i)\ast sin/cos(2\pi \ast i\ast f_c\ast t)$$

Videos

Let us now hear from Dan Schiffman, and also from 3Blue1Brown!

Fourier Series in Code

How if we just enter a series of numbers, representing our waveform, or pick up sounds off the micrphone, and then make up a Fourier Series for that? We will use pretty much the techique used in creating the rolling circles for the drawing that we saw at first.

p5.js

R

Wait, But Why?

• Think of the Fourier Series as a set of sinewaves that are derived by decomposing an original waveform
• How are these components related? As integer multiples of a fundamental frequency.
• How are their amplitudes calculated? By taking a correlation between the original waveform and the given sinewave component (unit amplitude)
• How is this accurate? By minimizing a “least square error” between the original waveform and the sum of sinusoids.

A Sound Vocabulary

Some terms will show up repeatedly in our work and we should be clear what they mean:

1. Oscillation: Any periodic change in amplitude. https://natureofcode.com/oscillation/
2. Sinusoid: A Sine Wave Oscillation, created typically with p5.Oscillator
3. Waveform: A graph of amplitude vs time
4. Frequency: The rate of the oscillation, in cycles per second. Look for a repeating pattern, and measure its time period. $1/time.period$ will give you frequency in Hertz(Hz)
5. Amplitude: The height, or scaling factor of the oscillation. Easiest to decipher for a simple repeating pattern like sine, square, or triangle.
6. Phase: The instantaneous angle-position of a rotating vector which generates the wave: Remember the Euler’s Formula. Also the instantaneous angle-value of a repeating wave at a certain amplitude.
7. Harmonic: A (usually) Sine Oscillation that is at some integer multiple frequency of a reference Sine Oscillation. 2X = octave; 10X = decade.
8. In-harmonic: TBW
9. Partials: TBW
10. Transient: TBW
11. Alias: TBW

References

1. Jez Swanson. An Interactive Introduction to Fourier Transforms https://www.jezzamon.com/fourier/index.html
2. Alex Miller. (2018). Fourier Series and Spinning Circles. https://alex.miller.im/posts/fourier-series-spinning-circles-visualization/
3. Better Explained. An Interactive Guide to the Fourier Transform. http://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/
4. Aatish Bhatia (November 6, 2013). The Math Trick Behind MP3s, JPEGs, and Homer Simpson’s Face. https://nautil.us/the-math-trick-behind-mp3s-jpegs-and-homer-simpsons-face-234629/

Resources

1. https://mathlets.org/mathlets/fourier-coefficients/
2. Working with Audio in p5.js. https://pdm.lsupathways.org/3_audio/
3. Violet Whitney. (Sep 28, 2023) Sounds: Working with sounds and speech in P5.js. https://medium.spatialpixel.com/sounds-bd05429aba38
4. Mister Bomb. p5.Sound project tutorials. https://www.youtube.com/playlist?list=PLIsdHp2z9wFl7A1wWb2VmQUUojEGsKELE
5. https://musiclab.chromeexperiments.com/oscillators
6. https://www.electronicbeats.net/the-feed/excel-drum-machine/
7. https://junshern.github.io/algorithmic-music-tutorial/
8. https://blackwhiskercult.com/visual-music-in-p5-js-i/
9. Jason Sigal.Visualizing Music with p5.js https://therewasaguy.github.io/p5-music-viz/
10. Doga Kurkcuoglu. https://bilimneguzellan.net/en/?s=Fourier

Other tools to explore

1. Strudel REPL https://strudel.cc
2. Introducing Jukebox, a neural net that generates music, including rudimentary singing, as raw audio in a variety of genres and artist styles. We’re releasing a tool for everyone to explore the generated samples, as well as the model and code: https://openai.com/index/jukebox/ (OpenAI, April 30, 2020,via Twitter https://twitter.com/OpenAI)
3. https://algorithmicpattern.org/2023/05/15/strudel-live-coding-patterns-on-the-web/
4. https://betterexplained.com/articles/vector-calculus-understanding-the-dot-product/
5. Freesound: Find Any Sound you Like. https://freesound.org
6. WebSpeech API. https://developer.chrome.com/blog/voice-driven-web-apps-introduction-to-the-web-speech-api/
7. https://dogbotic.com

R Package Citations

Package	Version	Citation
ambient	1.0.2	Pedersen and Peck (2022)
mosaicCalc	0.6.4	Kaplan, Pruim, and Horton (2024)
plot3D	1.4.1	Soetaert (2024)

Kaplan, Daniel T., Randall Pruim, and Nicholas J. Horton. 2024. mosaicCalc: R-Language Based Calculus Operations for Teaching. https://CRAN.R-project.org/package=mosaicCalc.

Pedersen, Thomas Lin, and Jordan Peck. 2022. ambient: A Generator of Multidimensional Noise. https://CRAN.R-project.org/package=ambient.

Soetaert, Karline. 2024. plot3D: Plotting Multi-Dimensional Data. https://CRAN.R-project.org/package=plot3D.