bodinaren/bhex.js

JavaScript library for working with Hexagons and grids.

BHex.js

JavaScript library for working with Hexagons and grids. This library does not draw grids for you, but simply sets it up for you to use your own prefered way of drawing.

• BHex.Core.js
  • Examples
• BHex.Drawing.js
  • Examples
• BinaryHeap.js
• Credits

BHex.Core.js

BHex.Core.js is, as the name suggests, the core library for creation and calculation of a Hexagon grid. All grids are circular, with point 0,0 being the center of the grid.

var grid = new BHex.Grid(3);

This will give you a new cricular grid with radius of 3 (excluding the center piece), giving you a total of 37 hexagons (including center piece).

Interia / Blocked hexagons

BHex.js also supports inertia (or movement speed/cost) and blocked hexagons, defined by cost on your hexagon. By default all hexagons have a cost of 1 and no hexagon should never have a cost lower than 1. Floating values are also supported, as long as they are higher than 1. Blocked hexagons are defined by the blocked variable on your hexagon.

More examples

Get hexagon

Simply returns a hexagon at a specific position.

hex = grid.getHexAt(new BHex.Axial(0, 0));

Neighbors

Get the neighboring hexagons. This does not care if a hexagon is blocked or not.

grid.getNeighbors(new BHex.Axial(0, 0));
grid.getNeighbors(hex);

A hexagon inherits from BHex.Axial, so whenever you should pass a BHex.Axial you can also just pass in a hexagon like above.

Range

Note: Requires BinaryHeap.js

Get all the hexagons available within a specific range. The hexagon in the first argument is not included in this result.

grid.getRange(new BHex.Axial(0, 0), 2);

Path finding

Note: Requires BinaryHeap.js

Find the shortest path from A to B using the A* algorithm.

grid.findPath(new BHex.Axial(-3, 2), new BHex.Axial(3, -2));

Distance

Get the distance between two hexagons, ignoring if a hexagon is inertia or blocked.

grid.getDistance(new BHex.Axial(-3, 2), new BHex.Axial(3, -2));

To get the distance with inertia and blocked hexagons taken into account use grid.findPath(start, end).length instead.

Line of sight

Gets all the hexagons between 2 points until blocked. (To get field of view you could use this by checking against all the outer hexagons on the grid.)

grid.getLine(new BHex.Axial(-3, 2), new BHex.Axial(3, -2));

BHex.Drawing.js

BHex.Drawing.js will help you prepare your grid for drawing and help you with operations regarding your grid such as finding the hexagon at a specific cursor position.

// Setup options: Size of the a single side, orientation (or PointyTop) and where the center of the grid should be.
var options = new BHex.Drawing.Options(30, BHex.Drawing.Static.Orientation.FlatTop, new BHex.Drawing.Point(400, 300));

// Create the grid as before.
var grid = new BHex.Grid(3).forDrawing(options);

Each hexagons in your grid will now have a center and an array of 6 corners (points) which you can use for drawing your hexagon grid. Note that all of these points are relative to the center of your grid (400x300 in the above example)!

More examples

Get a hexagon at a specific pixel position, such as the position of your cursor.

grid.getHexAtPoint(BHex.Drawing.Point(50, 75));

BinaryHeap.js

This helper library is an implementation by bgrins, based on an implementation by Marijn Haverbeke. It's needed for the algorithms used in grid.getRange and grid.findPath.

Credits

All the algorithms are based on Amit Patel's blogpost on Hexagonal Grids, if you're interested in the theory behind hexagons, be sure to check that out. Also check out his posts Introduction to A* and Implementation of A* to get more into detail on pathfinding (grid.getRange and grid.findPath). Both of those posts are based on rectangular grids, but the theory is the same for hexagonal grids.

bhex.js's Issues

Rescoring doesn't seem to work properly

I've been recently working on a game which was based on using the A* algorithm for pathfinding.
The game is online so the server also needs to calculate the position of each object in the scene, thing which will throttle my CPU up to 100%. So far I noticed that the "cost" property on each hex won't get rescored for some reason, thing which is the main cause why this is happening since I noticed that this is most likely Dijkstra's algorithm instead of A* due to the massive search in all directions.

Is there anything that i'm missing here which is responsible for making the plugin work as expected ?

Can't set up for drawing

When I attempt to use "var grid = new BHex.Grid(3).forDrawing(options);" as documented I get the error "sketch.js:10 Uncaught TypeError: (intermediate value).forDrawing is not a function" and indeed I cannot find that function in the library.

I am new to JS so I'm probably missing something, but so far i haven't been able to figure out what...
Also, I am using P5. When I use the regular grid create it all works fine and I am able to access the grid members. Code below:

---

var grid = [];

function setup() {
createCanvas(windowWidth, windowHeight);
// Setup options: Size of the a single side, orientation (or PointyTop) and where the center of the grid should be.
var options = new BHex.Drawing.Options(30, BHex.Drawing.Static.Orientation.FlatTop, new BHex.Drawing.Point(width / 2, height / 2));
// Create the grid as before.
grid = new BHex.Grid(3).forDrawing(options); // This fails
//grid = new BHex.Grid(3); - This works
}

function draw() {
background(100);
}

---