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.