73 lines
27 KiB
HTML
73 lines
27 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>neural mist ascending — 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 = "# Welcome to motd\n\nYour terminal is your timeline.\n\nmotd is a social platform that looks and feels like a terminal. You interact by typing commands. No buttons, no feeds you can't control, no engagement metrics.\n\n## Getting Started\n\n1. `/register` to create an account\n2. `/post hello world` to say something\n3. `/feed` to see what others are posting\n4. `/find` to discover people and topics\n5. `/tree -cat` to browse categories\n\n## Philosophy\n\n- No likes. No follower counts. No vanity metrics.\n- Posts expire. Active for 30 days, archived for 90, then gone.\n- `/kill` hides noise from your view. Silently.\n- Discovery is through `/find` and `/tree`, not algorithms.\n\nType `/read commands` for the full command reference.\n";
|
||
|
|
const passes = [{"t":0,"r":5,"c":0,"a":"died","s":0,"ps":8,"e":100,"pr":1},{"t":0,"r":15,"c":0,"a":"died","s":0,"ps":8,"e":100,"pr":1},{"t":0,"r":17,"c":2,"a":"extend","s":0.5064295800753117,"ps":9,"e":71.89100564842174,"pr":1.1},{"t":0,"r":6,"c":7,"a":"hold","s":0.2974029699144082,"ps":9,"e":101.02922375931527,"pr":1.1},{"t":0,"r":20,"c":0,"a":"died","s":0,"ps":8,"e":100,"pr":1},{"t":1,"r":17,"c":2,"a":"extend","s":0.48186856027111424,"ps":8,"e":52.18216789141346,"pr":1.05},{"t":1,"r":6,"c":7,"a":"hold","s":0.31990881187992565,"ps":8,"e":102.38849425435468,"pr":1.05},{"t":1,"r":18,"c":2,"a":"extend","s":0.5453829707294483,"ps":5,"e":24.096446330611432,"pr":1.2000000000000002},{"t":1,"r":17,"c":3,"a":"hold","s":0.2293889263444954,"ps":5,"e":31.895542402936712,"pr":1.2000000000000002},{"t":2,"r":17,"c":2,"a":"extend","s":0.47639937534302057,"ps":7,"e":38.460354025910334,"pr":1},{"t":2,"r":6,"c":7,"a":"retracted","s":0.2863875484782808,"ps":7,"e":103.62959464218093,"pr":1},{"t":2,"r":18,"c":2,"a":"extend","s":0.5256342158495421,"ps":4,"e":19.391064040185437,"pr":1.1500000000000001},{"t":2,"r":17,"c":3,"a":"hold","s":0.22597543288733501,"ps":4,"e":33.10334586603539,"pr":1.1500000000000001},{"t":2,"r":17,"c":1,"a":"hold","s":0.27753006612023057,"ps":5,"e":23.834026768139044,"pr":1.1500000000000001},{"t":2,"r":18,"c":1,"a":"hold","s":0.28607018926657685,"ps":5,"e":11.865609941537514,"pr":1.3000000000000003},{"t":2,"r":18,"c":3,"a":"hold","s":0.31136305742288517,"ps":5,"e":12.06795288678798,"pr":1.3000000000000003},{"t":3,"r":17,"c":2,"a":"extend","s":0.5075497562401499,"ps":7,"e":29.02952645308207,"pr":1},{"t":3,"r":18,"c":2,"a":"extend","s":0.5103360986343236,"ps":4,"e":16.011626980482017,"pr":1.1},{"t":3,"r":17,"c":3,"a":"retracted","s":0.22312159385691105,"ps":4,"e":34.28831861689068,"pr":1.1},{"t":3,"r":17,"c":1,"a":"hold","s":0.2685252743156696,"ps":4,"e":25.3822289626644,"pr":1.1},{"t":3,"r":18,"c":1,"a":"hold","s":0.2578505077815452,"ps":4,"e":13.328414003789876,"pr":1.2500000000000002},{"t":3,"r":18,"c":3,"a":"hold","s":0.2761975564203217,"ps":4,"e":13.677533338150553,"pr":1.2500000000000002},{"t":3,"r":19,"c":2,"a":"hold","s":0.2776308095974961,"ps":5,"e":9.7815024940023,"pr":1.2500000000000002},{"t":4,"r":17,"c":2,"a":"extend","s":0.4906041387019853,"ps":6,"e":22.438051693888568,"pr":0.95},{"t":4,"r":18,"c":2,"a":"extend","s":0.4936363815817037,"ps":4,"e":13.552502623194952,"pr":1.05},{"t":4,"r":17,"c":1,"a":"retracted","s":0.26843725963604176,"ps":4,"e":26.929727039752734,"pr":1.05},{"t":4,"r":18,"c":1,"a":"retracted","s":0.276734219461543,"ps":4,"e":14.94228775948222,"pr":1.2000000000000002},{"t":4,"r":18,"c":3,"a":"retracted","s":0.3003863772740359,"ps":4,"e":15.48062435634284,"pr":1.2000000000000002},{"t":4,"r":19,"c":2,"a":"hold","s":0.2913045312873565,"ps":4,"e":11.511938744301151,"pr":1.2000000000000002},{"t":4,"r":16,"c":2,"a":"extend","s":0.39927403301224684,"ps":5,"e":10.419792520793203,"pr":1.1},{"t":5,"r":17,"c":2,"a":"extend","s":0.47851979386134075,"ps":5,"e":17.861347031345503,"pr":0.8999999999999999},{"t":5,"r":18,"c":2,"a":"extend","s":0.47748312900687384,"ps":4,"e":11.74065735867496,"pr":1},{"t":5,"r":19,"c":2,"a":"retracted","s":0.26815357083958674,"ps":4,"e":13.057167311017846,"pr":1.1500000000000001},{"t":5,"r":16,"c":2,"a":"extend","s":0.5024143806973174,"ps":5,"e":9.582375296460219,"pr":1.1},{"t":5,"r":17,"c":3,"a":"hold","s":0.17064754288283984,"ps":5,"e":10.231488211872104,"pr":1.05},{"t":5,"r":16,"c":3,"a":"hold","s":0.19710160285023431,"ps":5,"e":5.292438188856105,"pr":1.2000000000000002},{"t":6,"r":17,"c":2,"a":"extend","s":0.5115408787647826,"ps":4,"e":14.947571843024633,"pr":0.8499999999999999},{"t":6,"r":18,"c":2,"a":"extend","s":0.46185845896461614,"ps":4,"e":10.384867521274321,"pr":0.95},{"t":6,"r":16,"c":2,"a":"extend","s":0.4868974373483719,"ps":4,"e":9.014288356673035,"pr":1.05},{"t":6,"r":17,"c":3,"a":"hold","s":0.21542187355462183,"ps":5,"e":11.20486320030908,"pr":1.05},{"t":6,"r":16,"c":3,"a":"hold","s":0.18764489134962856,"ps":4,"e":6.193597319653133,"pr":1.1500000000000001},
|
||
|
|
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>
|