Heatmap Photobooth

p5.js Computer Vision Interactive Art Webcam

For this project, I aim to capture the warmth of a communal third space. This Heatmap Photobooth uses motion detection and mic input to influence visual output, creating an interactive experience. Through the heatmap effect, the webcam captures movement, mapping it frame by frame and reflecting an increase in HSB values to signify its “warmth”.

Note: This application requires camera access to function properly. All processing happens locally in your browser - no images are stored or transmitted. Works best in natural lighting / well-lit spaces.

OBJECTIVE:

A Photobooth that creates a heat map effect based on the motion detected by the webcam.

CONTROLS

Sliders

sensitivity: change the sensitivity threshold for motion

zoom: change the pixel sizes and the camera zoom

Buttons

reset motion: allows you to start motion track at 0; restarts

turn mic on and off to change saturation, default is 80%

save image: saves image as a .png to local computer

CREDITS

Based on this article and source code by julesdocx:

Source

Zoom Feature Assisted by TA Thomas

troubleshooting and other elements assisted by ChatGPT

ADDED ELEMENTS

Panel UI (slider and button functionality)

Mic input for Saturation

Zoom and Scaler

>Image Export / saving

Decay effect for pixels

← Back to all projects