- Design, illustration
Feed Me Colors is an interactive, color-reactive website that wants you to feed your (hungry) webcam. Show your webcam objects of different colors to trigger an illustrated narrative.
This project was born out of a desire to explore whimsical alternative interfaces for human-computer interaction. The site encourages users to search their physical environment for colorful items that trigger a digital reaction. When a color is detected, a corresponding illustration animates onto the screen. Each illustration represents an anthropomorphized computer memory that embodies the feeling of the color.
Feed your webcam your favorite red shirt, or pick up your laptop and show it the sky.
- I chose to use tracking.js due to its live color-tracking features and ample documentation. p5.js was optimal for quickly working with images, and played well with tracking.js.
- To guide users in what colors to show their webcam, I made the word "colors" on the info page blink in the hues that trigger illustrations.
- I animated the illustrations onto the screen to add a dynamic, pop-up feeling to the project.
- Rather than having the screen clear after detecting each color, I chose to have the illustrations collage into a cohesive narrative.
- I made the rectangular webcam view a part of the composition so the illustrations would gradually obscure the user’s webcam reflection.
Special thanks to Chandler McWilliams.