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)

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.

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.

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

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.

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!

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.

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.

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.