
Show HN: Algoviz, Interactive a* Pathfinding Visualization - forsythe
https://algoviz.njanjo.com/
======
forsythe
Hi, I made this little app to better understand how A* works. I decided to
continue developing it for educational purposes.

Computation is done on worker so main thread should be safe all the time.

I plan to add textual information on each step, to show how algorithm is
"thinking".

Also, heuristics is fixed for now, I plan to add heuristics choice. So,

Roadmap: \- different heuristics \- 8 way support \- Detailed explanation of
each step

Let me know what you think!

~~~
yumario
I believe A* should always give the minimum path as long the heuristic is
optimistic. It will become a greedy search if the heuristic is pessimistic. If
the heuristic is "perfect" i.e heuristic(x to y) = min_cost(x to y) the the
search will be optimal (i.e no nodes that do not belong with the path will be
explored)

Yep after playing around with it for a bit it didn't give a minimum path. I
believe something is wrong with the heuristic you are using.

Edit: You can prove A* will give a min path as long as: heuristic(x to y) <=
min_cost(x to y). Problem seems to be here
[https://github.com/ssaric/algoviz/blob/master/src/util/GridN...](https://github.com/ssaric/algoviz/blob/master/src/util/GridNode.js#L2)
I think it should be a matter of removing "times 100"

~~~
forsythe
I believe the push and pull is between optimal path and time to find the path.
The heuristic dictates whether the algorithm will lean towards Dijkstra or
Greedy or somewhere in between.

I got my knowledge about heuristics from here:

[http://theory.stanford.edu/~amitp/GameProgramming/Heuristics...](http://theory.stanford.edu/~amitp/GameProgramming/Heuristics.html)

~~~
nemetroid
Whether a greedy heuristic is faster or not is dependent on the structure of
the graph. For the example in the article about mountains and grassland, it
makes sense that such a heuristic would speed up the search, since the
algorithm can't get stuck in dead-ends.

But in a problem where the algorithm _can_ get stuck in dead-ends, it's
possible to construct examples where the greedy heuristic is (much) slower
than plain Manhattan distance. Here's an example:

    
    
                    xxx
                    xEx
                    x x
                    x x
                    x x
                    x x
      Sxxxxxxxxxxxxxx x
                      x
       xxxxxxxxxxxxxxxx

------
karussell
For real road network data I animated the graph exploration required for A*:
[https://www.graphhopper.com/wp-
content/uploads/2017/07/astar...](https://www.graphhopper.com/wp-
content/uploads/2017/07/astar-1.gif)

The red path is the optimal path calculated with GraphHopper and visualized
via Swing. This was done a few years ago.

These days I would probably use deck.gl & the browser:
[https://www.graphhopper.com/blog/2018/07/04/high-
precision-r...](https://www.graphhopper.com/blog/2018/07/04/high-precision-
reachability/)

------
oplav
Nice job!

For others who want to play with visualizing different search algorithms, this
is another cool tool:

[https://qiao.github.io/PathFinding.js/visual/](https://qiao.github.io/PathFinding.js/visual/)

~~~
pqn
And here's another: [https://clementmihailescu.github.io/Pathfinding-
Visualizer/](https://clementmihailescu.github.io/Pathfinding-Visualizer/)

------
mysterydip
It would be great if there were some ready-made examples that could be loaded,
especially showing off interesting things. Maybe those are already present but
not visible on the mobile version?

~~~
forsythe
Good idea, I'll add it to the roadmap. Thanks!

------
nemetroid
Nice visualization, but the algorithm doesn't seem quite right: given the
following map (don't have a good way of sending a screenshot, sorry), it goes
above and around rather than below:

    
    
         XX
      S XE
       X

~~~
forsythe
Its due to this:
[https://github.com/ssaric/algoviz/blob/012c60acb2fa452ee5a3c...](https://github.com/ssaric/algoviz/blob/012c60acb2fa452ee5a3c477fe799577cc1f0ea4/src/util/GridNode.js#L1)
Currently heuristics is hardcoded to be greedy. I am looking to change this in
next few days

~~~
nemetroid
Just remove the "100 *" and it should be optimal.

------
nayuki
Red Blob Games / Amit Patel has an absolutely wonderful tutorial article about
pathfinding algorithms (BFS, Dijkstra, A*), including visualizations for each
one.
[https://www.redblobgames.com/pathfinding/a-star/introduction...](https://www.redblobgames.com/pathfinding/a-star/introduction.html)

~~~
forsythe
Yup, I based this app on that article as matter of fact!

------
carderne
In a similar (but unfortunately not interactive) vein, here's an animation I
made for a many-to-many version (more than two endpoints, basically a hybrid
Dijkstra/Prim's algorithm):
[https://raw.githubusercontent.com/carderne/gridfinder/master...](https://raw.githubusercontent.com/carderne/gridfinder/master/gridfinder-
animated.gif) (This is for connecting towns, and also uses a cost matrix with
a different cost for traversing each cell).

Quick overview of what's happening here: [https://github.com/scikit-
image/scikit-image/issues/3804](https://github.com/scikit-image/scikit-
image/issues/3804)

------
ronilan
This is very well done.

Svelte rendering is smooth.

Plugging myself: [https://github.com/ronilan/a-mazing-
thing](https://github.com/ronilan/a-mazing-thing)

Solver encapsulated as class, rendering demos with Vanilla, React and
BlockLike.

------
jpl20
I love this! I made a similar version in Java and Swing during college for a
research project on pathfinding algorithms, so I'm excited I'm not the only
one who geeked out over A*!

------
carbocation
Fun to play with pathological cases:
[https://imgur.com/a/3gA8kiX](https://imgur.com/a/3gA8kiX)

~~~
smnscu
Here's mine: [https://imgur.com/a/RvUrOv5](https://imgur.com/a/RvUrOv5)

~~~
forsythe
Wow :D you really had the patience to put up all those walls. Good thing I
used Svelte for the project and made the rendering as smooth as possible :P

