# Week 2 viewer — live molecular-dynamics trajectory

A single self-contained HTML page that animates **your own** 2D Lennard-Jones
argon trajectory in the browser. No build step, no dependencies, no external
resources — just `index.html`.

**The smoking gun:** four synchronized views connect particle motion, speed statistics,
pair structure, temperature, and energy.

## What it shows

- **Particles**, drawn to scale inside the periodic box, colored by speed
  (blue = slow → warm red = fast). Play/pause, an fps control, and a frame scrubber.
- **Speed histogram** pooled over a trailing ~20-frame window, with the 2D
  Maxwell–Boltzmann (Rayleigh) curve `f(v) = (v/T)·exp(−v²/2T)` overlaid. By
  default the curve tracks the *measured* temperature `T = ⟨|v|²⟩/2`; drag the
  **curve-T slider** to force a wrong T and watch the curve peel off the bars —
  proof that only the real temperature fits. The displayed χ²/dof quantifies the mismatch.
  The **auto** button snaps back.
- **Pair-correlation plot** `g(r)`, comparing the first 10 frames with the current
  10-frame window. Distant crystalline peaks disappearing toward `g(r) = 1` show the
  loss of long-range order during melting.
- **Temperature and relative-energy histories** over the whole run, with the current
  frame marked. A contract run should keep relative energy bounded; a ramp run may gain
  energy intentionally while its temperature follows the dashed target.
- **Readouts** for the current frame: step, t, T (window), E_pot, E_kin, E_total.

## Data it expects

- `traj.jsonl` — one JSON object per sampled frame, keys:
  `step` (int), `t` (float), `pos` (`[[x,y]×N]`), `vel` (`[[vx,vy]×N]`),
  `E_pot` (float), `E_kin` (float). Blank/malformed lines are skipped.
- `run.json` (optional) — `n, rho, box ([Lx,Ly]), dt, temperature, ramp_to, …`.
  `box` fixes the periodic geometry; `temperature` and `ramp_to` draw the target history.
  If `box` is absent, it is inferred from the position extents.

Reduced units throughout (kB = m = 1, 2D).

## Use it from the course site

Open the site's `week2-viewer.html?src=` followed by the web address of a published
`traj.jsonl` (use its raw GitHub address); `run.json` is looked for beside it.

## Use it locally

Because `file://` blocks `fetch`, load your trajectory by hand:

1. Open `index.html` in a browser (double-click, or `open index.html`).
2. **Drag `traj.jsonl` onto the page** (drop `run.json` too for the exact box),
   or click **choose file(s)…**.

After loading a trajectory without run metadata, use **load run.json…** in the header
or drop `run.json` onto the page to add the exact box dimensions. The button hides
once `run.json` is loaded. The current
frame is preserved. Loading a new trajectory replaces the previous run metadata;
include its `run.json` or add it afterwards.

Keyboard: `space` = play/pause, `←`/`→` = step one frame.
Press *save PNG* (or `s`) to download the current frame with its readouts stamped, as proof for the show-and-go.

## Share the recording

Commit `week2/heating/traj.jsonl` and its `run.json` in the exercise repository.
Use the raw GitHub trajectory address as the course viewer's `src` parameter;
`run.json` is fetched beside it. The viewer stays on the course site.

The viewer page's [Frame format section](https://giggleliu.github.io/AMAT5315-2026Fall/week2-viewer.html#format)
documents the input format. The downloadable `week2-md.design.toml` records the
commands that produce it.