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.

Wednesday, April 10, 2013

Charlie // Processing Voidray

Exploration of "if" conditions, allowing the artifact change position depending on where the cursor is located






























/**
 * Easing.
 *
 * Move the mouse across the screen and the image will follow.
 * Between drawing each frame of the animation, the program
 * calculates the difference between the position of the
 * symbol and the cursor. If the distance is larger than
 * 1 pixel, the symbol moves part of the distance (0.05) from its
 * current position toward the cursor. Depending on where the cursor
 *is located compared to image, image will turn
 */
PImage vlu;
PImage vld;
PImage vru;
PImage vrd;

float x;
float y;
float easing = 0.05;

void setup() {
  vld = loadImage("vray.png");
  vlu = loadImage("vrayleftup.png");
  vru = loadImage("vrayrightup.png");
  vrd = loadImage("vrayrightdown.png");
  size(850, 640);
  noStroke();
}

void draw() {
  background(51);
 
  float targetX = mouseX;
  float dx = targetX - x;
  if(abs(dx) > 1) {
    x += dx * easing;
  }
 
  float targetY = mouseY;
  float dy = targetY - y;
  if(abs(dy) > 1) {
    y += dy * easing;
  }
 
  // If mouse if higher than the image left
  if (y > mouseY && x < mouseX) {
    image(vlu, x, y);
  }
 
  // If mouse is lower than the image left
  if (y < mouseY && x < mouseX) {
   image(vld, x, y);
  }

  // If mouse if higher than the image right
  if (y > mouseY && x > mouseX) {
   image(vru, x, y);
  }
  // If mouse if lower than the image right
  if (y < mouseY && x > mouseX) {
   image(vrd, x, y);
  }
}


No comments:

Post a Comment