lucianoandClaude Fable 5
722bce5036
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>
58 lines
2.2 KiB
HTML
58 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<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' djvres: 'wasm-unsafe-eval'; connect-src 'self' djvres:" />
|
|
<title>DJ Visualizer — Output</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body class="output">
|
|
<!-- LED-wall active area: every layer lives inside; black outside -->
|
|
<div id="stage">
|
|
<canvas id="gl"></canvas>
|
|
|
|
<!-- Video layer (VJ loop) that blends with the generated visuals -->
|
|
<video id="bg-video" class="bg-video" loop muted playsinline></video>
|
|
|
|
<!-- Playlist video track (full screen, with its own audio) -->
|
|
<video id="track-video" class="track-video" playsinline></video>
|
|
|
|
<!-- Image overlay layer -->
|
|
<div id="overlay-images"></div>
|
|
|
|
<!-- Per-track scene image -->
|
|
<img id="scene-image" class="scene-image" />
|
|
|
|
<!-- Two independent, freely-positioned & resizable logos -->
|
|
<img id="logo-0" class="logo" />
|
|
<img id="logo-1" class="logo" />
|
|
|
|
<!-- Scrolling text ticker -->
|
|
<div id="ticker"><div id="ticker-track"><span class="tick-copy"></span><span class="tick-copy"></span></div></div>
|
|
|
|
<!-- Side text: vertical stacked characters scrolling on both edges -->
|
|
<div id="side-text">
|
|
<div class="side-col left"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
<div class="side-col right"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
</div>
|
|
|
|
<div id="drop-hint">
|
|
<div class="big">🎛 In attesa dell'audio…</div>
|
|
<div class="small">Usa il pannello di controllo sull'altro schermo</div>
|
|
</div>
|
|
</div><!-- /#stage -->
|
|
|
|
<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>
|
|
<script src="audio.js"></script>
|
|
<script src="output.js"></script>
|
|
</body>
|
|
</html>
|