Computer Vision Basics

Interactive computer vision fundamentals: https://davidl-11.github.io/Computer-Vision-Basics/

If you found this repository useful, please consider starring it on GitHub.

Available demos

1. Images, Color and Gamma

• Sampling & quantization
• Bayer pattern & demosaicing
• Color space explorer
• Chroma subsampling
• Gamma

2. Image Filtering

• Convolution & correlation
• Gaussian & separability
• Template matching
• Median vs mean filter
• Morphology & connected components

3. Frequency Domain

• Aliasing & Moiré
• Fourier series
• 2D Fourier transform
• Magnitude vs phase
• Deconvolution
• JPEG & the DCT

4. Edge Detection

• Derivatives & noise
• Canny edge detector

5. Corner Detection

• Autocorrelation surface
• Harris corner detector
• Harris invariance

6. Feature Matching

• Scale space & DoG
• SIFT descriptor
• Matching & ratio test

7. Cameras and Optics

• Homogeneous coordinates
• Pinhole camera: intrinsics & extrinsics
• Thin lens & depth of field
• Vanishing points & horizon
• Focal length, FOV & orthographic projection

8. Transformations and Calibration

• 2D transformations

Read the code, too

The algorithms behind the demos are written out by hand instead of calling an image-processing library, so the code is meant to be read alongside the demos. This is a deliberate choice for learning: the implementations favor clarity over speed, while staying fast enough for the image sizes in the demos.

• Each demo keeps its math in a small, pure TypeScript module next to its page, e.g. demos/template-matching/matching.ts or demos/fourier-transform/spectrum.ts. The conventions are documented at the top of each file.
• Building blocks shared by several demos are in src/shared/, e.g. linear filtering in filter.ts, the fast Fourier transform in fft.ts and color conversions in color.ts.
• The *.test.ts file next to each module checks the math against definitions and known results. They are a good place to see what each function is expected to do.