In-Class Demo

https://teachablemachine.withgoogle.com/models/hqCJZoYEe/

Assignment Documentation:

For this week’s assignment, my goal is to explore how visual context can mislead perception, even when the information on screen is correct. I trained the Teachable Machine model to recognize three colors, which are: red, green, and blue, through the live webcam input, and connected it to p5.js with ml5.js.

The model’s predictions are displayed as text in the center of the screen. To highlight each detection, I styled the label so that when the system recognizes a color, the word appears larger, bolder, and in the corresponding text color.

The key design was to make the background color conflict with the word shown on screen. When the classifier detects “red,” the background would turn blue; if it predicted “blue,” the background would turn red; and if it predicted “green,” the background would also turn red. This mapping was intentionally misleading because people are visual animals, and a large field of color captures attention faster than words. When the word “blue” appears against a green or red background, the brain receives two contradictory signals, and our brains hesitate because what we see and what we read don’t align.

I also used a smooth transition, instead of switching colors instantly, the background fades gradually using https://p5js.org/reference/p5/lerpColor/ to fade between colors (0-255), but the transitions are not really stable and keep flickering between colors.

Demo:

https://drive.google.com/drive/u/0/my-drive

Reading Reflection:

When I think about image datasets for machine learning, the first thing that stands out is the contradiction between labels and truth. An image by itself can mean many things. But once someone gives a specific word a subjective definition, the system learns that one narrow reading as fact. That single word travels forward into a model and then into real decisions.