Webcam Piano

This project, developed using p5.js and JavaScript, introduces an interactive webcam-based musical experience. Created as part of my exploration into frontend development, it blends real-time video input, dynamic visuals, and audio synthesis to let users trigger piano sounds using their fingertips. The result is a playful browser-based tool that combines creative coding with responsive user interaction.

Not quite ready to compete with Nintendo Wii — but surprisingly fun anyway.

Highlights

• Created with p5.js for real-time rendering and input handling
• Uses webcam to detect finger positions mapped to sound triggers
• Visual piano grid for intuitive interaction
• Responsive keyboard audio mapped to live input
• Hands-on browser-based synthesis and computer vision

Try It