Body tracking: head/hands/feet drive the interactive families

MediaPipe PoseLandmarker (BlazePose lite) integrated fully offline: the
WASM runtime and the bundled .task model are served to the renderer over
a new djvres:// protocol (fetch does not work on file://), with
'wasm-unsafe-eval' added to the output CSP. pose.js exposes PoseTracker;
interactive.js detects at ~30 Hz, maps landmarks into mirrored
cover-fitted screen space and smooths them with velocities.

Upgrades when a body is tracked (silent fallback to motion otherwise):
- all physical modes: moving head/hands/feet stamp precise motion blobs
- Sciame: the swarm follows your head
- Interattivo Modello: hand swipes spin the robot, it leans toward your
  head, raising a hand fast makes it jump
- Silhouette: neon skeleton (bones + joints + glowing head) over the
  electric outline

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Fable 5 committed 2026-07-30 18:31:11 +02:00
1 parent 7f0e8b94a7
commit 722bce5036
7 files changed
+217 -14

No files matched your search

+3 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src 'self' blob: data: file:; media-src 'self' blob: file:; style-src 'self' 'unsafe-inline'; script-src 'self'" />
content="default-src 'self'; img-src 'self' blob: data: file:; media-src 'self' blob: file:; style-src 'self' 'unsafe-inline'; script-src 'self' djvres: 'wasm-unsafe-eval'; connect-src 'self' djvres:" />
<title>DJ Visualizer — Output</title>
<link rel="stylesheet" href="style.css" />
</head>
@@ -46,6 +46,8 @@
<script src="shaders.js"></script>
<script src="effects.js"></script>
<script src="fluid.js"></script>
<script src="../node_modules/@mediapipe/tasks-vision/vision_bundle.js"></script>
<script src="pose.js"></script>
<script src="interactive.js"></script>
<script src="model3d.js"></script>
<script src="visualizer.js"></script>