Offset grid

 from Red Blob Games
28 May 2023

Chris Cox sent me his offset grid code[1] that produces irregular looking rectangle grids[2] where each rectangle in the output corresponds to exactly one grid space. I admit I didn't think this was possible. I had been thinking that if I move the vertices around, they won't be rectangles anymore, and if I move the edges around, they won't line up anymore. His solution is clever and simple!

I wanted to try recreating it. Click animate to see how a square grid turns into the rectangle grid.

Regularity
Coloring

Source: offgrid-visualization.js

The Sylves library supports offgrid[3].

Email me , or tweet @redblobgames, or comment: