Hexagon with spacing

from Red Blob Games
16 Apr 2018

Someone asked me in email how to do pixel-to-hex when there’s space between the hexagons. I wasn’t sure, so I came up with some ideas on paper, and then tested them here.

Style:

The solution is to use pixel-to-hex with the larger hexagons (including space), and then calculate the difference between the rounded and unrounded hexes. This difference dx, dy, dz gives you some information about how far you are from the center of the hex. I think there’s probably a simpler expression than max - 0.5*min but haven’t simplified yet. (The max must be one of the three axes, as is the min, and the constraint dx+dy+dz = 0 should let us find a simpler expression)

Source code is a bit messy but it’s short: hexagon-with-spacing.js

Email me at , or tweet to @redblobgames, or post a public comment: