Build the distance formula
LIVEDrag two points and watch the distance formula build itself out of a right triangle.
system · Lumen8 (interactive math component, reimplemented)
d = √(dx2 + dy2)
= √(49 + 25)
= √(74) ≈ 8.60
drag either point · snaps to the integer grid
Drag either point. The horizontal leg is dx, the vertical leg is dy, and the line between them is the distance. The three-line derivation under the grid updates as you drag.
Snap A to the origin and B to (3, 4) and the distance lands on exactly 5: the 3-4-5 triangle. Move B to (6, 8) and you get 10. The formula was never something to memorize, it is Pythagoras wearing coordinates.
Where this comes from
Lumen8 is a mastery-based K-8 maths platform built to the NSW curriculum. It has a library of more than thirty interactive maths components, each rendering to canvas at device-pixel resolution so the lines stay crisp. This is one of them, the distance explorer, rebuilt here from scratch in React to show how it works.
The real version is an Angular standalone component using signals and OnPush change detection, with a KaTeX readout for the formula. The interaction is the lesson: a student does not read that distance is the square root of dx squared plus dy squared, they drag a point until the triangle makes it obvious, then the algebra is just a label on what they can already see.