MuhammadLab
Computer VisionBrowser-basedPixel mathImage processingConvolutionStudent lab

Image Processing Lab

Upload a picture, apply core image-processing operations, and study the pixel math behind each transformation in a browser-based computer vision lab.

This lab is designed for teaching. Students can explore cropping, rotation, intensity transforms, blur, thresholding, histograms, color channels, and convolution kernels, then inspect the exact calculations driving the result.

Why this lab matters

Students can see how low-level pixel operations such as blur, thresholding, and convolution change the image before any advanced model tries to interpret it.

What they can learn

This lab connects image editing to computer vision concepts: geometry, intensity transforms, color channels, histograms, smoothing, edge detection, and matrix filters.

How the math is shown

The calculation panel explains brightness, contrast, grayscale, thresholding, and 3x3 kernel multiplication on a selected sample pixel so students can follow the numbers.

Loaded image: None
Status: Loading teaching image...

Controls

Geometry

Intensity and color

Filtering and convolution

Teaching note: Shows the effect of crop, geometry, intensity, and blur without an extra convolution filter.

Histograms and channels

Live calculations

Load an image to see the calculations.

Learning ideas

  • Compare the original image to the difference map to see where the strongest changes happen.
  • Turn on grayscale, then try Sobel X or Sobel Y to connect edge detection to gradients.
  • Use blur before edge detection and discuss why smoothing often helps noisy images.
  • Switch to channels view and ask students why some objects stand out in one channel more than another.
  • Try thresholding after brightness changes to show how binarization depends on intensity distribution.

Core topics covered

Image coordinates and crop rectangles
Rotation and flips
RGB channels and grayscale conversion
Brightness, contrast, and saturation math
Thresholding and binary images
Blur and smoothing
3x3 convolution kernels
Edge detection and sharpening
Histograms and intensity distributions
Difference images for visual comparison

Related Tools

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.

Object Classification Studio

Classify uploaded images or webcam frames using a browser-based MobileNet model, then inspect top predictions and confidence scores.

Image Segmentation Studio

Generate pixel-level segmentation masks from uploaded images or webcam frames using browser-based computer vision.