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, October 6, 2018

Processing Experiment - I've got the jitters!

Upon scrolling through the examples in processing, I came across a rather silly sounding one called, "Tickle". This example would sporadically move a piece of text, "Tickle", 5px in any direction when you would hover the mouse over the word. I thought it would be fun to amplify the effect a little bit and add a little more humor, so I changed the text to "I've got the jitters!", made the window the full size of my screen, bumped the text size up 40 points and doubled the possible movement of the text when hovering the mouse over it. All of this results in a rather silly little interactive experiment.


Original Code

String message = "tickle";
float x, y; // X and Y coordinates of text
float hr, vr;  // horizontal and vertical radius of the text

void setup() {
  size(640, 360);
  
  // Create the font
  textFont(createFont("SourceCodePro-Regular.ttf", 36));
  textAlign(CENTER, CENTER);
  
  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() {
  // Instead of clearing the background, fade it by drawing
  // a semi-transparent rectangle on top
  fill(204, 120);
  rect(0, 0, width, height);
  
  // If the cursor is over the text, change the position
  if (abs(mouseX - x) < hr &&
      abs(mouseY - y) < vr) {
    x += random(-5, 5);
    y += random(-5, 5);
  }
  fill(0);
  text("tickle", x, y);
}

Modified Code

String message = "I've got the jitters!";
float x, y; // X and Y coordinates of text
float hr, vr;  // horizontal and vertical radius of the text

void setup() {
  size(1280, 675);

  // Create the font
  textFont(createFont("SourceCodePro-Regular.ttf", 75));
  textAlign(CENTER, CENTER);

  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() {
  // Instead of clearing the background, fade it by drawing
  // a semi-transparent rectangle on top
  fill(204, 120);
  rect(0, 0, width, height);

  // If the cursor is over the text, change the position
  if (abs(mouseX - x) < hr &&
      abs(mouseY - y) < vr) {
    x += random(-10, 10);
    y += random(-10, 10);
  }
  fill(0);
  text("I've got the jitters!", x, y);
}

No comments:

Post a Comment