Fourier Series Approximation

Animate the convergence of the Fourier series of any function on a finite interval. Coefficients computed via 10-point composite Gauss–Legendre quadrature.

The Fourier Series

Given a function \(f(x)\) defined on \([a,b]\), let \(L=\tfrac{b-a}{2}\) be the half-period and \(c=\tfrac{a+b}{2}\) the midpoint. The Fourier series of \(f\) with \(n\) modes is

\[S_n(x)=\frac{a_0}{2}+\sum_{k=1}^{n}\!\left[a_k\cos\!\left(\frac{k\pi(x-c)}{L}\right)+b_k\sin\!\left(\frac{k\pi(x-c)}{L}\right)\right]\]

The Fourier coefficients are defined by

\[a_0=\frac{1}{L}\int_a^b f(x)\,dx,\qquad a_k=\frac{1}{L}\int_a^b f(x)\cos\!\left(\frac{k\pi(x-c)}{L}\right)dx,\qquad b_k=\frac{1}{L}\int_a^b f(x)\sin\!\left(\frac{k\pi(x-c)}{L}\right)dx.\]

The constant \(a_0/2\) is the average value of \(f\) over \([a,b]\). Each pair \((a_k,b_k)\) captures the amplitude of the \(k\)-th harmonic. All coefficients are computed numerically using composite 10-point Gauss–Legendre quadrature for high accuracy without requiring a closed-form antiderivative.

Convergence and the Gibbs Phenomenon

By the Dirichlet theorem, if \(f\) is piecewise smooth on \([a,b]\), then \(S_n(x)\to f(x)\) at every point of continuity as \(n\to\infty\). At a jump discontinuity \(x_0\), the series converges to the average of the one-sided limits:

\[S_n(x_0)\;\longrightarrow\;\frac{f(x_0^-)+f(x_0^+)}{2}.\]

Near a jump you will observe the Gibbs phenomenon: an overshoot of approximately \(9\%\) of the jump magnitude that does not diminish as \(n\to\infty\), but instead concentrates into a narrower and narrower spike. Try the step function or square wave examples to see this clearly.

Relative \(L^2\) Error

The plot title reports the relative \(L^2\) error, measuring how close \(S_n\) is to \(f\) in the root-mean-square sense:

\[\text{Rel. }L^2\text{ error}=\frac{\|f-S_n\|_{L^2([a,b])}}{\|f\|_{L^2([a,b])}}= \frac{\displaystyle\sqrt{\int_a^b(f-S_n)^2\,dx}}{\displaystyle\sqrt{\int_a^b f^2\,dx}}.\]

By Parseval's theorem, this error tends to zero as \(n\to\infty\) for any square-integrable \(f\) — even when pointwise convergence fails at jump discontinuities.

Expression Syntax

Standard arithmetic: +, -, *, /, ^. Always write multiplication explicitly: 2*x not 2x.
Functions: sin, cos, exp, abs, sqrt, log, and all math.js built-ins.
Built-in specials: sawtooth(x) and square(x) (period \(2\pi\)).
Domain accepts plain numbers or \(\pi\)-expressions: -pi, 2*pi, -3*pi/2.

Piecewise Functions

Tick the Piecewise box next to Load example to switch the function input into structured pieces. The default layout has two pieces and one breakpoint; click + Add piece to extend it to three, four, or more, and − Remove last piece to shrink it back. With \(N\) pieces and breakpoints \(b_1

Piece 1 is used for \(x\le b_1\).
Piece \(i\) (for \(1
Piece \(N\) is used for \(x>b_{N-1}\).

Each piece is parsed independently as a normal expression, and each breakpoint accepts a number or a pi-expression (e.g. pi/2, 2*pi). Examples:

Piece 1 (x+2)^2, breakpoint \(0\), Piece 2 8-x (quadratic then linear)
Piece 1 -1, breakpoint \(0\), Piece 2 1 (step function — ideal for Gibbs phenomenon)
Piece 1 -1, \(-pi/2\), Piece 2 sin(x), \(pi/2\), Piece 3 1 (clamped sine)

Untick Piecewise to enter a single closed-form expression in the function box instead.

How to Use

Select an example from the dropdown or type your own function. The plot previews immediately.
Set the domain \([x_\min,x_\max]\) and the number of Fourier modes \(n\) (up to 200).
Adjust the animation speed (milliseconds per frame).
Click Start to animate the convergence term by term. Click Stop to pause; Start restarts from the beginning.
Press Enter in any input field to start immediately.

\(f(x)\), domain and mode count will appear here after selection.

Function \(f(x)\)

Load example

Piecewise

\(x_\min\)

\(x_\max\)

Modes \(n\) (max 200)

Speed (ms/frame)

Fourier Series — original function and approximation

Cite this tool

Kapita, S. (2026). Fourier Series Approximation. Math Tools. https://shelvean.github.io/math-tools/fourier.html

Kapita, Shelvean. "Fourier Series Approximation." Math Tools, 2026, shelvean.github.io/math-tools/fourier.html.

@online{kapita2026fourier,
  author       = {Shelvean Kapita},
  title        = {{Fourier Series Approximation}},
  year         = {2026},
  organization = {Math Tools},
  url          = {https://shelvean.github.io/math-tools/fourier.html}
}