Stretching Grids

Grids are one of the easiest visual motifs to set up in code. They are one of the first things you learn in creative coding tutorials. It is quite interesting to play with the fundamental logic of grids to achieve a more dynamic and playful visual outcome. To understand this better, we can look at a grid as a collection of repeating distances in two or three dimensions. Each cell represents that distance. If we can change the distances and make them non-uniform, we get a dynamic grid. If we animate the change in distances, we get a stretching and contracting grid animation.