9 ms·
Show HN: BFS, Dijkstra and A* interactive demo made in React
- npretto 6y agoTwo years ago I had to make a project about pathfinding for a university project, and I just realised I never showed it anywhere. I made this little interactive playground for various pathfinding algorithms showing how they can be seen as a general algorithm with different a different queue and different heuristic in use. The readme has some theory but the cool thing is the link to the app on netlify where you can experiment moving the positions of start, goal and of the obstacles. If you're interested I'd suggest you keep the readme open while toying with the app, as the readme has more theory.
- djxfade 6y agoDo I have to build it myself, or do you have it hosted somewhere?
- _the_inflator 6y agoI love pathfinding visualizations. Every time. Good job!
- tpoacher 6y agoI think you have a typo in the first introduction popup. It says BSD instead of BFS
- armytricks 6y agoFor your non-admissible heuristic demo, it might also be interesting to look at squaring the euclidian distance and the affect of biasing the algorithm in this way.
- ggambetta 6y agoNice work :) There's never going to bee too many learning materials with good visualizations. For pathfinding, I've made one myself [0], and the Red Blob Games [1] one is also very popular. [0] https://gabrielgambetta.com/generic-search.html https://gabrielgambetta.com/generic-search.html [1] https://www.redblobgames.com/pathfinding/a-star/introduction.html https://www.redblobgames.com/pathfinding/a-star/introduction...
- chrisweekly 6y agoVery cool, thanks for sharing! Bonus points for non-gratuitous use of currying and generators in the implementation, not to mention clear and concise documentation. A+! :)
- mysterydip 6y agoNo discussion of A* etc is complete without a link to red blob games' interactive pages: https://www.redblobgames.com/pathfinding/a-star/introduction.html https://www.redblobgames.com/pathfinding/a-star/introduction...
- psyc 6y agoThat was also my introduction to A*. Say, does anyone have insights into optimizing path finding for speed, as the map gets larger and number of entities increases?
- Vvector 6y agoOne method is to preprocess the map, which then can greatly increase the accuracy of the A* heuristic. https://www.redblobgames.com/pathfinding/l1-clarkson/ https://www.redblobgames.com/pathfinding/l1-clarkson/
- mysterydip 6y agoI would think you could do a scaling of sorts, like if your map was 100x100 you could reduce it to 10x10 with "clear", "fully blocked", and "partially blocked" based on the contents, and work a general path at that meta level first, then focus on each grid map at the full scale to navigate around local obstacles. You could do multiple scales depending on your needs and where the terrain makes sense to categorize most into clear or blocked.
- mcv 6y agoI think the short summary is: Dijkstra is best when you don't know or care where you're going (there's no heuristic to tell you how close you are, or you want to know distances to all locations), but if that heuristic exists, A* is better. I once used A* in a coding challenge for a job. Create a grid (in React) where you can place obstacles, wormholes, a start and a finish, and find the shortest route through it. The wormholes normally break A*, but I'd figured out a way to take them into account. Was a fun challenge. (Didn't take the job.)
- maeln 6y agoYes, I would like to see more pathfinding demo talking about 0 weight link, or even negative weight (although I don't know of any pathfinding problem that would use negative weight). Floyd–Warshall is always ignored although I think it is cool. Now you can pathfind with portal :)
- jokethrowaway 6y agoVery cool, well done! It seems to crash (white page) if you cover the destination point with the constraint box. You may want to look into (lazy) Theta* next
- oplav 6y agoNice 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/
- jaydenmilne 6y agoSame story, made something similar in straight JavaScript while I was at school and never showed it to anyone: https://jayd.ml/algorithms/search/ https://jayd.ml/algorithms/search/ (source https://github.com/jaydenmilne/jaydenmilne.github.io/tree/master/algorithms/search https://github.com/jaydenmilne/jaydenmilne.github.io/tree/ma...) Features: - Draw your own maze! - Several different algorithms! - Adjust solving speed / step algorithm! - Bugs! - Share your mazes in the URL (abuse link shorteners to store your data! shorturl.at/ioyT9) I'm quite proud of how I (ab)used async/await to increase the stack size and be able to easily step and delay the algorithms without having to rewrite them to be re-entrant. (in case you're wondering, left click to draw walls, right click to place start then end node, left click and drag on walls to go into erase mode)
- jschulenklopper 6y agoAlso interesting: https://observablehq.com/@mbostock/best-first-search https://observablehq.com/@mbostock/best-first-search, a visual display of A*
- vladimirralev 6y agoI think your priority queue is doing O(nlogn) sort for every insert https://github.com/npretto/pathfinding/blob/master/src/algo/queues/PriorityQueue.js#L27 https://github.com/npretto/pathfinding/blob/master/src/algo/... This should be a heap with O(logn) insert instead to be truly Dijsktra/A*
- jschulenklopper 6y agoDijkstra / A* search algorithm do not prescribe which algorithm to use to add/insert items to the queue, or which algorithm to use to maintain a priority queue. So, your optimization might be an improvement, but it doesn't make the process "more or less" truly Dijkstra or A*.
- d33lio 6y agoThanks for posting this! Your repo is a fantastic bit of reading for people who are curious how to make a non-standard visualization with React JS.