Search code examples
javascriptmathsvghexagonal-tiles

Calculate width of hexagons in a field

I am drawing a hexagonal grid using javascript and svg. The grid needs to have a fixed width (let's say, of 1000px). The dimensions of the grid can differ, but I have that information (the columns and rows). I have written a function that given a hexagons 'bounding box' width (the height is a factor 0.8660254 of the width), will calculate all 6 points and draw a polygon between them. I am staggering the x coordinate such that the polygons neatly connect.

However, the part I am stuck on currently is: How do I figure out the width of the polygons such that they take up the most available space on the canvas? I cannot simply do width of the canvas / number of columns because that doesn't take into account the staggering (see the image below)

hexagonal grid

How can I figure out how to stretch the hexagons such that they all fit and take up as much space as they can?

Solution

  • If you have C columns and hexagon side size (unknown yet) is x, we can write inequality:

    x/2 + C*x*3/2 <= width
x*(1+3*C)>=2*width
x <= 2*width / (1+3*C)

    So calculate the right part and get floored integer (if you need integer side)

    For height with R rows:

    x*sqrt(3)/2 + R*x*sqrt(3)/2 <= height
x <= 2*height / (sqrt(3) + R*sqrt(3))

    Get min value from calculated sizes to fit both width and height