šŸŽØ Hahn's Math of Data Science - Convolution Explorer

šŸ–¼ļø Drag an image onto the page šŸ” Hover to inspect convolution āœØ Real-time processing

Step 1 ā€” Pick or load an image

Use sample images or upload your own. Images are processed locally in your browser.

šŸ’” Quick Tips

  • Try different kernels to see edge detection, blurring, and sharpening
  • Hover over pixels to understand the math
  • Adjust the mix slider to blend effects

Step 2 ā€” Choose a kernel

Select a preset or create custom values. The kernel is applied to each pixel's neighborhood.

Sum: 1 Norm: Ɨ1.00
100%

Step 3 ā€” See the convolution

Hover over any pixel to inspect the 3Ɨ3 neighborhood and see the convolution calculation in real-time.

Input
Output

Computation Details

Ɨ
Position: (--, --)
Hover over the image to see the convolution calculation:
Ī£(kernel[i,j] Ɨ pixel[x+i, y+j]) ā†’ output pixel
Kernel sum: 1 Output range: 0ā€¦255 Processing: Grayscale

Explore convolution interactively! Try edge detection filters (Sobel, Laplacian) on the dog image to see how kernels detect features. Turn off normalization with edge detectors to understand raw convolution values. All processing runs client-side in your browser using Canvas API.