Home▸Generative Art & Algorithmic Patterns▸Convolution Kernel Filters (2D)

🖼️ Convolution Kernel Filters (2D)

Live 2D convolution kernel image filters in the browser: real 3x3/5x5 blur, sharpen, Sobel edge-detect and emboss kernels applied pixel-by-pixel with getImageData, plus an editable custom kernel matrix.

Generative Art & Algorithmic Patterns2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

⚙ Under the hood

Apply real convolution kernels to a live image on Canvas2D: box blur, Gaussian blur, sharpen, Sobel edge detection and emboss, plus a fully editable custom kernel matrix. Every pixel is recomputed using getImageData and putImageData, with a live heads-up display showing the kernel sum and the normalization factor.

convolutionimage-processingcanvas2dedge-detectionkernel-filter

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install