Recitation 6: Processing Animation

In this recitation, I wanted to create a face with the pupils following the movement of my mouse. So I started with outlining the eyes and tried to make one eye move. I did some research on this and successfully made one of the pupils move with my mouse.

Here is my code:

int lEyeW =0;
int rEyeW = 0;
int EyeH = 0;

Mover mover;

class Mover {
  PVector location;
  PVector velocity;
  PVector acceleration;

  float topspeed;

  Mover() {
    // Start in the center
    location = new PVector(width/2, height/2);
    velocity = new PVector(0, 0);
    topspeed = 5;
  }

  void update() {

    // Compute a vector that points from location to mouse
    PVector mouse = new PVector(mouseX, mouseY);
    PVector acceleration = PVector.sub(mouse, location);
    // Set magnitude of acceleration
    acceleration.setMag(0.2);

    // Velocity changes according to acceleration
    velocity.add(acceleration);
    // Limit the velocity by topspeed
    velocity.limit(topspeed);
    // Location changes by velocity
    location.add(velocity);
  }

  void display() {
    noStroke();
    fill(255);
    circle(location.x,location.y, 20);
  }
}

void setup() {
  mover = new Mover();
  
  size(600, 600);
  lEyeW = width/2-80;
  rEyeW = width/2+80;
  EyeH = height/2-50;
}

void draw() {
  background(#f88e50);

  noFill();
  stroke(255);
  strokeWeight(10);
  circle(lEyeW, EyeH, 100);

  noFill();
  stroke(255);
  strokeWeight(10);
  circle(rEyeW, EyeH, 100);

  noStroke();
  fill(255);
  circle(rEyeW, EyeH, 20);

  mover.update();
  mover.display();
}

 Here is my moving pupil:

I liked how the pupil would rotate around the mouse with an interesting movement. However, since I did not fully understand the “class” used in this set of codes, I did not know how to make the second pupil move or make the pupils only move in the circular frame of the eyes. Skye suggested I use “map()” to relate the x and y value of the pupil to mouseX and mouseY. So I refined my codes and added more details to make the face looks more appealing.

Here is my final code:

int lEyeX =0;    //x of left eye
int rEyeX = 0;   //x of right eye
int EyeY = 0;    //y of eyes
float pupilX1;
float pupilX2;
float pupilY;

void setup() {
  size(600, 600);
  lEyeX = width/2-80;
  rEyeX = width/2+80;
  EyeY = height/2-50;
}

void draw() {
  background(255);
  noStroke();
  fill(#f88e50);
  rect(0, 0, 600, 370);
  bezier(0, 370, 100, 580, 500, 580, 600, 370);
  
  noStroke();
  fill(#D86B2C);
  arc(width/2, height/2+130, 200, 100, PI, 2*PI);
  arc(width/2, height/2+130, 200, 50, 0, PI);
  
  noStroke();
  fill(#FFEDF6);
  circle(150, 350, 80);
  circle(450, 350, 80);

  pupilX1 = mouseX;
  pupilX2 = mouseX;
  pupilY = mouseY;

  noFill();
  stroke(255);
  strokeWeight(10);
  circle(lEyeX, EyeY, 100); //left eye

  noFill();
  stroke(255);
  strokeWeight(10);
  circle(rEyeX, EyeY, 100); //right eye

  pupilX1 = map(mouseX, 0, width, lEyeX-40, lEyeX+40);
  pupilX2 = map(mouseX, 0, width, rEyeX-40, rEyeX+40);
  pupilY = map(mouseY, 0, height, EyeY-40, EyeY+40);

  noStroke();
  fill(255);
  circle(pupilX1, pupilY, 30);

  noStroke();
  fill(255);
  circle(pupilX2, pupilY, 30);

  stroke(255);
  noFill();
  line(width/2-120, height/2+50, width/2+120, height/2+50);
  arc(width/2, height/2+80, 300, 150, 0, PI);
  arc(width/2-130, height/2+70, 40, 40, PI, PI+HALF_PI);
  arc(width/2+130, height/2+70, 40, 40, PI+HALF_PI, 2*PI);

  noStroke();
  fill(255);
  arc(0, 0, width, 200, 0, HALF_PI);
  arc(width, 0, width, 200, HALF_PI, PI);
}

void blink(){
  noStroke();
  fill(255);
  circle(pupilX1, pupilY, 30);

  noStroke();
  fill(255);
  circle(pupilX2, pupilY, 30);
}

Here is the final version of moving pupils:

During the process of finalizing the codes, the part that I struggled with the most was to find try the positions of the lines and arcs. It was time-consuming and required a lot of patience. I think the process of thinking about the logic in the code was fun, but I usually lost patience after a few times of failures in these repetitive works of filling in and changing numbers. Yet, through this exercise, I had a clear sense of the numbers with their corresponding distance presented on the screen. This will help me with future drawings using Processing.

Additional Homework

While coding the additional homework, making the circle expands and shrinks was not the difficult part. Problems occurred when I was trying to make the colors change.

Here is the initial attempt:

Since in a class before, Marcela helped me add “colorMode(HSB, 100)” to make the background change color continuously. So I did the same thing in my code, but it turned out that the stroke of the circle remained black and the background directly turned blue. 

Then, I thought the problem was with the values of “stroke()” that I have set. Since the three variables in the brackets represent HSB (hue, saturation, and brightness), the hue should be the one changing. Therefore, here I should create a variable for the color. Since I already had a variable for the diameter of the circle, I thought I could just directly use it for the changing color as well. 

The second attempt:

I tried several times with subtraction and division, the stroke started to change color successfully.

Here is the final code of Additional Homework:

int d = 200;    //diameter
int colorM = 25;  //color amount
int changeC = 3;  //amount color is changed
int changeD = 2;  //amount the diameter is changed
int x;
int y;

void setup() {
  size(600, 600);
  x = width/2;
  y = height/2;
}

void draw() {
  background(0, 0, 100);
  strokeWeight(30);
  colorMode(HSB, 100);
  stroke(d/5, 100, 100);
  print(d + "\n");
  change();
  d += changeD;
  circle(x, y, d);
}

void change() {
  if (d<50 || d>400) {
    changeD = -changeD;
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      y=y-20;
    }
    if (keyCode == DOWN) {
      y=y+20;
    }
    if (keyCode == LEFT) {
      x=x-20;
    }
    if (keyCode == RIGHT) {
      x=x+20;
    }
  }
}

 Here is the final moving circle: