search

flauwekeul / honeycomb

Create hex grids easily, in node or the browser.
https://abbekeultjes.nl/honeycomb
MIT License
638 stars 59 forks source link

Is there a way to add spaces/margin between hexagons? #37

Closed geekyspartan closed 5 years ago

geekyspartan commented 5 years ago

Hey,

First of all thanks for the great library.

So, for one of my project, I am trying to plot hexagons, but for each hexagon, I want to have some spacing(more like a margin, padding) between each hexagon, I tried to do this using svg library, but couldn't make it work. Is there a way in Honeycomb library to do it mathematically? I tried to play with the hex generator, but couldn't get proper margin/spacing between each hexagon.

One of the approaches, which I think might work is to change the corner coordinates(which is the same for every hex) before I render the points.

But, I couldn't find figure out the math as of now to reduce the corner coordinates evenly(without distorting the hexagonal shape), more like shrinking the size of the hexagonal.

Any clue will be deeply appreciated.

geekyspartan commented 5 years ago

I think, changing the corner method worked for me. So basically, I create a dummy grid with the size of the node(in extendHex) a little less than the original hexagonal grid, but using the same start coordinates, and while rendering I use the corners given by this small new grid.

It helped me create a grid, similar to grid shown here

Sample Grid

flauwekeul commented 5 years ago

That's a fine way of solving the problem. I'm glad you figured it out yourself 👍

giovanni-bertoncelli commented 2 years ago

@geekyspartan Do you have some sample code?

geekyspartan commented 2 years ago

@geekyspartan Do you have some sample code?

Sorry, I don't have a sample code now. I wrote it in my previous company.