Analyzing & Measuring Simulations

The preview pane ships with a small set of analysis tools for inspecting physics simulations frame by frame. They read only what your code already draws and reports — no changes to your script are required.

Open the toolbar at the bottom of the preview. From left to right:

Control	What it does
⏭	Step one frame (1/60 s). Pauses the sim, advances a single frame, and draws it.
1× / 0.5× / 0.25×	Cycle playback speed. Slow-motion runs your sim with a smaller dt, so time and physics evolve proportionally slower.
t = 3.42s · 205f	Readout of simulated time and frame count.
📈	Toggle live value graphs (see below).
→	Toggle velocity vectors (see below).
📏	Toggle the measure tool (see below).

Live value graphs

Any numbers your entry file puts into the HUD (text) are plotted automatically on a rolling ~10 second window. Both plain numbers and numbers with units work:

return {
  particles: [{ x: 100, y: state.y, r: 10 }],
  text: {
    energy: energy.toFixed(0),     // "2150" → plotted
    speed: state.vy.toFixed(1) + ' px/s', // "-38.4 px/s" → the number is plotted
  },
}

• Graphs appear in a panel at the bottom-left of the preview.
• Click a graph's label to hide it; use the + key chips to add it back.
• Each graph auto-scales to the visible window and shows the latest value.

The existing physics presets (spring, orbital, pendulum labs, …) already report energy, displacement, speed, etc., so you can start measuring immediately.

Velocity vectors

Turn on → and the analyzer estimates each object's velocity by comparing its position between consecutive frames (finite differences, lightly smoothed) and draws a labeled arrow at its center. This works for both particles and sprites with no API changes.

Estimates are good for smooth motion but can be noisy on teleports or heavy collisions. The arrow length is scaled so it stays readable; the label shows speed in px/s.

Measure tool

📏 switches the preview into measure mode:

• Move — a crosshair follows the cursor with its (x, y) position in canvas pixels.
• Click, click — draw a measurement between two points showing distance plus dx/dy.
• Right-click or Esc — clear the current measurement.

While the measure tool is active, clicks are captured by the tool instead of your script (state.clickX/clickY), so measure, then turn it off to interact with the sim again.

Notes & limitations

• Analysis state resets whenever the project recompiles or you press Restart.
• Vector estimation uses position matching by array order; it is a teaching aid, not a substitute for reporting velocities yourself.
• The analyzer lives in the editor preview. The public /p/:id page and embeds render the sim without the analysis toolbar.