A single page web app inspired by Bret Victor's talk "Inventing on Principle".
Talk: https://www.youtube.com/watch?v=PUv66718DII
In the talk, Bret Victor demonstrates a Mario style game in JavaScript with a time travel debugger. He can pause the game, scrub back and forth through time, see trails of the character's past and future, and change values in the code to see how the future changes.
This project recreates that demo in a single HTML file: time-travel-debugger.html. Open it in any browser. There are no dependencies and no build step.
In the talk Inventing on Principle. Bret Victor, demonstrates a Mario themed game in JavaScript with a time travel debugger, that allows him to trace and show trails of the characters past, present and future to experiment with the code. The time travel debugger is dynamic, works in the browser with a slider.
I'd like you to create a page like this that allows me to pause a character and enter debugging mode with trails and alternate futures, and tracking the settings or changes made.
The page has three parts: a game canvas on the left, a code panel on the right, and a transport bar with a timeline slider below.
A small character runs and jumps through a level with brick platforms, a water gap, and a star. The character is autonomous. The physics simulation uses a fixed timestep and no randomness, so given the same starting state and the same settings it always produces the same result. This determinism is what makes time travel possible.
While the game plays, every frame of the character's state (position, velocity, direction) is pushed into a history array. The last 60 seconds are kept.
Press Pause to freeze the world. The timeline slider unlocks and maps directly onto the history array. Dragging it moves the character to any recorded frame. A gray trail shows the past leading up to that moment.
When paused, the app takes the state at the current frame and runs the same physics function forward for a set number of frames. That produces the orange trail: the character's future. Because the simulation is deterministic and cheap, the future can be recomputed instantly whenever anything changes.
The right panel shows the character's physics as code. The blue values (run speed, gravity, jump velocity, star bounce, lookahead) can be dragged left or right with the mouse, or adjusted with arrow keys when focused. Changing a value recomputes the orange future trail immediately, so you can find exactly the value you need, for example the jump strength that reaches the star.
The "Show alternate futures" checkbox runs the simulation four more times with weaker and stronger jump values and draws them as pale blue trails. This shows a fan of possible outcomes at once. To choose one of these paths, drag the blue jump velocity value in the code until the orange trail matches the blue trail you want, then press Play. The game resumes from the paused frame with your new settings, and any history after that frame is discarded.
Every committed value change is recorded below the game with the frame number, the old value, and the new value. Reset restores the default settings and is logged too.
time-travel-debugger.html- the whole appimages/- screenshots from the talk used in this README