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:

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.

Answer 1

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/

Answer 2

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);
    }