Gaussian elimination, one step at a time

Claude prompt

This page was generated by Claude Code from the following prompt (with additional prompting):

In a branch, can we make a visualization of Gaussian elimination (maybe with javascript)? I'd like to have two sliders corresponding to each of the for loops. I don't really need numbers, I just want to highlight portions of the A and b matrices. At the bottom it should say something like

Subtract f*<green> from <blue> to eliminate <purple>

(we can handle backsubstitution later) (you could also search the internet to see if something like this already exists)

Drag the two sliders to move through the two loops of the forward elimination phase. c is the outer loop (which column we are clearing), r is the inner loop (which row we are clearing it from).

A
b


Every cell marked 0 was cleared by an earlier pass of the inner loop; the grey cells are untouched so far. Note that the row operation only touches columns c through n — everything to the left is already zero, so there is no reason to compute on it.

Back substitution

Claude prompt

The prompt for this second widget (again, with additional prompting):

Now below this add the backsubstitution as an independent widget. It should have A x and b and say something like calculate <purple> by subtracting <blue> dot <green> from <orange>. orange will be in b, purple and green will be in x, blue will be in A. Feel free to swap colors if you think others would be better.

Elimination is done, so A is upper triangular. Now one loop runs up from the bottom row, solving for one unknown at a time. Drag the slider to advance it.

A
x
b


Each solved entry of x turns green and is used by every row above it, so the work per row grows as the loop climbs.


Back to top

ASEN 3502, CU Boulder. Last built Sep 23, 2026 at 9:00 AM MDT.