Hacker News new | ask | show | jobs
by amitp 2018 days ago
A surprise to be on HN!

Tech notes for the curious:

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.

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.

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.

[1]: https://www.notion.so/redblobgames/f8bc2f44fba94607afa9c0671...

11 comments

I found your blog a number of years and want to say a huge thanks for your amazing work. It is beautifully written and examples are extremely helpful. I used the hexagon layout to map sentiment in passages of text and blogged about it here:

https://www.gearoidoconnor.ie/blog/2017/02/22/Building-on-de...

I'm the author of a Swift framework for working with Tiled tile maps and want to thank you for your work; your site was invaluable in helping me wrap my head around hexagonal grid mapping & pathfinding.

There is truly nothing out there like it. :)

https://github.com/mfessenden/SKTiled

This is a wonderfull source. Very well written. I'm happy to see it on Hacker News. A few years since I used it last. Didn't know you had rewritten it but I see now the updates you've done, especially in interactivity. I'll continue to use this as my main reference point for hex grids, especially now that I've picked up pace on my virtual tabletop project. Good work!! Thanks
Thanks so much for your awesome article. It was a fantastic resource which gave me invaluable insight while I was working on this project: https://github.com/ajxs/jsFO
I've had this page added to my home screen on my phone for years, it's honestly one of the most amazing resources online. Even if you don't have an interest in the topic, it's still an amazing read. And if you're developing games using a hexagonal grid, it's priceless. Thank you for this
I was curious about the print view, but apparently my Chrome crashes while doing so; I presume it's sent a crash log back to Google, it's not a problem in your excellent webpage / resource (no web page should be able to crash a browser).
I’ve returned to this page many times over the years. It was a great resource to start with, but I’ve always been impressed by the ongoing effort you’ve put in to make it even more useful. Many thanks.
Thanks for the resource. I'm pretty sure I used it for some of my simulations of C60 molecules hexagonal packing, during my physics PhD a few years back.
Thanks for creating this! I’ve been using it for some (really amateur) game design and found it incredibly helpful.
Was this by any chance inspired by the Well World series of books?