Grid animation

from Red Blob Games
8 Mar 2021

I wanted to try making an animation between square and hexagon grids, and square and triangle grids. I ended up making a three-way interpolation that lets you pick any point in between. Click a button to animate to that grid type, or pick any point in the control shape:

= {{shape.t.toFixed(2)}} = {{shape.s.toFixed(2)}} = {{shape.h.toFixed(2)}}

I'm looking at ideas for rewriting my 2006 page about grids[1] . One possible approach would be to write the whole thing focusing on square grids, starting with the parts, relationships, and formulas. Then give the reader an option to change to hexagon or triangle grids, and have all the diagrams change into the other grid type. Only at the very end talk about F,E,V counts (or maybe drop that section). Right now the article spends too much time at the beginning talking about how different grid types are related. I want to make the page shorter, more focused, and more directly useful.

There are better animations possible. See Craig Kaplan's animation[2] and Mike Bostock's animation[3]. I didn't use them because I want to meet other constraints, such as being able to animate individual tiles, edges, and corners in a way that preserves the coordinate systems I'm using for my article from 2006. I also wanted the point halfway between square and {triangle, hexagon} to represent how I think about converting from square grid coordinates to triangle or hexagons. The idea is that since everyone understands how to build square coordinates, the animation explains how to construct a coordinate system for a different grid type. The point halfway between triangle and hexagon doesn't match my thinking, but I'm not constructing either of those coordinate systems from the other.

Email me , or tweet @redblobgames, or comment: