Metabolism: rule program, song-driven life, tribe VMs; M2.7 design (strains & allegiances, living wells)

2026-10-28 10:07:05 +01:00
parent 16f4b4a805
commit f939351689
28 changed files with 3199 additions and 601 deletions
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>metabolism — songs as substrate</title>
+  <link rel="stylesheet" href="/src/demo/style.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <div class="brand-mark" aria-hidden="true"></div>
+      <div class="brand-text">
+        <h1>metabolism</h1>
+        <p class="tagline">song in → world out. pick a track, grow its film.</p>
+      </div>
+    </div>
+    <div class="controls">
+      <label class="ctl" title="The seed picks the exact world a song grows. Same song + same seed is the same film, bit for bit.">
+        <span>seed</span>
+        <input id="seed" type="number" min="1" max="4294967295" step="1" value="12345" />
+      </label>
+      <label class="ctl" title="Render resolution. 640×360 is the realtime default; higher is heavier.">
+        <span>res</span>
+        <select id="res">
+          <option value="640x360">640 × 360</option>
+          <option value="960x540">960 × 540</option>
+          <option value="1280x720">1280 × 720</option>
+        </select>
+      </label>
+      <label class="ctl" title="Main volume">
+        <span>vol</span>
+        <input id="volume" type="range" min="0" max="100" step="1" value="90" />
+      </label>
+    </div>
+  </header>
+
+  <main class="layout">
+    <aside class="library">
+      <div class="library-head">
+        <h2>Library</h2>
+        <span id="lib-count" class="muted"></span>
+      </div>
+      <ul id="songs" class="songs"></ul>
+    </aside>
+
+    <section class="stage">
+      <div class="screen">
+        <canvas id="view"></canvas>
+        <div id="overlay" class="overlay" hidden></div>
+      </div>
+
+      <div id="caption" class="caption">…</div>
+
+      <div class="transport">
+        <button id="play" class="play" aria-label="play / pause">▶</button>
+        <div class="seekbar">
+          <div class="track" id="track">
+            <div id="fill" class="fill"></div>
+            <div id="ticks" class="ticks"></div>
+            <input id="seek" class="seek-input" type="range" min="0" max="1000" step="1" value="0"
+                   aria-label="seek" />
+          </div>
+          <div class="times">
+            <span id="t0">0:00</span>
+            <span id="t1">—</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="statusline">
+        <span id="law" class="law">—</span>
+        <span id="shot" class="muted">—</span>
+        <span id="hud" class="muted">—</span>
+      </div>
+
+      <p class="footnote">
+        one run, no clock: the world steps to the song, the camera answers the world, and the
+        same <code>Run</code> renders here and in the export tools. no <code>Math.random</code>,
+        no wall clock — same song · same seed · same frame ⇒ same pixel.
+      </p>
+    </section>
+  </main>
+
+  <script type="module" src="/src/demo/main.js"></script>
+</body>
+</html>