This page is really about a different skill. Tracking a laser is the excuse. The
actual lesson is a meta-task: how a teacher and a student, working with an AI, turn
one curious question into a learning path — by asking the AI for the
affordances first, and choosing the next step together.
1 · The first prompt
studentWe have a laser pointer and a
webcam. Can we make the computer follow the dot?
AIBefore I write any code — here is what
this question is made of. Pick where you want to start, and we'll build it up.
The move that matters: the AI answers a problem with affordances, not a
finished program. A finished program teaches nothing and ends the conversation. A map of
what the question is made of lets the student choose the next step — and choosing is the learning.
2 · The foundations this one question opens
AHTML and JavaScript can open a webcamera.
A few lines and the browser can see. No install, no permission from IT — it runs on the
laptop already in the room.
BA webcamera is a series of images.
About 30 pictures a second. You can grab any single frame and look inside it.
CAn image is pixels — and a pixel is just 3 numbers.
Red, Green, Blue. Each channel runs 0 to 255 — which is 256 values, because
0 is a value too.
DWith three colors you can make any color.
256 × 256 × 256 ≈ 16.7 million colors. A laser dot is just a region where those numbers
do something extreme.
Hold on — is it 0 to 255, or 256? Both, and the difference is a real bug waiting to happen.
Each channel has
256 possible values, numbered
0 through 255. Write
for (i = 0; i <= 255; i++) and you visit all 256. Write
i <= 256 and you
just read a pixel that isn't there. This mistake is common enough to have its own joke:
“There are only two hard problems in computer science: cache invalidation, naming
things, and off-by-one errors.”
Count the problems in that sentence.
That's the joke — and it is the bug. Worth
stealing for your classroom: it lands the concept in one line, and students remember it because it's
doing the thing it describes.
3 · The branch point — what can we do to an image?
Each of these is a foundational skill, and each is a different path from the same
question. Green means this page already builds it; grey means it's still open. Click one.
4 · The path we actually took
Three steps, and each stage's failure chose the next one. That's the shape of a
learning path: the failures are the curriculum, not the detours.
1 · Thresholding
too naive — a lamp spoofs it
→
2 · Color filtering
right color, but it jitters
→
3 · Centroid
average all the pixels — steady
→
4 · ?
you pick the next one
Stage 1: Pure Brightness Detection
The simplest way to track a laser is to look for the absolute brightest pixel in the image. Lasers emit concentrated light that often saturates the camera sensor.
How it works & Limitations:
Approach: Loops through every pixel, converts RGB to greyscale brightness, and saves the coordinates of the highest value.
Flaw: Try turning on a room light or holding a white piece of paper. The tracker will instantly jump to it because it cannot differentiate between a laser and general ambient light.