〰️ Convolution — How Filters Reshape Signals
Convolution slides one function over another, multiplying and summing at each shift. It is how every linear filter — blur, echo, smoothing — transforms its input.
About Convolution — How Filters Reshape Signals
This simulation visualises convolution — a mathematical operation at the heart of every linear filter. The blue input signal stays fixed while the orange kernel is flipped and slid across it; at each position the overlapping values are multiplied and summed to produce one point of the green output curve, building up (f*g)(t) in real time. By changing the kernel type and width you can directly observe how smoothing, blurring, or echo effects emerge from the same fundamental arithmetic.
Convolution is used in audio processing (reverb and equalisation), image processing (Gaussian blur, sharpening, edge detection), communications (channel modelling), and neural networks (convolutional layers). It was formalised in the 18th and 19th centuries through the work of mathematicians such as Laplace and Cauchy, and became central to engineering once sampling theory and digital signal processing matured in the 20th century.
Frequently Asked Questions
What is convolution?
Convolution is a mathematical operation that combines two functions — a signal f and a kernel g — by sliding one over the other, multiplying their overlapping values, and summing the products at every shift. The result (f*g)(t) describes how much the two functions overlap when one is displaced by t. It is the defining operation of linear time-invariant (LTI) systems.
How do I use this simulation?
Select an input signal (square pulse, spike train, noisy signal, or step edge) and a kernel type (box, Gaussian, or exponential) from the drop-down menus in the control panel. Use the Kernel width slider to widen or narrow the filter, and the Speed slider to slow the sweep down for closer inspection. Press Pause at any moment to freeze the animation and examine the exact overlap at a given shift position.
Why does the kernel appear flipped and sliding?
The formula (f*g)(t) = integral f(tau) * g(t - tau) d-tau contains the term g(t - tau), which reverses the kernel in time before it is displaced by t. This flip is not a visual trick — it is what makes convolution commutative (f*g = g*f) and is the reason an LTI system's output is fully described by convolving the input with the system's impulse response.
What is an impulse response and why does it matter?
The impulse response h(t) is the output a system produces when its input is a single unit impulse (a Dirac delta, or a single spike in discrete systems). Because any arbitrary signal can be decomposed as a sum of scaled, time-shifted impulses, the output for any input is simply the convolution of that input with the impulse response. This means knowing h fully characterises any LTI system — microphones, amplifiers, rooms, and digital filters alike.
What real-world systems use convolution?
Convolution is ubiquitous: photo-editing software applies it for Gaussian blur, sharpening, and edge detection; audio workstations use it for reverb (convolving dry audio with a room's impulse response); wireless communications engineers model channel distortion with it; radiologists use it in CT and MRI reconstruction; and deep-learning frameworks build convolutional neural network layers directly on discrete 2-D convolution. Even the smoothing filter in your smartwatch's accelerometer is a convolution.
Is it true that convolution becomes multiplication in the frequency domain?
Yes — this is the Convolution Theorem. If F and G are the Fourier transforms of f and g, then the Fourier transform of f*g is simply F times G (pointwise multiplication). This is why the Fast Fourier Transform (FFT) makes large convolutions dramatically faster: instead of O(N^2) multiply-add operations in the time domain, FFT-based convolution takes only O(N log N) steps. The Gaussian blur in your photo app and the FIR filters in audio hardware exploit this fact.
Common misconception: does a wider kernel always give a better result?
Not necessarily. A wider kernel averages or integrates over more of the signal, which reduces noise and smooths edges — but it also smears fine detail and delays causal filters (like the exponential echo kernel) by more samples. Choosing kernel width is a trade-off between noise suppression and resolution. In image processing, over-blurring destroys texture; in audio, excessive reverb tails reduce intelligibility. The right width depends entirely on the application.
Who developed the mathematical theory of convolution?
The integral form of convolution appeared in 18th-century analysis, with contributions from Euler, Laplace, and Cauchy in the context of differential equations and integral transforms. The Fourier transform connection was established by Joseph Fourier in the early 19th century. The engineering application to linear filters was systematised by Oliver Heaviside in the late 1800s and later by Claude Shannon and Norbert Wiener in the mid-20th century as part of information theory and cybernetics.
How does convolution relate to cross-correlation?
Cross-correlation (f star g)(t) = integral f(tau) * g(t + tau) d-tau is almost identical to convolution but without the kernel flip. When f = g (autocorrelation) it measures self-similarity at different lags. In template matching and pattern recognition, cross-correlation locates where a template best fits a signal. Convolution and cross-correlation differ only in the sign of the shift; for symmetric kernels (like a Gaussian) they produce identical results. Related simulations include Fourier Transform, Low-Pass / High-Pass Filtering, and Impulse Response.
How is discrete convolution used in convolutional neural networks (CNNs)?
In a CNN, each convolutional layer applies a small 2-D kernel (e.g. 3x3 or 5x5 pixels) to an input feature map using the discrete convolution sum. The kernel weights are not hand-designed — they are learned from data via backpropagation. Stacking many such layers lets the network learn hierarchical features: edges in layer 1, textures in layer 2, object parts in layer 3, and so on. The same mathematical operation that blurs a photo or echoes a sound is therefore also the engine behind image classifiers, object detectors, and speech recognition systems.
What are current research frontiers in convolution?
Active research directions include: depthwise separable convolutions (used in MobileNet) to reduce CNN computation on mobile devices; graph convolution networks that extend convolution to irregular, non-Euclidean data such as social graphs and molecular structures; learnable or adaptive filter banks that change kernel shape during inference; and quantum convolution algorithms that may offer super-polynomial speedups over classical FFT for certain problem sizes. In signal processing, sparse-approximation methods (compressed sensing) exploit convolution structure to recover signals from far fewer measurements than the Nyquist rate traditionally demands.
Convolution slides one function over another, multiplying and summing at each shift. It is how every linear filter — blur, echo, smoothing — transforms its input.
3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install