🔍 Computer Vision

Pixel Detective

Zoom into images pixel by pixel, explore RGB channels, and apply real image filters — discovering exactly how computers see and understand images!

🔍 Pixel Explorer

🎨 RGB Channels

⚙️ Image Filters

📊 Pixel Stats

🏆 Badge

How Computers See Images

🔲

Pixels

Every image is a grid of tiny coloured squares called pixels. A 640×480 image has 307,200 pixels!

🎨

RGB Values

Each pixel has three numbers: Red (0–255), Green (0–255), Blue (0–255). These mix to make every colour.

⚙️

Convolution

A small matrix (kernel) slides over the image multiplying pixel values — this creates effects like blur, sharpen, and edge detection.

🧠

CNNs Learn Filters

In deep learning, CNNs learn their own filters automatically from training data — detecting edges, textures, and shapes!

🔍

Wizzy the AI Tutor

Welcome to the Pixel Detective lab! 🎉 An image is just a giant grid of numbers. Click anywhere on the image to inspect that pixel's RGB values. Zoom in to see the individual pixels. Can you find the reddest pixel? The darkest?

Step 1 — Explore Pixels

Choose an image:

Zoom: 1× Click pixel to inspect

👆 Click any pixel to see its RGB values

🔍 Pixel Inspector

Selected colour

#888888

Position (x, y)—

Red channel—

Green channel—

Blue channel—

Brightness—

Hex code—

Click a pixel to see its colour information. Tip: zoom in first to see individual pixels clearly!

🔍

Wizzy the AI Tutor

Every colour image is actually three separate images stacked together — one for Red, one for Green, one for Blue. Bright areas in the Red channel = lots of red in that region. Can you guess which channel makes the sky bright?

Step 2 — RGB Channel Separation

Original Image

Grayscale

🔴 Red Channel

🟢 Green Channel

🔵 Blue Channel

Separating the image into channels...

🔍

Wizzy the AI Tutor

Filters are the secret behind how CNNs detect edges and shapes! A kernel (small number matrix) slides over the image — multiplying and summing values. The Edge Detection filter finds boundaries, and CNNs learn thousands of these filters automatically from training data!

Step 3 — Convolution Filters

Original

Filter Result

Kernel matrix:

Select a filter to see how it transforms the image.

🔍

Wizzy the AI Tutor

This is a histogram — it shows how bright or dark each pixel is. A dark image has most pixels on the left. A bright image on the right. Neural networks often normalise pixel values (divide by 255) to make all inputs between 0 and 1. That's why preprocessing matters!

Step 4 — Pixel Statistics & Histogram

—

Mean brightness

—

Std deviation

—

Max red value

—

Max blue value

Loading statistics...

📊 Brightness Histogram (RGB channels)

🔍

Wizzy the AI Tutor

🎊 You're now a Computer Vision scientist! You understand pixels, RGB values, channels, convolution kernels, and histograms. Every AI that sees the world — self-driving cars, face recognition, medical imaging — starts exactly here. You've cracked the secret of machine sight!

🔍

Pixel Detective Badge!

You explored pixels, separated RGB channels, and applied convolution filters!

Optional. Stays on this device only — not sent to WhizzStep.

🔍 WhizzStep AI Lab

Activity completion card for

Student Name

has explored Computer Vision Fundamentals

This records completion of a browser activity only. It is not an accredited certificate or proof of mastery.

Pixel Detective

RGB Expert

CV Scientist

whizzstep.in

Key Concepts Mastered

Pixel

🔲 Smallest Unit

The smallest element of a digital image. Each pixel stores one colour value — in RGB, that's three numbers.

RGB

🎨 Colour Space

Red, Green, Blue — each from 0–255. Mix all three at 255 to get white. All at 0 gives black.

Convolution

⚙️ Sliding Window

A kernel matrix slides over the image. At each position, it multiplies and sums values, creating a transformed output.

Edge Detection

🔲 Finding Boundaries

Kernels that highlight rapid colour changes. The basis of how CNNs detect object outlines and shapes.

Histogram

📊 Pixel Distribution

Shows the frequency of each brightness level. Used for image analysis, normalisation, and contrast adjustment.

CNN

🧠 Learned Filters

Convolutional Neural Networks learn their own filters from data — detecting edges, textures, and complex patterns automatically.

About this lab

AI-07 How AI and Machine Learning Work Classes 7-9 15 min Foundation

Learning objective: Explore how an image is represented as pixels and numbers, and how a simple model uses that representation to classify it.

What this simplifies: A small set of low-resolution images is used; real computer-vision systems process far higher-resolution data.

Privacy: No learner input leaves the device.

Teacher prompt: Ask the class why this simulation might mislead someone who takes it too literally.

Reflect: What is one thing this activity showed you that you did not expect?

← Pattern Hunter Back to All Labs Draw and Classify →

Bring this learning to my school →