Author: Yuhan Lu

https://editor.p5js.org/calistalu/collections/wfYo3HPsR

Brief Description:

Only circles and rectangles are used in this mini-project. The nine images are all composed of regularly arranged circles on the canvas and/or patterns generated by a specific function. Only a few variables are tweaked to create these diverse images

Demo:

Coding:

function ron(scal, dia, v) {
let a = 0;
for (let i = 0; i < 255; i += 1) {
fill(255);
dx = cos(a) * scal * sin(i);
dy = sin(a) * scal * cos(i);
rect(dx, dy, dia);
angleMode(DEGREES);

a += v;
}
}

Undoubtedly, this self-defined function is the linchpin of my entire project. In fact, I created it accidentally, but this function genuinely offers substantial room for variation and exploration. In these images, the pattern in the center of the canvas, as well as those in the four corners, are drawn using this function.

Reflection:

1. (Differences: Hand-drawing offers more direct, tactile control over the mark-making process, allowing for nuances and imperfections. Computer programming provides precise control but might lack the same organic feel. Moreover, Hand-drawing can be slower, requiring more time for meticulous detail. Programming can generate images quickly once the code is set up, but the programming consumes great deal of time.(Commonalities: In both cases, you make creative decisions about colors, shapes, lines, and composition to convey your vision. And we can add organic feel to a computer programming to make it more like hand drawing by using the noise.

2. As for the function mentioned above, the key lies in the variable ‘v.’ Take a look at the images above, counting from top to bottom and left to right. Images 2, 3, 4, 6, 7, and 8 have ‘v’ values of 9, 19, 5, 3, 7, and 2, respectively. I’ve observed that the larger ‘v’ is, the more complicated the resulting pattern becomes.

3. A good generative pattern combines aesthetic qualities with meaning and adaptability. It achieves a harmonious balance between repetition and variation, creating visual interest. The elements within the pattern relate to each other, forming a unified whole.

 

 

sketch 1:

https://editor.p5js.org/calistalu/sketches/ER7dKQ1OZ

 

My project A revolves around exploring various creatures inhabiting in a tiny cyber pond. In pursuit of this goal, I have created sketch 1, which emulates a shoal of fish swimming gracefully navigating the pond’s water. By manipulating mouseX you can change both the direction of the shoal of fish and their color. I think it mirrors how humans disturb nature’s normal operation.

sketch2:

https://editor.p5js.org/calistalu/sketches/z5hhErmLk

Initially, my intention for Sketch 2 was to create some kind of moving creature residing in the water. However, it unexpectedly resembles the contractile vacuole of a paramecium. This coincidence could serve as an opportunity to delve deeper into parameciums’ behavior, including their reproduction, growth, consumption, excretion, death, and more. Yet, this might prove to be a complex undertaking. Nevertheless, my preference leans toward the fancy effects of Sketch 1. Consequently, I might consider modifying this sketch to align it better with my overarching theme.

sketch 3:

https://editor.p5js.org/calistalu/sketches/06klncv7c

Inspiration for this sketch sprouted from my fondness for rainy afternoons, my favorite weather. As a result, I contemplate introducing ripples to my virtual pond to enhance its realism. Additionally, I plan to incorporate effects resembling the splashes generated by raindrops once I’ve mastered the coding techniques required.

Conclusion:

In summary, the motion portrayed in Sketch 1 is the aspect I wish to expand upon and develop further in my Project A. My ultimate goal is to organically integrate these sketches, allowing the different species to connect and interact with one another if possible. For example, interactions such as the generation of sounds when fish encounter ripples or alterations in their movement patterns when evading predators could add narrative and realism to the project.

In this reading material, the author demonstrates a great deal of generative art projects from different categories which are inspiring and informative for me, especially the part of integrating natural sources into the artistic creation.

Personally, I interpret generative art as a computational art form that follows a certain pattern of rules and involves a balance between randomness and control. It contrasts with my mini project 1, where all the elements of the drawing including lines, curves, shapes, and colors are totally determined by myself. But it partly aligns with my mini project 2, where the color and size of my ‘stamps’ in the drawing tool are random and unpredictable. 

Let me take the rule of the ‘star’ stamp for example:

function mousePressed() {

if (shapeMode == 1) {
h = random(100);
s = random(100);
fill(h, s, 100, 60);
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, random(20, 80), random(20, 80) / 10);
rect(mouseX, mouseY, random(20, 80) / 10, random(20, 80));
}
}

And here’s the drawing resulting from my rules (from 0:57 of the demo ):

 

I think this part of the drawing is kind of generative because of the incorporation of randomness. The results are rather close to my original design, that is to add some colorful little decorations into the whole drawing. And the random colors and shapes make the stars look more variegated and changeful to avoid making the overall picture monotonous.

However, my rule is such a simple one compared with the examples of generative art in the reading material. A more complicated and fancy effect could be achieved if ’emergence’ could be used–to determine the individual component’s rule of behavior leading to some interesting results at the system level.

In terms of my thought process, I think I’m more inclined to visualize the final image in my head. I didn’t let the stars randomly generate on the canvas, which would be in too much disorder; at the same time, I didn’t control its size and shape to ensure richness. That is my balance between control and unpredictability in the experiment.

I’m looking forward to exploring more about generative art after I have a better command of p5.js and can use it more skillfully and smoothly.

 

 

https://editor.p5js.org/calistalu/full/fOf7zNscp

Brief Description and Concept:

This is a user-friendly drawing tool with which you can draw some simple and fundamental shapes. You can select a color from the pallet to draw a line by using the four arrows on keyboard; draw a circle or star in random color to decorate your drawing; press “spacebar” to clear background and press “d” to dark mode.

Demo:

 

Coding:

function mousePressed() {
if (shapeMode == 2) {
h = random(100);
s = random(100);
fill(h, s, 100, 60);
size = random(10,70);
noStroke();
circle(mouseX, mouseY, size);
}

if (shapeMode == 1) {
h = random(100);
s = random(100);
fill(h, s, 100, 60);
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, random(20, 80), random(20, 80) / 10);
rect(mouseX, mouseY, random(20, 80) / 10, random(20, 80));
}
}

My original goal is to draw a circle or star in random color and random size, but I found the if ( mouseIsPressed ) statement causes the shape to continuously change its color during the few seconds I pressed the mouse. So credit to my LA Cissy who kindly reminded me to use the function mousePressed to handle the problem. At first we tried to use dist (mouseX, mouseY, pmouseX, pmouseY) to make it draw one circle at a time. However, it didn’t work because the second before we clicked the mouse to draw, the mouse didn’t move. So we changed it to function mousePressed and finally it worked!

Reflection:

1. I used the variable shapeMode to change the drawing from line to circle to star and boolean isDarkMode to determine if the program is running in dark mode.  It seems to serve as a symbol to help distinguish some executions. Moreover, variable h and s are used to adjust hue and saturation continuously and visually.
2. If statement is used to control the program to perform only in some certain conditions, which enables the user interaction through keyboard.

https://editor.;.org/calistalu/full/4juQPBnGf

Brief Description and Concept:

In this picture I drew a stuffed toy seagull on my bed, with its keen eyes widely open, displaying its wisdom. ( please note: It’s not a penguin! ) 

Demo:

Coding:

beginShape()
curveVertex(width/2,60)
curveVertex(width/2,60)
curveVertex(width/2-20,70)
curveVertex(width/2-60,120)
curveVertex(width/2-130,200)
curveVertex(width/2-120,270)
curveVertex(width/2,300)
curveVertex(width/2+120,270)
curveVertex(width/2+130,200)
curveVertex(width/2+60,120)
curveVertex(width/2+20,70)
curveVertex(width/2,60)
curveVertex(width/2,60)
endShape()

I think the body if the seagull is the most difficult part for me, because it is in the shape of an irregular curve. At first, I tried to use the function of ‘bezier( )’ to draw half of its body and put the two halves together, but it only has 4 parameter, meaning I can only fix 4 points by using this function, which goes like this:

That apparently isn’t perfect enough, so I further studied the reference website and learnt to utilize another function of ‘beginShape( )’ and ‘endShape’, which works well.

 noStroke()
fill(214,162,109,120)
rect(0,270,600,30)
rect(0,330,600,30)
rect(0,390,600,30)

fill(214,162,109,120)
rect(0,270,30,130)
rect(60,270,30,130)
rect(120,270,30,130)
rect(180,270,30,130)
rect(240,270,30,130)
rect(300,270,30,130)
rect(360,270,30,130)
rect(420,270,30,130)
rect(480,270,30,130)
rect(540,270,30,130)

Professor Eric inspired me about how to draw the grid lines by importing the parameter of ‘Alpha’ which determines the transparency of color. It’s really helpful.

Reflection:

1. I prefer to use exploratory programming first, during which process I’m able to be more specific about my ideas and can better arrange my steps. Then I’ll go to reference to search for proper function to use, finally I go back to exploratory programming to complete my previous vision. As for other technique, I used Procreate on my iPad to search for a color I want, because I can choose a color from pallet directly can find its RGB information there, which helps me choose color more efficiently.

2. Sketching out a design on paper is often simpler and quicker than writing a complex program. You don’t need to think about algorithms, logic, or debugging.

3. Code is highly editable and allows for quick modification. You can easily make changes, fix errors, and improve our solution without starting from scratch.