Drag the shape itself and watch the maths respond instantly. Every visual element in this lab follows one strict colour code, everywhere, so you never have to guess what a line means.
Tracing the outline
A contour is a connect-the-dots list of (x,y) coordinates — in OpenCV, a NumPy array shaped (N, 1, 2). Hover near the boundary in Deform mode to see a live slice of that exact array.
Contour boundaryConvex hullBounding boxCentroid
Ready.
Live Explanation
Loading…
Drag any of the 10 yellow handles — push a point inward to carve a concavity, pull it outward to sharpen a spike. Hover near the outline (without dragging) for the raw coordinate tooltip.
0%
Solidity
Raw contour array (first few points)
—
Spatial noise
120
Pixelation
off
Epsilon (ε)
0.0
Noise jaggs the traced outline into zig-zags. Pixelation forces it into a diagonal staircase — that staircase is always longer than the true straight edge it approximates, which is why measured perimeter skews upward on blocky/low-res images. ε then runs real Ramer–Douglas–Peucker simplification on whatever came out.
This scene has a genuine 4-level nest: a square containing a hole, containing a circle, containing its own tiny hole. Watch how each retrieval mode sees a completely different structure in the exact same pixels.
OriginalGrayscaleBinaryContours
cv2.findContours only works on a binary image — Original → Grayscale → Threshold → Contours, never straight from colour.
Min area
0
Min solidity
0.00
Roundness tol.
2.00
Challenge: isolate only the round washers. Bolts fail on roundness, gear-stars fail on solidity, noise specks fail on area.
🎉 Solved — every washer is green, nothing else is.
The vocabulary of a shape▾
Area, Perimeter, Centroid
Area is enclosed space, perimeter is boundary length, centroid is the balance point — exact geometry on a clean vector shape, discrete approximations on a pixel-traced one.
Convex Hull & Solidity
The hull is the tightest rubber band around a shape. Solidity = Area ÷ Hull Area — the liquid gauge is literally that ratio, dropping every time you carve a notch.
Retrieval modes
EXTERNAL sees only outer boundaries. LIST sees everything with no relationships. CCOMP flattens everything to exactly two levels. TREE is the only mode that preserves true nesting depth.
Why simplify at all
A contour traced from a noisy, pixelated camera frame can have hundreds of jittery points describing what is really a rectangle. RDP simplification collapses it back to its true handful of corners.
Predict, then verify
You pixelate a perfect circle heavily (large blocks) and measure its perimeter from the blocky traced outline, without simplifying. How does that measured perimeter compare to the true geometric circumference?