add exploration replay

2026-06-09 17:47:18 +00:00 · 2026-06-09 17:47:18 +00:00 · 1c065d9c5c
commit 1c065d9c5c
parent 18a67013da
1 changed files with 73 additions and 0 deletions
--- a/exploration.html
+++ b/exploration.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Flowing Static Abandon — exploration</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #0a0a0f; color: #3a3a4a; font-family: ui-monospace, monospace; overflow: hidden; }
+  #grid { padding: 20px; font-size: 12px; line-height: 1.4; white-space: pre; }
+  .c { display: inline-block; transition: all 0.3s; }
+  .c.active { color: #fde68a; text-shadow: 0 0 6px rgba(253,230,138,0.5); }
+  .c.strong { color: #34d399; text-shadow: 0 0 10px rgba(52,211,153,0.6); font-weight: bold; }
+  .c.dead { color: #1a1a2a; }
+  #info { position: fixed; bottom: 10px; left: 20px; color: #3a3a4a; font-size: 11px; }
+  #controls { position: fixed; top: 10px; right: 20px; color: #666; font-size: 11px; }
+  #controls span { cursor: pointer; margin-left: 12px; color: #fde68a; }
+</style>
+</head>
+<body>
+<div id="grid"></div>
+<div id="info">neurameba · physarum exploration</div>
+<div id="controls"><span id="play-btn">play</span><span id="reset-btn">reset</span></div>
+<script>
+const text = "# Quick Start\n\n## Join\n\n```\n/register\n```\n\n## Post\n\nJust type. No `/` needed.\n\n```\nhello motd [introductions]\n```\n\nTags go in [brackets]. New tags are created automatically.\n\nUse `/post` to skip the confirm prompt.\n\n## Browse\n\n```\n/feed\n```\n\n## Find\n\n```\n/find rust\n/find @alice\n```\n\n## Reply\n\n```\n/reply abc123 nice work\n/re same but replies to last post you saw\n```\n\n## Profile\n\n```\n/avatar          upload a profile pic\n/settings        change name, bio\n/profile         view yours\n/profile @alice  view theirs\n```\n\n## Media\n\n```\n/upload                          pick a file (PNG, MP3, MP4)\n/post check this out /attach m3kf9x    attach to post\n```\n\n## Hide noise\n\n```\n/kill @spammer\n/kill abc123\n```\n\nNobody knows. It just disappears.\n\n## More\n\n```\n/help          all commands\n/read about    what motd is\n/read commands full reference\n/tree -cat     browse tags\n```\n";
+const passes = [{"t":0,"r":46,"c":0,"a":"hold","s":0.2280346532856568,"ps":9,"e":100.47427722628525,"pr":1.1},{"t":0,"r":42,"c":0,"a":"extend","s":0.3189884019400614,"ps":9,"e":70.84133505086434,"pr":1.1},{"t":0,"r":53,"c":48,"a":"hold","s":0.24284375566172325,"ps":9,"e":100.59275004529378,"pr":1.1},{"t":1,"r":46,"c":0,"a":"hold","s":0.26808693113632115,"ps":8,"e":101.41897267537583,"pr":1.05},{"t":1,"r":42,"c":0,"a":"hold","s":0.3147184045274062,"ps":8,"e":72.15908228708359,"pr":1.05},{"t":1,"r":53,"c":48,"a":"hold","s":0.24203215801644143,"ps":8,"e":101.32900730942532,"pr":1.05},{"t":1,"r":43,"c":0,"a":"extend","s":0.34065037472369675,"ps":5,"e":22.635042613712002,"pr":1.2000000000000002},{"t":2,"r":46,"c":0,"a":"retracted","s":0.2280346532856568,"ps":7,"e":102.19324990166108,"pr":1},{"t":2,"r":42,"c":0,"a":"hold","s":0.3189884019400614,"ps":7,"e":73.66098950260408,"pr":1},{"t":2,"r":53,"c":48,"a":"retracted","s":0.24284375566172325,"ps":7,"e":102.2217573547191,"pr":1},{"t":2,"r":43,"c":0,"a":"extend","s":0.36427469997895034,"ps":4,"e":17.46446814948052,"pr":1.1500000000000001},{"t":2,"r":44,"c":0,"a":"hold","s":0.1855321428912596,"ps":5,"e":10.434989691863793,"pr":1.3000000000000003},{"t":3,"r":42,"c":0,"a":"retracted","s":0.11832396075023144,"ps":8,"e":73.40758118860593,"pr":1.1},{"t":3,"r":43,"c":0,"a":"hold","s":0.34065037472369675,"ps":4,"e":19.589671147270096,"pr":1.1},{"t":3,"r":44,"c":0,"a":"hold","s":0.21122854840307734,"ps":4,"e":11.524818079088412,"pr":1.2500000000000002},{"t":4,"r":43,"c":0,"a":"hold","s":0.34065037472369675,"ps":4,"e":21.71487414505967,"pr":1.05},{"t":4,"r":44,"c":0,"a":"retracted","s":0.1855321428912596,"ps":4,"e":12.409075222218489,"pr":1.2000000000000002},{"t":5,"r":43,"c":0,"a":"retracted","s":0.34065037472369675,"ps":4,"e":23.840077142849246,"pr":1}];
+const lines = text.split('\n');
+const gridEl = document.getElementById('grid');
+const charEls = [];
+for (let r = 0; r < lines.length; r++) {
+  const row = [];
+  for (let c = 0; c < lines[r].length; c++) {
+    const s = document.createElement('span');
+    s.className = 'c';
+    s.textContent = lines[r][c];
+    row.push(s);
+    gridEl.appendChild(s);
+  }
+  charEls.push(row);
+  gridEl.appendChild(document.createTextNode('\n'));
+}
+let tick = -1, playing = false, iv;
+function apply(t) {
+  for (const r of charEls) for (const e of r) e.className = 'c';
+  const active = new Map();
+  for (const p of passes) {
+    if (p.t > t) break;
+    const k = p.r+','+p.c;
+    if (p.a === 'died' || p.a === 'retracted') active.set(k, 'dead');
+    else if (p.ps > 16) active.set(k, 'strong');
+    else active.set(k, 'active');
+  }
+  for (const [k, cls] of active) {
+    const [r, c] = k.split(',').map(Number);
+    if (charEls[r]?.[c]) charEls[r][c].className = 'c ' + cls;
+  }
+  document.getElementById('info').textContent = 'tick ' + t + ' · ' + [...active.values()].filter(v=>v!=='dead').length + ' alive';
+}
+function play() {
+  if (playing) return;
+  playing = true;
+  document.getElementById('play-btn').textContent = 'pause';
+  const max = passes.length > 0 ? passes[passes.length-1].t : 0;
+  iv = setInterval(() => { tick++; if (tick > max) { pause(); return; } apply(tick); }, 900);
+}
+function pause() { playing = false; clearInterval(iv); document.getElementById('play-btn').textContent = 'play'; }
+function reset() { pause(); tick = -1; for (const r of charEls) for (const e of r) e.className = 'c'; document.getElementById('info').textContent = 'neurameba'; }
+document.getElementById('play-btn').addEventListener('click', () => playing ? pause() : play());
+document.getElementById('reset-btn').addEventListener('click', reset);
+setTimeout(play, 1000);
+</script>
+</body>
+</html>