Assignment #4: Generative Text

For this week’s assignment, I attempted to make an interactive art utilizing text. My art piece for this week is pretty straightforward. A text is displayed initially and the user can maneuver their cursor onto the test. Then, once the cursor is within the range of the text, the text starts to move away like it is trying to avoid you. I also created a sort of shivering effect to really make it seem like the text is hating the cursor.

The text keeps moving as it tries to avoid the cursor, and if the text moves away from the width and the height of the screen, then the text is called back into the screen.

I am eager to improve this piece and I am working on creating numerous more identical texts within the screen so that it creates a more mass-movement kind of effect when a cursor is placed anywhere on the screen.

Below is the video of my creation in action:

String message = "Go Away~"; // to calculate the string's length
float x,y,hr,vr;

void setup(){
  size(320,320);
  textFont(createFont("Monaco",36));
  textAlign(CENTER, CENTER);
  hr = textWidth(message);
  vr = (textAscent() + textDescent())/2;
  noStroke();
  x = random(hr, width - hr);
  y = random(vr, height - vr);
}

void draw() {
  fill(255, 120);
  rect(0, 0, width, height);

  // Once the mouse is on the text
  if (abs(mouseX-x) < hr && abs(mouseY - y) < vr){
    x += random(-10,10);
    y += random(-10,10);
    if (x+hr/2 > width || x-hr/2 < 0 || y+vr > height || y-vr < 0){
      x = random(hr, width-hr);
      y = random(vr, height-vr);
    }
  }
  fill(0);
  text("Go Away~",x,y);
}