Computer vision fundamentals, interactively
Small, hands-on visualizations for the core ideas of computer vision, from how light becomes pixels to reconstructing 3D surfaces. Every demo exposes the underlying math so you can change a parameter and watch what happens.
Images, Color and Gamma
How a sensor turns light into a grid of numbers: sampling, color filter arrays, color spaces and the gamma encoding hidden in pixel values.
- Images as sampled signals
- Cones & rods
- Bayer pattern & demosaicing
- RGB / HSV / YCbCr / L*a*b*
- Chroma subsampling
- Gamma / sRGB
- Linear vs encoded values
Sampling & quantization
Reduce the resolution and bit depth of an image and watch blocks and banding appear, with the intensity profile of a row and the storage it needs.
Open demo →Bayer pattern & demosaicing
See the raw RGGB mosaic of a color sensor, why green is sampled twice, and compare nearest-neighbor and bilinear demosaicing and their artifacts.
Open demo →Color space explorer
Split an image into RGB, HSV, YCbCr and L*a*b* channels, inspect picked colors in every space and interpolate between two colors in each.
Open demo →Chroma subsampling
Store Cb and Cr at lower resolution with 4:2:2, 4:2:0 and coarser schemes, and see why this is almost invisible while reducing Y is not.
Open demo →Gamma
The sRGB curve, what medium gray really is, blurring encoded values versus linear light, and gamma adjustment per channel versus on luma.
Open demo →Image Filtering
Computing a function of each local neighborhood: linear filters such as Gaussian, box and Sobel, and non-linear ones such as the median filter and morphology.
- Correlation vs convolution
- Gaussian & separability
- Box filter
- Boundary handling
- Sobel
- Template matching
- Median filter
- Morphology
- Connected components
Convolution & correlation
Slide a kernel over an image: box, Gaussian, sharpen, Sobel or your own weights, correlation vs convolution with an asymmetric kernel, and four ways to handle the border.
Open demo →Gaussian & separability
Split a 2D Gaussian into two 1D passes, count the multiplications MNPQ vs MN(P+Q), and watch repeated box filtering converge to a Gaussian.
Open demo →Template matching
Select a template and compare correlation, zero-mean correlation, SSD and normalized cross-correlation score maps and their best matches.
Open demo →Median vs mean filter
Add salt-and-pepper or Gaussian noise and compare how the mean and the median remove it, how they treat edges, and their PSNR.
Open demo →Morphology & connected components
Paint a binary image, apply erosion, dilation, opening and closing with a structuring element, and label the connected components.
Open demo →Frequency Domain
Images as sums of sinusoids: sampling and aliasing, the Fourier transform, filtering by multiplication, deconvolution and JPEG compression.
- Sampling & aliasing
- Nyquist
- Anti-aliasing
- 2D Fourier transform
- Magnitude & phase
- Convolution theorem
- Deconvolution
- JPEG / DCT
Aliasing & Moiré
Sample a sinusoid below the Nyquist rate and find its alias frequency, then subsample an image with and without a Gaussian pre-filter and watch moiré appear.
Open demo →Fourier series
Add sine terms one by one to approximate a square, sawtooth or triangle wave, and see how the coefficients decay and why jumps overshoot.
Open demo →2D Fourier transform
An image and its magnitude and phase spectrum: click a frequency to see its basis image, apply low-, high- and band-pass filters, paint out stripe noise and check the convolution theorem.
Open demo →Magnitude vs phase
Combine the Fourier magnitude of one image with the phase of another and see that the phase carries the structure, while magnitude spectra all look alike.
Open demo →Deconvolution
Undo a known blur by dividing in the frequency domain, watch a tiny amount of noise explode, and tame it with a truncated inverse or a Wiener filter.
Open demo →JPEG & the DCT
Inspect the DCT coefficients of 8×8 blocks, quantize them with a quality slider, and watch zeros appear and block artifacts and ringing grow.
Open demo →Edge Detection
Finding rapid changes in intensity: image gradients, why noise calls for smoothing, and the steps of the Canny edge detector.
- Image gradients
- Noise & smoothing
- Derivative of Gaussian
- Non-maximum suppression
- Hysteresis
- Canny
Derivatives & noise
Plot a row of an image with its first and second derivative, add noise until the edges drown, then smooth first and see that this equals filtering with a derivative of Gaussian.
Open demo →Canny edge detector
Follow a pixel through derivatives of Gaussian, gradient magnitude and orientation, non-maximum suppression and hysteresis thresholding, with adjustable σ and thresholds.
Open demo →Corner Detection
Distinctive, repeatable interest points: local autocorrelation, the second moment matrix, the Harris detector and its invariance properties.
- Interest points
- Autocorrelation E(u,v)
- Second moment matrix M
- Harris response
- Invariance & covariance
Autocorrelation surface
Shift a window over flat regions, edges and corners, and compare the change E(u,v) with its quadratic approximation by the second moment matrix M, its ellipse and its eigenvalues.
Open demo →Harris corner detector
Follow a pixel through derivatives, the windowed second moment matrix, the cornerness det(M) − α trace(M)², thresholding and non-maximum suppression, and see all pixels in the λ₁/λ₂ plane.
Open demo →Harris invariance
Change brightness and contrast, shift, rotate and scale an image, detect corners again and measure how many come back: covariant with rotation, not with scale.
Open demo →Feature Matching
Detecting keypoints across scales, describing them with gradient histograms and matching them reliably between images.
- Scale space
- LoG / DoG
- Keypoint refinement
- SIFT descriptor
- Orientation assignment
- Nearest neighbor matching
- Ratio test
Scale space & DoG
Blur an image at growing σ in octaves, subtract neighboring scales, find the extrema in position and scale, and refine and filter them into keypoints whose size follows the image.
Open demo →SIFT descriptor
Follow a keypoint through gradients, the orientation histogram, 4 × 4 histograms of 8 orientations, normalization and clamping, and test the 128 values under rotation, scaling and lighting changes.
Open demo →Matching & ratio test
Match features between an image and a transformed copy with known ground truth, and compare a distance threshold with the nearest neighbor distance ratio.
Open demo →Cameras and Optics
From the pinhole model to real lenses: perspective projection, homogeneous coordinates, intrinsic and extrinsic parameters, field of view and distortion.
- Pinhole model
- Aperture & lenses
- Homogeneous coordinates
- Vanishing points & lines
- Intrinsics K
- Extrinsics [R | t]
- Field of view
- Orthographic projection
- Radial distortion
- Depth of field
Homogeneous coordinates
Points become rays and lines become planes through the origin. Build lines and intersections with cross products and watch parallel lines meet at a point at infinity.
Open demo →Pinhole camera: intrinsics & extrinsics
Move a virtual camera through a 3D scene, change focal length, principal point and skew, and watch K, [R | t] and P = K[R | t] update together with the image.
Open demo →Thin lens & depth of field
Change focal length, aperture and focus distance, follow the circle of confusion of near and far objects, and compare a smartphone with a portrait lens.
Open demo →Vanishing points & horizon
Turn a camera in a 3D scene and follow where parallel lines meet: v = K R d, the horizon as the vanishing line of the ground, and one-, two- and three-point perspective.
Open demo →Focal length, FOV & orthographic projection
Relate AFOV = 2·arctan(H / 2f) to the image, compare perspective, weak perspective and orthographic projection, and try the dolly zoom.
Open demo →Transformations and Calibration
Parametric 2D transformations, least-squares fitting with the SVD, and estimating a camera’s projection matrix from known 3D–2D correspondences.
- 2D transformations
- Affine & projective
- Homography
- SVD
- Least squares & total least squares
- DLT
- Factorizing M into K[R | t]
Epipolar Geometry
The geometry of two views: epipoles, epipolar lines and the essential and fundamental matrices.
- Epipolar constraint
- Essential matrix E
- Fundamental matrix F
- 8-point algorithm
Dense Motion Estimation
Estimating motion between frames: matching error metrics, Lucas–Kanade, coarse-to-fine search, parametric motion and per-pixel optical flow.
- Optical flow vs motion flow
- Aperture problem
- SSD / SAD / robust / NCC
- Lucas–Kanade
- Coarse-to-fine
- Parametric motion
- Regularized flow
Stereo Vision
Depth from two views: disparity and triangulation, rectification, window-based correspondence and stereo as energy minimization.
- Disparity
- Z = f·T / d
- Baseline trade-off
- Rectification
- Window matching
- Scanline stereo
- Energy minimization
Structured Light
Active 3D sensing: projecting known light patterns to make correspondence easy, and measuring depth directly with time of flight.
- Active vs passive
- Light-plane triangulation
- Binary & Gray codes
- Speckle patterns
- Time of flight
Surface Reconstruction
From point clouds to surfaces: aligning scans with ICP, estimating normals, implicit functions and extracting meshes with marching cubes.
- Procrustes alignment
- ICP
- Normal estimation
- Implicit surfaces
- Marching squares / cubes
- Hoppe's method
- TSDF fusion