Turning Webcam Footage into an Emoji Mood Mosaic with p5.js

For this project, I wanted to experiment with how a camera image could be reinterpreted emotionally rather than visually. Instead of simply displaying a webcam feed, I transformed it into a grid of emojis—each representing a different mood based on the brightness of the original pixel data.

The result is a kind of “emotion filter” where the viewer’s face constantly shifts into different emotional states.

How It Works

The concept is simple:

1. Grab the live video from the webcam.
2. Break the image into a grid of tiles.
3. Calculate the brightness of each tile.
4. Match that brightness to an emoji that represents a certain emotion.
5. Draw the emoji onto a square background.

When you put it all together, the entire video becomes an emoji mosaic that responds in real time to your lighting, movements, and facial expressions.

Changing the Resolution on the Fly

I added a slider so the viewer can adjust the size of the tiles.

Smaller tiles give you a sharper mosaic with more detail, while larger tiles create a chunkier, more abstract look.

This makes the piece feel interactive—even without any buttons or complex UI.