Classical CV Playground
Upload an image and apply traditional computer vision operations step by step with OpenCV.js, from grayscale conversion to contour extraction.
Why classical CV matters
Many computer vision pipelines begin with low-level image processing before any deep model sees the data. Classical methods still matter for preprocessing, inspection, and fast rule-based tasks.
What students can observe
This playground shows how one image changes step by step: grayscale, contrast enhancement, smoothing, binary segmentation, edge detection, morphology, and contour extraction.
What OpenCV.js adds
OpenCV.js brings the OpenCV library into the browser so students can use traditional computer vision tools locally, without needing a Python notebook or backend server.
Image: No image selected yet
Pipeline controls
Contrast and smoothing
Edges and morphology
What students should notice
- Grayscale removes color so intensity can drive later operations.
- Equalization spreads intensities to improve contrast before segmentation.
- Blur smooths noise so thresholding and Canny edges react to stronger structures.
- Thresholding converts continuous brightness into binary regions.
- Erosion and dilation change the shapes of those regions.
- Contours move from binary blobs to explicit boundaries that can be measured.
Histogram and measurements
Measurements appear after OpenCV.js processes an image.
Step-by-step calculations
1. Grayscale
OpenCV collapses RGB into one brightness channel using a weighted average, so later steps can focus on structure rather than color.
Gray = 0.299R + 0.587G + 0.114B
2. Thresholding
Pixels brighter than the chosen threshold become white and the rest become black. This turns continuous intensities into binary regions.
Output = intensity >= 120 ? 255 : 0
3. Canny edges
Canny finds strong intensity changes and keeps edges that pass the low/high threshold pair.
Low = 60, high = 150
4. Morphology
Erosion removes small bright regions. Dilation expands bright regions. Together they can clean up binary shapes.
Kernel = 3x3, erode = 1, dilate = 1
Teaching focus
Deep learning often gets the spotlight, but classical computer vision still matters. Students should see that many pipelines begin with grayscale conversion, smoothing, binary segmentation, morphology, and contour extraction before higher-level recognition happens.
Related Tools
Image Processing Lab
A browser-based image processing teaching lab where students can upload a picture, apply core operations, and inspect the pixel calculations behind each change.
Image Convolution Interactive Tool
Learn CNN-style image convolution with preset kernels, a custom 3x3 matrix editor, pixel-grid calculations, and local image filtering.
CNN Operations Lab - Channels, Padding and Normalization
Upload an image and inspect CNN channels, padding, convolution kernels, ReLU, pooling, normalization, and step-by-step calculations.
Image Segmentation Studio
Generate pixel-level segmentation masks from uploaded images or webcam frames using browser-based computer vision.