How to draw/manage a hexagon grid?

Question

I've read this article: generating/creating hexagon grid in C . But look like both the author and answerer have already abandoned it.

√(hexagonSide - hexagonWidth * hexagonWidth): What's hexagonSide and hexagonWidth? Isn't it will < 0 (so square root can't be calculated).

And, can I put a hexagon into a rectangle? I need to create a grid like this:

Source:Wikipedia

One more thing, how can I arrange my array to store data, as well as get which cells are next to one cell?

I have never been taught about hexagon, so I know nothing about it, but I can easily learn new thing, so if you can explain or give me a clue, I may do it myself.

Doing this would require nothing more than a little geometry/trigonometry. The angles at the vertex of a hexagon are all 360/3 degrees or 120 degrees. With this information and use of the Java Math library methods (though be careful to change degrees to radians), you should be able to draw this easy without use of other code. Work with diagrams on paper first before committing code to IDE. I find it best to think of a hexagon as six equilateral triangles, but do whatever works best for you. Then come on back with your code if you're stuck, and we'll be more than glad to help! — Hovercraft Full Of Eels, Aug 22 '11 at 04:19
I'm not sure what the guy in the link was talking about, but basic trigonometry will tell you that the side of the hexagon, s, is related to its height by the s * square root of 3 or in Java `s * Math.sqrt(3);` — Hovercraft Full Of Eels, Aug 22 '11 at 04:35
See this post on how to find neighbours http://stackoverflow.com/questions/6661169/finding-adjacent-neighbors-on-a-hexagonal-grid — Buhb, Aug 22 '11 at 04:55
@Hovercraft Full Of Eels: Thank, but your equation is wrong, it's `s / Math.sqrt(3);` :) — Luke Vo, Aug 22 '11 at 05:10
@WN: I beg to differ. If "s" is the side of a hexagon (so each hexagon has 6 sides, s), then an equilateral triangle of side length s will have a height of s * sqrt(3) / 2... basic trig for the sin of a 60 degree angle. Since the height of the hexagon is twice the height of the triangle, the height from flat base to flat top is 2 * s * Math.sqrt(3) / 2 which equals s * Math.sqrt(3). Q.E.D. — Hovercraft Full Of Eels, Aug 22 '11 at 05:14
@Hovercraft Full Of Eels: Oh sorry, I thought s is the height of hexagon, I mistook "is related to its height" with "is height". — Luke Vo, Aug 22 '11 at 05:29

score 9 · Accepted Answer · edited Aug 26 '16 at 08:37

9

One way to represent the data would be to think of it like this:

a-b-c-d-e-
-f-g-h-i-j
k-l-m-n-o-
-p-q-r-s-t
u-v-w-x-y-

The dashes are null locations -- they exist in the array, but do not represent any hexagon. Here, hexagon m is connected to hexagons c, g, h, q, r, w. Once you are ok with that representation, you can make it more compact by removing the null locations:

abcde
fghij
klmno
pqrst
uvwxy

Hexagon m is still connected to hexagons c, g, h, q, r, w, it's just a little harder to see.

Update Read this: http://www-cs-students.stanford.edu/~amitp/game-programming/grids/

edited Aug 26 '16 at 08:37

alkanen

636
6
16

answered Aug 22 '11 at 14:10

Fantius

3,806
5
32
49

This representation shows hex grid with pointed top (two neighbours on top), but original question shows hex grid with flat top (one neighbour on top). – Dima Karaush May 17 '22 at 10:33

score 4 · Answer 2 · answered Aug 22 '11 at 08:35

This is how I draw the hexagon:

    public Hexagon(float pX, float pY, float pSize) {
        super(pX, pY, pSize, pSize);
//      setColor(1, 0, 0);
        setAlpha(0);

        float x1, x2, y1, y2;
        float lineWidth = 3;

        x1 = 0; y1 = pSize / 2;
        x2 = pSize / 4; y2 = (pSize * ((2 - (float)Math.sqrt(3)) / 4)); // Done
        Line line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        x1 = x2; y1 = y2;
        x2 = pSize * .75f; // Done
        line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        x1 = x2; y1 = y2;
        x2 = pSize; y2 = pSize / 2; // Done
        line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        x1 = x2; y1 = y2;
        x2 = pSize * .75f; y2 = pSize - (pSize * ((2 - (float)Math.sqrt(3)) / 4)); // Done
        line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        x1 = x2; y1 = y2;
        x2 = pSize / 4; // Done
        line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        x1 = x2; y1 = y2;
        x2 = 0; y2 = pSize / 2; // Done
        line = new Line(x1, y1, x2, y2);
        line.setLineWidth(lineWidth);
        attachChild(line);

        touchableArea = new Rectangle(pSize / 4, pSize / 4, pSize * .75f, pSize * .75f);
        touchableArea.setAlpha(0);
        attachChild(touchableArea);
    }

It's a rectangle class of `AndEngine`. You can achieve the same result with Android's Canvas view by drawing the lines as mentioned. — Luke Vo, Mar 24 '13 at 16:57
So this draws a hexagon? Please see [my question](http://stackoverflow.com/questions/30241050/how-to-draw-a-hexagon-map-in-libgdx-using-the-polygon-class?noredirect=1). Maybe you can help me sort my problem out. — Jax, May 14 '15 at 16:29

score 1 · Answer 3 · answered Jul 22 '14 at 14:34

1

you can take a look at https://code.google.com/p/jhexed/ I guess it can be an example

answered Jul 22 '14 at 14:34

Igor Maznitsa

833
7
12

How to draw/manage a hexagon grid?

3 Answers3