Full Screen

# Hex cube visualization

Sadly the original bl.ocks.org seems to be dead. Hopefully you can still see the visualization at this clone.

Inspired by Amit Patel’s diagram illustrating cube coordinates. That diagram initially confused me because the edges of the grid cubes centered on integer coordinates in the plane x + y + z = 0 don’t themselves lie in the plane, so it seemed like the animation “cheated” at the end by dissolving to planar hexagons. But of course the point is just that the silhouettes of those cubes form a perfect hexagonal tiling of the plane. That tiling is highlighted as red hexagons here.

I made this animation to get a better intuition for how those cubes intersect the zero plane. It shows what happens as we slice the cubes at x + y + z = w while reducing w towards 0. Fittingly the slice where the zero plane intersects each cube is in fact itself a hexagon which is inscribed within the hexagonal silhouette of the cube and rotated by 30° to that tiling. In the triangular gaps we see grid cubes centered on the planes x + y + z = ±1 poking through from above or below.

It also helps explain how the cube rounding algorithm works. Starting with a 2D point, we find the corresponding cube coordinate (x, y, z) on the plane x + y + z = 0. When we round to integers (rx, ry, rz) we either end up with rx + ry + rz = 0 - a cube centered on the zero plane - implying our original 2D point was in one of the inscribed hexagons, or we have rx + ry + rz = ±1 which means our original point was in one of the small triangular regions where a grid cube centered off the zero plane shows through. Each such cube has exactly three neighbours that are centered on the zero plane, found by varying x, y or z by one in the appropriate direction. Using the cube distance algorithm, we can determine the right neighbour by minimizing the max of the three axis distances.