Path-Finder

This is a path-finding algorithm visualizer which currently uses A* algorithm for computing the optimum path between two points. It really helped to understand the algorithm better.

Comment

Inspiration

The inspiration came when our college professor was teaching us about different algorithms. Even though the class was not that interesting in the staring, but it became quite an interesting class after he pointed out that it's also been used in google maps. That fact actually made me to learn more about the algorithm and implement it in some projects. This has been on the bucket list for the last couple of months. Now since I got the opportunity to make it, I just went with the flow.

What it does

It currently uses the A* algorithm for computing the optimal path between the start and the endpoint. The color-changing node is the start node. The red node is the end node The cream nodes are the walls or obstacles. The rest are empty nodes. The walls are generated randomly, so you can refresh to get a fresh layout. As we click the visualize button the process starts. The entire process is animated using Javascript and CSS.

How we built it

This was a solo project I used react js, and CSS to build the entire app. It uses the A* algorithm in its hood to process it.

Challenges we ran into

Understanding the algorithm was one of the biggest challenges I faced. The information from Wikipedia on the A* algorithm and some youtube videos helped me to get a better understanding of this project. Animation was another big issue, adding the js code and animating it was really a challenging task as it was my first time. Keeping track of the neighboring, previous nodes and then computing the distances then adding the required node to the final path was also a challenging task. The bugs which came along with the above were a free bonus to the challenges.

Accomplishments that we're proud of

Really proud of completing the first step of my bucket list project. The animation part of this project is a really new thing for me, so successfully executing it is indeed a really proud moment. This is also my first from-scratch project, so I'm really happy with how it turned out. Learning and implementing a new algorithm is really tough task especially when you have no knowledge about it. But now seeing what I have learned in these two days is indeed a proud moment.

What we learned

The learning curve for this project has been amazing. Learned how the A* algorithm which is one of the popular algorithms works, and how it computes the path. The way animation works was also a new knowledge for me, got a bit more confidence in coding react js, css. Learned how to tackle a project when it's unfamiliar to you.

What's next for Path-Finder

My next aim is to add more algorithms like Dijkstra's Algorithm, swarm algorithm, bidirectional search, etc. Also, it allows the user to move the start and end points. To provide the ability to add/remove walls for the user, to generate random mazes, dynamically find the path as we move the start and end points, and many more. Stay tuned!

Share this project:

Updates