Show HN: Algoviz, Interactive a* Pathfinding Visualization | Hacker News Reader

Show HN: Algoviz, Interactive a* Pathfinding Visualization

algoviz.njanjo.com

89 pointsforsythe29 comments

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!

Very cool. Definitely curious to see this part:

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

I've set up the app in a way that I am sending "steps" from the worker. That way I can describe each step textually. I'll post updates here probably!

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... I think it should be a matter of removing "times 100"

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...

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

Nice visualization!

I don’t think the algorithm is correct though. The heuristic seems to use Euclidean distance instead of “how the crow flies” and thus this implementation goes along the axis instead of directly towards the goal. This causes the algorithm to find the optimal route only occasionally and probably has little to no effect on average execution time.

I just realized my terminology was way wrong. Sorry.

You have Manhattan distance and you want Euclidean distance to make sure the path is always optimal. Execution speed should be the same or better in the average case with Euclidean distance.

One interesting heuristic is h(x) = 0, which is also [admissible](https://en.wikipedia.org/wiki/Admissible_heuristic) and transforms your A* into an uninformed heuristic as far as I remember.

In this case, wouldn't it be shorter to go down first, then to the right? What's happening here?

https://imgur.com/a/xfAtkML

A* is not guaranteed to find the optimal route - it depends on the heuristic and the environment.

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

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...

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/

Thanks! I will keep app as a reference for my future feature development. The app will lean towards understanding the algorithms rather than being used in other apps.

And here's another: https://clementmihailescu.github.io/Pathfinding-Visualizer/

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?

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

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

Its due to this: https://github.com/ssaric/algoviz/blob/012c60acb2fa452ee5a3c... Currently heuristics is hardcoded to be greedy. I am looking to change this in next few days

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

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...

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

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... (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

This is very well done.

Svelte rendering is smooth.

Plugging myself: https://github.com/ronilan/a-mazing-thing

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

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*!

Fun to play with pathological cases: https://imgur.com/a/3gA8kiX

Here's mine: https://imgur.com/a/RvUrOv5

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

Even simple cases can have amusing results: https://i.imgur.com/hKre88I.png

Reply on news.ycombinator.com