All posts by Jiasheng Li

Mini Project 4: Patterns

Project Title: Tilted Glasses

link:https://editor.p5js.org/jl14064/sketches/ZtAIqFvJt

Description:

 

This is nine “tilted glasses”. When we perceive the colorful world, all of us have our own lens. Sometimes, we might treat squares as circles and circles as squares. They might be false to some extent, but they are also our interpretation of the world.

Originally, I wanted to create nine sketches depicting the nine lives of a cat. Later Professor Godoy suggested I make the project more focus on shapes. I also want to thank Learning Assistant Jason for illustrating the goal and convenience of using “translate()” in static pictures. 

for (let x1 = i + s; x1 < i + 75; x1 += s) {
for (let y1 = j - 75 + s / 2; y1 <= j + 75; y1 += s) {
fill(random(255), random(255), random(255));
circle(x1, y1, s);
}
}

//left
for (let x2 = i - 75 + s / 2; x2 <= i; x2 += s) {
for (let y2 = j - 75 + s / 2; y2 <= j + 75; y2 += s) {
fill(random(255), random(255), random(255));
square(x2, y2, s);
}
}

//LINE
stroke("black");
strokeWeight(random(1, 8));
line(i - width / 12, j, i + width / 12, j);

//LEFT
stroke("black");
strokeWeight(random(1, 8));
fill(random(100), random(100), 100);
circle(i - width / 12, j, random(width / 12));

//RIGHT
fill(random(100), 100, 100);
square(i + width / 12, j, random(width / 12));

pop();

In this project, I tried out the use of loops to create the pattern in the background. In addition, the push() and pop() helped the iteration to continue. 

Reflection:

  • I think in this particular project, drawing in patterns when programming the computer, the artist can just make certain templates with various variants. If it is drawing by hand, the artist would have to do a tedious job to recreate similar features. But I do concede that when drawing by hand, the nuances in different appearances caused by the psyche could be enlightening. 
  • I manipulated the size, color and stroke weight in the repetition. I think the general set is well created and the changes are quite thriving. 
  • What makes a good generative pattern? My answer would be well-established strict rules with a loose end of interpretation. It is a combination of randomness and design.

Project A Proposal

Working Title:  Migration/Leaves

Presentation: https://docs.google.com/presentation/d/1ifQmf_8ThTFL6tDMhhzrsbM-Brx3VWDKh2C7XCFrgDg/edit?usp=sharing

Preparation:

link1 leave: https://editor.p5js.org/jl14064/sketches/SywY_Hn52

link2 migration: https://editor.p5js.org/jl14064/sketches/EqWyVCbeS

link3 measles: https://editor.p5js.org/jl14064/sketches/WK0XCLZRI

These are the 3 sketches I explored in mini project 3 to prepare for Project A.

1.LEAVE:

The first one is “the leave”, which resembles the leaves falling in nature. The location could be changed by pressing the mouse as if a strong wind blows. I will expand on this later. 

2.MIGRATION:

The second one is called “migration”. Alternately, the lollipop vortex moves between the left and right back and forth.

