Wave your hand and glowing blobs gather at your fingertips, merging and splitting like mercury. The “viral blob” effect, driven by MediaPipe hand tracking. It reads instantly on camera, which is exactly why it spreads.
Watch the trend
- Interactive Particles & Metaballs in TouchDesigner (YouTube)
- Hand-Tracked Interactive Orbit Gallery, Apr 2026 (YouTube)
Technique base: Air-Drawing Light Painting and Complete Hand Tracking Walkthrough. You need the MediaPipe plugin: download here.
1. Track Fingertips
- Enable the MediaPipe Hand Tracking model.
- With a Select CHOP, grab the X and Y of the five fingertips (and the palm centre).
- Map their normalised coordinates to your canvas. Smooth with a Lag CHOP so the blobs glide.
2. What Is a Metaball?
A metaball is a soft field around a point. Where two fields overlap, they fuse into one smooth blob instead of two circles. We build the field in a GLSL TOP.
- In the shader, for each pixel, sum
radius / distance(pixel, fingertip)over all fingertips. - Threshold the sum: above the cutoff is “inside the blob,” producing organic merged shapes.
- Feed the fingertip positions in as a uniform array from the CHOP.
No code version
If you would rather avoid GLSL, place a soft white Circle TOP at each fingertip, composite them additively, then run a hard threshold plus blur. It is the same idea: soft fields plus a cutoff equals fusing blobs.
3. Make It Liquid Chrome
- Use the blob mask to drive a normal map (from its gradient) and shade it like metal: bright rim, dark core, a reflected environment.
- Add chromatic aberration and bloom for that premium mercury look.
- Optional: feed the blobs through GLSL feedback so they leave a brief liquid trail.
4. Post It
- Mirror the webcam so your motion feels natural.
- Set output to 1080x1920 vertical, hands centred.
- Record a 10 to 15 second clip of playful hand movement and post over trending audio.
Troubleshooting
- “Blobs do not merge.” - Increase the per-fingertip radius so nearby fields overlap before fusing.
- “Edges are jagged.” - Add a small blur after the threshold, or use a smooth (soft) threshold instead of a hard cut.
- “It jitters.” - More Lag on the fingertip CHOP; normalise positions by hand size so it is stable at any distance.
Parameter Tuning & Behavior
| Parameter | Behavior |
|---|---|
| Field radius | Larger = blobs merge eagerly; Smaller = stay as separate dots. |
| Threshold | Higher = small tight blobs; Lower = big gooey mass. |
| Fingertip lag | Higher = slow, liquid follow; Lower = snappy and responsive. |
| Bloom / rim | Higher = glowing chrome; Lower = matte, subtle. |
Network Architecture
[ INPUT ] [ Video Device In TOP ] (webcam, mirrored)
│
▼
[ TRACKING ] [ MediaPipe.tox ] (Hand model)
│
▼
[ POSITIONS ] [ Select CHOP: 5 fingertips ] ──▶ [ Lag CHOP ]
│
▼
[ FIELD ] [ GLSL TOP ] sum(radius / dist) + threshold
│
▼
[ SHADE ] [ normal-from-gradient ] ──▶ chrome shading
│
▼
[ OUT ] [ Bloom ] ──▶ [ Chromatic Aberration ] ──▶ [ OUT 1080x1920 ](y) Return to Trending 2026 | (y) Return to Recipes & Projects | (y) Return to TouchDesigner | (y) Return to Home