Hexagon half directions

from Red Blob Games
21 Feb 2018

NOTE: this does not work correctly in IE Edge (not implemented until until build 17074, probably available April 2018) or Safari 11 (seems to be a bug: the outer rotation seems to be cached and then it doesn’t update the inner rotation properly). I have a workaround for Safari that runs slower, but don’t have it implemented here. Please use Firefox or Chrome (sorry!).


An email made me wonder about half directions for hexagons. On the main page I show how to do this separately for the main 6 and the 6 “diagonals” but here I unify them by taking the average of two directions:

/** move in 'distance' units in some 'direction' from the 'center' hex */
function hex_in_direction(center, direction, distance) {
    // when the direction is an integer, both of these will be the
    // same, but when it's fractional, we'll get both the lower
    // and higher direction, and then we can average the two
    let a = hex_scale(hex_direction(Math.floor(direction)), distance);
    let b = hex_scale(hex_direction(Math.ceil(direction) % 6), distance);
    let avg = hex_round(Hex(0.5*(a.q+b.q), 0.5*(a.r+b.r), 0.5*(a.s+b.s)));
    return hex_add(center, avg);

And since I wrote this page, I decided to use it as place to learn CSS transitions. Try the Flat, Pointy, and Animate buttons.