NOC W1 – Generative Patterns with Transformations

In the first mini project, while trying to explore p5.js as much as I can, I want to create a generative pattern with round elements, especially concentric circles. So based on what we practiced during the in-class exercise (the image on the left)

, I modified Prof. Moon’s example code and got my first demo pattern shown below: Screen recording-1 purple

Then I adjusted the color and added some space in the center. Screen recording-2-green.

I continued to play with functions like scale() and different blendMode().

blendMode(DIFFERNECE)

blendMode(HARD_LIGHT)

The final version I chose (without blend) with the video link below:

Screen Recording -3 -final pattern design

Until this step, I’ve tried some functions in p5.js, including width, height, frameCount, translate(), rotate(), scale(), random(), blendMode(), and map(). But I also want to try to use mousePressed(), push(), and pop(). So I wrote an if-statement to add a second round of circles “growing” in the opposite direction. Also, the color of the circles gets darker: Screen Recording -4- mousePressed

Now I have two rounds of rotating circles growing from the center of the canvas. I kept wondering what if I can get one round of circle every time I click the mouse? In order to achieve that, I asked my friend Cissy, who used to be a CC lab LA, for help. She instructed me how to use “class” in programming. Screen Recording – 5- CLASS, black & white