How to lay the floor with hexagon?

Hey~All. I want to know how to tile a small hexagon into a large hexagon. It’s a pity that my math scores are really poor. Hoping that someone would give me a lift . This is the result I expect:

https://playground.babylonjs.com/#QANVC6#2145

3 Likes

Hello! I’m going to see if I can play around with your playground, but to get things started let me share some resources that may help: :smiley:

2 Likes

Hey there! We actually have this really cool hex tile demo our own @PirateJC made for a YouTube series.

https://playground.babylonjs.com/#XEP0ZD#6

The video you probably would like to watch in the series is Interactive Hex Tiles: Part 3 - Building the Hex Grid - YouTube part 3 where he explains his version of the algorithm. ​If you are just looking at the code the main function for the grid is createHexGrid (line 160)

Here is a second version I made using your demo.https://playground.babylonjs.com/#QANVC6#214 High level summary of the algorithm I tried. We want to walk up the hexagon by increasing the number. to do the first half, then do it in reverse for the second half. So on the way up we want to have 3 in the row, then 4, then 5 for the first half and then have 5,4,3 on the second half. Also the distance from the center to the edge was was not 1 but 0.6 :wink:

7 Likes

Woah, I hadn’t seen that demo before, it’s SO COOL! :star_struck:

4 Likes

Because I enjoy this sort of thing I had a go

As a wall https://playground.babylonjs.com/#QANVC6#2147

As a floor https://playground.babylonjs.com/#QANVC6#2148 and with addition of gapping between tiles.

6 Likes

https://playground.babylonjs.com/#QWYGJQ

4 Likes

That’s pretty cool. I completely forgot about this demo!

3 Likes

There’s a hex library called honeycomb-grid if you want to see more math - it’s used in this demo (the demo is a grid) - the library supports hex shapes of hexes:
Babylon Basic - Instances ⋅ Storybook (brianzinn.github.io)

4 Likes