This project is a p5.js based visualization of the A* pathfinding algorithm on a 2D grid. It is designed as an interactive and educational tool to help understand how A* explores search space and finds the shortest path under different conditions.
Users can directly manipulate the grid, configure heuristics, and observe the algorithm in real time.
- Interactive 2D grid based environment
- Set custom start and end points
- Place and remove obstacles dynamically
- Visualization of open set and closed set exploration
- Support for diagonal movement
- Choice between Manhattan and Euclidean heuristics
- Step by step execution for learning and debugging
- Automatic execution mode for continuous visualization
The grid is composed of nodes, each representing a traversable or blocked cell. A* evaluates nodes using a cost function that combines path cost from the start and a heuristic estimate to the goal.
At each step, the algorithm selects the node with the lowest estimated total cost and explores its neighbors until the destination is reached or no valid path exists.
p5.js is used for rendering and handling user interaction in real time.
- Click to place or remove obstacles
- Select start and end nodes
- Toggle diagonal movement
- Switch between Manhattan and Euclidean heuristics
- Run the algorithm step by step or automatically
- Reset the grid and configuration
This project was built to develop an intuitive understanding of A* pathfinding through visualization and interaction. It serves as a practical learning aid for algorithms commonly used in games, robotics, and navigation systems.
- JavaScript
- p5.js
Completed as an educational visualization project and suitable for experimentation and further extensions.