# 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)

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

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

User contributions licensed under: CC BY-SA
3 People found this is helpful