index.html

<!doctype html>
<!-- SPDX-License-Identifier: Apache-2.0 -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark">
  <meta name="description" content="GALAXY Barnes-Hut self-gravity laboratory: a deterministic planar N-body quadtree with leapfrog integration and direct-force error probes.">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'none'">
  <title>GALAXY · N-body simulator</title>
  <link rel="stylesheet" href="barnes-hut.css">
  <script defer src="barnes-hut.js"></script>
  <script defer src="nbody-clock.js"></script>
  <script defer src="nbody-viz.js"></script>
</head>
<body>
  <header class="masthead">
    <div>
      <p class="eyebrow">QSOL-IMC / LIVE N-BODY SIMULATOR</p>
      <h1>GALAXY</h1>
    </div>
    <nav><a href="rotation-lab.html">Rotation-law instrument</a><a href="barnes-hut.html">Tree laboratory</a><a href="https://github.com/QSOLKCB/GALAXY">Source ↗</a></nav>
  </header>

  <main class="layout">
    <section class="field-panel" aria-label="Barnes-Hut N-body simulation">
      <div class="heading-row">
        <div><p class="eyebrow">FEWER BODIES. REAL GRAVITY.</p><h2 id="presetTitle">Binary disc encounter</h2></div>
        <span id="runBadge" class="chip">RUNNING</span>
      </div>
      <div class="canvas-wrap">
        <canvas id="nbodyCanvas" tabindex="0" width="1280" height="800" aria-label="Planar self-gravitating N-body system with optional Barnes-Hut quadtree overlay"></canvas>
        <div class="overlay top"><span id="thetaBadge">θ 0.50</span><span id="fpsReadout">— FPS</span></div>
        <div class="overlay bottom"><span>SELF-GRAVITY / LEAPFROG</span><span id="timeReadout">STEP 0</span></div>
      </div>
      <div class="transport">
        <button id="playToggle" class="primary" type="button">Pause</button>
        <button id="singleStep" type="button">Single step</button>
        <button id="reset" type="button">Reset</button>
        <button id="fitView" type="button">Fit view</button>
        <span class="gesture-note">Drag to orbit · scroll to zoom · space to pause</span>
      </div>

      <div class="readouts">
        <div><span>BODIES</span><strong id="bodyReadout">—</strong><small>resident, mutually coupled</small></div>
        <div><span>TREE NODES</span><strong id="nodeReadout">—</strong><small id="depthReadout">— depth</small></div>
        <div><span>FORCE TERMS</span><strong id="termReadout">—</strong><small id="reductionReadout">— vs direct</small></div>
        <div><span>PROBE RMS ERROR</span><strong id="errorReadout">—</strong><small>12 direct-force probes</small></div>
      </div>

      <p id="viewStatus" class="hint" role="status">768 bodies, each contributing mass. Glow and trails add depth without adding gravitational work.</p>
      <details class="note">
        <summary>Real gravity, a little optical theatre</summary>
        <p>Every displayed body participates in this planar N-body simulation. A deterministic Barnes–Hut quadtree approximates distant mass; a kick–drift–kick leapfrog integrator evolves positions and velocities. Bodies can pull, scatter and form tidal structures instead of following prescribed orbits.</p>
        <p>Soft luminous sprites and short position-history trails make a modest population look rich. They add no mass or hidden simulated stars. The 3D-looking inclination is a projection of a 2D physical system, in normalized units with G = 1.</p>
        <p>Physics targets 60 fixed steps per second at 1× speed. Under load it slows down rather than increasing the integration step or changing the population. This browser view is separate from the native GPU evidence programme.</p>
      </details>
    </section>

    <aside class="controls" aria-label="Barnes-Hut controls">
      <section>
        <h2><span>00</span> Initial condition</h2>
        <label>Preset
          <select id="preset">
            <option value="collision">Binary disc encounter</option>
            <option value="disc">Single rotating disc</option>
            <option value="cold">Cold collapse</option>
          </select>
        </label>
        <label>Resident bodies <output id="countValue" for="count">768</output>
          <input id="count" type="range" min="128" max="2048" step="128" value="768">
        </label>
        <label>Seed <input id="seed" type="number" min="1" max="4294967295" step="1" value="303"></label>
      </section>

      <section>
        <h2><span>01</span> Tree force</h2>
        <label>Opening angle θ <output id="thetaValue" for="theta">0.50</output>
          <input id="theta" type="range" min="0" max="1.2" step="0.05" value="0.5">
        </label>
        <label>Softening ε <output id="softeningValue" for="softening">0.030</output>
          <input id="softening" type="range" min="0.001" max="0.12" step="0.001" value="0.03">
        </label>
        <label>Leaf bucket <output id="bucketValue" for="bucket">4</output>
          <input id="bucket" type="range" min="1" max="16" step="1" value="4">
        </label>
        <label class="check"><input id="showTree" type="checkbox"> Draw quadtree cells</label>
        <label>Tree overlay depth <output id="treeDepthValue" for="treeDepth">5</output>
          <input id="treeDepth" type="range" min="1" max="9" step="1" value="5">
        </label>
      </section>

      <section>
        <h2><span>02</span> Integrator</h2>
        <label>Time step <output id="dtValue" for="dt">0.0040</output>
          <input id="dt" type="range" min="0.0005" max="0.012" step="0.0005" value="0.004">
        </label>
        <label>Simulation speed <output id="stepsValue" for="steps">1×</output>
          <input id="steps" type="range" min="1" max="4" step="1" value="1">
        </label>
        <p class="hint">Smaller θ opens more cells and approaches direct summation. θ = 0 disables aggregate acceptance but still traverses the tree.</p>
      </section>

      <section>
        <h2><span>03</span> View</h2>
        <label>Inclination <output id="tiltValue" for="tilt">38°</output>
          <input id="tilt" type="range" min="0" max="80" step="1" value="38">
        </label>
        <label>Orientation <output id="rotationValue" for="rotation">−18°</output>
          <input id="rotation" type="range" min="-180" max="180" step="1" value="-18">
        </label>
        <label>Zoom <output id="zoomValue" for="zoom">1.0×</output>
          <input id="zoom" type="range" min="0.3" max="3" step="0.1" value="1">
        </label>
        <label>Starlight <output id="lightValue" for="light">1.0×</output>
          <input id="light" type="range" min="0.4" max="2" step="0.1" value="1">
        </label>
        <label class="check"><input id="trails" type="checkbox" checked> Short orbital trails</label>
        <p class="hint">View controls change presentation only. Reduce resident bodies to reduce force computation.</p>
      </section>

      <section>
        <h2><span>04</span> Audit</h2>
        <button id="audit" type="button">Pause &amp; check forces</button>
        <p id="auditStatus" class="hint">The probe compares 12 deterministic bodies against exact all-pairs forces over the full resident set.</p>
      </section>
    </aside>
  </main>
  <footer>GALAXY N-body simulator · normalized planar coordinates · Newtonian point-mass force with Plummer-style softening</footer>
</body>
</html>