Interactive Animations on Processing
During this recitation, I got a lot better at working with Processing and combining drawing through code with user interaction. I wanted to create Spongebob’s eyes within which the pupils follow the movement of the mouse. It was harder than I expected, and I ended up running out of time to add details (like eyelashes) around the eyes. The biggest challenge was creating parameters for the movement of the ‘pupils’, so that they only moved around inside of the eyes, and not outside of them. I used a reference available on the Processing website to learn how to set the integers and void_update in order for my animation to run like how I wanted it to, and I looked at a sample code to learn how to format my own. It was also difficult to center the blue and black circles within the white ones, but I learned that I can use “size/#” to make the smaller circles perfectly centered within the larger ones. Furthermore, centering the eyes in the middle of the screen took some trial and error, though I figured out that the easiest way to do so is just to subtract and add the same number to the horizontal axis point of each respective shape, so that they are both the same distance away from the sides of the screen. The most interesting functions I used were pushMatrix, popMatrix, and translate.
Here is the interaction I coded:
Here is my code:
Eye e1, e2;
void setup() {
size(640, 360);
noStroke();
e1 = new Eye( 180, 150, 180);
e2 = new Eye( 440, 150, 180);
}
void draw() {
background(255, 204, 0);
e1.update(mouseX, mouseY);
e2.update(mouseX, mouseY);
e1.display();
e2.display();
}
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, 250, 250);
fill(80, 180, 255);
ellipse(0,0, size, size);
rotate(angle);
fill(0);
ellipse(size/4, 0, size/2, size/2);
popMatrix();
}
}