Hex region borders

Sometimes you want to outline a region on a hex grid. Here are two techniques for that. Both of these techniques also work on other convex polygon maps, including square grids and triangle grids but also irregular polygons like voronoi diagrams.

Straight edges#

For every pair of adjacent hexes, I want to draw an edge when the two hexes are in different regions. Click to change the owner of a hex:

1. Iterate over all hexes H.
2. For each hex, iterate over all 6 neighbors D.
3. If D is on your game map, and H’s region and D’s region are different, draw the edge between H and D.

This algorithm will draw each edge twice, once when H is different from D and once when D is different from H. This may not be a problem if you’re just drawing. You can avoid it by assigning an order to owners, and only drawing when H’s owner is greater than D’s owner.

If you have a region you want to draw around, you can iterate over all the hexes in that region instead of all hexes on the map. See this stackoverflow question^[1]. This will also avoid drawing edges twice. If you want to link the edges into a single polygon, look at this partial explanation. If you’re using Unity, take a look at Dillon Shook’s blog post^[2].

Curved edges#

This question on reddit^[3] made me think: would quadratic curves work for borders? Click to change the owner of a hex:

Logic: for each hex H, for each of the 6 directions D, consider the hex D1 in direction D and hex D2 in direction D+1. If both of those hexes are owned by a different owner than hex H, then draw a curved line from {midpoint between H and D1} and {midpoint between H and D2}. The control point for this can be somewhere in between, but pushed out farther from the center of H. Here’s a crude diagram showing one curved section:

To ensure continuity of curves, the ideal position for the control point is the polygon vertex where all three hexagons meet (shape parameter 4/3). Alternatively, use straight line segments instead of a curve (shape parameter 1.0) for an angular look.

If you want to draw lines on both sides of a border, you can duplicate each curve, making one a little closer towards the hex center and the other a little farther. I haven’t worked out the math for this. Alternatively, you could write logic to handle the case where the hex H shares ownership with either D1 or D2, but not both. I haven’t worked that out either.