If I had a grid of squares, they can be labeled with Cartesian coordinates such that given square $(x,y)$, you know it shares a boundary with squares $(x+1,y),(x-1,y),(x,y+1),(x,y-1)$.

Is there a way of labeling a tessellated hexagon grid, so that given any hexagon label you can work out it's neighbors?

  • 7
    $\begingroup$ Everything you want to know about hex grids is at redblobgames.com/grids/hexagons . In particular see the sections on "coordinate systems" and "neighbors". $\endgroup$ Apr 27 '17 at 13:41

In the interest of closing the question I've posted this answer, but full credit for the answer goes to Michael Lugo for his comment on my initial Post.

All information comes from this link. It goes into far more detail than this answer.

There are multiple approaches to labeling Hexagon grids, each with advantages and disadvantages.

Offset coordinates

The most common approach is to offset every other column or row. Columns are named col or q. Rows are named row or r. You can either offset the odd or the even column/rows, so the horizontal and vertical hexagons each have two variants.

Offset coordinates, horizontal layout

Cube coordinates

Another way to look at hexagonal grids is to see that there are three primary axes, unlike the two we have for square grids. There’s an elegant symmetry with these.

enter image description here

Instead of having two values per coodinate, representing how far North and South the hexagon is, you can use three dimensions.

Axial Coordinates

The axial coordinate system, sometimes called “trapezoidal”, is built by taking two of the three coordinates from a cube coordinate system. Since we have a constraint such as x + y + z = 0, the third coordinate is redundant. Axial coordinates are useful for map storage and for displaying coordinates to the user. Like cube coordinates, you can use the standard add, subtract, multiply, divide operations from cartesian coordinates.

enter image description here

So for my purposes, the most useful map system was cube coordinates, as they have the simplest and most consistent rules for changing coordinates based movement between cells.

  • 4
    $\begingroup$ Beautiful answer -- this helped with the Advent of Code 2020 adventofcode.com/2020/day/24 $\endgroup$ Dec 24 '20 at 19:10
  • $\begingroup$ Be sure to use floats or other non-integer data types when doing conversions between hex and pixel. I spent hours trying to figure out why my grid looked weird, and it was all because my code (3 / 2) was doing integer division instead of floating point division. $\endgroup$ May 7 at 14:17

Create the grid by drawing horizontal lines thru ALL hexagon centers and drawing vertical lines thru ALL hexagon centers. The neighbors are:

(+1,-1), (+2,0), (+1,+1), (-1,+1), (-2,0), (-1,-1)

Note: the x-axis is scaled by a factor of sqrt(3). This is ok. Cartesian coordinates can have an axis that is scaled.

Note: the x,y does not match the hexagon label. This is ok.

If we set the upper left hexagon with a coordinate of (0,0), the hexagon label is: Math.floor(x/2)+1 plus y+1

(0,0) => 0101 (2,0) => 0201 (4,0) => 0301 (1,1) => 0102 (3,1) => 0202 (5,1) => 0302


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.