Calculate width of hexagons in a field

Question

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?

You need 3 width of diagonal + 2 width of base for every 2 hexagons. `\_/ + _/` — IT goldman, Sep 15 '22 at 20:31
Yes! Indeed I figured that out, but the problem is I am trying to figure out these widths, whereas I only have the total width of the canvas, and the amount of columns. — spassvogel, Sep 15 '22 at 22:00
SVG isn't a canvas with pixels, they are **vectors**. You can draw the hexagons in any **viewBox** you want, and then display the SVG in 1000 **pixels** width — Danny '365CSI' Engelman, Sep 16 '22 at 06:43
Thanks for your comment @Danny'365CSI'Engelman but that's not at all what the question was about... — spassvogel, Sep 16 '22 at 08:27
Sorry, I thought you wanted to fill the grey area with the hexagons. — Danny '365CSI' Engelman, Sep 16 '22 at 09:15

MBo · Accepted Answer · 2022-09-16T06:07:16.443

1

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

edited Sep 16 '22 at 06:07

answered Sep 16 '22 at 04:28

MBo

77,366
5
53
86

score 0 · Answer 2 · answered Sep 15 '22 at 20:55

0

You need some trigonometry

Each Hexigon neighbor is at an increment of 60 degrees (pi/3) angle. Use cos (pi/3) * radius for the x location adjustment, and +/- sin (pi/3) * radius for height adjustment.

answered Sep 15 '22 at 20:55

ControlAltDel

33,923
10
53
80

2

Please note that cos(pi/3) is exactly 1/2. Don't use javascript's cos function for this. – Stef Sep 16 '22 at 08:51

Calculate width of hexagons in a field

2 Answers2