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 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.
Then I used the example from Arduino IDE to make it fade
Then it rang with the example program in Arduino IDE
The following videos are the process of the game.
(6 people living with monkeys and visited by tourists)