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.

Thursday, April 5, 2012

Assignment 1: Robin's Processing


For my Processing assignment, I chose to modify objects that follow path of the mouse cursor in a
fun and animated way. More specifically, a face with eyes will follow your cursor around the board as if it were looking and following it. If you click the movement will be faster.

void setup() {
  size(800, 600);
  smooth();
}

float x = 400;
float y = 300;
float bx = 400;
float by = 300;
float cx = 400;
float cy = 300;
float d = 300;
float easing = 0.02;
float easingb = 0.02;
float easingc = 0.02;

void draw() {
 
  if (mousePressed && (mouseButton == LEFT)) {
  easing = 0.01;
  easingb = 0.007;
  easingc = 0.004;
  } else {
  easing = 0.002;
  easingb = 0.0007;
  easingc = 0.0004;
  }
 
  float targetX = mouseX;
  float targetY = mouseY;
 
  if (mousePressed && (mouseButton == RIGHT)) {
  targetX = 400;
  targetY = 300;
  }
 
  x += (targetX - x) * easing;
  bx += (targetX - bx) * easingb;
  cx += (targetX - cx) * easingc;
  y += (targetY - y) * easing;
  by += (targetY - by) * easingb;
  cy += (targetY - cy) * easingc;
 
  println(mouseX);
  println(mouseY);
  background(100);
 
  //face
  noStroke();
  fill(200);
  ellipse(x, y, 200, 200);
  fill(240);
  ellipse(x-50, y-20, 68, 68);
  ellipse(x+50, y-20, 68, 68);
 
  //eyes
  float eyex = map(mouseX, 0, 800, 0, 60);
  float eyey = map(mouseY, 0, 800, 0, 60);
  fill(200);
  noStroke();
  if (mousePressed && (mouseButton == RIGHT)) {
  ellipse(x-50, y-20, 20, 40);
  ellipse(x+50, y-20, 20, 40);
  } else {
  ellipse(eyex+x-80, eyey+y-40, 40, 40);
  ellipse(eyex+x+20, eyey+y-40, 40, 40);
  }
  /*fill(60,120,240);
  ellipse(eyex+x-80, eyey+y-40, 10, 30);
  ellipse(eyex+x+20, eyey+y-40, 10, 30);*/
 
  noFill();
  stroke(120);
  strokeWeight(3);
  ellipse(x-50, y-20, 68, 68);
  ellipse(x+50, y-20, 68, 68);
 
  //red dot
  noStroke();
  float dotease = 0.5;
  float dotsize = 30;
  if (mousePressed && (mouseButton == LEFT)) {
  dotsize = 30;
  fill(255,0,0);
  } else if (mousePressed && (mouseButton == RIGHT)) {
  dotsize = 0;
  } else {
  dotsize = 10;
  fill(180,40,40);
  }
  d += (dotsize - d) * dotease;
  ellipse(mouseX, mouseY, d, d);
 
}

No comments:

Post a Comment