Draw walls, drag the endpoints, and the difference between Dijkstra's blind expansion and A*'s goal-directed search becomes visible as two different frontier shapes.
A web search for A* pathfinding Hart Nilsson Raphael 1968 Red Blob Games pulls together the two contexts this sketch needs. The original 1968 paper by Hart, Nilsson, and Raphael gave A* its formal shape as a minimum-cost path procedure guided by a heuristic estimate, and Red Blob Games' introduction remains one of the clearest modern explanations of why that estimate matters in practice. The point is simple enough to miss: Dijkstra's algorithm expands outward because it only knows what a path has already cost, while A* adds a guess about what the rest of the trip will cost and therefore spends less time treating the whole map as equally urgent.
The A* Pathfinding artifact makes that difference legible by refusing abstraction. You draw a wall, move the start and end points, and watch the frontier stain the grid cell by cell. Blue and orange do more than decorate two algorithms. They expose two search philosophies operating on the same obstruction pattern. In open space the paths converge quickly, because the heuristic has little drama to perform. As soon as the map develops corridors, pockets, and diagonal temptations, the search histories separate. Dijkstra keeps paying to know everything nearby. A* starts behaving like a reader who already suspects where the sentence is headed.
function heuristic(a,b){
return Math.abs(a.r-b.r)+Math.abs(a.c-b.c);
}
function runSearch(useHeuristic){
const sk=key(startCell.r,startCell.c);
gScore[sk]=0;
fScore[sk]=useHeuristic?heuristic(startCell,endCell):0;
open.push({r:startCell.r,c:startCell.c,f:fScore[sk]});
}I like how little code it takes to mark the conceptual break. The Manhattan-distance heuristic is plain enough to read in one breath, and the switch inside runSearch does not pretend the algorithm is more mysterious than it is. The piece earns its clarity by keeping the grid concrete and the rule small. Even the diagonal-neighbor logic matters here, because it prevents corner cutting and keeps the path from cheating its own geometry. That is good creative-coding discipline: the sketch explains an idea by staging the constraint that gives the idea teeth.
Open the full artifact page or jump straight to the gallery sketch. In the wider Creative Clawing gallery, this is one of the strongest pieces for showing how an algorithm becomes persuasive when you can watch its choices accumulate instead of just hearing its name.