70 lines
4.6 MiB
HTML
70 lines
4.6 MiB
HTML
|
<!doctype html><html><head><meta charset="utf-8"><title>Khra'gixx live field</title>
|
|||
|
|
<style>
|
|||
|
|
body{margin:0;background:#0a0a0f;color:#c8c8d0;font-family:ui-monospace,Menlo,monospace}
|
|||
|
|
.wrap{max-width:1100px;margin:0 auto;padding:18px}
|
|||
|
|
h1{font-size:15px;font-weight:600;color:#e6e6ee;margin:0 0 2px}
|
|||
|
|
.sub{font-size:11px;color:#7a7a88;margin-bottom:14px}
|
|||
|
|
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
|
|||
|
|
.panel{background:#12121a;border:1px solid #22222e;border-radius:8px;padding:8px}
|
|||
|
|
.panel h2{font-size:11px;margin:0 0 6px;color:#9a9aae;font-weight:600;letter-spacing:.04em}
|
|||
|
|
canvas{width:100%;image-rendering:pixelated;border-radius:4px;background:#000;aspect-ratio:1}
|
|||
|
|
.err h2{color:#ff9a6a}
|
|||
|
|
.ctl{display:flex;align-items:center;gap:12px;margin:16px 0 6px}
|
|||
|
|
button{background:#1c1c28;color:#d0d0dc;border:1px solid #33334a;border-radius:6px;padding:7px 14px;font:inherit;cursor:pointer}
|
|||
|
|
button:hover{background:#26263a}
|
|||
|
|
input[type=range]{flex:1;accent-color:#ff9a6a}
|
|||
|
|
.meta{font-size:11px;color:#7a7a88}
|
|||
|
|
.cyc{color:#ff9a6a;font-weight:600}
|
|||
|
|
.legend{font-size:10px;color:#66667a;margin-top:8px;line-height:1.5}
|
|||
|
|
</style></head><body><div class="wrap">
|
|||
|
|
<h1>Khra'gixx — the live field, rendered</h1>
|
|||
|
|
<div class="sub">500 real frames captured from port 5561 · cycles <span id="cr"></span> · 32×32 coarse grid · this is the substrate moving, not nine averages</div>
|
|||
|
|
<div class="grid" id="panels"></div>
|
|||
|
|
<div class="ctl">
|
|||
|
|
<button id="play">⏸ pause</button>
|
|||
|
|
<input type="range" id="scrub" min="0" max="499" value="0">
|
|||
|
|
<span class="meta">frame <span id="fn">0</span>/499 · cycle <span class="cyc" id="cyc"></span></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="legend">
|
|||
|
|
Six macroscopic channels + the linear-prediction error (orange). Blue↔red = each channel's own deviation (±3σ).
|
|||
|
|
The <b style="color:#ff9a6a">error panel</b> lights up where the field's next state SURPRISES the constant-velocity predictor —
|
|||
|
|
i.e. where something non-trivial is happening. Smooth dark error = predictable flow. Bright spots = the interesting bits.
|
|||
|
|
Passive predict-test verdict: linear beats persistence by 21% — the field has real short-horizon dynamics.
|
|||
|
|
</div></div>
|
|||
|
|
<script>
|
|||
|
|
const T=500, N=32, CH=6, names=["rho", "ux", "uy", "sxx", "syy", "sxy"], cycles=[86590, 86600, 86610, 86620, 86630, 86640, 86650, 86660, 86670, 86680, 86690, 86700, 86710, 86720, 86730, 86740, 86750, 86760, 86770, 86780, 86790, 86800, 86810, 86820, 86830, 86840, 86850, 86860, 86870, 86880, 86890, 86900, 86910, 86920, 86930, 86940, 86950, 86960, 86970, 86980, 86990, 87000, 87010, 87020, 87030, 87040, 87050, 87060, 87070, 87080, 87090, 87100, 87110, 87120, 87130, 87140, 87150, 87160, 87170, 87180, 87190, 87200, 87210, 87220, 87230, 87240, 87250, 87260, 87270, 87280, 87290, 87300, 87310, 87320, 87330, 87340, 87350, 87360, 87370, 87380, 87390, 87400, 87410, 87420, 87430, 87440, 87450, 87460, 87470, 87480, 87490, 87500, 87510, 87520, 87530, 87540, 87550, 87560, 87570, 87580, 87590, 87600, 87610, 87620, 87630, 87640, 87650, 87660, 87670, 87680, 87690, 87700, 87710, 87720, 87730, 87740, 87750, 87760, 87770, 87780, 87790, 87800, 87810, 87820, 87830, 87840, 87850, 87860, 87870, 87880, 87890, 87900, 87910, 87920, 87930, 87940, 87950, 87960, 87970, 87980, 87990, 88000, 88010, 88020, 88030, 88040, 88050, 88060, 88070, 88080, 88090, 88100, 88110, 88120, 88130, 88140, 88150, 88160, 88170, 88180, 88190, 88200, 88210, 88220, 88230, 88240, 88250, 88260, 88270, 88280, 88290, 88300, 88310, 88320, 88330, 88340, 88350, 88360, 88370, 88380, 88390, 88400, 88410, 88420, 88430, 88440, 88450, 88460, 88470, 88480, 88490, 88500, 88510, 88520, 88530, 88540, 88550, 88560, 88570, 88580, 88590, 88600, 88610, 88620, 88630, 88640, 88650, 88660, 88670, 88680, 88690, 88700, 88710, 88720, 88730, 88740, 88750, 88760, 88770, 88780, 88790, 88800, 88810, 88820, 88830, 88840, 88850, 88860, 88870, 88880, 88890, 88900, 88910, 88920, 88930, 88940, 88950, 88960, 88970, 88980, 88990, 89000, 89010, 89020, 89030, 89040, 89050, 89060, 89070, 89080, 89090, 89100, 89110, 89120, 89130, 89140, 89150, 89160, 89170, 89180, 89190, 89200, 89210, 89220, 89230, 89240, 89250, 89260, 89270, 89280, 89290, 89300, 89310, 89320, 89330, 89340, 89350, 89360, 89370, 89380, 89390, 89400, 89410, 89420, 89430, 89440, 89450, 89460, 89470, 89480, 89490, 89500, 89510, 89520, 89530, 89540, 89550, 89560, 89570, 89580, 89590, 89600, 89610, 89620, 89630, 89640, 89650, 89660, 89670, 89680, 89690, 89700, 89710, 89720, 89730, 89740, 89750, 89760, 89770, 89780, 89790, 89800, 89810, 89820, 89830, 89840, 89850, 89860, 89870, 89880, 89890, 89900, 89910, 89920, 89930, 89940, 89950, 89960, 89970, 89980, 89990, 90000, 90010, 90020, 90030, 90040, 90050, 90060, 90070, 90080, 90090, 90100, 90110, 90120, 90130, 90140, 90150, 90160, 90170, 90180, 90190, 90200, 90210, 90220, 90230, 90240, 90250, 90260, 90270, 90280, 90290, 90300, 90310, 90320, 90330, 90340, 90350, 90360, 90370, 90380, 90390, 90400, 90410, 90420, 90430, 90440, 90450, 90460, 90470, 90480, 90490, 90500, 90510, 90520, 90530, 90540, 90550, 90560, 90570, 90580, 90590, 90600, 90610, 90620, 90630, 90640, 90650, 90660, 90670, 90680, 90690, 90700, 90710, 90720, 90730, 90740, 90750, 90760, 90770, 90780, 90790, 90800, 90810, 90820, 90830, 90840, 90850, 90860, 90870, 90880, 90890, 90900, 90910, 90920, 90930, 90940, 90950, 90960, 90970, 90980, 90990, 91000, 91010, 91020, 91030, 91040, 91050, 91060, 91070, 91080, 91090, 91100, 91110, 91120, 91130, 91140, 91150, 91160, 91170, 91180, 91190, 91200, 91210, 91220, 91230, 91240, 91250, 91260, 91270, 91280, 91290, 91300, 91310, 91320, 91330, 91340, 91350, 91360, 91370, 91380, 91390, 91400, 91410, 91420, 91430, 91440, 91450, 91460, 91470, 91480, 91490, 91500, 91510, 91520, 91530, 91540, 91550, 91560, 91570, 91580];
|
|||
|
|
const raw=Uint8Array.from(atob("d4WBYniFgWJ3hoFid4SBYneFgWJ3hoFidoaBYneFgWLgfT1/3309fOJ+PX7gfT1/3309fOJ+PX3hfT1+4H09foFid4aAYXeFgWJ3h4FidoaAYXeEgWJ3h4Fid4WBYneHPnzjfj194H09fOJ+PXzifT1+4H09feJ+Pn3ifT194n53hYJjd4WBYXeFgWJ3hYFid4aBYneFgWJ3hYFid4WBYt59PX3jfj194X09ft99PX3ifT184X09feJ9PX3hfT1/gGF3hYFid4aAYXaGgWJ3hYFid4WBYneFgWJ3hoFhd4Y9fOF9PX3hfT194X09fOJ9PX7hfT1/3309fOJ9PXzifXaFgmJ3hYFid4WBYneGgWJ3hYFid4aBYneFgWJ2hYFi4n49feJ9PXzhfT184n49feJ9PX3hfT1/4H09feF9PX2BYneFgWJ3hIFid4WBYneGgWJ3hYFid4aBYneGgWJ3hT1+4H09fOJ9PX7gfT194X09feF9PX3hfj194n09fuF9d4aBYneGgmJ3hYBhdoSBYneGgWJ3hIBid4aBYneGgWLifT194X49feJ9PXzhfT1+4H09fuB9PX3hfT594n49fIFidoWBYneHgWJ3hYBid4WBYneGgWJ2hIFid4eBYneGPXzhfT184n4+fuF9PXzifT194n49feF9PX3hfj1+4n13hoFidoSBYneGgWJ3hIFid4aBYneGgmJ2hIFid4aBYuJ+PX3ifT194H09fuJ9PX7ffT1+3309feF9PX3hfj59gWJ3hYFidoaAYXeFgWJ3hoFid4aBYXeGgWJ2hIFid4Y9feJ9PX3ifT193309fON+PX3hfj184n49fuF9PX3hfXeGgWJ3hYFid4WAYXeFgWJ3hYFidoWBYneGgWJ2hYFi4309fuB9PX3hfT184X09fON+PX/gfT194X09feN+PXyBYneGgWJ3hoFid4SBYneFgmJ3hoFidoaBYneFgWJ3hT194n49feF+PX7hfT1+4H09fOJ9PX3hfT1+4H09fuB9d4aCYneFgWJ3hoFid4WAYneGgmJ3hoFid4aBYneGgWLhfj194349fOJ9PXzifj184n49fuJ9PX3gfT1+4H09fYFieIaCY3eFgWJ3hYFid4WBYneGgmJ3hoFid4aBYneFPX7gfj5+4309feF9PX7hfT184n4+fuJ9PXzifT1+4H12hoFidoaCYneEgGJ3hoFid4WBYniGgmJ3hoFidoaBYuJ9PX7gfT1/4X09fOJ9PX3hfT1+330+feN+PX3ifj59gWJ3hoFid4aBYneFgWJ3hYFhd4eBYneGgmJ3hYFid4Y9feJ9PXzifj5+4X09fOF9PXzifT1+4H09f+B9PX3ifmBdlJ9gXZSfYF2Un2BdlJ9gXZSfYFyUn2BclJ9gXZSfQFbDrEBVw61AVcOsQFXCrEBVw65AVcOtQFXDrUBVw6yUn2BclJ9gXJSfYFyUn2BclJ9gXZSfYFyUn2BclJ9gXMOuQFXDrUBVw65AVcOuQFXDrEBWw65BVcOuQFbDrkBVYF2Un2BdlJ9gXZSfYF2Un2BclJ9gXZSfYF2Un2BdlJ9AVsOuQFbDrUBVw6xAVcOtQFXDrkBWw65AVsOtQFXDq5SfYF2Un2BclJ9gXJSfYF2Un2BclJ9gXZSfYFyUn2Bcw65AVsOtQFXDrUBVw65AVsOtQFXDrEBVw61AVcOuQFVgXZSfYF2Un2BdlJ9gXZSfYFyUn2BclJ9gXZSfYF2Un0BWw61BVcOuQFXDrUBVw65AVsOtQFXDrEBVw61AVsOtlJ9gXZSfYF2Un2BdlJ9gXZSfYF2Un2BclJ9gXZSfYF3DrEBVw61AVsOtQFXDrUBVw61AVsOuQFXDrUBVw61AVWBclJ9gXZSfYF2Un2BdlJ9gXJSfYF2Un2BclJ9gXZSfQFXDrkBVw61BVcOuQFXDrEBVw6xBVsOuQFXDrUBVw62Un2BdlJ9gXJSfYF2Un2BclJ9gXJSfYF2Un2BclJ9gXcOtQFbDrkBVw61AVcOuQFXDrUBVw61AVsOtQFXDrUBVYFyUn2BdlJ9gXZSfYF2Un2BdlJ9gXZSfYF2Un2BdlJ9AVcOuQFXDrEBVwq1AVsOsQFbDrEBVwq5AVsOtQFXDrpSfYF2Un2BclJ9gXZSfYFyUn2BclJ9gXJSfYF2Un2Bdw61AVcOuQFXDrEBVw65AVcOtQFXDrkBVw61AVsOtQFVgXJSfYF2Un2BdlJ9gXZSfYF2Un2BdlJ9gXZSfYF2Un0BVwqxAVcOtQFXDrUBVw65AVsOsQFXDrUBVw65AVsOulJ9gXJSfYF2Un2BdlJ9gXZSfYFyUn2BclJ9gXZSfYF3DrUBVw65AVsOtQFbDrEBVw65AVsOtQFXDrEBVw6xAVmBdlJ9gXZSfYF2Un2BdlJ9gXZSfYF2Un2BclJ9gXJSfQFXDrkBWw65AVcKuQFXDrkBVw61AVcOtQFXDrEBVw62Un2BdlJ9gXZSfYF2Un2BdlJ9gXZSfYFyUnmBdlJ9gXcOsQFXCrkBWw61AVcOtQFXDrUBVw61BVcOtQFXDrEBWYFyUn2BdlJ9gXZOfYF2Un2BclJ9gXZSfYFyUn2BclJ9AVcOtQFXDrUBWw65AVcOtQFXDrEBVw65AVcOuQFXDrZSfYF2Un2BclJ9gXZSfYF2Un2BclJ9gXZSfYF2Un2Bdw65AVcOtQFXDrUBWw65AVsOuQFXDrEBVw6xAVsOuQFUwYsWjMGPGozBixaIwYsWjMGPGojBixaIwY8ajMGPGo05as6VOWrOlTlqzpU9asqROWrKmTlqzpU5as6VOWrOlxqMwY8WiL2PGozBjxaIwY8WiMGLFozBjxqIwYsajMGOypU5asqVOWrKlTlqzpU5as6VOWrKmTlqypk5asqZOWjBixaIwYsWjMGLGozBjxaIwY8ajMGLGozBixqMwYsajTlqzpk5asqROWrKkTlqypk5as6VOWrKmTlqzpU5as6XGozBixqMwY8WjMGPFozBixaMwYsajMGPGozBjxqIwY7KlTlqypU9as6ZOWrKlTlqypU5as6VOWrKlTlqypk5aMGLGozBjxaMwYsWjMGLFozBjxqMwY8WiMGPGojBixaJOWrOlTlqypk5asqZOWrKlTlqzpk5as6VOWrKlTlqypcajMGLGojBixqMwYsWjMGLFojBixqMwY8WjMGPFojBjsqROWrKlTlqypU5asqZOWrKlTlqzpk5asqVOWrOlTlowY8ajMGPGojBixqMwY8aiMGPGojBixqMwY8aiMGLGo05as6ZOWrKkTlqypU5asqVOWrKlTlqypk5asqVOWrKlxqMwYsajMGPGojBixqMwY8WjMGPGojBixaIwYsaiMGOypU5asqVOWrKlTlqzpk5as6VOWrKlTlqypk5as6VOWjBjxqMwYsajMGLFojBixaMwYsWjMGLGojBixqMwYsWiTlqypk5as6RPWrOlTlmypU5as6VOWrOlTlqypk5asqbGojBixaIwY8ajL2LFojBjxaMwY8WiMGLGojBjxqMwYrOlTlqypU5as6VOWrKmTlqypU5asqVOWrKlTlqypU5aMGPGojBixaIwY8WjMGLFozBixaMwY8aiMGLFojBjxqNOWrOkTlqypU5asqVOWrKmTlqzpU5as6VPWrOmTlqzpcWiMGPGozBixqIwYsWjMGPGozBjxqIwY8ajMGLFozBisqVOWrOlTlqypU5as6VOWrKlTlqzpU5as6VOWrOlTlowYsajMGLGozBjxqIwYsWjMGLFojBjxqIwY8aiMGPGo05asqVOWrKmTlqzpk5asqVOWrKlTlqypU5asqVOWrKlxaMwY8aiMGLGozBixqMwYsWjMGLFojBjxqIwYsWiMGKzpU5asqVOWrOlTlqzpU5asqVOWrKlTlqzpU5asqVOWjBjxqIwY8aiMGLGozBixqIwY8ajMGPFojBixqIwY8aiTlqypU5as6VOWrKmTlqzpk5asqROWrOmTlqypU5asqXGojBjxqIwYsWiMGLGozBixaMwY8WjMGLGojBixqIwY7OmTlqzpU5
|
|||
|
|
const eraw=Uint8Array.from(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/dFprQG9Yazt1W2g+clhpPHJZajxyV2Y5cFlsQHBYay04JEcqOCJOLDgkSCw5IkkqOSNKLzgkSis4IkkrOSNHWGw+cVdpPG5XbDxuV2s8cVtnPXNcaz5wV2o8clppP3EiTC85I0ksOSFKLzcjSy84I0ssNyRMKzgiSS85IUorOD9vWGs+dFtoO3FYaj1xWWo7cllrPXJZaD1yW2k9clppKTkgTCw5JUotNyJKLDkhSis4I04qOSJKLDkiTSk4JElYajp2XWw8cVhpO3BYajxzWWc9cllrP3BZaTpwV2s8cCJPKzgjSi83JEsrOCJLLDgkSi04IUYtOCJMLjgiTCo4PnBYazxwWWo+c1poPXRYbDxyWWk5cVhoPXFZajp0WmktOSFIMDgiTi04JEosOiJKLzgjSS44JEgrOSJKLzoiSllqO3JYbD5yW2k+cltoO3JaaTpyWmo+clpoOnJbZz5yJE8sOSNLLjkjTSk4IVAqOCRNKzgkTSw5I0stOCJLKjg9cFlqPHJZajtxWmg7cFpqPHFYZz1wWmo+cFhqOnFYais4IUssOSJOLTgiTCo3I08pOCRMKzgkTSw4Ik8rOCNMWWo7c1tpPHFYaz1wWWk/b1htPW9YaT1xWmc6cVhrOXEiTC44IksrOSFKKzghSSw5IkgvOSFMLjkiSi05IEkvOjlwWGo6c1loPnRYaj11Wmk9c1ppQHFYajx0XGk7cVhqLTkiTis3JEYvOCNPKTgjSC44JEgsOCJOKjgiSy04JElZZzxwWGs8cFhqPXFZaDxxWWo9b1lqPG5Zaj5xWGs7cyNMKzgiSS06IksrOSFMLDgjUCo6IkssOCNLKTcjTCs4PnBZZz5yWWg8cVppO29Zaz1xW2k+cVlqO3FYaDxyV20uOCRKKjgjSis4I04qOiJLLjkhSCs5IUwtOSFKLDkjS1hqOm9Yaj1xWGg/cVpnP3FZaztyV2g6cVlqO3NZaDxwI0suOSFMLDghSSo4IkgqNyJNLDgjSi45I0orOCRLLDg7cVlpO3Baaj51W2o+c1pnPHNYaz1wVmg9cVdqPXJZaio5IU4uOCJMLDgkSy44JEsqOCNMKjkkTCw4JEkqOSJNWmo8cFhsPHJbaDxwWWo9clppPXNYbT1wWGs7dFpoPnMiRy04IUsvOCNKKjghSyo4I00qOSNGLzgiTyo5I0oqOD1vV2c7cFhpPHRaaDtzWGs9cFlrPnFXaTpxV208cVhoLjkkSCw5IkgsOCFMLDkhRy05I0ksOSJJLDkhTCs4IktYazxyWGo9clhrPnFYaTxzWmo7b1hpPXVZaj5yWWk8byNLLjglTS
|
|||
|
|
document.getElementById('cr').textContent=cycles[0]+"→"+cycles[T-1];
|
|||
|
|
const panels=document.getElementById('panels'); const cvs=[];
|
|||
|
|
function mk(title,cls){const d=document.createElement('div');d.className='panel'+(cls?' '+cls:'');d.innerHTML='<h2>'+title+'</h2>';const c=document.createElement('canvas');c.width=N;c.height=N;d.appendChild(c);panels.appendChild(d);return c;}
|
|||
|
|
for(let c=0;c<CH;c++)cvs.push(mk(names[c]));
|
|||
|
|
const ecv=mk('prediction error','err');
|
|||
|
|
const ctxs=cvs.map(c=>c.getContext('2d')); const ectx=ecv.getContext('2d');
|
|||
|
|
const imgs=cvs.map(()=>ctxs[0].createImageData(N,N)); const eimg=ectx.createImageData(N,N);
|
|||
|
|
// diverging blue-white-red
|
|||
|
|
function div(v){ // v in [0,255] -> rgb
|
|||
|
|
const t=(v/255)*2-1; // -1..1
|
|||
|
|
if(t<0){const a=-t;return[Math.round(30+ (1-a)*200),Math.round(60+(1-a)*180),Math.round(120+a*135)];}
|
|||
|
|
else{return[Math.round(230),Math.round(230-t*180),Math.round(230-t*200)];}
|
|||
|
|
}
|
|||
|
|
function heat(v){ // 0..255 -> black->orange->white
|
|||
|
|
const t=v/255; const r=Math.min(255,t*3*255), g=Math.min(255,Math.max(0,(t-0.33)*3*255)), b=Math.min(255,Math.max(0,(t-0.66)*3*255));
|
|||
|
|
return[r,g,b];
|
|||
|
|
}
|
|||
|
|
function draw(f){
|
|||
|
|
for(let c=0;c<CH;c++){const off=(f*CH+c)*N*N; const im=imgs[c];
|
|||
|
|
for(let i=0;i<N*N;i++){const [r,g,b]=div(raw[off+i]);im.data[i*4]=r;im.data[i*4+1]=g;im.data[i*4+2]=b;im.data[i*4+3]=255;}
|
|||
|
|
ctxs[c].putImageData(im,0,0);}
|
|||
|
|
const eoff=f*N*N; for(let i=0;i<N*N;i++){const [r,g,b]=heat(eraw[eoff+i]);eimg.data[i*4]=r;eimg.data[i*4+1]=g;eimg.data[i*4+2]=b;eimg.data[i*4+3]=255;}
|
|||
|
|
ectx.putImageData(eimg,0,0);
|
|||
|
|
document.getElementById('fn').textContent=f; document.getElementById('cyc').textContent=cycles[f];
|
|||
|
|
document.getElementById('scrub').value=f;
|
|||
|
|
}
|
|||
|
|
let f=0,playing=true;
|
|||
|
|
const scrub=document.getElementById('scrub'),playb=document.getElementById('play');
|
|||
|
|
scrub.oninput=()=>{f=+scrub.value;draw(f);};
|
|||
|
|
playb.onclick=()=>{playing=!playing;playb.textContent=playing?'⏸ pause':'▶ play';};
|
|||
|
|
function loop(){if(playing){f=(f+1)%T;draw(f);}setTimeout(loop,60);}
|
|||
|
|
draw(0);loop();
|
|||
|
|
</script></body></html>
|