Comparison of different hex indexing approaches
This page summarizes various types of indexing hexagonal cells. Features examined: storage (in 2D array), neighbors, distance, straight lines.
#1: Non-orthogonal
Horizontal lines have constant "y" coordinate. "x" coordinate increases "down & right".
- Distance:
sign(dx) == sign(dy) ? max(|dx|, |dy|) : |dx|+|dy|
- Storage: 2D array stores a parallelogram area
- Neighbors:
(−1,0); (1,0); (−1,−1); (1,−1); (−1,1); (1,1)
- Straight lines:
(x ± n, y); (x ± n, y ± n); (x ∓ n, y ± n)
var o = {width:6, height:4, layout:"hex", fg:"#000", spacing:4};
var display = new ROT.Display(o);
SHOW(display.getContainer());
display.draw(0, 0, "0,0", "", "#fff");
display.draw(2, 0, "1,0", "", "#ccc");
display.draw(4, 0, "2,0", "", "#888");
display.draw(1, 1, "1,1", "", "#888");
display.draw(3, 1, "2,1", "", "#fff");
display.draw(5, 1, "3,1", "", "#ccc");
display.draw(0, 2, "0,2", "", "#fff");
display.draw(2, 2, "1,2", "", "#ccc");
display.draw(4, 2, "2,2", "", "#888");
display.draw(1, 3, "1,3", "", "#888");
display.draw(3, 3, "2,3", "", "#fff");
display.draw(5, 3, "3,3", "", "#ccc");
#2: Odd shift
Horizontal lines have constant "y" coordinate. "x" coordinate increases "right". Odd lines are shifted to the right (half a cell).
- Distance:
max(|dy|, |dx| + floor(|dy|/2) + penalty); penalty = ( (even(y1) && odd(y2) && (x1 < x2)) || (even(y2) && odd(y1) && (x2 < x1)) ) ? 1 : 0
- Storage: visually corresponds to a 2D array
- Neighbors: even lines
(−1,0); (1,0); (−1,−1); (0,−1); (−1,1); (0,1), odd lines (−1,0); (1,0); (0,−1); (1,−1); (0,1); (1,1)
- Straight lines:
(x ± n, y); (x ± n/2, y ± n); (x ± n/2, y ± n), even and odd lines use different rounding
var o = {width:6, height:4, layout:"hex", fg:"#000", spacing:4};
var display = new ROT.Display(o);
SHOW(display.getContainer());
display.draw(0, 0, "0,0", "", "#fff");
display.draw(2, 0, "1,0", "", "#ccc");
display.draw(4, 0, "2,0", "", "#888");
display.draw(1, 1, "0,1", "", "#888");
display.draw(3, 1, "1,1", "", "#fff");
display.draw(5, 1, "2,1", "", "#ccc");
display.draw(0, 2, "0,2", "", "#fff");
display.draw(2, 2, "1,2", "", "#ccc");
display.draw(4, 2, "2,2", "", "#888");
display.draw(1, 3, "0,3", "", "#888");
display.draw(3, 3, "1,3", "", "#fff");
display.draw(5, 3, "2,3", "", "#ccc");
#3: Double width
Horizontal lines have constant "y" coordinate. "x" coordinate increases "right" by two. Even lines have even "x" values; odd lines have odd "x" values.
- Distance:
|dy| + max(0, (|dx|−|dy|)/2)
- Storage: needs twice the storage – half of the possible coordinate values (with odd sum) is not used at all.
- Neighbors:
(−2,0); (2,0); (−1,−1); (1,1); (−1,1); (1,−1)
- Straight lines:
(x ± 2n, y); (x ± n, y ± n); (x ∓ n, y ± n)
- Remarks: x+y is always even.
var o = {width:6, height:4, layout:"hex", fg:"#000", spacing:4};
var display = new ROT.Display(o);
SHOW(display.getContainer());
display.draw(0, 0, "0,0", "", "#fff");
display.draw(2, 0, "2,0", "", "#ccc");
display.draw(4, 0, "4,0", "", "#888");
display.draw(1, 1, "1,1", "", "#888");
display.draw(3, 1, "3,1", "", "#fff");
display.draw(5, 1, "5,1", "", "#ccc");
display.draw(0, 2, "0,2", "", "#fff");
display.draw(2, 2, "2,2", "", "#ccc");
display.draw(4, 2, "4,2", "", "#888");
display.draw(1, 3, "1,3", "", "#888");
display.draw(3, 3, "3,3", "", "#fff");
display.draw(5, 3, "5,3", "", "#ccc");
#4: Cube projection
Horizontal lines have constant "y" coordinate. Diagonal lines have constant "x" and "z" coordinates. Neighboring cells differ by 1 in two coordinates.
- Distance:
max(|dx|,|dy|,|dz|)
- Storage: WTF
- Neighbors:
(1,0,−1); (−1,0,1); (0,1,−1); (0,−1,1); (1,−1,0); (−1,1,0)
- Straight lines:
(x ± n, y, z ∓ n); (x ± n, y ∓ n, z); (x, y ± n, z ∓ n)
- Remarks: x+y+z = 0
var o = {width:6, height:4, layout:"hex", fg:"#000", spacing:4};
var display = new ROT.Display(o);
SHOW(display.getContainer());
display.draw(0, 0, "0,0,0", "", "#fff");
display.draw(2, 0, "1,0,-1", "", "#ccc");
display.draw(4, 0, "2,0,-2", "", "#888");
display.draw(1, 1, "1,-1,0", "", "#888");
display.draw(3, 1, "2,-1,-1", "", "#fff");
display.draw(5, 1, "3,-1,-2", "", "#ccc");
display.draw(0, 2, "1,-2,1", "", "#fff");
display.draw(2, 2, "2,-2,0", "", "#ccc");
display.draw(4, 2, "3,-2,-1", "", "#888");
display.draw(1, 3, "2,-3,1", "", "#888");
display.draw(3, 3, "3,-3,0", "", "#fff");
display.draw(5, 3, "4,-3,-1", "", "#ccc");