Untangle the complexity.
Webcam inference, game physics, animation, and user feedback all need to remain responsive while keeping the experience understandable and privacy-conscious.
Happy Flappy
A webcam-powered Flappy Bird experiment where smiles increase jump power and sadness makes gravity stronger—all processed locally in the browser.
01
Happy Flappy makes machine learning tangible by turning facial-expression inference into a playful game mechanic with immediate visual feedback.
Design the system.
React coordinates the interface while TensorFlow.js and face-api.js process facial expressions locally. Canvas handles the game loop, collisions, scoring, and responsive rendering.
Make it useful.
A memorable live demo that connects browser APIs, client-side ML, creative interaction design, and accessible privacy messaging.
Core capabilities
- 01Expression-driven jump and gravity mechanics
- 02Local real-time webcam processing
- 03Live emotion and power feedback
- 04Adjustable difficulty and score tracking
Technology system
- 01React
- 02JavaScript
- 03TensorFlow.js
- 04face-api.js
- 05Canvas
- 06Webcam API