EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti
Azərbaycanca
Қазақша
O'zbekcha
Тоҷикӣ
Кыргызча〰️ Convolution (2D) — Discrete Signal & Kernel Lab
Pick or hand-draw an input signal, choose a kernel, and watch the flip-slide-multiply-sum sweep build the output curve sample by sample on a plain Canvas 2D grid, with a live numeric readout at every shift.
A hands-on discrete-convolution lab that runs the flip-slide-multiply-sum sum in the open: pick a test signal or paint your own by dragging on the canvas, choose a kernel, and watch the output curve fill in one real sample at a time.
🔬 What It Demonstrates
Every linear filter — blur, echo, smoothing, edge softening — is a convolution. This lab computes the literal discrete sum (f∗g)[n] = Σ f[k]·g[n−k] at every shift, so the kernel you see flipped and sliding across the input lane is exactly the arithmetic being performed, not an approximation of it.
🎮 How to Use
Choose an input signal and a kernel, then drag Kernel width to widen or narrow the filter and Sweep speed to slow the animation for closer inspection. Drag anywhere on the canvas to scrub straight to any shift — the green output curve is recomputed exactly up to that point. Select "Draw your own" and drag across the blue input lane to paint a custom test signal.
💡 Did You Know?
Convolution in the time domain is exactly multiplication in the frequency domain (the Convolution Theorem) — the reason the Fast Fourier Transform makes large convolutions, and the Gaussian blur in a photo app, dramatically faster than computing the sum directly.
About the 2D Convolution Lab
This simulation visualises discrete convolution on three stacked lanes: the input signal stays fixed while a flipped copy of the kernel slides across it, shaded bars show the per-sample products being summed at the current shift, and the output lane fills in the running result one point per step. A box kernel behaves as a moving average, a triangle kernel is the overlap of two box averages for a smoother ramp weighting, a Gaussian kernel tapers from the centre for artefact-free blur, and a one-sided exponential kernel produces the decaying echo tail heard in audio delay effects and RC circuits.
Because the same convAt() function computes both the animated sweep and the scrub-to-any-shift recomputation, dragging the playhead and letting the animation run produce identical numbers — a useful way to confirm, sample by sample, that the on-screen sum really is the convolution formula rather than a canned animation.
Frequently Asked Questions
What is convolution?
Convolution combines two functions — a signal f and a kernel g — by sliding one over the other, multiplying overlapping values, and summing the products at every shift. The result (f∗g)(t) measures how much the two overlap once one is displaced by t, and it is the defining operation of every linear time-invariant (LTI) system.
How do I use this simulation?
Pick an input signal (square pulse, spike train, noise, step edge, sine burst, or draw your own by dragging on the blue lane) and a kernel (box, Gaussian, exponential, or triangle). Drag the Kernel width and Sweep speed sliders, then Play or drag anywhere on the canvas to scrub the sweep to any shift and see the exact partial sum recomputed instantly.
Why is the kernel shown flipped and sliding?
The formula (f∗g)[n] = Σ f[k]·g[n−k] reverses the kernel in index before it is displaced by the shift n. This flip is what makes convolution commutative (f∗g = g∗f) and is why an LTI system's output equals its input convolved with the system's impulse response.
What does drawing my own signal let me test?
Selecting "Draw your own" and dragging across the input lane paints a custom sample sequence — a sharp corner, an isolated spike, a ramp — so you can watch how a specific kernel smooths, delays, or reshapes exactly the feature you drew, instead of only the four preset test signals.
What is the difference between the box, Gaussian, exponential and triangle kernels?
Box weights every sample in its window equally (a moving average) and can ring on sharp edges. Triangle is the overlap of two box averages — a smoother ramp-shaped weighting. Gaussian tapers smoothly from the centre, giving artefact-free blur. Exponential is one-sided and decaying, producing the echo/reverb tail of an RC circuit or delay effect.
What does the kernel width slider control?
It sets how many samples the kernel spans. A wider kernel averages over more of the signal — stronger smoothing or a longer echo tail; a narrow kernel leaves sharp features mostly intact. Width is a direct trade-off between smoothing strength and preserved detail.
Is convolution commutative?
Yes, f∗g = g∗f — it does not matter which function is called the signal and which the kernel. It is also associative and distributive, which is why engineers can cascade and reorder filters freely.
How is this simulation computed?
The page samples the chosen signal and kernel on a 400-point discrete grid, flips the kernel, and slides it one sample at a time. At each shift it multiplies overlapping samples, sums them, and plots that value as the next output point — the discrete convolution sum, animated and scrubbable.
How is this different from the 3D Convolution simulation?
The 3D version renders the same three-lane sweep through a WebGL/Three.js orthographic pipeline with ribbon geometry. This 2D companion draws directly with the Canvas 2D API, adds a sine-burst test signal and a fourth (triangle) kernel, and — uniquely — lets you hand-draw your own input signal by dragging on the input lane.
Canvas 2D discrete-convolution lab: pick or hand-draw an input signal, choose a kernel, and watch the flip-slide-multiply-sum sweep build the output curve sample by sample, with a live numeric readout.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install