Hex axial coordinates to table coordinates conversion

I am developing a browser game based on a hex map. I am storing my data based on axial coordinates system.

I developed a function which shows me axial coordinates of hexes within $distance from a given hex. Now I want to show those hexes in a form in a HTML table. The data that I have is only axial coordinates of center hex as well a list of axial coordinates of hexes within distance (not sorted in any way) As shown in the transition scheme below, hexes may always be shown in form of a simple HTML table: But I am struggling at how to get each of the map hexes shown in a correct table field (row/column) of the table, assuming that table numbering looks like this: To solve this out it seems to me that in first instance I need to determine the size of the HTML table that I need. If I will be able to determine what is table coordinate of center of the HTML table then I would be able to find out localisation of each hex in reference to the center hex. In case of $distance = 1 I need 3 columns and 3 rows:

In case of $distance = 2 I need 5 columns and 5 rows: This leads me to the conclusion that my required HTLM table size is: $distance *2 + 1


The center hex lies in the middle of the table, so its coordinates are:

(\$distance *2 + 2) /2


But what is next, how to convert axial coordinates to table coordinates?

• Looking at the 5x5 table, it looks like the first number is the table row and the second number is the table column. – amitp Nov 20 '15 at 17:35
• This is a great guide to this: redblobgames.com/grids/hexagons – Silent137 Jan 14 '16 at 20:37