Assignment 3.2

Post date: Jun 24, 2010 6:15:5 AM

For the animation assignment, I decided to make they eyes of this adorable smiley face...

...follow my mouse around the screen. While it is a simple enough concept, it took me forever and a day to figure out the geometry of what I was trying to accomplish, but nevertheless, I prevailed. Here is a video (my favorite thing to do is make him cross his eyes XD ):

And here is the code, along with the image I created to be used in this sketch, placed in my "data" folder:

Kinda creepy huh?


PImage smileyImage; //declare image

void setup() {

size(600, 600); //set size to 600 x 600 pixels

background(255); //set background to white

stroke(0); //set stroke color ot black

fill(0); //set fill color to black

smileyImage = loadImage("smiley.png"); //load smiley image


void draw() {

image(smileyImage, 150, 150); //draw image at center of screen

ellipseMode(CENTER); //set ellipses to draw from center

/* to understand the geometry of this sketch, think of 2 geometrically similar right triangles,

one with its A and B on the eye center and mouse respectively, and

the other with A and B on the eye center and "eye socket" radius,

respectively. The pupil must lie on both hypotenuse lines, on the B of the

second triangle. The A and B side lengths of the first triangle are easily

obtained through subtraction, and are used to get the angle (which is equal for both

triangles). This, along with the hypotenuse (radius of the eye socket, about 20) of the second

triangle, is used to get the 2 remaining sides, which are the x and y shift distance */

int adj = mouseX - 215; //find adjacent side length

int opp = mouseY - 255; //find opposite side length

if(adj == 0) { //fairly inconsequential if statement to ensure we aren't dividing by 0

adj = 1;


float angleA = atan(opp/adj); //get the measure of angle A through inverse tangent

float xdist = cos(angleA) * 20; //get the measure of the x shift (opposite side) through cosine

float ydist = sin(angleA) * 20; //get the measure of the y shift (adjacent side) through sine

if(mouseX > 215) { //if shift is positive

ellipse(215 + xdist, 255 + ydist, 30, 30); //draw pupil, adding shift distance to x and y


else { //shift is negative

ellipse(215 - xdist, 255 - ydist, 30, 30); //draw pupil, subtracting shift distance from x and y


//repeat for right eye (I decided to make him a chameleon so his eyes move independently)

adj = mouseX - 350;

opp = mouseY - 255;

if(adj == 0) {

adj = 1;


angleA = atan(opp/adj);

xdist = cos(angleA) * 20;

ydist = sin(angleA) * 20;

if(mouseX > 350) {

ellipse(350 + xdist, 255 + ydist, 30, 30);


else {

ellipse(350 - xdist, 255 - ydist, 30, 30);