Backprop Golf
Learn gradient descent by playing mini golf. Adjust angle and force, then shoot. Backpropagation asks: if the final miss had been a bit smaller, what tiny changes earlier in the trajectory would have caused that? It works backward from the end, computing the gradient of the loss with respect to your parameters.
How to play
- Adjust θ (angle) and F (force) using +/− buttons or arrow keys
- Press Shoot to fire the ball
- Read the gradients (∇) next to each parameter — they tell you which direction reduces the loss
- Press Grad to apply one gradient step, or tweak manually
- Repeat — but watch out for when the gradient gets stuck!
Limitations to discover
Gradient descent finds local optima, not necessarily the global best. On harder levels, following the gradient may converge to a shot that’s “locally optimal” but doesn’t reach the hole. Try Reset to start from a different initial guess.
The loss landscape is also piecewise differentiable: wall collisions are discrete events, so small parameter changes can cause the ball to hit or miss a wall entirely. Near these boundaries, the gradient may not reflect the true landscape. This is analogous to ReLU in neural networks — backprop differentiates through whichever branch was actually taken.
What the HUD shows
| loss | Squared distance from ball's resting position to hole |
| dist | Distance in pixels |
| ∇ values | Gradient of loss w.r.t. each parameter (computed by backprop through the physics) |
| Deriv | Derivative arrows along trajectory. Adjoints (reverse mode): “what nudges at each point would have helped?” Tangents (forward mode): “how does a small input change ripple through the trajectory?” |
| loss curve | Loss over iterations — watch for plateaus (local optima!) |
| contour plot | Loss landscape over all (angle, force) pairs — reveals the global structure the gradient can’t see |
Keyboard shortcuts
| Space / Enter | Shoot |
| ← → | Adjust angle |
| ↑ ↓ | Adjust force |
| g | Apply gradient step |
| o | Optimize (auto gradient descent with line search) |
| a | Cycle derivative arrows (adjoint:pos → adjoint:vel → tangent:θ → tangent:F → off) |
| r | Reset hole |
| n | Next hole |
| f | Fullscreen |
| ? | Toggle this help |
Press ? or Escape to close