Lab 4-Documentation

Recitation 4 – Animation in Processing

professor:Marcela Godoy. Session: Tue/Thur 11:15-12:30

Name: Yiyu (Nora) Yang

Step 1: Choose an image or a theme that inspires you.

I chose Agnes Martin’s work. In this piece of artwork, there are two large triangles and two yellow small triangles. I love the simplicity and the complete parallel lines inside the picture.

Step 2: Considering the image you chose as a starting point or inspiration to create an animation with Processing using any 2D primitive or vertex shapes. Using the functions that were covered in class, create an animation with Processing. Using paper to sketch your idea may help.

I use Processing to create the same triangles and lines. Then, I tried to add the rect and ellipse we learned in class, where the objects could be traced by the mouseX and mouseY. However, because there are several layers in the picture, and I don’t want the traces of the rect and the ellipse, I created a “void Triangle()” to set apart the background of the picture, and the objects themselves. This way, wherever the objects move, their traces would not be shown on the board, makes it more beautiful and clearer.

Step 3: Please find my code with comments in the code box and my final sketch here.

Step 4: Write a short reflection based on the results you just created and the content discussed in class. Some questions to orient you in this reflection are:

  • What are the differences and similarities between the image you chose in Step 1 and the image you created in Step 2?

Answer: The similarities are easy to see. They have the same background. I add new objects into the picture, and turned them into animation that can be controlled using mouse.

  • Do you think that drawing in Processing is different than drawing/painting by hand? How is it different? Why is it different?

Answer: Definitely yes. It is very different when using Processing to draw things. You have to think about every little detail, that’s why I found the sketch paper very helpful. I calculated several times using the sketch paper, just to find the correct position of certain points of the triangles. User could have more interaction with the animation. But in hand drawings, I am afraid the audience could not do anything about it except looking at the drawing.

  • Is there any value in recreating an existing image/drawing/graphic using computational media? What is it?

Answer: Yes, by adding the reflection of users. Computational media could be explained as new layers to the original drawing/graphic. Also, computational media analyze the original/existing image first, and then translate the image into data and numbers, so the new animation is more complex and accurate, whereas original pictures have more room for creativity and freedom.

  • Do you think that both drawings cause the same feelings in the viewer?

Answer: I think they create very different feelings. The animation on the computer would make the user want to experience.

  • If you were to create multiple variations of your drawing, what would these variations be and how would they differ?

Answer: I would try to add more functions to the drawing, and obviously the functions would be more engaging and fun. I will create several copies of the animation, and let the user choose the one that entertain him/her the most.

 

void setup(){
  
size(800,600);
background(224,217,216);

}

void draw(){

background(255);
//adding animation for mouse
float opacity = 100;
opacity = map(mouseX,0, width,0,255);
fill(163,85,101, opacity);
ellipse(width/2, height/2, mouseX,mouseY);
fill(112,147,9);
rect(mouseX,mouseY,width/13,height/10);
strokeWeight(5);
println(frameCount);



Triangle();

}


void Triangle(){
//drawing the basic three lines
line(0,238,800,238);
line(0,309,800,309);
line(0,477,800,477);
//drawing the two big black triangles
fill(0);
triangle(0,477,400,477,200,143);
fill(0);
triangle(400,477,800,477,600,143);
//drawing the two small yellow triangles
fill(247,221,81);
triangle(185,168,200,143,215,168);
fill(247,221,81);
triangle(585,168,600,143,615,168);

}

Leave a Reply