Convolution playground
About this app
A 3×3 kernel travels animated over a test image while a magnifier computes the 9 multiplications and the sum of each convolution position live, and the feature map emerges on the right. Eight classic filter presets (Sobel, Laplace, Sharpen …) are freely editable; the "Learned filters" mode shows typical trained first-layer kernels of a CNN — the same mechanics, but learned instead of engineer-designed.
How convolution works
In a discrete convolution a small window of weights, the kernel, slides across the image. At each position the pixel values under the window are multiplied by the weights and summed; for a 3×3 kernel that is 9 multiplications and one sum. The result is one pixel of the output, the feature map. Depending on the weights you get a blur, an edge detector such as Sobel or Laplace, or a sharpening filter. In classical image processing people design these kernels. A convolutional neural network (CNN) learns them from training data.
What the app shows
A 3×3 kernel moves across a test image in an animation. A magnifier in the centre shows the nine multiplications and the sum for the current position, and the feature map on the right grows pixel by pixel. Eight presets are fully editable: identity, box blur, Gaussian, Sobel X, Sobel Y, Laplace, sharpen and emboss. The app explains normalisation: if the weights sum to 0, the output is centred on mid-grey. “Learned filters” mode shows typical first-layer kernels of a trained CNN.
Try it yourself
Choose Sobel X and notice that only vertical edges light up; with Sobel Y it is horizontal ones. Change individual weights and see how the feature map responds. Drag on the input image to place the window at a specific spot and follow the calculation there. “Apply instantly” computes the whole feature map at once, and the speed slider controls the animation.
Frequently asked questions
- What is convolution in image processing?
- Convolution computes each output pixel as a weighted sum of the pixels around it. The weights form the kernel, which is slid across the whole image. This can blur, sharpen or highlight edges.
- What does the Sobel operator do?
- The Sobel operator is a 3×3 kernel that estimates the change in brightness in one direction. Sobel X responds to vertical edges, Sobel Y to horizontal ones. Combined they give the strength and direction of the gradient.
- How does a CNN learn its filters?
- A CNN starts with random kernel weights and adjusts them during training by gradient descent so that the error on the training data falls. First-layer filters then often resemble edge or Gabor detectors. The arithmetic is the same as for hand-designed kernels.
- Can I enter my own kernels in the app?
- Yes. All eight presets are editable and you can change each of the nine weights. The feature map is recomputed with your kernel.
Subject: Computer Vision
More from Computer Vision
- 3D Gaussian Splatting
- CV Foundational Skills
- Industrial lighting
- Neural Rendering (NeRF)
- Photogrammetry & Its Limits
- Pixel grid
- Stereo & ToF — depth vision
A VisuApp by heyprof: interactive, free in your browser, no sign-up. What is a VisuApp? · All apps