Convert Figma logo to code with AI

bgrins logojavascript-astar

A* Search / Pathfinding Algorithm in Javascript

1,385
320
1,385
36

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

  1. 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);
  1. 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 });
  1. 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

  1. Include the library in your project:
<script src="https://cdn.jsdelivr.net/npm/javascript-astar@0.4.1/astar.js"></script>
  1. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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:

  1. A weight of 0 denotes a wall.
  2. A weight cannot be negative.
  3. A weight cannot be between 0 and 1 (exclusive).
  4. 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

Build Status

If you don't have grunt installed, follow the grunt getting started guide first.

Pull down the project, then run:

	npm install
	grunt