A surprise to be on HN!<p>Tech notes for the curious:<p>I started the page in 2013 based on notes I had been collecting for ~20 years before that. I update this reference page as I come up with better visualizations and explanations. The last major update was in 2018 when I rewrote it from using d3.js to using vue.js. It greatly reduced the amount of code I was writing, and also let me make the page more interactive. I then added lots more (doubled coordinates, links to papers, axes legends, diagonal directions, side by side comparisons) and improved most of the existing sections. In 2019 the changes were minor, rewriting the map storage section and improving performance. In 2020 I improved the cube/hex animation, the pixel-to-hex section, and added Rust sample code. There's lots more I could add to the page[1] but I don't have any specific plans for when I'll get around to it.<p>The page is svg- and js-heavy. I prerender the diagrams on the server (try loading it without js!). Then using IntersectionObserver on each section of the page, I swap the static diagrams and text with interactive versions. This improves load times somewhat, because almost no JS has to run on page load.<p>For printability I process the page with xsltproc, extract all the links, and turn them into footnotes. Try print preview on the page to see these. Unfortunately the diagrams are broken when printing in Chrome (it works in Firefox) so I need to investigate.<p>[1]: <a href="https://www.notion.so/redblobgames/f8bc2f44fba94607afa9c06711d23245?v=0766432cb1534ce582ce35b33cbbef7e&p=7d2d4d624bc5483dafbe615d75ab3902" rel="nofollow">https://www.notion.so/redblobgames/f8bc2f44fba94607afa9c0671...</a>
I love this page. I've used this page as a reference, it saved me a lot of time and left me with a stronger understanding as well.<p>It reminds me of old school web. When google first came on the scene I was amazed at how many informational pages from either hobbyists or professionals existed (but which I wasn't finding with older search engines), where someone just decided to put everything they know about some topic into a page in glorious detail.
FWIW, I strongly prefer square grids for tabletop games.<p>Hexagonal grids give you precise measurements in exactly 6 directions.<p>If you approximate sqrt(2) as 1.5 then square grids give you pretty darn accurate measurements in 8 directions, including 2 pairs of directions that are orthogonal, which is good for rectangular features like buildings.<p>Furthermore the distance between two points can be quickly calculated with (long-side + 1/2 short-side), which is doable in your head, unlike the distance calculation on a hex grid.<p>Lastly, if you divide the circle into a large number of slices and calculate the average error for path distance using hex or squares, among those slices, the average error (compared to pythogorean) is smaller with squares (obviously for small multiples of 6 and small multiples of 8 respectively, one or the other will be preferred).
For a semi-goofy take (CGPGrey) on hexagons:<p><a href="https://youtu.be/thOifuHs6eY" rel="nofollow">https://youtu.be/thOifuHs6eY</a>
In case anyone is doing signal processing on a hexagonal grid, the <a href="https://en.wikipedia.org/wiki/Hexagonal_fast_Fourier_transform" rel="nofollow">https://en.wikipedia.org/wiki/Hexagonal_fast_Fourier_transfo...</a> is pretty useful. I work on consumer phased arrays with hexagonal grids, so the HFFT is useful for computing the far-field beam pattern.
Surprised they didn’t cover hexagonal ring data structures. Here[0] is a visualization along with the calculations needed to find nearest neighbors.<p>[0] <a href="https://www.flickr.com/photos/jeremyjohnstone/3979747216/" rel="nofollow">https://www.flickr.com/photos/jeremyjohnstone/3979747216/</a>
CGP Grey did a video about hexagons recently. I mean, there's only so much you can say about hexagons really, but he manages to cover a lot of ground.<p><a href="https://www.youtube.com/watch?v=thOifuHs6eY" rel="nofollow">https://www.youtube.com/watch?v=thOifuHs6eY</a>
This is from 2013, so I guess it comes up every so often (2019: <a href="https://news.ycombinator.com/item?id=19184412" rel="nofollow">https://news.ycombinator.com/item?id=19184412</a>). But, I've had it bookmarked since the first time I saw it come up. It's a great article for anyone who's ever played a hexagonal game or has thought about making a hexagonal game.<p>The source site also has a lot of great stuff on applications of computer science to less-thought-of aspects of game development (by which I mean people usually think of pixel-blasting 3D engines as "game development", but there's a lot more to it)
Ah, I wish I had come across this two weeks ago!<p>I've been doodling with Processing and was working on hexagonal Truchet tiles. (basically random tiles that have paths connecting to any random tiles next to it, with hexagons as tiles instead of squares)<p>I ended up having to figure out some of that stuff again, in particular the coordinate system inside each tile so that I could deal with integer coordinates and translate them into the right fraction of the radius.<p>It was fun to figure out what I needed, so I don't regret it :)<p>And I am also planning on doing something with cubes, so this page will come in handy.<p>Thanks for sharing! I love how it covers all aspects of the problem.<p>Result of the tiling: <a href="https://twitter.com/_timothee/status/1330315929641570304" rel="nofollow">https://twitter.com/_timothee/status/1330315929641570304</a><p>Diagram of my coordinate system: <a href="https://twitter.com/_timothee/status/1327859098642046976" rel="nofollow">https://twitter.com/_timothee/status/1327859098642046976</a>
See also several past discussions, though none recent:<p><a href="https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=redblobgames.com%20hexagons&sort=byPopularity&type=story" rel="nofollow">https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...</a>
Every time I see a post of redblobgames, I realize what a treasure this website is.<p>I've been on this website so often, and pointed other people so many times to it... I hope this never gets lost and is archived.<p>If Amit would write a book about gamedev, I'd definitely buy it and add it to my collection.
I almost never use bookmarks any more, but I’ve had this page bookmarked for the better part of a decade now and still refer to it at least once a year, and I don’t even work in game development.
An added challenge is to efficiently construct hex grids by hand——quickly, at the expense of accuracy. I didn’t have access to a printer early in the pandemic, but wanted to put together maps for a tabletop rpg. This is a clever solution: <a href="http://www.rdwarf.com/users/wwonko/hex/irregular/" rel="nofollow">http://www.rdwarf.com/users/wwonko/hex/irregular/</a> It has the added benefit of being easy to remember
Uber's H3 geospatial library uses a lot of these concepts. <a href="https://eng.uber.com/h3/" rel="nofollow">https://eng.uber.com/h3/</a>
In case you want to make a hexagonal cellular automata:<p><a href="https://github.com/churchofthought/HexagonalComplexAutomata" rel="nofollow">https://github.com/churchofthought/HexagonalComplexAutomata</a><p>Or in WebGL:<p><a href="https://github.com/churchofthought/Grautamaton/tree/complex" rel="nofollow">https://github.com/churchofthought/Grautamaton/tree/complex</a>
This just came up a bit ago in another thread. RBG is so good. Like I did a while back I'll mention that that work is the reason I could write this Ruby svg viz library <a href="https://github.com/SpeciesFileGroup/waxy" rel="nofollow">https://github.com/SpeciesFileGroup/waxy</a> and it be a fun, rather than painful process.
And if you want something cool to do with this, try implementing Gliński's variant of chess.<p>It’s something I’m dabbling in, but no doubt an order of magnitude more difficult to implement than orthodox chess.<p>The idea of indexing by cubes is so obvious once you discover it, but maybe not as easy to intuit. Same goes for the data structures.
Such an invaluable resource! I spent many hours here while helping develop <a href="https://hexiconapp.com/" rel="nofollow">https://hexiconapp.com/</a>. The axial coordinate system, in particular, makes working with hexagons much simpler.
Are you familiar with the kisrhombille grid?<p><a href="https://en.wikipedia.org/wiki/Truncated_trihexagonal_tiling#Kisrhombille_tiling" rel="nofollow">https://en.wikipedia.org/wiki/Truncated_trihexagonal_tiling#...</a><p>Scaleable like a square grid.<p>12 directions.
I remember this page. I used it almost a decade ago when implementing a settlers of catan clone for that was going to be the main project for a class curriculum. I was a TA/RA at the time.<p>It's a great page. It was invaluable to me.
This is an awesome resource I keep going back to now and again for the sheer fun of it. Glad to see it on HN again (it’s well worth reposting occasionally for folk who haven’t seen it yet).
Good stuff. I’m surprised that I have not seen a voxel-based game that leverages a purely 2D render and expects the player to switch between projections to work with the area.