Eine Galaxie mit einer Hand bewegen.
Die Webcam schaut auf eine Hand und trackt 21 Landmarks live. Die Galaxie rotiert, wenn du die Faust schliesst, fliegt auseinander und sammelt sich auf deiner Handfläche, wenn du sie öffnest, und zoomt, wenn du Daumen und Zeigefinger zusammenführst. Das ganze läuft in diesem Tab. Keine Daten verlassen den Browser.
MediaPipe Hands · Three.js · 22'000 Partikel auf einer vierarmigen Log-Spirale · braucht Kamera-Zugriff
Kamera-Zugriff erlauben
Wenn der Browser fragt, erlaube den Kamera-Zugriff. Das Video verlässt diesen Tab nie; an den Renderer gehen nur die Koordinaten der Hand-Landmarks. Wenn du den Zugriff nicht geben willst, bleibt die Galaxie unten ein ruhiges Standbild mit einem Hinweis.
Wie das gemacht ist
Zwei Stücke, die zusammenspielen: ein kleines Machine-Learning-Modell aus Googles MediaPipe, das darauf trainiert ist, Hand-Gelenke in Webcam-Bildern zu finden, plus ein Partikel-Renderer, der diese Gelenke in eine 3D-Szene neben der Galaxie übersetzt.
Was MediaPipe macht
Es schaut sich jeden Webcam-Frame an, entscheidet, ob eine Hand drin ist, und gibt 21 (x, y, z)-Koordinaten für die Gelenke zurück. Das Modell läuft komplett im Browser; die Frames gehen nie an einen Server. Aus den Gelenken lesen wir drei Gesten: geschlossene Finger sind Faust, offene Finger sind offene Handfläche, Distanz zwischen Daumen-Tip und Zeigefinger-Tip ist Pinch.
Was die Galaxie ist
Achtzehntausend Partikel auf einer vierarmigen logarithmischen Spirale, dazu viertausend für den zentralen Bulge und dreitausend Hintergrund-Sterne. Der radiale Farb-Gradient läuft von warmem Gold im Zentrum zu kühlem Azur am Rand, in derselben Richtung wie die Milchstrasse in Deep-Sky-Aufnahmen wirklich: alte rote Riesen in der Mitte, heisse blaue O-Sterne in den Spiralarmen.
Wo die Daten landen
Nirgendwo. Der Video-Stream wird in diesem Tab verarbeitet, die Gelenk-Koordinaten gehen direkt an den Renderer. Wir zeichnen nichts auf, speichern nichts, senden nichts. Tab zu, alles weg.
Was als Nächstes kommen könnte
Zwei Hände statt einer für beidhändige Manipulation. Gesichts-Tracking, sodass der Nutzer die Kamera durch Lehnen um die Galaxie bewegen kann. Ein zweiter Modus, in dem die Galaxie durch einen Lorenz-Attraktor oder durch ein Atom mit seinen Orbitalen ersetzt wird. Die Infrastruktur ist da; die nächste Page ist eine Kopie plus ein Szenenwechsel.