Computer Vision

Explore & Discover

Have you ever unlocked a phone with your face or watched a self-driving car video? That's computer vision — teaching machines to see and understand images. Start by exploring Google's Teachable Machine at teachablemachine.withgoogle.com. Without writing a single line of code, you can train a model to recognize hand gestures or objects using your webcam. Try training it to tell the difference between a pencil and a water bottle. Then watch 3Blue1Brown's "But what is a neural network?" on YouTube — it uses beautiful animations to show how computers learn from pictures. Notice how the machine doesn't "see" like you do — it sees numbers. You're ready for the next step when you've trained a Teachable Machine model with at least two categories and watched it make real-time predictions.

Learn the Basics

Computer vision runs on math and data. Learn the basics at Khan Academy's "Computer Science" section, then head to cs.utah.edu — the University of Utah right here in Salt Lake City has free introductory AI videos online. Watch "How Convolutional Neural Networks work" by Brandon Rohrer on YouTube — it's one of the clearest explanations out there. Learn these four key terms: pixel (the tiny colored dots that make up every image), feature (a pattern the model learns to spot, like edges or curves), training data (the labeled images you feed the model), and accuracy (how often it gets the answer right). Practice writing these definitions in your own words. You're ready for the next step when you can explain what a convolutional neural network does and why labeled training data matters, using your own examples.

Build Your First Project

Build your first real image recognition project using ml5.js — a beginner-friendly library that runs in your browser. Go to ml5js.org and open the "Image Classifier" example. It uses a pre-trained model called MobileNet that already knows how to recognize 1,000 objects. Point it at different images and see what it detects. Then try the p5.js web editor at editor.p5js.org (free, no download needed) to write a simple program that loads an image and prints the classification result to the screen. Search YouTube for "ml5.js image classifier tutorial" to find walkthroughs. Your goal: a working program that takes any image file and outputs a guess with a confidence percentage. You're ready for the next step when your ml5.js sketch correctly classifies at least five different images from the internet.

Experiment & Iterate

Now train your own custom image classifier on a topic you care about. Use Teachable Machine again, but this time collect your own image dataset — at least 30 photos per category using your phone or laptop camera. Try something local: photos of Utah juniper trees vs. cottonwood trees, or Salt Lake City street signs vs. park signs. Quality of training data matters more than quantity — varied angles, lighting, and backgrounds make models smarter. Export your trained model and load it into a p5.js sketch using ml5.js. Test it with images it has never seen before. Track your accuracy: if it gets things wrong, figure out why and add more training examples. You're ready for the next step when your custom model achieves at least 80% accuracy on 10 test images it was not trained on.

Advanced Techniques

Take your skills to the next level with real-time object detection. Learn about YOLO (You Only Look Once) — one of the fastest object detection systems ever built. Watch "YOLO object detection explained" on YouTube to understand how it finds multiple objects in a single image in milliseconds. In ml5.js, switch from the image classifier to the COCOSSD object detection example at ml5js.org/reference/object-detector — it can detect 80 different object types live from your webcam. Experiment with drawing bounding boxes around detected objects using p5.js drawing functions. Research how the Utah Department of Transportation uses computer vision for traffic cameras on I-15. You're ready for the next step when you have a working real-time detection sketch that draws labeled boxes around at least three different detected objects simultaneously.

Final Project Showcase

Build a complete computer vision application that solves a real problem and present it publicly. Ideas: a webcam app that detects whether you are wearing safety goggles (useful for school labs), a plant identifier trained on native Utah plants like sagebrush and rabbitbrush, or a sign language letter detector. Document your project in a GitHub repository at github.com — write a README that explains what your app does, how you trained it, and what you would improve with more time. Record a two-minute demo video showing your app working live and post it to YouTube or share it at a school science fair. Get feedback from at least two people outside your household. You're ready for the next step when your project is live on GitHub with a working demo video and you have collected written feedback from two outside reviewers.