Rectangular grid that goes positive and negative horizontal and vertical

[Celludriel]

I have been thinking on making a react application to map out a universe for the game X4. They use a hex system to represent their universe. However they use 0,0 as the center of the universe in a rectangular grid and then they build around it.

https://i.imgur.com/M1pfTGy.png

so you can have fe:

[-1,1][0,1][1,1]
[-1,0][0,0][1,0]
[-1,-1][0,-1][1,-1]

Is there a way to use honeycomb to accomodate this behavior and create such a grid. I could as a workaround translate 0,0 to -1, 1 when I display the grid onscreen as a matter of just changing the presentation. But in the future I need to also add data behind the hexes to transform into an output json file. If I have to transform the coordinates each time it would get really cumbersome.

If you believe this to be a technical nightmare to do I'll understand perfectly

Kind regards,

Celludriel

[flauwekeul]

The rectangle() traverser (or static Grid method in v3) accepts a start option. This is the top left hex coordinates. So if you know the width and height of your rectangular grid, the start coordinates should be roughly { q: -width / 2, r: -height / 2 }. If you use these options for the rectangle() traverser (the static Grid method of v3 has the same API), you create a rectangular grid of 9x9 hexes with { q: 0, r: 0 } in the middle:

rectangle({ start: { q: -2, r: -4 }, width: 9, height: 9 })

When rendering, you have to add an offset (because the { q: 0, r: 0 } hex will always be at the top left if you use the rendering function in the example).

[Celludriel]

When I put any negative integers in the start: [-2, -2] I end up with errors. Maybe I'm still doing something wrong in my setup. In the meanwhile I went on to at least change the representation and ended up with the following.

https://jsfiddle.net/Celludriel/v1xLrsz3/32/

I tried with a grid width: 5 and height: 5, and a grid: 6 and height: 6. At first glance at least the text seems to be as expected. I'll try once more with the start property if I can get it right.

[flauwekeul]

I think it's better to let the visual coordinates and the actual coordinates be the same. I've updated your code to show a way to achieve this: https://jsfiddle.net/Flauwekeul/extn5fh4/

[Celludriel]

I didn't think about looking at the drawing , now you've shown me it's so obvious ! I was deadlocked on changing the grid parameters.

I should be able to now draw any size grid I want. Next up for me is add click events but I'll be able to figure that one out normally.

Thanks for the help

[flauwekeul]

Glad I could help 😃