Top Related Projects
A comprehensive path-finding library for grid based games
Path finding in a graph
A Javascript implementation of Fortune's algorithm to compute Voronoi cells
Quick Overview
bgrins/javascript-astar is a JavaScript implementation of the A* pathfinding algorithm. It provides a simple and efficient way to find the shortest path between two points on a grid, making it useful for game development, navigation systems, and other applications requiring pathfinding.
Pros
- Lightweight and easy to integrate into existing projects
- Supports both square and hexagonal grids
- Includes a visual demo for easy understanding and testing
- Well-documented code with clear examples
Cons
- Limited to grid-based pathfinding (not suitable for arbitrary graph structures)
- May not be optimized for very large grids or complex scenarios
- Lacks advanced features like dynamic obstacle avoidance or multi-agent pathfinding
- No built-in support for weighted edges or terrain costs
Code Examples
- Creating a grid and finding a path:
const graph = new Graph([
[1,1,1,1],
[0,1,1,0],
[0,0,1,1]
]);
const start = graph.grid[0][0];
const end = graph.grid[1][2];
const result = astar.search(graph, start, end);
console.log(result);
- Using a custom heuristic function:
const customHeuristic = function(pos0, pos1) {
const d1 = Math.abs(pos1.x - pos0.x);
const d2 = Math.abs(pos1.y - pos0.y);
return d1 + d2;
};
const result = astar.search(graph, start, end, { heuristic: customHeuristic });
- Working with hexagonal grids:
const hexGraph = new Graph(hexGrid, { diagonal: true });
const hexStart = hexGraph.grid[0][0];
const hexEnd = hexGraph.grid[5][5];
const hexResult = astar.search(hexGraph, hexStart, hexEnd);
Getting Started
- Include the library in your project:
<script src="https://cdn.jsdelivr.net/npm/javascript-astar@0.4.1/astar.js"></script>
- Create a graph and perform a search:
const graph = new Graph([
[1,1,1],
[0,1,0],
[1,1,1]
]);
const start = graph.grid[0][0];
const end = graph.grid[2][2];
const path = astar.search(graph, start, end);
console.log(path);
This will output an array of nodes representing the shortest path from start to end.
Competitor Comparisons
A comprehensive path-finding library for grid based games
Pros of PathFinding.js
- Supports multiple pathfinding algorithms (A*, Dijkstra, BFS, etc.)
- Includes a visual demo and benchmarking tools
- More actively maintained with recent updates
Cons of PathFinding.js
- Larger codebase, potentially more complex to integrate
- May have higher memory usage due to additional features
Code Comparison
PathFinding.js:
var finder = new PF.AStarFinder();
var path = finder.findPath(0, 0, 5, 5, grid);
javascript-astar:
var graph = new Graph(gridArray);
var start = graph.grid[0][0];
var end = graph.grid[5][5];
var result = astar.search(graph, start, end);
Key Differences
- PathFinding.js offers a more comprehensive suite of pathfinding algorithms and utilities
- javascript-astar focuses specifically on A* implementation, potentially making it lighter and easier to integrate for simple use cases
- PathFinding.js provides better visualization and debugging tools, which can be beneficial for development and testing
Use Case Considerations
- Choose PathFinding.js for projects requiring multiple pathfinding algorithms or extensive visualization
- Opt for javascript-astar for simpler implementations where only A* is needed and minimal overhead is desired
Community and Support
- PathFinding.js has a larger community and more recent updates, potentially offering better long-term support
- javascript-astar, while less actively maintained, still provides a solid implementation for specific A* needs
Path finding in a graph
Pros of ngraph.path
- More versatile, supporting various graph types and algorithms beyond A*
- Better performance for large graphs due to optimized data structures
- Actively maintained with recent updates and improvements
Cons of ngraph.path
- Steeper learning curve due to more complex API
- Less focused on A* specifically, which may be overkill for simpler pathfinding needs
- Requires additional setup for basic A* functionality
Code Comparison
ngraph.path:
const graph = createGraph();
graph.addNode('A');
graph.addNode('B');
graph.addLink('A', 'B');
const pathFinder = path.aStar(graph);
const foundPath = pathFinder.find('A', 'B');
javascript-astar:
var graph = new Graph([
[1,1,1],
[0,1,1],
[0,0,1]
]);
var start = graph.grid[0][0];
var end = graph.grid[2][2];
var result = astar.search(graph, start, end);
Summary
ngraph.path offers more flexibility and better performance for complex graph operations, while javascript-astar provides a simpler, more focused implementation of the A* algorithm. The choice between the two depends on the specific requirements of your project, such as graph complexity, performance needs, and desired features beyond basic A* pathfinding.
A Javascript implementation of Fortune's algorithm to compute Voronoi cells
Pros of Javascript-Voronoi
- Specialized for Voronoi diagram generation, offering a focused solution for this specific geometric problem
- Includes additional features like relaxation and Lloyd's algorithm for improved diagram quality
- Provides a visual demo and examples, making it easier to understand and implement
Cons of Javascript-Voronoi
- Limited to Voronoi diagrams, less versatile for general pathfinding problems
- May require additional processing for use in pathfinding applications
- Less actively maintained, with fewer recent updates compared to javascript-astar
Code Comparison
Javascript-Voronoi:
var voronoi = new Voronoi();
var bbox = {xl: 0, xr: 800, yt: 0, yb: 600};
var sites = [{x: 200, y: 200}, {x: 50, y: 250}, {x: 400, y: 100}];
var diagram = voronoi.compute(sites, bbox);
javascript-astar:
var graph = new Graph([
[1,1,1,1],
[0,1,1,0],
[0,0,1,1]
]);
var start = graph.grid[0][0];
var end = graph.grid[1][2];
var result = astar.search(graph, start, end);
Both libraries offer efficient solutions for their respective purposes. Javascript-Voronoi excels in generating Voronoi diagrams, while javascript-astar provides a more general-purpose pathfinding solution. The choice between them depends on the specific requirements of your project.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
javascript-astar
An implementation of the A* Search Algorithm in JavaScript
See a demo at http://www.briangrinstead.com/files/astar/
Sample Usage
If you want just the A* search code (not the demo visualization), use code like this http://gist.github.com/581352
<script type='text/javascript' src='astar.js'></script>
<script type='text/javascript'>
var graph = new Graph([
[1,1,1,1],
[0,1,1,0],
[0,0,1,1]
]);
var start = graph.grid[0][0];
var end = graph.grid[1][2];
var result = astar.search(graph, start, end);
// result is an array containing the shortest path
var graphDiagonal = new Graph([
[1,1,1,1],
[0,1,1,0],
[0,0,1,1]
], { diagonal: true });
var start = graphDiagonal.grid[0][0];
var end = graphDiagonal.grid[1][2];
var resultWithDiagonals = astar.search(graphDiagonal, start, end, { heuristic: astar.heuristics.diagonal });
// Weight can easily be added by increasing the values within the graph, and where 0 is infinite (a wall)
var graphWithWeight = new Graph([
[1,1,2,30],
[0,4,1.3,0],
[0,0,5,1]
]);
var startWithWeight = graphWithWeight.grid[0][0];
var endWithWeight = graphWithWeight.grid[1][2];
var resultWithWeight = astar.search(graphWithWeight, startWithWeight, endWithWeight);
// resultWithWeight is an array containing the shortest path taking into account the weight of a node
</script>
A few notes about weight values:
- A weight of 0 denotes a wall.
- A weight cannot be negative.
- A weight cannot be between 0 and 1 (exclusive).
- A weight can contain decimal values (greater than 1).
Original (slower) implementation
The original version of the algorithm used a list, and was a bit clearer but much slower. It was based off the original blog post. The code is available at: https://github.com/bgrins/javascript-astar/tree/0.0.1/original-implementation.
The newest version of the algorithm using a Binary Heap. It is quite faster than the original. http://www.briangrinstead.com/blog/astar-search-algorithm-in-javascript-updated Binary Heap taken from http://eloquentjavascript.net/appendix2.html (license: http://creativecommons.org/licenses/by/3.0/)
Running the test suite
If you don't have grunt installed, follow the grunt getting started guide first.
Pull down the project, then run:
npm install
grunt
Top Related Projects
A comprehensive path-finding library for grid based games
Path finding in a graph
A Javascript implementation of Fortune's algorithm to compute Voronoi cells
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot