Iterative Patterns #1

Part 1: Practice

Loops review

‍

Encode #1

I think what goes on in this sketch is there's a loop within a loop for creating a grid of rectangles. I think there could be a custom function that has that because it resets whenever the mouse is clicked or the window resizes so it would seem convenient to just call the function once in setup and then again when needed. In any case, the function probably has an if rule inside of it with a random function that determines the color of each square that's drawn (I guess 50% chance of being either black or white).

‍

Encode #2

It looks like the canvas does resize with window change, but the changes are not all proportional — there are always 3 rows, but the number of rectangles change according to the width and / or height of the window, as well as the rectangles' dimensions which are proportional to that. So there's probably a loop for creating the three rows, and within that loop another one to create the rectangles. There should be one value driving all that, some min(width, height) value that is used in multiple places: inside both loops' rules to determine how many rectangles to draw and where to draw them; and either inside the loop or outside of it to determine the rectangle's width. The width is always the same for all rectangles so that could be determined outside of the loop, but the height seems to be some random deviation from a set value so that must be determined within the inner loop.

‍

Decode #1

There will be a grid of squares with black stroke and no fill on a white background. The grid of squares will be drawn in such a way that they would all be drawn from their center and rotated around themselves, about half in one direction and half in the other. About half will be smaller than the other half by varying differences. (Honestly this sounds like a quite a mess. I wonder if the number -60 in the angle variable is used to create any particular pattern – doesn't really make sense inside of a random function – so I guess it's just a "good number"?)

‍

Decode #2

So there are two canvases. The second canvas is smaller (one fifth) than the main canvas. It has an outline around it and a circle on it that is width of that canvas but is drawn on the left of the canvas so only exactly half of the circle is visible. The main canvas uses the image function to draw a grid of the second, smaller canvas. Each instance of that second canvas in the grid is rotated. I don't fully understand the rotation part because it's using radians which i'm not very familiar with — so 2*PI should be 360 degrees, or a full circle. So roughly the minimum number we'd get there is 90, and the maximum is 360? So each smaller canvas will be rotated anywhere in that range?

‍

Part 2: Ask AI

I asked chatGPT about the angle part from Decode #2. It was helpful! I had to ask for clarification, and I still felt I needed to go into the code myself and just calculate the possible outcomes because I didn't feel like the explanation was enough, I had to SEE it. I think it's a bit confusing to me because the scaling is happening after the rounding so it makes me feel "unsure" about the possible outcomes if that makes sense...

‍

Part 3: Re/code

I was really intrigued by the technique shown in Decode #2 — using the createGraphics() function to draw unto a buffer and using image() to draw many canvases, so I wanted to play with that example a little bit. I started with simple experimentation that was basically just adding another buffer and drawing that as another image. This allowed for playing with transparency and blend modes in ways that are just unachievable with one canvas, so using this technique is super useful for that!

‍

Then I tried working with the mouse position to control what was drawn and in what scale. I really enjoyed the ability to control the pattern with the mouse, including clicking — I only drew the background once in setup() so clicking the mouse is essentially like leaving a permanent trace, and that allowed for emergence of more interesting patterns.

I also tried controlling the proportion of the whole thing with the mouse position but that wasn't visually interesting to me, so I continued experimenting and tried using a for loop inside each canvas to create semi-transparent circles. I think it makes for a nice effect when clicking and regenerating the pattern. That took a lot of trial and error and number tweaking to find the right balance so it doesn't fade or wash out too much.

I wish I had more time to experiment with these! Nevertheless, the graphic designer in me really enjoyed that and I think using the createGraphics() method is very handy and could have lots of different applications so I'm glad I got to experiment with that a bit.