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.