if (x<=0||x>=width){
cx = width - cx
s = 0

3. MEASLES

The third one is called “measles”. Similar to the “migration”, it moves in a seemingly circular motion but it is actually my first attempt to an angular motion.

angleVel = random(5)
angle = angle + angleVel;

// calculate the position
x = width/2 + cos(angle) * radDist;
y = height/2 + sin(angle) * radDist;

// display the circle
circle(x, y, dia)
radDist = radDist + 1

Future:

The main visual element would be based on sketch one LEAVE. It was originally “a slice of melon” but it would be too weird to make it “fall”. By changing it into a leave, the shape could assist me in experimenting with angle and arc. I would like to change the sin and random into noise in future development to make the movement more authentic. 

x = x + 5*sin(ld);
y = y + random(5);

These motions that I experimented with will be combined into my project A, Migration/ Leaves (working title). The idea is that the leaves must emigrate at different times otherwise they would get sick, having measles. Leaves could also be interpreted as a pun resonating with migration.

Ideally, the leave would fall in a random trace. If it successfully traverses width/2, it would be the same in appearance. Otherwise, there will be red spots indicating it is “sick” and it will decay, disappearing on the screen. In addition, the interaction would allow the viewer to “blow” the wind to change the location rapidly. If there is adequate space, I also would like to include pollination assisted by bees in the design to nurture the narrative of “migration” not just to survive but also to thrive. 

Mini Project 3: Generative Motion

Project Title: Generative Motion Sketches

link1 leave: https://editor.p5js.org/jl14064/sketches/SywY_Hn52

link2 migration: https://editor.p5js.org/jl14064/sketches/EqWyVCbeS

link3 measles: https://editor.p5js.org/jl14064/sketches/WK0XCLZRI

Description:

These are the 3 sketches I made with linear, random, oscillation, circular, and angular motion.

I would like to thank Professor Godoy for the clarification of “a combination of (at least) two types of motion in a single sketch”. At first, I created two objects in one sketch with two different kinds of motions. However, Professor Godoy pointed out that it should be one object with two kinds of motions. From the misunderstanding, I started to have a deeper sense of generative art for its ambiguous description and interpretation.

1.LEAVE:

The first one is what I call “the leave”. It falls in a linear way while it twists in oscillation. This resembles the leaves falling in nature. 

x = x + 5*sin(ld);
y = y + random(5);

If the mouse is pressed, it will change its location rapidly as if a strong wind blows the leave away.

if (mouseIsPressed)
{ //wind
x = random(width)
y = y + random(5)
}

2.MIGRATION:

The second one is called “migration”. Inspired by birds’ migration, moving between two locations at different times, I combined the “reappearance” in linear motion with the circular motion.

if (x<=0||x>=width){
cx = width - cx
s = 0

Alternately, the lollipop vortex appears on the left side and right side of the canvas.

x = cx + cos(frameCount*0.1) * s;
y = cy + sin(frameCount*0.1) * s;
fill(random(255),random(255),random(255));
circle(x, y, random(50)); //initialize
s = s + 0.1

3. MEASLES

The third one is called “measles”. It is my first attempt to make an angular motion. It really took me a considerable amount of time to figure out the differences and functions among angleVel, angle and radDist. With random introduction, it demonstrates the unpleasant encounter with measles.

angleVel = random(5)
angle = angle + angleVel;

// calculate the position
x = width/2 + cos(angle) * radDist;
y = height/2 + sin(angle) * radDist;

// display the circle
circle(x, y, dia)
radDist = radDist + 1

Mini Project 2. Interactive Drawing:Boba

Project Title: Boba

link: https://editor.p5js.org/jl14064/sketches/rSURhuHVR

Description:

This is a cup of boba.

By default, it has little tea in it.

If you press “v”, the volume of the tea would rise.

If you click the mouse within the area of the tea, there would be some boba created.

If you press “s” afterward, there will be a boba “sipped” in the straw.

I was waiting for a food delivery of boba during the recitation session. That became my inspiration. After listening to my idea, Professor Godoy suggested I include the movement of a boba in it. 

In the future, I hope that I can learn how to use the loop in p5 to make the movement of boba duplicates instead of just being activated once.

Reflection:

I used many variables in this project for restraining the workplace for drawing and the storage of the color of “tea” and “boba” and the size of the “cup” and “straw”.  The control of the area of drawing makes the project reflect reality. The storage of the features helps me to call these elements more easily.

I used “if” to change the volume of the “tea”, add “boba” and “sip” the “boba” and “tea”. With the operation on keyboard and mouse, the interaction comes alive.

“Key” is used when the input is an ASCII key while “keycode” is used when the input is a non-ASCII key.

Code:

let x1 ;
let x2 ;
let y ;
let sx1;
let sx2;
let ty;
let my;
let bR;
let bG;
let bB;
let tR;
let tG;
let tB;

function setup() {
createCanvas(400, 400);
background(400);

//boba color set
bR = 94;
bG = 82;
bB = 71;

//tea color set
tR = 214;
tG = 201;
tB = 193;
ty = 3/4*height;

//volume line
x1 = width/4;
y = 3/4*height;
x2 = 3/4*width;

// body of the cup
rect(width/4, height/4, width/2, height/2);

//bottom of the cup
fill(tR,tG,tB);
stroke('black');
arc(width/2, y,width/2,height/4, 0, PI);

//hide the line
stroke(tR,tG,tB);
line(x1, y, x2, y);

//straw set
sx1 = width/2-20;
sx2 = width/2+20;
sy = 3/4*height;

//straw
stroke('black');
line(sx1, height/8, sx1, sy);
line(sx2, height/8, sx2, sy);
stroke('white');
line(sx1, height/4, sx2, height/4);

//MOVE BOBA
my = 3/4*height;

}

function draw() {

//tea line
stroke(tR, tG,tB);
line(x1+1, y, sx1-1, y) ;//left tea
line(sx2+1, y, x2-1, y) ;//right tea
line(sx1+1,ty, sx2-1, ty); //middle tea

//ADD some tea
if (keyIsPressed && key == "v") {
y = y - 1;
ty = ty - 1;
}
//full cup
if (y < width/4 + 15) {
y= width/4 + 15;
ty = width/4 + 15;
}

//ADD some boba
if (mouseIsPressed && mouseX<3/4*width-30 && mouseX>1/4*width+30 && mouseY>y+15 && mouseY<3/4*height+15 ) {
noStroke();
fill(bR,bG,bB);
ellipse(mouseX, mouseY, 30, 30);
}

//SIP tea
if(keyIsPressed && key == "s") {
//DECREASE tea
stroke('white');
line(x1+1/2, y, sx1-1/2, y) ;//left tea
line(sx2+1/2, y, x2-1/2, y) ;//right tea
y = y + 1;
ty = ty -1;

//RESTORE straw
stroke('black');
line(sx1, height/8, sx1, y);
line(sx2, height/8, sx2, y);

//SUMMON boba
noStroke();
fill(tR,tG,tB);
rectMode(CENTER);
rect(width/2,my,39,39);

//UP boba
noStroke();
fill(bR, bG, bB);
circle(width/2,my, 30);
my = my -1;

}

//bottom boundary
if (y > 3*width/4) {
y = 3*width/4;

fill(tR,tG,tB);
stroke('black');
arc(width/2, y,width/2,height/4, 0, PI);
}

fill(tR,tG, tB);
noStroke();
text("Press v to fill the cup \nClick to add boba \nPress s to sip at your tea", 10, 20);

}

Reading 1. Generative Art

I. Reading Reflection

After reading the article about Generative Art, I believe it refers to the artwork that unfolds under the artist’s instruction with ambiguous concepts and elusive outcomes. In retrospect,  In Creative Coding Lab, my Mini Project 1 is about drawing codes and the second one is about interactive drawing, which is similar to Generative Art but diverges in different ways. The results of my Mini Projects were partly envisioned before I coded the instructions while the actual coding could be various and the results were slightly different from what I expected. I think this is similar to PSEUDORANDOM as the author mentioned in the article though I didn’t introduce random() in my programs. However, both of my projects are based on objects in social life, a water jug and a cup of boba tea. On the other hand, the examples mentioned in the article are more abstract for their connections of shapes and nodes or mimesis of the natural world. I would wonder whether in Generative Art the aura of randomness itself outweighs the author’s expression. In other words, is it a kind of meta-art to some extent?

II. Instructions for Art

My instructions for art are as follows:

  1. Draw an eye
  2. Create another one with the same size and share the same “pupil” with a 45-degree rotation
  3. Repeat 2 until there is an overlap
  4. Connect the corner of the eyes with a circle and use the circle as a new and larger “pupil”
  5. Use the new “pupil” as you repeat 1

I was inspired by how my parents met each other in the first place, which could be my origin story. My grandpa, my mom’s dad, and my dad’s friend went to visit the same ophthalmologist for their poor lens. The expectation would be “eyes” connected to the same “pupil”. The instructions are open to interpretation when it comes to the position of the very first eye and the rotation and the angle of the first eye in a new loop. These are the randomness. But I didn’t realize the latter until the last loop that could be created on the paper. In fact, what I visualized in my head at the beginning would be identical loops with different sizes. In the end, I managed to control the basic elements of the final piece and leave the unpredictability to the rotation.

Mini Project 1: Drawing with Code

Project Title: Holy Water Jug

link: https://editor.p5js.org/jl14064/sketches/PqnDkIHJD

Description:

This is a water jug that I made digitally. Following the instructions, I took a photo of my dorm, a corner in the common space, and drew a sketch of it with ellipses and rectangles.

I chose this particularly because of the color and shape. The water jug and the machine contain blue and red, the foundational colors. The whole theme was mainly composed of rectangles and ellipses. They are useful when it comes to drawing with code.

There are two major differences between the sketch and my digital drawing, perspective and objects. I really appreciate the constructive suggestions from the IMA community.

During the recitation, I finished my work quickly due to the simplicity of my drawing. Professor Godoy suggested I make it “more complex”, prompting me to notice the polygons and translate them with the help of beginShape(). Then, I decided to make the digital version visually 3D with 2D primitives.

After I finished the white base of the water jug, I turned to IMA Fellow Carrot Liu for affirmation of complexity. Surprisingly, she advised that I should put only one water jug since “less is more”. In the later version, I deleted the water jug on the ground.

Reflection:

In this mini project, I prefer using the reference. The constraints unlock my creativity as guidance, supporting me to reconstruct the water jug in shapes rather than making me lost in the middle of nowhere. At the same time, I have to concede the thrills of curiosity I felt when I was testing the color for the “cold” button. Therefore, I believe using the reference benefits the conception of the structure while exploratory programming facilitates nuances in details.

Drawing on a piece of paper is easier because it mainly focuses on strokes with the freedom to end anytime. When drawing on a piece of paper, the painter can end the line easily and make curves arbitrarily. When drawing with codes, it would be mainly shapes. Shapes made by lines would be complicated to color.

On the other hand, writing the program makes it easier to adjust the size of the shapes and the fill of the color. The changes are made with code without any damage to the canvas. Drawing on a piece of paper is not mutable. It could also damage the canvas as a side effect of erasion.