Hexagon half directions

 from Red Blob Games
21 Feb 2018

NOTE: this does not work correctly in Safari 11–15 (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 or Edge or Brave or anything but Safari (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.