Recitation6

Recitation6 Animating an Interactive Poster

My inspiration is for the famous arcade game Pac-man. I tried to create an animation, it looks not that nice, but I like it and I think it is interactive and animated. The following is how it was like(the first is the made during the recitation and the second is the homework)

The animated graphs

The interactive animated graphs

 

Here’s my final code

int m=1024;
int n=0;
float speedX = 0;
float x1;
float y1;
void setup(){
  size(1024,768);
  background(255);
}

void draw(){
  fill(255);
  noStroke();
  if(m>=-25){
   for(int a=25; a<=725;a=a+100){
     patman1(m,a);
     ellipse(m+50,a,50,50);
     cover(m+25,a);
    }
   m=m-2;
   for(int b=75; b<=875;b=b+100){
     patman2(n,b);
     ellipse(n-50,b,50,50);
     cover(n-25,b);
    }
  n=n+2;
  }
  if (mousePressed) {
    x1 = mouseX;
    y1 = mouseY;
    speedX = 0;
  }
  if(x1>0){
  x1 = x1 + speedX;
  speedX = speedX + 0.1;
  patman2(x1,y1);
  cover2(x1-25,y1);
  fill(255);
  stroke(255);
  ellipse(x1-50,y1,50,50);
  }
}


 

void patman1(float x, float y) {
  fill(240, 226, random(0,255));
  stroke(0);
  ellipse(x, y, 50, 50);
  
  fill(0);
  //ellipse(x - 10, y - 10, 4, 4);
  ellipse(x + 10, y - 10, 6, 6);

  fill(0);
  stroke(0);
  arc(x, y, 50, 50, radians(145),radians(145+70));
}
void patman2(float x, float y) {
  fill(240, 226, random(0,255));
  stroke(0);
  ellipse(x, y, 50, 50);
  
  fill(0);
  ellipse(x - 10, y - 10, 6, 6);
  //ellipse(x + 10, y - 10, 6, 6);

  fill(0);
  stroke(0);
  arc(x, y, 50, 50, radians(325),radians(325+70));
}

void cover(float p, float q) {
  fill(0);
  beginShape();
  vertex(p-25,q-25);
  bezierVertex(p-25,q-25,p+25,q,p-25,q+25);
  vertex(p+25,q+25);
  bezierVertex(p+25,q+25,p-25,q,p+25,q-25);
  endShape();
  
}
void cover2(float p, float q) {
  fill(255);
  stroke(255);
  beginShape();
  vertex(p-25,q-25);
  bezierVertex(p-25,q-25,p+25,q,p-25,q+25);
  vertex(p+25,q+25);
  bezierVertex(p+25,q+25,p-25,q,p+25,q-25);
  endShape();
  
}

Reflection

The major difficulty I have encountered during the making is how to eliminate the former graphs of Pac-mans to create the animation of it eats the white graph and reveals the black graph. I tried to add black circles after the Pac-mans but it’s not perfect as illustrated below.

so, what I  needed to do is to cover the yellow and black area. So with Professor Gottfried’s advise, I create another graph using “beginShape()” and “endShape()”that serves as a cover. that will appear with the new Pac-mans and circles to create the rather more perfect graph.

I found the void …() function really exciting. It serves similarly as the “state” function in Arduino, allowing us to draw a separate graph using a new coordinate system and apply it to the main graph. That add endless possibilities to the creating. Also, it’s more convenient to use than the “State” graph as we need’t to think of converting from one state to another.