NOTE: this does not work correctly in Safari 11–16 (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. If you are using Safari, please use a different browser, or upgrade to Safari 17.
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.