The accumulator on three screens, and a hand-made step
Simulated frame times, so the counts are exact. The floating-point detail on the 144 Hz line is real JavaScript arithmetic.
Physics must step by the same amount of time every time, whatever the frame rate. An accumulator collects real time and runs as many fixed steps as fit. Steps are jumps, so fast objects can skip past thin ones; engines add tricks against that, and you still test it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write createFixedStepper(step, onStep) returning { tick(delta) } with the accumulator and the cap.
Extend it to return alpha from tick for interpolation.
Explain it without notes
Why does physics use a fixed timestep, and how does the accumulator make it work at any frame rate?
What is tunnelling, and what can you do about it?
Console
(nothing was printed)Expected console output
144 Hz monitor 144 frames -> 59 physics steps (up to 1 in one frame), 16.7 ms left over, alpha 1.00
30 fps phone 30 frames -> 60 physics steps (up to 2 in one frame), 0.0 ms left over, alpha 0.00
60 fps with one 0.5 s stall 31 frames -> 45 physics steps (up to 15 in one frame), 0.0 ms left over, alpha 0.00
hand-made step, 1 m/s: fell through, y = -5.0
hand-made step, 5 m/s: stopped at y = 0.017
hand-made step, 40 m/s: fell through, y = -44.0