Code Guide

The screen wakes up when you sit in front of the camera and fades to dark when you leave. Your face is the sensor.

This is a prototype of a lamp, heater, or door that knows you're there. The browser stands in for the real object — you're sketching the sensing, not the form.

Open index.html and find the CONFIGURATION section near the top.

• Change WARM_COLOR to '#ff6b6b' for a red glow or '#4ecdc4' for teal
• Set TRANSITION_SPEED to 500 — does instant response feel better or worse?
• What if you added a third state? (hint: check the updateRoom function)
• Add a sound effect when someone arrives

Three zones on screen respond to where you're looking. Turn your head left, center, or right and the matching zone lights up. A golden dot follows your gaze.

This is a prototype of a display, sign, or light that follows your attention. Imagine a classroom where the board brightens when students look at it and dims when they don't.

Find the ZONES array in the config.

• Change the zone labels to match a real room ("Window", "Board", "Door")
• Set SENSITIVITY to 0.1 — very twitchy. Try 0.3 — very deliberate. Which is better?
• Add a fourth zone by expanding the grid and the detection logic
• What if the zones you're NOT looking at dimmed instead?

Hold up your hand and the room responds. Open palm, closed fist, pointing, peace sign — each triggers a different light color. A hand skeleton shows the 21 tracked points.

This is a prototype of a door, appliance, or control surface that reads your hands. No buttons, no touchscreen — the gesture is the interface.

Find the GESTURES object.

• Change the colors for each gesture — make fist = '#ff0000' for red alert
• Set TRANSITION_SPEED to 300 for snappy or 2000 for smooth
• Try adding a new gesture by modifying the classifyGesture function (look at how it checks which fingers are extended)
• Connect to Discord and see your gestures appear in a shared channel

Hold up any printed text — a book, a sticky note, your phone — and the camera reads it. Words get yellow bounding boxes and the recognized text appears on the right.

This is a prototype of a smart shelf, whiteboard, or package scanner — any object that needs to read the world around it.

First load downloads a ~15MB model. After that it's cached and loads instantly.

Find the CONFIGURATION section.

• Change OCR_LANGUAGE to 'spa' and hold up Spanish text
• Lower MIN_CONFIDENCE to 10 to see how much garbled text the model detects
• Good lighting and high contrast (dark text on white paper) makes a big difference
• What if detected text triggered a room response? (e.g., reading "LIGHTS" changes the background)

Train your own ML model with zero code, then paste the link here and the room responds to whatever you trained.

This is the most open-ended lab — you decide what the room detects. You're not using someone else's model, you're defining the categories yourself. That's a design decision.

1. Go to teachablemachine.withgoogle.com and create 2–4 classes (e.g., "Thumbs Up", "Open Palm", "Nothing")
2. Record ~30 samples per class using your webcam
3. Click Train Model (~30 seconds)
4. Click Export Model, then Upload, then copy the shareable link
5. Paste the URL in this lab and click Load Model

Find CLASS_RESPONSES in the config.

• Train a model to recognize objects on your desk (coffee mug, phone, book)
• Train it on poses (hand raised, leaning back, looking at phone)
• Change the icons and colors in CLASS_RESPONSES to match your custom classes
• What happens with bad training data? Try training with only 5 samples vs. 50

Talk to an AI character using text or voice. Pick a character, type a message or hold the mic button and speak, and the character responds with personality and synthesized voice.

This is a prototype of any object that speaks. A narrating room, a talking appliance, a guide that greets you at a door. The character's personality is the design variable.

Your instructor will provide the server URL and login credentials.

• Have a 5-turn conversation and see how the character remembers context
• Try different characters — each has a unique voice and personality
• Hold the mic button for 2–5 seconds, speak clearly, then release
• Ask the character about itself — it responds based on its personality config
• Compare how the same question feels typed vs. spoken

Everything combined. Your webcam detects faces and gestures (Labs 01–03), and an AI character narrates what it sees with voice (Lab 06). Walk in: "Someone just arrived." Show a peace sign: "Ah, the calm gesture." Leave: "The room is empty."

This is the full sketch — a room that sees and speaks. The character's personality changes the entire feeling. A calm narrator makes it meditative. An excitable one makes it unsettling. Same tech, different design.

Same server setup as Lab 06.

You can also toggle face detection and hand detection on/off using the buttons in the UI.

• Pick different characters and see how the same events feel completely different
• Turn off hand detection — now it only narrates presence and attention
• Lower EVENT_COOLDOWN to 4000 — the room won't stop talking
• Toggle auto-narrate off and type directly to the character while the webcam runs
• Design your own character in the Flowstate dashboard and use it as the room's voice