Assignment 3.2

posted Jun 23, 2010, 11:15 PM by Unknown user   [ updated Jun 23, 2010, 11:40 PM ]
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?

Code:
 
 

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);    
  }
}


Comments