73 lines
66 KiB
HTML
73 lines
66 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Fractal Webs of Perpetual Current — 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":"extend","s":0.400940049733023,"ps":9,"e":71.30026427850493,"pr":1.1},{"t":0,"r":42,"c":0,"a":"extend","s":0.4556977170572306,"ps":9,"e":71.6069072155205,"pr":1.1},{"t":0,"r":53,"c":48,"a":"extend","s":0.4904416784857223,"ps":9,"e":71.80147339952003,"pr":1.1},{"t":1,"r":46,"c":0,"a":"extend","s":0.4600223716679858,"ps":8,"e":51.646310276294166,"pr":1.05},{"t":1,"r":42,"c":0,"a":"extend","s":0.4205603967487107,"ps":9,"e":51.534973272657126,"pr":1.1},{"t":1,"r":53,"c":48,"a":"extend","s":0.5253762503092017,"ps":9,"e":52.25813838139555,"pr":1.1},{"t":1,"r":45,"c":0,"a":"hold","s":0.32140963994059013,"ps":5,"e":32.378533238883975,"pr":1.2000000000000002},{"t":1,"r":43,"c":0,"a":"extend","s":0.35709381974771465,"ps":5,"e":22.95679755524335,"pr":1.2000000000000002},{"t":1,"r":53,"c":47,"a":"extend","s":0.4021692106409539,"ps":5,"e":23.26758959944535,"pr":1.2000000000000002},{"t":1,"r":53,"c":49,"a":"extend","s":0.3974687003773897,"ps":5,"e":23.24126674196939,"pr":1.2000000000000002},{"t":2,"r":46,"c":0,"a":"extend","s":0.3802283907697359,"ps":7,"e":37.546696181716435,"pr":1},{"t":2,"r":42,"c":0,"a":"extend","s":0.409649818370378,"ps":8,"e":37.5285202737341,"pr":1.05},{"t":2,"r":53,"c":48,"a":"extend","s":0.5083129240640097,"ps":8,"e":38.587249241735336,"pr":1.05},{"t":2,"r":45,"c":0,"a":"hold","s":0.32845768478692855,"ps":5,"e":34.256194717179405,"pr":1.2000000000000002},{"t":2,"r":43,"c":0,"a":"extend","s":0.402452018045946,"ps":5,"e":17.79848958972764,"pr":1.2000000000000002},{"t":2,"r":53,"c":47,"a":"extend","s":0.44664381070882375,"ps":5,"e":18.263518059581155,"pr":1.2000000000000002},{"t":2,"r":53,"c":49,"a":"hold","s":0.29031153426032097,"ps":5,"e":24.813759016051957,"pr":1.2000000000000002},{"t":2,"r":47,"c":0,"a":"hold","s":0.35609901710090075,"ps":5,"e":24.232925112361848,"pr":1.1500000000000001},{"t":2,"r":42,"c":1,"a":"hold","s":0.2670409880171352,"ps":5,"e":23.472745020990136,"pr":1.2000000000000002},{"t":2,"r":52,"c":48,"a":"extend","s":0.6234352821250554,"ps":5,"e":18.643679094318976,"pr":1.2000000000000002},{"t":2,"r":43,"c":1,"a":"hold","s":0.30160868317606593,"ps":5,"e":11.501496989084249,"pr":1.3000000000000003},{"t":2,"r":52,"c":47,"a":"extend","s":0.3751502669451935,"ps":5,"e":8.556118374726688,"pr":1.3000000000000003},{"t":2,"r":52,"c":49,"a":"extend","s":0.4506422963528371,"ps":5,"e":8.970976882166704,"pr":1.3000000000000003},{"t":2,"r":53,"c":50,"a":"hold","s":0.3348834158004553,"ps":5,"e":11.889610215819095,"pr":1.3000000000000003},{"t":3,"r":46,"c":0,"a":"hold","s":0.36596166858566115,"ps":6,"e":39.574389530401724,"pr":0.95},{"t":3,"r":42,"c":0,"a":"extend","s":0.42053859851491865,"ps":8,"e":27.784980343297416,"pr":1.05},{"t":3,"r":53,"c":48,"a":"extend","s":0.44559184086324166,"ps":8,"e":28.666388778048887,"pr":1.05},{"t":3,"r":45,"c":0,"a":"retracted","s":0.32185733273867456,"ps":4,"e":36.2310533790888,"pr":1.1500000000000001},{"t":3,"r":43,"c":0,"a":"extend","s":0.3925211861137135,"ps":4,"e":14.237061355046142,"pr":1.1500000000000001},{"t":3,"r":53,"c":47,"a":"extend","s":0.43437840292823526,"ps":4,"e":14.796981698104926,"pr":1.1500000000000001},{"t":3,"r":53,"c":49,"a":"hold","s":0.2851311444771727,"ps":4,"e":26.494808171869337,"pr":1.1500000000000001},{"t":3,"r":47,"c":0,"a":"extend","s":0.6413784504526723,"ps":6,"e":19.924766901188256,"pr":1.2500000000000002},{"t":3,"r":42,"c":1,"a":"extend","s":0.5453411560121063,"ps":6,"e":18.85483198836089,"pr":1.3000000000000003},{"t":3,"r":52,"c":48,"a":"extend","s":0.6682459696262409,"ps":4,"e":16.372752795930232,"pr":1.1500000000000001},{"t":3,"r":43,"c":1,"a":"hold","s":0.2300232758411229,"ps":5,"e":12.591683195813232,"pr":1.3000000000000003},{"t":3,"r":52,"c":47,"a":"extend","s":0.4293335309417009,"ps":6,"e":7.763550635582207,"pr":1.4000000000000004},{"t":3,"r":52,"c":49,"a":"extend","s":0.4616034379849073,"ps":4,"e":8.444663070232172,"pr":1.2500000000000002},{"t":3,"r":53,"c":50,"a":"hold","s":0.33032249908324157,"ps":4,"e":13.932190208485029,"pr":1.2500000000000002},{"t":3,"r":46,"c":1,"a":"hold","s":0.376412832
|
||
|
|
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>
|