Hex grids have six primary directions. Look at the max of |s-q|, |r-s|, |q-r|, and it will tell you which wedge you're in.
You can also construct six “diagonal” directions. Look at the max of |q|, |s|, |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];
Angles#
If you want the angles, the simplest thing is to convert to cartesian coordinates using hexToPixel, then use atan2(y,x) to calculate the angle.
There are two approximations worth looking at. If you can determine which wedge you are in, from the top of this page, you can interpolate between the known angles at the axes. This is a fairly good approximation. Thanks to Pepijn for sending it to me. Or if you don't need the angle itself, but only a comparison key, you can use atan2(r,q). It has fewer branches than the wedge approach but it uses atan.
I've wondered if there's a way to use spirals from cos/sin[2] with hexagonal grids[3] to construct hexagonal angles.
Source code for the the diagrams on this page: directions.js