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

Use one semicolon to separate two pieces. Supported syntax:

expr1 if x<a; expr2 if x>=a

The four supported condition pairs are x<a/x>=a, x<=a/x>a, and their reverses. The breakpoint \(a\) must lie strictly inside the chosen domain. Examples:

(x+2)^2 if x<0; 8-x if x>=0 — quadratic then linear
-1 if x<=0; 1 if x>0 — step function (ideal for Gibbs phenomenon)
0 if x<=-1; x^2 if x>-1 — breakpoint at \(x=-1\)

Common mistakes: omitting the semicolon, writing spaces inside the condition (use x<0 not x < 0), or placing the breakpoint outside the domain.

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

\(x_\min\)

\(x_\max\)

Modes \(n\) (max 200)

Speed (ms/frame)

Fourier Series — original function and approximation