Notes   /   15 September 2022

For my Creative Coding class.

The "Pattern" assignment issues a challenge to use p5.js to emulate a pattern or grid-based art piece. Something by Manfred Mohr or Vera Molnár or a quilt pattern. I attempted several of these myself, and I found it an interesting challenge. Here's what I came up with for this quilt by an anonymous Virginian around the turn of the last century.

What drew me to this quilt is that it looked a little less complicated than others, but I quickly realized that the geometric properties it demonstrates would still require some problem solving. I started by noticing the motif of the three white rectangles. In fact, it's a row of five rectangles with two being red, and to my eye, each individual rectangle is exactly twice as tall as it is wide, and of course rotated 45 degrees. This is, by the way, all based on treating the following as the fundamental square that I would need to repeat throughout the quilt:

Using a whiteboard, I sketched this fundamental square, and as I drew it with a ruler, I started to notice some of the ways that the lengths of specific edges related to each other. I used a piece of whiteboard for this sketch, so I erased and scribbled as I went, but you can kind of get a sense of what I figured out:

That is, I was using inches, but I didn't want to think yet about specific pixel sizes. As it turned out, this helped me later to create a sketch that will flex according to a base unit that I can specify and change. More on that later.

I had to do some math! Specifically, some geometric principles helped me figure out the length of the side relative the base unit of the equal sides of the smaller right triangles in the bottom left and top right corners. If those sides are 1, then the hypotenuse is the square root of 1² + 1². In my code, insead of 1, I called that bu, so that longer side of the smaller triangle, which I saved as a new variable called hu can be calculated as follows:

let bu = 1;
let hu = sqrt(bu**2 + bu**2)

And since that hypotenuse is also the long side of the 5 rectangles in the middle, and I assume those to be twice as tall as they are wide, that means that the hypotenuse of the big right triangles is hu * 2.5. I don't have the formula where I figured this out, but eventually I did realize that -- based on that hypotenuse -- the equal sides of the big right triangles are bu * 2.5. Therefore, the square itself has a width and height of bu * 3.5. With that, finally, I could start drawing, which was relatively straightforward with geometric primitives and a combo of translate() and rotate(-45) to find the right position for the slanted row of 5 rectangles.

Drawing a 7 x 7 grid of these squares was also straightforward with two nested for loops, but then I ran into another problem: alternating squares have to be rotated. And it's a checkerboard pattern where the front row is left-right-left-right-left-right-left and the second row is right-left-right-left-right-left-right. With i and j as my iterators, I can check for even or odd, but that would just make a whole row or a whole column the same, and I need these to alternate.

Eventually, I got it. I was thinking of the squares as a series of coordinates -- 1,1 then 1,2 then 1,3 -- I realized there is a pattern. Either both are odd, both are even, or their different. To check this, I used the modulo operator, %, which returns the remainder when the first number is divided by the second number. It's a quick way to check odd and even status: 3 % 2 is 1, 28 % 2 is 0, and so on. 1 means it's odd; 0 means even.

So after creating the instructions for drawing a flipped square, I enclosed them with a condition that checks for oddness and evenness of both i and j and then comparing them with each other. If they're the same, ignore the flip, but if they're different, flip away!

if (i % 2 != j % 2){
   translate(bu * 3.5,0)
   rotate(90);
}

I think I could also accomplish this by checking the % 2 of the sum of i and j, but I feel like this is a little more elegant.

All together, I think my result looks pretty good! There might be a few things I could still tweak, but I'm pleased with how the geometry turned out, and it was a fun series of problems to solve.