Hexagon directions

Hex grids have six primary directions. Look at the max of |{{labels.s}}-{{labels.q}}|, |{{labels.r}}-{{labels.s}}|, |{{labels.q}}-{{labels.r}}|, and it will tell you which wedge you're in.

You can also construct six “diagonal” directions. Look at the max of |{{labels.q}}|, |{{labels.s}}|, |{{labels.r}}|:

In both cases, some hexes are on the boundary between two wedges. There will be a tie between two of the max() arguments.

Also see this stackoverflow answer^[1], which includes an interactive demo.

Walter J needed a way to calculate the "main" direction vector of the wedge, and sent me this branchless code:

let parity = sign(hex.q - hex.r) + sign(hex.r - hex.s) + sign(hex.s - hex.q);
parity = sign(parity * 2 + 1); // turn 0 into 1
let q = min(abs(hex.q), max(hex.r * parity, -hex.s * parity, 0)) * sign(hex.q);
let r = min(abs(hex.r), max(-hex.q * parity, hex.s * parity, 0)) * sign(hex.r)
return [q, r, -q-r];

Source code for the the diagrams on this page: directions.js

Angles#

If you want the angles, I the simplest thing is to convert to cartesian coordinates using hexToPixel, then use atan2(y,x) to calculate the angle. However, if you don't need the angle itself, but only a comparison key, you can use atan2(r,q) as a cheaper substitute. Compare the true angle to an angle-like sort key:

I wonder if there's a way to use spirals from cos/sin^[2] with hexagonal grids^[3] to construct hexagonal spirals on a grid.