Academic

Webcam Game Filters (Graphics Programming Finals)

2025 · 4 weeks

Grade · 86/100

About this project

A real-time computer-vision playground built in p5.js + ml5.js for the Graphics Programming Finals (University of London). The app processes live webcam input with multiple filters and an interactive pattern-lock game driven by hand-gesture detection. Features: 📸 Webcam capture with snapshot, 160×120 min resolution pipeline 🎨 Image processing: grayscale + brightness boost, RGB channel split with threshold sliders, CMY conversion, YCbCr conversion for luminance/chrominance separation 🙂 Live face detection with bounding boxes and per-face filters (grayscale, blur, CMY, pixelation) via keyboard shortcuts ✋ Hand-gesture pattern-lock mini-game: users trace heart, ribbon, and zigzag patterns with their index finger 🎚️ Performance-optimised blur (full-image blur, then face extract) to avoid harsh edges Going beyond the spec: - Pattern-lock extension combining memory and gesture control — usable as a group icebreaker - Custom YCbCr colour targeting tuned for better blue/red tone separation - Face-region-only filtering except for blur, which required a different approach to avoid harsh edges

Tech stack

• p5.js
• ml5.js
• JavaScript
• HTML5
• Computer Vision