Fractional hex line drawing

 from Red Blob Games
5 Nov 2020

Got a question from hiimmrdave on twitter[1]: can fractional hexes be used with the hex line drawing algorithm on my page? I didn't know the answer, so I tried it out:

Offset:
{{offset}}

Sadly, the answer is … no. It leaves gaps. I think the problem is that the algorithm needs the alignment of the endpoints to be at the center of the hexes. The fractional hexes scattered along the line assume that. For example if you had a 1D line 0.0 to 4.0 <code>|–|–|–|</code> and wanted the centers of the pixels, you'd pick points 0.5, 1.5, 2.5, 3.5.

If the endpoint doesn't start at an integer, such as 0.2 to 4.2 then you'd want to still pick 0.5, 1.5, 2.5, 3.5, but the hex line drawing algorithm ends up picking 0.7, 1.7, 2.7, 3.7. To fix this we need to measure the new alignment, and adjust the fractional hexes appropriately. I don't have a good sense of whether this would really work but I'm cautiously optimistic. I just didn't try figuring it out myself so I don't know for sure.

Quick & dirty code: fractional-hex-line.js

Email me , or tweet @redblobgames, or comment: