Skip to content

Fourier Series Explorer

Copy this iframe to your website:

1
<iframe src="https://dmccreary.github.io/signal-processing/sims/fourier-series-explorer/main.html" width="100%" height="627px" scrolling="no"></iframe>

Run MicroSim in Fullscreen

Edit in the p5.js Editor

Description

A periodic signal can be rebuilt from sinusoids whose frequencies are whole-number multiples of the fundamental \(f_0 = 1/T\). This MicroSim keeps only the first \(N\) of those harmonics and draws the partial sum (red) on top of the original waveform (grey) over two periods. Choose a square, triangle, sawtooth or pulse-train waveform, or drag in the time plot to draw one period of your own. Add harmonics with Step >, Play or the slider and watch the sum converge.

Below the time plot, the magnitude spectrum shows the amplitude of every harmonic and the phase spectrum shows its angle. A checkbox swaps them for bar charts of the cosine and sine coefficients \(a_n\) and \(b_n\). A banner reports the rms error and, for waveforms with a jump, the Gibbs overshoot. Hover over a bar to read that harmonic's coefficients and see its sinusoid in orange. Click a bar to switch the harmonic off and see what it contributes.

This simulation is used in Chapter 6: Fourier Analysis Fundamentals.

Fourier Series

A periodic signal with period \(T\) has the Fourier series

\[x(t) = a_0 + \sum_{n=1}^{\infty}\left[a_n\cos(n\omega_0 t) + b_n\sin(n\omega_0 t)\right], \qquad \omega_0 = \frac{2\pi}{T}\]

The three plots are:

  1. Time plot: the waveform, the partial sum, and in orange the single harmonic that is currently selected.
  2. Magnitude spectrum: the amplitude \(\sqrt{a_n^2 + b_n^2} = 2\lvert c_n\rvert\) of each harmonic. Bar 0 is the DC term \(a_0\).
  3. Phase spectrum: the angle of the complex coefficient \(c_n = (a_n - jb_n)/2\). No stem is drawn for a harmonic whose amplitude is zero.

Bars in colour are included in the sum. Pale bars are harmonics above \(N\). Hollow bars are harmonics you switched off.

The coefficients of the four standard waveforms (amplitude from \(-1\) to \(+1\), except the pulse train which goes from 0 to 1) are:

Waveform \(a_0\) \(a_n\) \(b_n\) Amplitudes fall as
Square 0 0 \(\dfrac{4}{\pi n}\) for odd \(n\), 0 for even \(n\) \(1/n\)
Triangle 0 0 \(\dfrac{8}{\pi^2 n^2}(-1)^{(n-1)/2}\) for odd \(n\), 0 for even \(n\) \(1/n^2\)
Sawtooth 0 0 \(\dfrac{2}{\pi n}(-1)^{n+1}\) \(1/n\)
Pulse train, duty cycle \(d = 0.25\) \(d\) \(\dfrac{2}{\pi n}\sin(\pi n d)\) 0 \(1/n\) with a sinc-shaped envelope

The custom waveform starts as a half-wave rectified sine. Drag in the time plot to draw one period of your own. Its coefficients are found by evaluating the coefficient integrals numerically over 512 samples of the curve you drew.

Convergence and the Gibbs phenomenon. The banner reports the rms error between the waveform and the partial sum. For waveforms with a jump it also reports how far the highest peak of the partial sum overshoots the waveform. Adding harmonics makes the ripple narrower but not lower: the overshoot settles at about 9% of the jump height however many harmonics are used. The triangle wave has no jump, so its series converges quickly and without overshoot.

Controls

  1. Pick a Waveform. Press Step > to add one harmonic at a time, or Play to add them automatically (Play starts paused).
  2. Drag the Number of harmonics N slider to set \(N\) directly from 1 to 50.
  3. Move the mouse over a bar to select that harmonic. Its sinusoid is drawn in orange and its coefficients are listed under the time plot.
  4. Click a bar to switch that harmonic off and on again, and see what it contributes to the shape.
  5. Tick Show individual harmonics to draw every sinusoid in the sum.
  6. Tick Show aₙ and bₙ to replace the magnitude and phase plots with bar charts of the cosine and sine coefficients.
  7. Reset returns to five harmonics, switches every harmonic back on and restores the default custom waveform.

Lesson Plan

Learning Objectives

By the end of this activity, students will be able to:

  1. Explain a Fourier series as a sum of harmonics of the fundamental frequency.
  2. Compare the harmonic content of square, triangle, sawtooth and pulse waveforms.
  3. Describe how the partial sum converges as harmonics are added, and what the Gibbs phenomenon is.
  4. Relate the coefficients \(a_n\) and \(b_n\) to the amplitude and phase of each harmonic.
  5. Predict from the symmetry of a waveform whether its series has cosine terms, sine terms or both.

Target Audience

College undergraduates in a signals and systems or introductory signal processing course. Plan 20 to 25 minutes.

Prerequisites

  • Sinusoids: amplitude, frequency and phase
  • Even and odd functions
  • Complex numbers in polar form

Activities

Activity 1: Which harmonics are present? (5 min). Choose Square wave, set the slider to \(N = 1\) and press Step > eight times to reach \(N = 9\). The red curve changes at \(N = 3, 5, 7\) and \(9\) but not at \(N = 2, 4, 6\) and \(8\), and the rms error in the banner is the same at \(N = 1\) and \(N = 2\). Why does adding an even harmonic change nothing?

Activity 2: Read the coefficients (5 min). Hover over bars 1, 3 and 5 with the square wave.

  • The readout gives \(b_1\), \(b_3\) and \(b_5\) = 1.2732, 0.4244 and 0.2546. Check them against \(4/(\pi n)\).
  • Switch to the triangle wave. \(b_1\), \(b_3\) and \(b_5\) become 0.8106, −0.0901 and 0.0324. The sign alternates and the amplitudes fall as \(1/n^2\).
  • Switch to the sawtooth and look at the phase spectrum. The phase alternates between \(-90°\) (odd \(n\)) and \(+90°\) (even \(n\)). Why?

Activity 3: Convergence and the Gibbs overshoot (10 min). Choose Square wave and use the slider to set \(N = 1, 3, 5, 9, 21\) and \(50\). Record the rms error and the peak overshoot from the banner.

\(N\) rms error peak overshoot
1 0.435 13.7%
3 0.315 10.0%
5 0.259 9.4%
9 0.201 9.1%
21 0.136 9.0%
50 0.090 9.0%

The rms error keeps falling but the overshoot levels off at about 9% of the jump. In the time plot the ripple gets narrower and moves toward the jump, but its height does not shrink. Which quantity goes to zero as \(N\) grows, and which does not?

Activity 4: Smoothness, symmetry and your own waveform (10 min).

  • Compare the triangle wave and the square wave at \(N = 5\). The rms error is 0.016 for the triangle and 0.259 for the square. Use the rate at which the amplitudes fall to explain the difference.
  • Choose the Pulse train and tick Show aₙ and bₙ. Only the cosine coefficients are non-zero. Harmonics 4, 8, 12 and so on are missing. Relate this to the 25% duty cycle.
  • Choose Custom, and before drawing anything read \(a_0\), \(b_1\) and \(a_2\): 0.3183, 0.5 and −0.2122. Check them against \(1/\pi\), \(1/2\) and \(-2/(3\pi)\), the known results for a half-wave rectified sine.
  • The square wave has only sine terms and the pulse train only cosine terms. What symmetry of each waveform explains that? Drag in the time plot to draw a waveform that needs both.

Assessment

  1. Which harmonics does the square wave contain, and how do their amplitudes fall with \(n\)? Answer: only the odd harmonics. Their amplitude is \(4/(\pi n)\), so it falls as \(1/n\) (1.2732, 0.4244, 0.2546 for \(n = 1, 3, 5\)).
  2. At \(N = 50\) the square wave's rms error is 0.090, yet the overshoot is still about 9.0%. Why does the overshoot not disappear? Answer: the error shrinks because the ripple becomes narrower, but its peak height stays at about 9% of the jump. This is the Gibbs phenomenon.
  3. Why is the triangle wave's rms error at \(N = 5\) (0.016) so much smaller than the square wave's (0.259)? Answer: the triangle wave is continuous and its amplitudes fall as \(1/n^2\), so the omitted harmonics carry very little. The square wave's amplitudes fall only as \(1/n\).
  4. Which harmonics of the 25% duty-cycle pulse train are zero, and why? Answer: \(n = 4, 8, 12, \dots\). The coefficient is proportional to \(\sin(\pi n d)\) with \(d = 1/4\), which is zero whenever \(n\) is a multiple of 4.
  5. Does a half-wave rectified sine need cosine terms, sine terms or both? Answer: both, plus a DC term. It is neither even nor odd, and the simulation shows \(a_0 = 0.3183\), \(b_1 = 0.5\) and \(a_2 = -0.2122\).

Common Misconceptions

"Enough harmonics will remove the overshoot at a jump." The rms error keeps falling, which makes it look as though the overshoot should too. Step the square wave from \(N = 9\) to \(N = 50\) and watch the banner: the overshoot stays at about 9% while the rms error falls from 0.201 to 0.090.

"Every periodic waveform contains every harmonic." Many waveforms leave out whole families of harmonics. Step through the square wave and the even bars are all zero. The 25% duty-cycle pulse train has no bar at \(n = 4, 8, 12, \dots\).

References

  1. Fourier series - Wikipedia - definition of the series, coefficient formulas and convergence
  2. Gibbs phenomenon - Wikipedia - the overshoot of about 9% of the jump near a discontinuity
  3. Square wave - Wikipedia - the series with only odd harmonics falling as \(1/n\)
  4. Sawtooth wave - Wikipedia - the series with all harmonics and alternating signs
  5. The Scientist and Engineer's Guide to Digital Signal Processing - Steven W. Smith - free online textbook covering the Fourier transform family
  6. Oppenheim, A. V., Willsky, A. S., & Nawab, S. H. (1997). Signals and Systems (2nd ed.). Prentice Hall. Chapter 3 covers the Fourier series of periodic signals.
  7. Chapter 6: Fourier Analysis Fundamentals - this textbook - the chapter that embeds this MicroSim