Spack-O-Mat 2 by Mandelbrötchen
# Ikosaeder + Skelett Ein reines HTML/JS-Projekt (ohne Framework). Es extrahiert mit **MediaPipe Pose (Google)** ein Skelett aus dem Kamerabild und rendert dahinter ein animiertes **3D-Ikosaeder-Fraktal** per **GLSL / WebGL** Raymarching. ## Funktionen - **3D-Ikosaeder-Fraktal** als Vollbild-Hintergrund (echte Ikosaeder-SDF, in GLSL iteriert). - **Skelett-Erkennung** in Echtzeit aus der Webcam via MediaPipe Pose. - **Alternierende Rotationsachsen**: Die Rotationsformel nutzt pro Iteration ZWEI aufeinanderfolgende Koerper-Achsen (`i` und `i+1`). Die Achsen werden zyklisch durchgewechselt, bis alle genutzt sind, dann wieder von vorne; die Indizes werden per `mod` geklammt, damit es passt. - Iteration 1 -> Achse 1 + 2, Iteration 2 -> Achse 2 + 3, Iteration 3 -> Achse 3 + 1, ... - Achse 1: Schulterlinie - Achse 2: Wirbelsaeule (Schultermitte -> Hueftmitte) - Achse 3: Blickrichtung (Kreuzprodukt der ersten beiden) - **Interaktiv**: Die Pose steuert das Fraktal. - Handhoehe -> Faltwinkel pro Iteration (Form). - Kopfposition -> Kamera-Rotation. - Handbewegung -> Glow/Leuchten. - Kamerabild ein-/ausblendbar (Button unten links). ## Dateien - `index.html` ΓÇô Aufbau, laedt MediaPipe via CDN. - `style.css` ΓÇô Layout der drei Ebenen (Fraktal, Video, Overlay). - `webgl.js` ΓÇô WebGL-Renderer mit dem GLSL-Ikosaeder-KIFS-Shader. - `main.js` ΓÇô Kamera + MediaPipe Pose + Skelett-Overlay + Steuerung. ## Starten Die Webcam-API (`getUserMedia`) und die CDN-Skripte erfordern, dass die Seite ueber `http(s)` oder `localhost` ausgeliefert wird ΓÇô ein direktes Oeffnen per `file://` funktioniert i.d.R. **nicht**. Lokalen Server starten, z. B.: ```bash # Python python -m http.server 8000 # oder Node npx serve . ``` Dann im Browser oeffnen: <http://localhost:8000> Beim ersten Start den **Kamerazugriff erlauben** und sich vor die Kamera stellen. ## Hinweise - Eine Internetverbindung ist noetig (MediaPipe-Modelle & Libs werden vom CDN geladen). - Bei schwacher GPU kann die Render-Aufloesung in `webgl.js` (`resize()`, Variable `scale`) reduziert werden.
[ back to the prod ]