Labs
Every interactive widget from the articles, on its own page. 45 of them. Each one takes an idea you can only half-check by reading and puts its inputs under your hand, which is the fastest way to find out whether you actually understood it.
Nothing is saved and nothing is sent anywhere — every lab runs in your browser. Each page links back to the article the lab was built for.
The image itself
Pixels, colour and the one operation every filter is made of.
One colour per photosite
Throw away two thirds of the colour, then guess it back.
from /sensing-colour-the-bayer-cfa
Hitting the colour a meter measured
Drag the gains and watch ΔE against 22 metered patches.
from /how-close-is-your-colour
Sixteen by twelve real pixels
Hover a pixel, read its index and its three numbers.
from /an-image-is-an-array
Sampling, and the pattern you get instead
Sample a wave too coarsely and a different wave comes back.
from /sampling-the-pixel-grid
Compression, encoded live
Move the quality slider and read a real file size.
from /image-file-formats-and-compression
A photosite filling up
Photons in, electrons collected, one integer out.
from /from-photons-to-counts
The curve between light and code value
Bend the response curve and watch the photograph follow.
from /the-camera-response-curve
Merging a bracket into radiance
Weight the exposures and watch the merged scene converge.
from /high-dynamic-range-imaging
2D convolution, cell by cell
Slide a 3×3 kernel over an 8×8 grid and watch the arithmetic.
from /2d-convolution-on-images
Kernels on a real image
Edit the nine weights and see the filter change the photo.
from /2d-convolution-on-images
One colour, three coordinate systems
Drag R, G, B and read the same colour as grayscale and HSV.
from /image-formation-and-color-spaces
Cutting an object out by colour
Six numbers — the exact ones you would pass to cv2.inRange.
from /image-formation-and-color-spaces
Pixels to a centroid
Paint a binary mask and watch its area and centre of mass move.
from /dip-cv-graphics-timeline
Edges and features
Where one thing stops and another begins, and what is worth pointing at.
An edge, and its two derivatives
One row of pixels, with the first and second derivative stacked underneath.
from /what-is-an-edge
Canny, one stage per panel
Smoothing and the two hysteresis thresholds, on a real photo.
from /canny-edge-detector
Flat, edge, or corner
Drag a window over a photo; two eigenvalues deliver the verdict.
from /corner-detection-harris-shi-tomasi
Picking the right scale
Five discs of different sizes, one sigma slider.
from /scale-space-difference-of-gaussians
Find the same points again
Turn and shrink a harbour photo, and see which points come back.
from /what-makes-a-good-keypoint
Which candidate points survive
SIFT’s contrast and edge tests on 7,053 candidates from one photo.
from /sift-keypoint-detection
How sure must a match be?
Lowe’s ratio test on two photos of a harbour.
from /lowe-ratio-test
Similarity is an angle
Drag one embedding and watch the cosine to a fixed one.
Cameras and geometry
Projection, lenses, pose, two views, and fitting a model to messy points.
Focus, aperture and depth of field
Move the subject and watch the focus plane and the blur follow.
from /lenses-focal-length-depth-of-field
Four ways a fisheye maps angle to radius
Plot r(θ) for the classical designs against a fitted curve.
from /wide-angle-and-fisheye-models
The scene, and what the camera sees
Orbit a 3-D scene on the left; the pinhole view updates on the right.
from /camera-models-pinhole-distortion-calibration-pnp
Straight lines that bow
Brown–Conrady radial and tangential terms on a pixel grid.
from /lens-distortion-vignetting-aberration
Pose from four known points
Chase the observed corners by hand, then let Gauss–Newton do it.
from /what-is-pnp-camera-pose
One point, one line in the other view
Drag a pixel in image A and watch its epipolar line in image B.
from /structure-from-motion-from-scratch
Where the two rays actually meet
Noisy pixels, 300 re-triangulations, one uncertainty cloud.
from /structure-from-motion-from-scratch
A reconstruction you can orbit
7,036 points and 47 cameras from a real structure-from-motion run.
from /structure-from-motion-from-scratch
Which residual does the fit minimise?
Three lines through one painted lane dash, one per definition of distance.
from /line-fitting-least-squares
Let every edge pixel vote
The Hough accumulator in your browser, on a highway, counted the way OpenCV counts.
from /hough-transform
Vote for centres at one radius
The circle Hough transform on a pool table, one radius at a time.
from /hough-circle-transform
Voting the outliers away
Sample two points, count the consensus, repeat until confident.
from /ransac-random-sample-consensus
What a 2×2 does to a court
Four numbers move the whole plane, and parallel lines never meet.
from /2d-image-transforms
Homography from your own point pairs
Click a point on the court, then on the photo. Four pairs, and the browser solves H.
from /compute-homography-dlt
A homography on a real court
Drag four corners: lines, vanishing points, the DLT and a live bird’s-eye warp.
from /what-is-a-homography
Metrics
Every score in the field, with the counts under your hand.
Precision, recall and the threshold
Edit the four counts, or drag a threshold and trace the PR and ROC curves.
from /classification-metrics-foundations
IoU and Dice, by dragging boxes
Two draggable boxes; intersection, union and both scores update live.
from /segmentation-metrics-iou-dice
Macro, micro and weighted, side by side
An editable C×C confusion matrix with per-class F1 drawn as bars.
from /multiclass-multilabel-metrics
When one photo carries several labels
Toggle predicted tags and watch subset accuracy punish you.
from /multiclass-multilabel-metrics
FID in one dimension
Two bell curves, one distance.
from /image-generation-metrics-fid
MOTA, IDF1 and HOTA
Three panels, three formulas, one set of errors.
from /object-tracking-metrics
Detectors and trackers
What happens inside a detection head, and how identities survive a frame.
Matching detections to tracks
Drag next frame's boxes and watch identities follow — or swap.
A box edge as a distribution
Paint the 17 bins and watch the decoded edge move.
from /yolo-nas-without-super-gradients
Reading a detector's module graph
Rows are execution steps; columns are feature-map resolution.
from /yolo-nas-without-super-gradients