PATH FINDER

This web-based project is a path-finding algorithms visualizer.
Link: https://path-finder-wasm.herokuapp.com/

Functionalities

• Visualize path-finding algorithms like (BFS, DFS, A-star, Dijkstra, and Best FS) in an elegantly styled ReactJS-based web application.
• The application utilizes the Web WASM API to make use of the algorithm implementations.
• To provide a better user experience, I fashioned a 3D depiction of the path using ThreeJS.

Technicalities

• The path-finding algorithms are written in C++ and then converted into WASM files using the emscripten tool. These WASM binaries are then used by the browser’s WASM API.
• On testing (for large scale grid), the results from this were 40% faster (best case) than vanilla javascript implementations.
• The 3D depiction implemented with ThreeJS includes First Person Control and Orbit Controls for a wider experience and a good depiction of how pathfinding in games, AR and maps can be implemented.

Skills Learned

WASM

• WebAssembly opened a whole new world to me where optimization and efficiency is everything.
• Although, the documentation was not well structured, I managed to learn about the important features necessary to implement the algorithms through various tutorials and videos.
• I also took reference from other projects in different languages like Golang and videos fromJSconf on the same topic.

Emscripten tool

• Although trivial in use, this tool was helpful to convert the raw implementations into WASM files showing that multiple languages can be utilised in browsers.

C++

• Although competent in C++, I was required to write code that could be converted into WASM files and be utilized by the WASM Web API for a real-world problem. Through this, I used struct and dynamic memo allocation concepts.
• In addition, I studied graph-based path finding algorithms and their efficient implementations which gave me a better sense of understanding for the same.

ThreeJS

• This javascript 3D library helped n create and display 3D computer graphics.
• The easy setup, great community support and excellent documentation motivated me to use the library for other projects as well.

Screenshots

1. Home Page with default grid
2. Start(green), finish(red) and obstacles(dark navy)
3. Shortest path(yellow) and travelled points(light blue)
4. Recursive Division maze
5. Shortest path for maze using A-star algorithm
6. 3D depiction of path finder (Orbit Controls)
7. 3D depiction of path finder (First Person Controls)
8. Types of path finding algorithms