Camera-driven Particle/Hand-tracking Effects in the Browser

Camera-driven Particle/Hand-tracking Effects in the Browser

Camera-driven “sand/particles follow your hand” — Web Examples

A short, linkable list of browser-based projects similar to the TouchDesigner demo (webcam → motion/hand tracking → particle effects).

Live demos / code you can open now

  1. threejs-webcam-particle-visualizer — Three.js particles driven by webcam pixels.
    GitHub: FollowTheDarkside/threejs-webcam-particle-visualizer
  2. Sand ghost (Chrome Experiment) — Uses a displacement map from your webcam to affect particle velocity (WebGL).
    Experiment page: experiments.withgoogle.com/sand-ghost
  3. ASCII portal + hand tracking — Real-time browser effect using Three.js, MediaPipe, and WebGL shaders.
    Post: Reddit /r/webdev Related thread: /r/creativecoding
  4. Three.js webcam material example — Minimal example of using the webcam as a texture; useful as a starting point.
    Examples: threejs.org/examples

Building blocks (libraries & docs)

More inspiration (hand/pose + Three.js)

  • Fruit Ninja with MediaPipe + Three.js — Gesture-controlled browser game example.
    Thread: Reddit post
  • Three.js scene using MediaPipe hand tracking — Discussion and pointers for integrating both.
    Thread: Reddit /r/threejs

Typical browser pipeline (quick reference)

  1. Get webcam stream with getUserMedia().
  2. Run motion or hand tracking (e.g., MediaPipe Hand Landmarker).
  3. Pass mask/landmarks/flow vectors to a particle system (Three.js + shaders).
  4. Map gesture/motion → emitter position, velocity, or force fields.
  5. Add color/gradient/noise post effects; render to screen.

Comments

Post a Comment

Popular posts from this blog

Japan Jazz Anthology Select: Jazz of the SP Era

Image
Saint Louis Blues — W.C. Handy’s iconic early jazz–blues standard, often played with a sturdy two-beat dance feel. Learn more Pagan Love Song — A Tin Pan Alley favorite by Arthur Freed & Nacio Herb Brown, frequently sweetened into a foxtrot. Learn more When It’s Lamp Lighting Time in the Valley — A sentimental waltz-time country ballad that crossed over into light-music repertoire. Learn more Chinrai-bushi — A salon-tinged popular song often adapted by prewar dance bands in Japan. Learn more Kiso-bushi — A graceful folk song from the Kiso region; arrangements highlight its lilting, modal flavor. Learn more Yagi-bushi — A lively festival min’yō from Gunma/Tochigi; its call-and-response suits a buoyant swing. Learn more Yasugi-bushi — A humorous Shimane folk song (famous for the “dojo-sukui” dance) that also works as a jaunty foxtrot. Learn more Taiko-sen (“Boat on Lake Tai”) — A Chinese popular tune widely played in Japan; often given a gentle ...
Read more
Generative Art Libraries and Resources 1. Metaball Libraries and Samples metaballs-js (npm) : A lightweight WebGL-based metaball rendering library. You can freely specify the number of balls, colors, and speed. Paper.js Metaball Demo : The official Paper.js example showing a “viscous” effect via contour calculations on the canvas. Varun.ca Metaballs : An HTML5 canvas/JavaScript demo of metaballs with the algorithm’s formulas explained. Three.js Metaball Slime : A 3D metaball example using Marching Cubes and the Rapier physics engine. Codrops “Drawing 2D Metaballs with WebGL2” : A tutorial for drawing 2D metaballs by hand in WebGL2. 2. Symmetry (Rorschach) Generative Art Symmetry Drawer by aferriss : An editor built on p5.js for drawing with left-right symmetry—perfect for experimenting with ideas. “ : A simple sample that generates patterns by pairing square cells symmetrically. Medium: From Syntax to Symmetry (p5.js) : ...
Read more

In practice, the most workable approach is to measure a composite “civility score” built from multiple indicators.

  1) Model-based indicators (machine learning) Toxicity/Aggression: Use Jigsaw’s Perspective API to obtain probabilities for “TOXICITY,” “INSULT,” “PROFANITY,” “IDENTITY_ATTACK,” etc. Japanese is supported (see the official language table). Politeness: Stanford’s research established a framework for estimating “politeness” from markers like request forms, hedges, honorifics, etc. It’s English-centric, but the methodology can be adapted to Japanese. The R package politeness is also useful. 2) Lightweight rules for Japanese (highly interpretable) Honorific/hedge rate: Ratios of “です/ます,” “〜でしょうか,” “お手数ですが,” “お願いします,” and the like. Presence of slurs/derogatory terms: A custom NG-word list (including figurative or euphemistic forms). Imperatives/strong assertions: Frequency of “〜しろ,” “〜に決まってる,” heavy use of exclamation marks, ALL-KATAKANA bursts, etc. Consideration/evidence markers: Signs of dialogic and verifiable style such as “根拠：,” “出典：,” “もし〜なら.” 3) ...
Read more