Lab3 Documentation by Amber Wang (Marcela)

Lab 3: Animation in Processing

Date: February 24th, 2017

Instructor: Marcela Godoy

Documented by Amber Wang

In this lab, we were supposed to draw a 2D animation using the new computer language that we learned — Processing. Inspired by fellow Jiwon’s processing animation example, I decided to draw my most favorite cartoon character, no doubt, which is Doraemon!

I first drew upon the pictures of Doraemon online and broke it down to different simple graphics in mind. And then I used the scratch paper handed out in class and started to set my x-y coordinate at the centre of the paper. Then it comes the coding process.

The first thing I did was to set a rational size of my canvas and gave it a white background. Because the figure of Doraemon’s face is basically symmetrical and made up of many circles, I decided to reset the (0,0) coordinate from left, top corner to the middle of the canvas by using “translate” function with “width/2” and “height/2”. Then I started to draw its face from outlines to details. I played with the parameters of the width and height of each ellipse to find the most appropriate scale that resemble the figure. Drawing face, nose, and eyes were not so hard, because they were all ellipses, which just need a little patience to adjusting the size and position. However, when it comes to the mouse, I got a problem. Straight line is easy to draw with two points’ coordinates, but how about curves? I really want my Doraemon to be like the real one in cartoon, so I need to draw its mouth as lifting arc. Without hesitation, I went to processing.org/reference/ for help. Then I found the function “arc” which allows me to draw partial outline of a ellipse. The first two parameters of the function are x and y coordinate of the center of the ellipse, following with two parameters determining the size, and the last two parameters are the start and end angle of this arc. The first four parameters are easier to understand, but the last two parameters are very new for me. I read the reference many times but I still didn’t quite get where the start-angle starts and how to calculate them. With Jiwon’s help, I understood that “0” started at x-coordinate and positive angles increase as y-axis (downward), and the areas above the “0” is negative. Also, the start parameter should always be smaller than the end parameter!! I also learned how to use “pi” to write special angles like “QUARTER_PI” “HALF_PI”.

FullSizeRender 6
As the graph above shows, one tricky thing in it is that if you want to draw the shorter arc, you go with (-QUARTER_PI, HALF_PI); but if you want to draw the longer arc, you should go with either (HALF_PI, PI+3*QUATER_PI) or (-PI-HALF_PI, -QUARTER_PI). Remember when if you use negative value, the lower start point (-pi-pi/2) should be written first! Another struggling with this is that because I set the position with respect to its center coordinate of the arc, when I trying to join the arc with other line without gap, it need careful trial and adjustment. So was the tongue of Doraemon. It needs combinations of arcs and ellipse to build that shape and little tricks to cover its stroke and fill in the color. I discussed this part with professor Marcela and worked out a good way to use three partial ellipses to fill the tongue.
Other details were gradually added to my Doraemon like the little white dot on its nose and eyes, as well as its necklace. When I finally finished the whole sketch, next thing I need to do is to add animation to it. After discussion with Prof. Marcela, we both thought the eyes were the best part to move. I then thought of the ideas of setting the eyes position with respect to my mouse position, which can resemble the effect that Doraemon’s eyes are tracking my mouse. To do this, I first set three variables x1, x2 and y(because two eyes have same y coordinate). Then I used the “map” function we learned in class to map the mouseX and Y from the range of window’s width and height to a limited small range in his eye sockets. I applied these variables to his eye ball’s position parameters and then I had the effect that I wanted. To add more fun interaction, I also set other variables to move Doraemon’s nose and whiskers with response to my mouse position.

Video of how it works:

It is a very fun and cute project, and I am so happy I did make my most favourite cartoon character alive by using my own codes! I hope you will like it as well : )

void setup() {
  size(700, 500);
}
void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(3);
  stroke(0);
  fill(102, 178, 255);
  
  ellipse(0, 50, 580, 550);
  
  fill(255, 254, 254);
  ellipse(0, 80, 480, 450);
  
  ellipse(-50, -110, 100, 120);
  ellipse(50, -110, 100, 120);
  //eyes
  float x1 = map(mouseX, 0, width, -80, -20);
  float x2 = map(mouseX, 0, width, 20, 80);
  float y = map(mouseY, 0, height, -130, -90);
  fill(0);
  ellipse(x1, y, 20, 30);
  ellipse(x2, y, 20, 30);
  fill(255);
  ellipse(x1, y, 10, 15);
  ellipse(x2, y, 10, 15);
  
  //nose
  float x0=map(mouseX, 0, width, -5, 5);
  float x3=map(mouseX, 0, width, -15, -5);
  fill(255, 50, 50);
  ellipse(x0, -40, 70, 70);
  fill(255);
  noStroke();
  ellipse(x3, -50, 10, 10);
  
  stroke(0);
  line(0, -5, 0, 55);
  strokeWeight(4);
  
  //mouthline
  line(0, 53, 150, 60);
  line(0, 53, -150, 60);

  noFill();
  strokeWeight(3);
  arc(150, 18, 90, 85, -QUARTER_PI, HALF_PI); 
  arc(-150, 18, 90, 85, -PI-HALF_PI, -HALF_PI-QUARTER_PI);  
  
  //mouth
  fill(132, 20, 20);
  arc(0, 55, 320, 280, 0.045, PI-0.045);
  
  //tongue
  fill(255,120,0);
  arc(-20, 165, 120, 80, -PI, 0.18);  
  arc(20, 165, 120, 80, -1.9, 0.2);
  arc(0, 162, 160, 63, 0, PI);
  
  //whisker
  float y1=map(mouseY, 0, height, -65, -55);
  float y2=map(mouseY, 0, height, -5, 5);
  float y3=map(mouseY, 0, height, 45, 55);
  line(-35, 0, -170, y1);
  line(35, 0, 170, y1);
  line(-35, 10, -190, y2);
  line(35, 10, 190, y2);
  line(-35, 25, -180, y3);
  line(35, 25, 180, y3);
  
  //necklace
  strokeWeight(30);
  stroke(255, 0, 0);
  line(-200, 245, 200, 245);
  
  //bell
  stroke(0);
  strokeWeight(3);
  fill(255, 255, 19);
  ellipse(0, 252, 80, 60);
  line(-37, 245, 37, 245);
  
}

One thought on “Lab3 Documentation by Amber Wang (Marcela)

Leave a Reply