As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Saturday, April 13, 2013

Interactive goggly eyes


For our Processing challenge, we made some pretty awesome eyes that follow your mouse when you move within the program window. It is a  relatively simple code created almost entirely out of different size ellipses that (when given coordinates) overlap each other to look like fun cartoon eyes. Using the 'float' function, we were able to give these eyes life by making it follow the mouse when hovered upon.

Below, we copied the code for your viewing pleasure. We also included notes (in grey) so you know what's what.


int x = 500; // the x,y values of the size of the window 
int y = 500;

void setup() {
  size(500,500); //size of the screen
  smooth(); //use this to improve image quality of resized images
  ellipseMode(CENTER); //Changes the location of the eyeballs in reference to one another
  frameRate(50); //number of times the "draw" loop can be executed each second
}

void draw() {
  background(0);

//Eyes
  noStroke(); //No outline around the big circles 
  fill(255, 255, 255); //The color of the eye
  ellipse(x/2 - 100, y/2, 150, 150); //the size of the circle to the right
  ellipse(x/2 + 100, y/2, 150, 150);//the size of the circle to the left

float x1 = map(mouseX, 0, width, 145, 195);
float y1 = map(mouseY, 0, height, 225, 275);
float x2 = map(mouseX, 0, width, 305, 355);
float y2 = map(mouseY, 0, height, 225, 275);

//iris
  fill(55, 55, 155); //Color of the iris
  ellipse(x1, y1, 45, 45); //right circle iris color
  ellipse(x2, y2, 45, 45);//left circle iris color

//pupil
  fill(0);
  ellipse(x1, y1, 30, 30);
  ellipse(x2, y2, 30, 30);

//shine
  stroke(4);
  fill(255);
  ellipse(x1, y2, 10, 10);
  ellipse(x2, y2, 10, 10);
}

No comments:

Post a Comment