Hex Grids

If you're looking for the editor, you can find it here. If you're looking for the code, you can find it here.

This week, I revisited a shape I've spent a lot of time thinking about: the hexagon. Hexagon grids are used in lots of games, owing to some unique properties. For example, the distance between two hexagon neighbors is always the same, unlike in a square grid, where the distance between a corner and a side neighbor is different from the distance between two side neighbors.

I've built hexagon grids before in Unity, but wanted to go back to basics and build one in TypeScript, much like I did with the square grid while working on the Marching Squares renderer.

I started by visiting the excellent Red Blob Games website, which shows up everywhere when you start looking into hexagon grids. I used the resources as the base for my own implementation, including the layout and orientation of the hexagons (flat or pointy top).

Giving each hexagon a random color left me with this:

I pulled in the perlin noise functions I used for the Flow Field renderer in week 2, and combined it with a falloff function to create a heightmap that has a value of 1 at the center and 0 at the edges. I then combined them to create a noise map that falls off at the edges, which allows the noise to blend into the background.

I added a few controls to the renderer to allow me to change layout and noise parameters, as well as a color gradient editor, so I could map the values of the map (which are in the range [0-1]) to colors. Finally, I added an option to render the grid cells as either hexagons or circles, which. These options allow for some good variation, but could definitely be expanded.

Here are a few images of the grid with different settings:

I had a lot of fun building this, but the results are somewhat limited by the settings. Ideally, I'd like to improve my hex grid implementation to allow for more interesting shapes and patterns, as well as potentially layering multiple grids on top of each other. The editor renders to the 2d canvas, which limits performance quite a bit, so I'd like to try rendering using WebGL or WebGPU, which would allow for more complex shapes and significantly more hexagons.

Since Hexagons are so useful for game boards, I'd like to use this as a base for other projects. I've got a few ideas for hex-based games, and I think this could be a good starting point for more complex simulations, like an erosion sim.

See you next week!