This page brings together a set of interactive algorithm visualizations designed to make classical image-processing techniques transparent. By exposing their internal structures— from bilateral grids to Hough parameter spaces—these demos reveal the computational and geometric principles behind filters, detectors, and transforms used throughout vision and graphics. (More computationally intensive algorithms will be showcased in a separate demo built on a higher-performance backend.)
The bilateral grid is an efficient data structure for edge-preserving image filtering. It extends the 2D image into a 3D space where X and Y are spatial coordinates, and Z is the intensity/color dimension. Pixels are "splatted" into this 3D grid, accumulating in cells. The 3D visualization shows the actual grid structure: each point is a grid cell, its size represents accumulated weight (how many similar pixels cluster there), and its color shows the average color in that cell. Larger, brighter points = denser clusters of similar pixels in both space and color!
The Hough Transform detects lines by mapping image space to parameter space (ρ, θ). Each point in the image contributes a sinusoidal curve in Hough space. Lines appear as bright spots where many curves intersect. Draw on the canvas to create lines and watch them appear in the Hough space in real-time!
Dominant Direction - Shows the strongest line orientation at each point (current implementation)Hough Accumulation - Stacks semi-transparent lines based on Hough space brightness (your suggestion)The Hough Circle Transform extends line detection to circles by using a 3D parameter space (x, y, r). Each edge point votes for possible circle centers at various radii. Circles appear as peaks in this 3D space. Draw circles or load an image to detect them in real-time!
x₀ = x₁ - r·cos(θ), y₀ = y₁ - r·sin(θ) for θ ∈ [0, 2π]Detects arbitrary user-defined shapes with rotation and scale invariance! Draw a template shape, then the algorithm finds all instances of that shape in the target image, even if rotated or scaled. Uses an R-table to encode shape geometry.
(x_ref, y_ref) = (x, y) - s·R(θ)·r(φ)A comprehensive collection of common image processing algorithms, from basic operations to complex filters. Each filter includes a brief explanation of how it works!
Brightness/Contrast - Linear transform: out = α·in + βInvert - Complement: out = 255 - inThreshold - Binary: out = in > T ? 255 : 0Posterize - Quantization: out = floor(in / step) · stepGaussian Blur - Weighted average with Gaussian kernel G(x,y) = e^(-(x²+y²)/(2σ²))Sharpen - Unsharp mask: sharp = img + α·(img - blur)Emboss - Directional derivative kernel highlights edgesEdge Enhance - High-pass filter emphasizes transitionsSobel - Gradient magnitude: G = √(Gx² + Gy²) using [-1,0,1] kernelsCanny - Multi-stage: Gaussian blur → Sobel → Non-max suppression → HysteresisLaplacian - Second derivative: ∇²f = ∂²f/∂x² + ∂²f/∂y²Dilate - Expand bright regions: max over kernelErode - Shrink bright regions: min over kernelOpen - Erode then dilate (removes noise)Close - Dilate then erode (fills gaps)Median Filter - Non-linear: replaces with median of neighborhood (great for salt-pepper noise)Unsharp Mask - Professional sharpening: sharp = original + amount·(original - blurred)High-Pass Filter - Preserves high-frequency details: highpass = img - lowpassSepia - Vintage warm tone effectVignette - Darkens edges for focusPixelate - Mosaic effect by downsampling