Category: Project 2: Generative Design

For Project 2, I was particularly interested in Truchet Tiles. I layered two different codes – one that was a Truchet Tile and the other code created random circles on a sketch. I saved both of those frames from p5 and brought them into photoshop and layered them on top of each other and added an Exclusion blend mode. 

When creating the prints I wanted to create a moldy decaying look so I went with black and white for the truchet tiles. The first layer I printed in blue and yellow so when the black layer was put over it the negative space created a weird blend of the two. 

Unfortunately, I forgot to scan my prints but they were up in the winter show! 

https://editor.p5js.org/oy312/sketches/v9JNWrrLS

Here is my project two patterns, I started with the basic truchett patterns and added circles randomly inside , changing the variables for circle width and height and the intensity let me try out different intensities and by keeping the code very reactive and constantly generating I was able to capture a different slice of the code each time. I experimented with different color pallets and layering and ended up with these three:

here’s the code: https://editor.p5js.org/Patricia-007/sketches/9Q2yn1NG6

Inspired by a pattern found in Catalan tiles, I designed this unit. I appreciate its distinctive feature of having four arms when it stands alone, theoretically allowing it to rotate. When arranged in multiples, it creates an orderly background. Therefore, I retained a red square on one of the arms as a random element.

This is what he looks like after random generation.

Here’s the printed version.

https://editor.p5js.org/mma1226/full/bcOhpPREI

^My Code for the project

My initial idea was to create some interesting patterns by not using conventional shapes but with polygons. This is from an experiment I did with quadrilateral shapes earlier, unfortunately I can’t find the original code. My browser crashed many times when running this code.

https://editor.p5js.org/zhuoyangli/sketches/A_fs_41kp

Following that, I experimented with hexagons as the shape. My initial sketch involved patterns with more geometrically regular shapes. I achieved this by using a for loop to overlay them horizontally on the plane, generating various variations.

https://editor.p5js.org/zhuoyangli/sketches/LTu9GQ3lw

Here are the results after modifying some vertex data and other parameters. I often enjoy tweaking values in the source code to discover unexpected patterns. In this instance, I altered the value of k and two random numbers, which determine the angle—also changing the hexagon’s vertices. I find this pattern more intriguing than the previous hexagon, and there’s potential to further modify parameters to obtain distinctly different patterns based on this foundation.

https://editor.p5js.org/zhuoyangli/sketches/kYAWRDgQT

Here, I also changed the number of vertices and introduced some conditions to systematically stagger the positions (x-axis) of the polygons to give them different colors. On the y-axis, I used five different for loops to achieve the layout of five independent sections.

Some print photos

Here is the code I used to create my designs: 

https://editor.p5js.org/bed294/sketches/_L_DRzrPz https://editor.p5js.org/bed294/sketches/mqoUxfecb

I originally tried to play with concentric circles that are randomly half filled. Then to create a more continuous tiling effect, I used tiles that are divided diagonally, and every third tile is flipped. 

After Prof. Levin’s lecture, I became interested in the concept of Truchet and Wang tiles. I made my own set of 16 tiles and an algorithm that allows me to join the tiles together according to a set of constraints. Of those 16 tiles, 1 is an unconnected shape, 4 connect to just 1 side, 4 connect to 2 adjacent sides, 2 connect to 2 opposite sides, 4 connect to 3 sides, and 1 connects to all 4 sides. That may be kind of confusing so I added in a little sketch I did while designing the tiles.

Here is the p5.js sketch if you want to take a look: https://editor.p5js.org/adoro/sketches/JTZsRsIFz

The tiles are drawn in the tiles.js file and the constraints and drawing function are in the arrangeTiles.js file. I’ll add in scans of the riso prints I did soon 🙏.

Learning p5.riso!

It was fun learning about p5.riso. It makes it easier to cut out colors and text elements because otherwise I had to do it manually in illustrator or photoshop. It’s been a while since I used p5.js so at first it was a bit challenging. 

I started experimenting with grids and tried to tilt etc. I couldn’t find my code to the gradient example for some reason, I think I overwrite another code on it. So, I  moved on with the circle/square grid example. The feedback I got in class was that it didn’t have a randomness of an element of surprise. I added randomness in terms of opacity and  x-y coordinates. 

Here’s the code I used for this project: https://editor.p5js.org/zelifergin/sketches/gYuTkxPkq

For my generative print, I was interested in working with simple shapes like circles and squares. I wanted to go for a design that feels a little 3D, in the sense that it’s popping out at you. By constraining myself to two colors (orange and blue) and two shapes, I experimented with rules that alternate between concentric circles and squares with inverted colors. I also included random stroke widths for the internal circles or squares. Lastly, I had a random function for rotating the inner squares, so that some appear like diamonds.

When printing, I encountered several misalignment issues. I decided to keep one that really made the pattern pop out to me. Though be warned- staring at it too long might make you a little dizzy 🙂

If I were to revise this, I’d try adjusting the algorithm so that more blue square backgrounds would pop out. There is a random pattern emerging with orange as the dominant background, but I think it’d feel more balanced if there was more blue.

Here is the code for the original generative pattern design: https://editor.p5js.org/syeda_anjum/sketches/Pv-xbfK2p

And here is the code for prepping the Riso print file of my chosen saved pattern: https://editor.p5js.org/syeda_anjum/sketches/zqJFYk82i

I worked with rectangles on a grid. I have a bottom layer where the rectangles increased in transparency as it moves down the canvas. The top layer does the opposite—it also omits about 40% of the grid.

On darker colors, what worked better was having the top layer (blue in this case) both increase in transparency as it goes down the canvas, and decrease in frequency of appearance across.