Pathfinder

Draw walls on a grid and watch A* and Dijkstra race to the goal, step by step. Built for CS2040S tutorials.

View repo ↗Live demo ↗

The problem

Students in my CS2040S tutorials could recite A* but couldn't say why it beats Dijkstra on a grid. Slides showed the answer, not the search.

First-year data structures and algorithms students, and the TAs who teach them.

I TA the module. Watching the search frontier grow explains a heuristic faster than anything I could say.

A grid you draw walls on. A*, Dijkstra and BFS run side by side, step by step, with a speed slider.

Plain JavaScript and a canvas. Each algorithm is a generator that yields one step at a time, so all three animate on the same clock.

Keeping the three in lockstep without the fastest one finishing before the others had visibly started. Generators fixed it.

Used in four tutorial groups this semester. Two other TAs asked to use it in their sections.

Weighted cells (mud, water) so students can see where Dijkstra and A* actually diverge.