#Blog 11 Recitation 6: Animating an Interactive Poster

Recitation: Animated Poster for the IMA Show 

For this task, I used the PFont function to present the information and I found a sample code online that taught me how to trace the mouse movement to create a lovely eyes movement. I tried the pushMatrix() and popMatrix() function to create the numb of the pointing hand. I found that I have to put the background (0,0,0); in the loop in order to make sure the texts won’t leave their traces while expending and shrinking. There is a question that at first I don’t know how to make the thumb move horizontally with the hand. I consulted with Winny, and she taught me that I can change the code

pushMatrix();
   translate(300,255);
   rotate (PI*1.9);
   rect(x-250, -20, 180, 45, 30);
   popMatrix();

into

pushMatrix();
  translate(x, 255);
  rotate (PI*1.9);
  rect(0, 0, 180, 45, 30);
  popMatrix();

.

For text to expand, I learned from this source. 

Here is the video:

 

Here is the code:

Eye e1, e2, e3, e4, e5;
int x=0;
int speedX = 3;
float tSize = 50;
float flip = -1;
 
void setup() {
  PFont myFont;
  size (1024,768);
  x = int(random(0, width));
  myFont = createFont("Phosphate-Inline", 50);
  textFont(myFont);
  noStroke();
  e1 = new Eye( 550,  40, 220);
  e2 = new Eye( 100, 400,  80);  
  e3 = new Eye( 850, 500, 220);
  e4 = new Eye( 900, 200, 80);
  e5 = new Eye( 200, 600, 120);
}
 
void draw() {
background (0,0,0);  
  e1.display();
  e2.display();
  e3.display();
  e4.display();
  e5.display();
  
  textAlign(RIGHT);
  text("Location: 8th Floor", 900, 600);
  text("Date: Friday May 13", 900,650);
  text("Time: 6pm to 8pm", 900,700);
  textAlign(LEFT);
  text("IMA Spring 22", 100,100);
  text("End-Of-Semester Show", 100,150);
  textSize(tSize);
  tSize += flip * 0.5;
  if (tSize <= 35 || tSize >= 65 ) flip *= -1;
  
  x= x+speedX;
   rect(x, 300, 400, 45, 30);
   rect(x, 350, 200, 40, 30);
   rect(x, 395, 200, 40, 30);
   rect(x, 440, 200, 40, 30);
  pushMatrix();
  translate(x, 255);
  rotate (PI*1.9);
  rect(0, 0, 180, 45, 30);
  popMatrix();
  if (x > 800 || x < 100) {
    speedX = -speedX;
  }
}
 
class Eye {
  int x, y;
  int size;
  float angle = 0.0;
  
  Eye(int tx, int ty, int ts) {
    x = tx;
    y = ty;
    size = ts;
 }
  void display() {
    pushMatrix();
    translate(x, y);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(153, 204, 0);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

Homework: Make it Interactive

To make it interactive, I used the angle trace function and the keyCode function. For the angle function, it allows the pupils to look at where the mouse is located. and the keyCode function allows the user to change the direction where the hand is pointing with “LIGHT” and “RIGHT”.

Here is the video:

 

Here is the code:

Eye e1, e2, e3, e4, e5;
int x=0;
int w;
float tSize = 50;
float flip = -1;

void setup() {
  PFont myFont;
  size (1024,768);
  
  // Uncomment the following two lines to see the available fonts 
  //String[] fontList = PFont.list();
  //printArray(fontList);
  myFont = createFont("Phosphate-Inline", 50);
  textFont(myFont);
  noStroke();
  e1 = new Eye( 550,  40, 220);
  e2 = new Eye( 100, 400,  80);  
  e3 = new Eye( 850, 500, 220);
  e4 = new Eye( 900, 200, 80);
  e5 = new Eye( 200, 600, 120);
}


void draw() {
  background (0,0,0);
  e1.update(mouseX, mouseY);
  e2.update(mouseX, mouseY);
  e3.update(mouseX, mouseY);
  e4.update(mouseX, mouseY);
  e5.update(mouseX, mouseY);

  e1.display();
  e2.display();
  e3.display();
  e4.display();
  e5.display();
  
  textAlign(RIGHT);
  text("Location: 8th Floor", 900, 600);
  text("Date: Friday May 13", 900,650);
  text("Time: 6pm to 8pm", 900,700);
  textAlign(LEFT);
  text("IMA Spring 22", 100,100);
  text("End-Of-Semester Show", 100,150);
  textSize(tSize);
  tSize += flip * 0.5;
  if (tSize <= 35 || tSize >= 65 ) flip *= -1;
  
  rect(300, 300, 400, 45, 30);

  
  if (key == CODED) {
    if (keyCode == LEFT) {
      rect(500, 350, 200, 40, 30);
      rect(500, 395, 200, 40, 30);
      rect(500, 440, 200, 40, 30);
      pushMatrix();
      translate(600,255);
      rotate (PI*0.2);
      rect(-60, -70, 180, 45, 30);
      popMatrix();
    } else if (keyCode == RIGHT) {
      rect(300, 350, 200, 40, 30);
      rect(300, 395, 200, 40, 30);
      rect(300, 440, 200, 40, 30);
      pushMatrix();
      translate(300,255);
      rotate (PI*1.8);
      rect(-5, 15, 180, 45, 30);
      popMatrix();
    }
  }

}

class Eye {
  int x, y;
  int size;
  float angle = 0.0;
  
  Eye(int tx, int ty, int ts) {
    x = tx;
    y = ty;
    size = ts;
 }

  void update(int mx, int my) {
    angle = atan2(my-y, mx-x);
  }
  
  void display() {
    pushMatrix();
    translate(x, y);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(153, 204, 0);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

April 2, 2022, Jinqiao, Younian Liu