demo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RigidFlightLab — 6-DOF Spin-Stabilized Projectile Simulator (Demo)</title>
<link rel="icon" href="data:,">
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<style>
  :root {
    --surface-1:      #fcfcfb;
    --page-plane:     #f9f9f7;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --gridline:       #e1e0d9;
    --baseline:       #c3c2b7;
    --series-1:       #2a78d6;
    --border:         rgba(11,11,11,0.10);
    --banner-bg:      #fdf3e7;
    --banner-border:  #eda100;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --surface-1:      #1a1a19;
      --page-plane:     #0d0d0d;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --text-muted:     #898781;
      --gridline:       #2c2c2a;
      --baseline:       #383835;
      --series-1:       #3987e5;
      --border:         rgba(255,255,255,0.10);
      --banner-bg:      #2a2110;
      --banner-border:  #c98500;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--page-plane);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
  h1 { font-size: 1.6rem; margin: 0 0 4px; }
  .subtitle { color: var(--text-secondary); margin: 0 0 20px; font-size: 0.95rem; }
  .banner {
    background: var(--banner-bg);
    border: 1px solid var(--banner-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 28px;
    line-height: 1.5;
  }
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
  }
  .stat-tile {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .stat-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .chart-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 16px;
  }
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 720px) {
    .grid-2 { grid-template-columns: 1fr; }
  }
  section h2 {
    font-size: 1.05rem;
    margin: 32px 0 12px;
    color: var(--text-primary);
  }
  footer {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
  }
  a { color: var(--series-1); }
  #loading { color: var(--text-muted); padding: 40px 0; }
</style>
</head>
<body>
<div class="wrap">
  <h1>RigidFlightLab</h1>
  <p class="subtitle">6-DOF spin-stabilized projectile simulator — static demo of the nominal 155&nbsp;mm academic example case</p>

  <div class="banner">
    <strong>Academic simulation — published-benchmark reproduction and numerical-methods education only.</strong>
    Not for operational use. Not validated for real-world fire-control. This page has no target-coordinate
    input, aim correction, or fire-control capability — it renders one pre-computed example trajectory for
    illustration. Run the interactive Streamlit GUI locally to explore your own inputs
    (see <a href="../README.md">README</a>).
  </div>

  <div id="loading">Loading trajectory data…</div>
  <div id="content" style="display:none">
    <div class="stats" id="stats"></div>

    <section>
      <h2>3D trajectory</h2>
      <div class="chart-card"><div id="chart-3d" style="height:480px"></div></div>
    </section>

    <section>
      <h2>Time histories</h2>
      <div class="grid-2">
        <div class="chart-card"><div id="chart-altitude" style="height:320px"></div></div>
        <div class="chart-card"><div id="chart-velocity" style="height:320px"></div></div>
        <div class="chart-card"><div id="chart-pitch" style="height:320px"></div></div>
        <div class="chart-card"><div id="chart-spin" style="height:320px"></div></div>
        <div class="chart-card"><div id="chart-alpha" style="height:320px"></div></div>
        <div class="chart-card"><div id="chart-mach" style="height:320px"></div></div>
      </div>
    </section>
  </div>

  <footer>
    Default case: 155&nbsp;mm caliber, 43&nbsp;kg mass, 684.3&nbsp;m/s muzzle velocity, 175.48&nbsp;rev/s
    muzzle spin rate, 44&deg; elevation, with the published Table&nbsp;1 aerodynamic coefficients —
    from Khalil, Abdalla &amp; Kamal (2009), "Dispersion Analysis for Spinning Artillery Projectile"
    (ASAT-13), the paper this project reproduces. This trajectory matches the paper's own published
    flight time (~66.7&nbsp;s), summit altitude (~5750&nbsp;m), and deceleration (-4.45&nbsp;g) closely —
    see <a href="model.md#validation-against-the-published-results">docs/model.md — Validation</a>.
  </footer>
</div>

<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const css = getComputedStyle(document.documentElement);
const colors = {
  surface: css.getPropertyValue('--surface-1').trim(),
  text: css.getPropertyValue('--text-primary').trim(),
  muted: css.getPropertyValue('--text-muted').trim(),
  grid: css.getPropertyValue('--gridline').trim(),
  baseline: css.getPropertyValue('--baseline').trim(),
  series: css.getPropertyValue('--series-1').trim(),
};

const baseLayout = {
  paper_bgcolor: colors.surface,
  plot_bgcolor: colors.surface,
  font: { color: colors.text, family: 'system-ui, -apple-system, Segoe UI, sans-serif', size: 12 },
  margin: { l: 56, r: 20, t: 36, b: 44 },
  xaxis: { gridcolor: colors.grid, linecolor: colors.baseline, zeroline: false },
  yaxis: { gridcolor: colors.grid, linecolor: colors.baseline, zeroline: false },
};

function lineChart(divId, x, y, title, xlabel, ylabel) {
  Plotly.newPlot(divId, [{
    x, y, type: 'scatter', mode: 'lines',
    line: { color: colors.series, width: 2 },
    hovertemplate: `${xlabel}: %{x:.2f}<br>${ylabel}: %{y:.2f}<extra></extra>`,
  }], Object.assign({}, baseLayout, {
    title: { text: title, font: { size: 13 } },
    xaxis: Object.assign({}, baseLayout.xaxis, { title: xlabel }),
    yaxis: Object.assign({}, baseLayout.yaxis, { title: ylabel }),
  }), { displayModeBar: false, responsive: true });
}

fetch('assets/demo_trajectory.json')
  .then(r => r.json())
  .then(d => {
    document.getElementById('loading').style.display = 'none';
    document.getElementById('content').style.display = 'block';

    const s = d.summary;
    const stats = [
      ['Time of flight', s.time_of_flight_s.toFixed(1) + ' s'],
      ['Range', (s.range_m/1000).toFixed(2) + ' km'],
      ['Cross-range', s.cross_range_m.toFixed(0) + ' m'],
      ['Max altitude', (s.max_altitude_m/1000).toFixed(2) + ' km'],
      ['Muzzle spin', s.muzzle_spin_rps.toFixed(1) + ' rev/s'],
      ['Impact spin', s.impact_spin_rps.toFixed(1) + ' rev/s'],
    ];
    document.getElementById('stats').innerHTML = stats.map(([label, value]) => `
      <div class="stat-tile">
        <div class="stat-label">${label}</div>
        <div class="stat-value">${value}</div>
      </div>`).join('');

    Plotly.newPlot('chart-3d', [{
      x: d.x, y: d.y, z: d.z, type: 'scatter3d', mode: 'lines',
      line: { color: colors.series, width: 4 },
      hovertemplate: 'downrange: %{x:.0f} m<br>cross-range: %{y:.0f} m<br>altitude: %{z:.0f} m<extra></extra>',
    }], Object.assign({}, baseLayout, {
      title: { text: 'Flight path', font: { size: 13 } },
      scene: {
        xaxis: Object.assign({}, baseLayout.xaxis, { title: 'Downrange (m)' }),
        yaxis: Object.assign({}, baseLayout.yaxis, { title: 'Cross-range (m)' }),
        zaxis: Object.assign({}, baseLayout.yaxis, { title: 'Altitude (m)' }),
        bgcolor: colors.surface,
      },
    }), { displayModeBar: false, responsive: true });

    lineChart('chart-altitude', d.t, d.z, 'Altitude vs flight time', 'Time (s)', 'Altitude (m)');
    lineChart('chart-velocity', d.t, d.vel_mag, 'Velocity magnitude vs flight time', 'Time (s)', 'Velocity (m/s)');
    lineChart('chart-pitch', d.t, d.theta_deg, 'Pitch angle vs flight time', 'Time (s)', 'Pitch angle (deg)');
    lineChart('chart-spin', d.t, d.p_rps, 'Spin rate vs flight time', 'Time (s)', 'Spin rate (rev/s)');
    lineChart('chart-alpha', d.t, d.alpha_deg, 'Total angle of attack vs flight time', 'Time (s)', 'Alpha total (deg)');
    lineChart('chart-mach', d.t, d.mach, 'Mach number vs flight time', 'Time (s)', 'Mach');
  })
  .catch(err => {
    document.getElementById('loading').textContent = 'Could not load demo trajectory data: ' + err;
  });
</script>
</body>
</html>