About This Application
This is a real-time age processing application that uses your webcam to apply "younger" or "older" filters to your face. It's built entirely with vanilla JavaScript, the HTML5 Canvas API, and Google's MediaPipe for advanced face mesh tracking.
How It Works
- Face Tracking: MediaPipe's Face Mesh model detects 478 facial landmarks in real-time to create a precise map of your features.
- "Younger" Effect: This mode simulates youth using photography "soft-focus" techniques. It duplicates the video feed, blurs it heavily, and blends it back using a
screen blend mode to create a glowing skin effect. It also applies a digital blush to the cheeks, tints the lips, and geometrically enlarges the eyes (neoteny).
- "Older" Effect: This mode applies desaturation and texture. It generates a procedural "age spot" noise pattern and overlays it using
multiply blending. Crucially, the texture is anchored to the bridge of the nose and rotates with the face angle, ensuring the spots stick to the skin rather than floating on the screen.
- Wrinkle Simulation: Wrinkles are drawn using quadratic curves based on specific landmarks (forehead, nasolabial folds, crow's feet). They utilize an "emboss" technique—drawing a light line offset from a dark line—to create the illusion of 3D depth.
Future Improvements
- Web Workers: Offloading the heavy canvas rendering to a background thread to prevent UI freezes on mobile devices.
- UV Texture Mapping: Currently, the texture is a flat 2D projection. Using WebGL and UV mapping would allow textures to wrap around the 3D curvature of the nose and chin more realistically.
- Hair Segmentation: The current filter only affects the skin. Future versions could use MediaPipe's selfie segmentation to gray out hair for the "Older" filter.
- Dynamic Physics: Making the skin sag slightly by physically warping the mesh points downwards for the older effect.