GRD 24

DEX 01

A minimal straight grid.

At its essence, the code for drawing it is just a glorified wrapper around two nested loops.

for (let y = 0; y < 13; y += 1)
    for (let x = 0; x < 13; x += 1)
        p5.rect(x * 50, y * 50, 50, 50)

GRD 24

DEX 02

A minimal staggered grid.

We can add a half a cell offset to every alternate row. This gives us a staggered, less monotonous, appearance. Bricklayers found out that intertwining this way leads to buildings that are stronger.

GRD 24

DEX 03

Negative space.

Here we rotate the rectangles by 45°, and make them smaller. This common motif keeps brains entertained because of the negative space. It is no longer one thing, but two images intertwined in the same visual.

GRD 24

DEX 04

We can do the same thing, but not stagger. This'll give us marble floors, and chess boards.

GRD 24

DEX 05

If we don't reduce the size of the squares before rotating them, they will start overlapping, but there would still be negative space in the places where there is no overlap.

GRD 24

DEX 06

If we reintroduce the staggering of the alternate rows, they'll fit back in nicely, just like how they were in DEX 02 above.

In the last two DEXs, we're animating their rotation to show how they fit back in, but the animation also shows the variety of effects that can already be produced.

We could keep exploring these variations, but let us get back to DEX 03 - the one with the staggered, smaller, and rotated, squares. DEX 03 is a common motif in Indian, African and many other artworks (this is the Holiday season, so you'd have probably recently seen it in Christmas sweaters too!).

Part of the popularity probably has to do with how easy it is to make, but I feel it also has to do with the "necker cube" like phenomena it exhibits - how it changes shape if we stare at it for a while.

But the next modification blew my mind when I first chanced upon it. By adding a single rectangle to each cell, we can convert this simple motif into an isometric grid!

GRD 24

DEX 07

Isometric grid.

I just added one extra rectangle (a quadrilateral, but we can just think of it as a skewed rectangle) to each cell. In fact, this is the code for the function that draws each cell - first quad is the original (rotated) square we already drew for DEX 03, and the second quad is the new one:

m = s / 2 /* mid-point of side s */
quad(x, y, x+m, y-m, x+s, y, x+m, y+m)
quad(x, y, x+m, y+m, x+m, y+s, x, y+m)

Now, I don't know if this is the best way to draw an isometric grid, or if this is indeed even an isometric grid technically. I'm an artist by aspiration, not by ability or training, so I'm just amateuring around. But the simplicity of this formulation did blow my mind.

I guess this is perhaps because I personally have been enamoured by the isometric grid (I think that's what this is called), other people might indeed find it cliche. I had a carpet once, €20 only, that had a basic grayscale isometric pattern, and I would stare at it for more time than I'll acknowledge here, trying to figure out which direction the cubes were facing.

Making these on the computer, I've come across one more aspect of ambiguity: sometimes I start seeing these not as cubes, but as diagonal lines of "kites". Perhaps you can see what I'm talking about - focus on the negative space, and see how they form lines of "four sided triangles" flowing towards the top right of the figure.

From this to the cover is just a matter of adding colors.

GRD 24

DEX 08

I've added a different color for each of the three "faces" (there really are only two faces, the third face is the background, the negative space).

Notice how now there is not one but two different sets of kites flying around (one red, and one green). And the necker cubes, facing this way or that (shifting based on I don't know what part of my perception), are still there.

GRD 24


The final cover has a few more tweaks - there is no stroke, and the colors were taken from the isometric-ish cover of a notebook I have (Carpets, notebooks. Doctor, I have an isometric grid problem). On the notebook the top face (the yellow part) is also a bit "thinner", which causes another, the third, set of "kites" flying around, this time horizontally, and I've done the same.

Manav Rathi
Jan 2024