TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: BFS, Dijkstra and A* interactive demo made in React

94 pointsby nprettoover 4 years ago

12 comments

mysterydipover 4 years ago
No discussion of A* etc is complete without a link to red blob games&#x27; interactive pages: <a href="https:&#x2F;&#x2F;www.redblobgames.com&#x2F;pathfinding&#x2F;a-star&#x2F;introduction.html" rel="nofollow">https:&#x2F;&#x2F;www.redblobgames.com&#x2F;pathfinding&#x2F;a-star&#x2F;introduction...</a>
评论 #25823333 未加载
jaydenmilneover 4 years ago
Same story, made something similar in straight JavaScript while I was at school and never showed it to anyone:<p><a href="https:&#x2F;&#x2F;jayd.ml&#x2F;algorithms&#x2F;search&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jayd.ml&#x2F;algorithms&#x2F;search&#x2F;</a> (source <a href="https:&#x2F;&#x2F;github.com&#x2F;jaydenmilne&#x2F;jaydenmilne.github.io&#x2F;tree&#x2F;master&#x2F;algorithms&#x2F;search" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jaydenmilne&#x2F;jaydenmilne.github.io&#x2F;tree&#x2F;ma...</a>)<p>Features:<p>- Draw your own maze!<p>- Several different algorithms!<p>- Adjust solving speed &#x2F; step algorithm!<p>- Bugs!<p>- Share your mazes in the URL (abuse link shorteners to store your data! shorturl.at&#x2F;ioyT9)<p>I&#x27;m quite proud of how I (ab)used async&#x2F;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.<p>(in case you&#x27;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)
nprettoover 4 years ago
Two years ago I had to make a project about pathfinding for a university project, and I just realised I never showed it anywhere.<p>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.<p>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.<p>If you&#x27;re interested I&#x27;d suggest you keep the readme open while toying with the app, as the readme has more theory.
评论 #25824787 未加载
评论 #25821591 未加载
评论 #25821688 未加载
ggambettaover 4 years ago
Nice work :) There&#x27;s never going to bee too many learning materials with good visualizations.<p>For pathfinding, I&#x27;ve made one myself [0], and the Red Blob Games [1] one is also very popular.<p>[0] <a href="https:&#x2F;&#x2F;gabrielgambetta.com&#x2F;generic-search.html" rel="nofollow">https:&#x2F;&#x2F;gabrielgambetta.com&#x2F;generic-search.html</a><p>[1] <a href="https:&#x2F;&#x2F;www.redblobgames.com&#x2F;pathfinding&#x2F;a-star&#x2F;introduction.html" rel="nofollow">https:&#x2F;&#x2F;www.redblobgames.com&#x2F;pathfinding&#x2F;a-star&#x2F;introduction...</a>
armytricksover 4 years ago
For 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.
mcvover 4 years ago
I think the short summary is: Dijkstra is best when you don&#x27;t know or care where you&#x27;re going (there&#x27;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.<p>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&#x27;d figured out a way to take them into account. Was a fun challenge. (Didn&#x27;t take the job.)
评论 #25823928 未加载
vladimirralevover 4 years ago
I think your priority queue is doing O(nlogn) sort for every insert <a href="https:&#x2F;&#x2F;github.com&#x2F;npretto&#x2F;pathfinding&#x2F;blob&#x2F;master&#x2F;src&#x2F;algo&#x2F;queues&#x2F;PriorityQueue.js#L27" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;npretto&#x2F;pathfinding&#x2F;blob&#x2F;master&#x2F;src&#x2F;algo&#x2F;...</a><p>This should be a heap with O(logn) insert instead to be truly Dijsktra&#x2F;A*
评论 #25826097 未加载
oplavover 4 years ago
Nice job!<p>For others who want to play with visualizing different search algorithms, this is another cool tool:<p><a href="https:&#x2F;&#x2F;qiao.github.io&#x2F;PathFinding.js&#x2F;visual&#x2F;" rel="nofollow">https:&#x2F;&#x2F;qiao.github.io&#x2F;PathFinding.js&#x2F;visual&#x2F;</a>
jschulenklopperover 4 years ago
Also interesting: <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;best-first-search" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;best-first-search</a>, a visual display of A*
chrisweeklyover 4 years ago
Very 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+! :)
d33lioover 4 years ago
Thanks 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.
jokethrowawayover 4 years ago
Very cool, well done!<p>It seems to crash (white page) if you cover the destination point with the constraint box.<p>You may want to look into (lazy) Theta* next