PathFinding.js

repository·master·Indexed 27 days ago

https://github.com/qiao/pathfinding.js

A comprehensive 2D path-finding library for JavaScript that works in Node.js and the browser. It provides various algorithms for grid-based maps, including A*, Dijkstra, and Jump Point Search. The library includes tools for grid configuration, walkability matrices, heuristic functions (Manhattan, Euclidean, Octile, Chebyshev), and path manipulation utilities like smoothing and compression.

Tokens
3.3K
Snippets
10
Records
27
Agent score
94%

What's inside pathfinding.js

  1. Manually build PathFinding.js browser files for Client environments

    master

    To manually compile the browser-ready files from the development source:

    1. Download the source zip from GitHub and extract it.
    2. Navigate to the extracted folder.
    3. Install dependencies using npm install.
    4. Compile the browser builds using gulp compile.

    The resulting pathfinding-browser.js and pathfinding-browser.min.js files will be located in the lib folder.

  2. Define obstacles using a walkability matrix

    master

    You can initialize a PF.Grid with obstacles by passing a 2D array (matrix) to the constructor. In this matrix, 1 represents an obstacle (non-walkable) and 0 represents a walkable cell.

    var walkabilityMatrix = [[0, 0, 0, 0, 0],
                             [1, 1, 1, 1, 0],
                             [0, 0, 0, 0, 0],
                             [0, 1, 1, 1, 1],
                             [0, 0, 0, 0, 0],
                             [1, 1, 1, 1, 0],
                             [0, 0, 0, 0, 0]];
    var grid = new PF.Grid(walkabilityMatrix);
  3. Install PathFinding.js via Bower for Client environments

    master
    To use PathFinding.js in a front-end client environment, use the Bower package manager. Install Bower globally via npm if you haven't already, navigate to your project directory, and run the bower install command. This will create a bower_components/pathfinding directory in your project.
  4. Install PathFinding.js via npm for Server environments

    master
    To use PathFinding.js in a Node.js server environment, use the npm package manager. Ensure you have Node.js and npm installed by checking their versions, navigate to your project directory, and run the install command. This will create a node_modules/pathfinding directory in your project.
  5. Install PathFinding.js

    master

    Node.js

    Install via npm:

    npm install pathfinding

    Then require it in your program:

    var PF = require('pathfinding');

    Browser

    Install via bower:

    bower install pathfinding

    Include the minified browser file in your HTML:

    <script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>

    Alternatively, you can download a release from the GitHub Releases page.

    npm install pathfinding
  6. Understand the visualizer state machine and button actions

    master

    The PathFinding.js visualizer operates through a series of states that determine which buttons are available and what actions they perform. Understanding these states helps in designing custom UI controls or debugging visualizer behavior.

    State Definitions and Transitions

    StateDescriptionAvailable Actions & Transitions
    B (Before Searching)Initial state; no colored squares present.Start Search: Transitions to N
    N (Starting New Search)Clears existing progress and immediately transitions to S
    S (During Searching)The algorithm is currently running.Restart Search: Transitions to N <br> • Pause Search: Transitions to P <br> • Automatic: Transitions to F when finished
    P (Paused)The search is currently paused.Resume Search: Transitions to S <br> • Cancel Search: Transitions to B
    F (Finished)The search has completed.Restart Search: Transitions to N <br> • Clear Path: Transitions to B
    M (Settings Changed)User modified settings (algorithm, walls, etc.) after a search finished.Start Search: Transitions to N <br> • Clear Path: Transitions to B
  7. Basic usage of PathFinding.js to find paths on a 2D grid

    master

    PathFinding.js is a JavaScript library designed to find paths on a 2D square grid. It is compatible with both Node.js and browser environments. To find a path, you must define a walkability matrix where 0 represents a walkable cell and 1 represents a non-walkable cell. You then initialize a PF.Grid with this matrix and use a finder (such as PF.AStarFinder) to calculate the path between two coordinates.

    //Walkability matrix. Zero is walkable, One is not
    var matrix = [
        [0, 0, 0, 1, 0],
        [1, 0, 0, 0, 1],
        [0, 0, 1, 0, 0],
    ];
    var grid = new PF.Grid(matrix);
    var finder = new PF.AStarFinder();
    //Find path from (1, 2) to (4, 2)
    var path = finder.findPath(1, 2, 4, 2, grid);
  8. Configure Finder options

    master

    When instantiating a finder, you can pass an options object to customize behavior.

    Movement Options

    • allowDiagonal: (boolean) Set to true to allow diagonal movement. Default is false.
    • dontCrossCorners: (boolean) When allowDiagonal is true, this prevents the path from touching the corners of occupied grid blocks. Supported by all algorithms except JumpPointFinder.

    Heuristic Options

    For AStarFinder, BestFirstFinder, and their bi-directional variants, you can specify a heuristic function or use predefined constants:

    • PF.Heuristic.manhattan (default)
    • PF.Heuristic.chebyshev
    • PF.Heuristic.euclidean
    • PF.Heuristic.octile

    You can also provide a custom function: function(dx, dy) { ... }.

    var finder = new PF.AStarFinder({
        allowDiagonal: true,
        dontCrossCorners: true,
        heuristic: PF.Heuristic.chebyshev
    });