✏️ Computer Vision

Draw and Classify

Draw shapes on a canvas, train a classifier with your own examples, then test it — watching exactly how the AI extracts features and matches your drawing!

✏️ Draw Shapes

🧠 Train Classifier

🔍 Test It!

🧬 Feature Map

🏆 Badge

How Shape Classification Works

✏️

Draw Examples

The classifier needs labelled training examples — multiple drawings of each shape.

🔢

Extract Features

Each drawing is converted into numbers: pixel density, aspect ratio, symmetry, and more.

📏

Nearest Neighbour

For a new drawing, find the most similar training example by comparing feature vectors.

🏷️

Predict Label

The new drawing gets the same label as its closest training neighbour — that's the prediction!

✏️

Wizzy the AI Tutor

Let's collect training data! 🎨 Select a shape label, draw it on the canvas, then click "Save Example". Add at least 3 examples per shape — draw them differently each time (different sizes, positions) to make your classifier robust!

Step 1 — Draw Training Examples

0 examples

Select shape label:

Brush:

8px

📚 Training Examples

💡 Tips:
• Draw 3+ examples per shape
• Vary size and position
• Draw shapes with one stroke
• More examples = better accuracy!

✏️

Wizzy the AI Tutor

Look at your training data! Each drawing is stored as a small 28×28 pixel grid — just like MNIST, the famous handwritten digit dataset that trained countless AI models. The classifier extracts feature vectors from each drawing to compare them.

Step 2 — Your Training Dataset

These thumbnails are your training data — 28×28 pixel representations of each drawing:

✏️

Wizzy the AI Tutor

Draw any shape and see what the classifier predicts! The bars show confidence for each class. Watch how the nearest training example changes as you draw. Does the classifier get it right? Try drawing a shape it's never seen!

Step 3 — Test Your Classifier

Draw to classify

Brush:

8px

🤔

Draw a shape and click Classify

Most similar training example:

Classify a drawing first

🧪 Test Results

Tests run0

Correct0

Your accuracy—

✏️

Wizzy the AI Tutor

This is the feature extraction step — converting your drawing into numbers the AI can compare. We extract: pixel density, aspect ratio, symmetry, corner density, and stroke count. These form a feature vector — a fingerprint for each drawing!

Step 4 — Feature Extraction Visualised

Your last drawing:

Extracted feature vector:

Features are the numbers that represent your drawing to the AI. Two drawings of the same shape should have similar feature vectors!

28×28 downsampled grids (what the AI actually sees):

✏️

Wizzy the AI Tutor

🎊 You've built a real image classifier! You collected training data, extracted features, and used nearest-neighbour classification. This is the foundation of Google's image search, face recognition, medical image diagnosis, and every visual AI system!

✏️

Shape Classifier Badge!

You built a drawing classifier from scratch using feature extraction!

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

✏️ WhizzStep AI Lab

Activity completion card for

Student Name

has built a Drawing Classifier using Computer Vision

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

CV Engineer

Feature Extractor

Shape Classifier

whizzstep.in

Key Concepts Mastered

Training Data

📚 Learning Examples

Labelled examples the AI learns from. More examples → better generalisation to new, unseen inputs.

Feature Extraction

🔢 Numbers from Images

Converting raw pixels into meaningful numbers: density, symmetry, aspect ratio. These are the AI's "observations".

Feature Vector

📐 The Fingerprint

An array of numbers that describes one drawing. Similar shapes have similar feature vectors.

1-NN Classifier

📏 Nearest Neighbour

Find the training example closest in feature space. Classify the new input as its label. Simple but effective!

MNIST

🔢 The Famous Dataset

60,000 handwritten digit images (0–9) that trained the first CNNs. The "hello world" of computer vision.

Generalisation

🌐 Unseen Examples

How well the model performs on drawings it has never seen. More varied training data = better generalisation.

About this lab

AI-08 How AI and Machine Learning Work Classes 6-8 10 min Foundation

Learning objective: Draw a simple shape or digit and watch a simplified classifier guess what it is.

What this simplifies: The recognition model is small and trained on limited examples; accuracy is intentionally imperfect.

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?

← Pixel Detective Back to All Labs Train My Robot →

Bring this learning to my school →