A real-time image processing app that runs in the browser. It captures the webcam, splits and thresholds colour channels, converts images to the HSV and YUV colour spaces, and detects faces with selectable filters. Built with p5.js; all pixel processing is written by hand.
▶ Try it online (allow camera access)
Face filters (keys 1–4) applied to the detected face:
Screenshots use a still from the public-domain film The Last Man on Earth (1964) as the camera input.
- Live webcam feed with face detection
- Snapshot processing (press
S):- Grayscale with a 20% brightness boost
- Red, green and blue channel separation
- Per-channel thresholding with sliders
- RGB → HSV and RGB → YUV colour space conversion, implemented from the formulas
- Thresholding of the HSV and YUV images with sliders
- Face filters on detected faces: grayscale, blur (3-pass box blur), YUV colour space, pixelate
| Control | Action |
|---|---|
S |
Take a snapshot and run it through the processing pipeline |
1 2 3 4 |
Face filter: grayscale / blur / YUV / pixelate |
| Sliders | Threshold levels for the red, green, blue, HSV and YUV images |
JavaScript · p5.js · objectdetect.js (Haar-cascade face detection)
Try it online, or run it locally by opening index.html with the VS Code Live Server extension. Your browser will ask for camera permission.
Ziad Elhussein