ICM Homework: Interactive Art Sketch

For this week’s homework in ICM, we were to create interactive art that was set up in a way that the end output will always be what you expect, regardless of what the user does to it.

I think some people interpreted these instructions as a call for a game, which I find interesting; why should games come to mind when the mind is pre-loaded with the words “goals”, “rules”, “structure”?  Isn’t there something to be said for Calvinball?

I’ve been mesmerized by my classmate Engin Ayez’s sketch “Disappearing Ideas” ever since he showed it in class.  I wanted to play with the idea a little further.  So full props to him for the creativity and inspiration.  What I wanted to do was convey a certain key message, “CALL YOUR MUM”, with the Processing language.

The structure of this is that each letter of the phrase is drawn in its own sector only during certain times (# of times the draw() function has been called), while ellipses are drawn periodically on top of the letterings, making them appear to fade out over time.

The ellipses were chosen because I felt they made the sketch look more like a painting than they would with drawn rectangles, which would give the sketch more of an algorithmic or mathematical fading away effect.

I also coded the ellipses to be drawn only when the user’s mouse is not in the correct sector, to symbolize how not focusing on the task (calling one’s mum) causes the idea to fade away from one’s mind.  The structure of the thought can be completely recalled and put back on track at any time, though, through re-focusing.

On key presses, the sector layouts with letterings will be drawn.  On mouse presses, the phrase will be printed out to screen at a random angle rotation and the user can draw the letters anywhere on screen.

Two things about the keyPressed() and mousePressed() functions.  They don’t seem to react reliably — I assume you have to time it right for when the draw() function is inactive.  Also, those functions seem to halt the draw() function during runtime…  I think I would prefer having separate events going off at the same time.

The redundant if..then loops could probably be reduced to a tighter looping algorithm, but there were so many variable parts that it didn’t seem worth the time at this scale.

Code, demo, etc. below the jump:

Here is the Java applet for my sketch, “CALL YOUR MUM” (also, Java applet version):

// Ben Turner

// NYU-ITP ICM

/* Use mouse and keyboard input to create an interactive drawing. Design your program
 * to achieve certain visual goals and try to structure your program so that no matter
 * what your user does the output always meets these goals. This means the interactor is
 * "always right" nothing they can do potentially goes contrary to your design goals. be
 * prepared to discuss your designa and interaction goals. */

// Heavily influenced by my badass classmate Engen Ayez's badass sketch:
// http://enginayaz.wordpress.com/2011/09/20/disappearing-ideas-an-interactive-animation-sketch-in-processing/

// count is used to track which sector of the screen is "active" to display the letters to
long count = 0;
PFont f;

void setup() {
  size(400, 400);
  f = loadFont("Helvetica-48.vlw");
  smooth();
  background(255);
}

// if a key is pressed, "CALL YOUR MUM" (barring timing issues) will be displayed in the
// sectors they're allowed to be drawn in by default
void keyPressed() {
  textFont(f,80);
  rotate(0);
  fill(0, 70);
  text("C",30,100);
  text("A",130,100);
  text("L",230,100);
  text("L",330,100);
  text("Y",30,350);
  text("O",130,350);
  text("U",230,350);
  text("R",330,350);
  text("M",75,225);
  text("U",175,225);
  text("M",275,225);
}

// if mousePressed is pressed, allows you to draw characters anywhere, also prints CALL YOUR MUM
void mousePressed() {
  strokeWeight(2);
  fill(176, 0, random(252));
  text("CALL YOUR MUM", mouseX, mouseY);
}

void draw() {
  float a = random(100); // creates a random font size to draw each letter
  int randomTextSize = int(a); // have to convert floats via randomizer to int
  textFont(f, a);
  if (count >= 0 && count < 200) { // duration for each letter fill
    fill(random(200), 255, 75, 150);
    if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 200 && !mousePressed) { // only draws in top left sector
      text("C", mouseX, mouseY);
    }
    else if (mousePressed) {
       text("C", mouseX, mouseY);
     }
     else { // draws randomly-sized ellipses to decay out old stuff
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 200 && count < 400) {
     fill(random(200), 255, 75, 150);
     if (mouseX > 100 && mouseX < 200 && mouseY > 0 && mouseY < 200 && !mousePressed) {
       text("A", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("A", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 400 && count < 600) {
     fill(random(200), 255, 75, 150);
     if (mouseX > 200 && mouseX < 300 && mouseY > 0 && mouseY < 200 && !mousePressed) {
       text("L", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("L", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 600 && count < 800) {
     fill(random(200), 255, 75, 150);
     if (mouseX > 300 && mouseX < 400 && mouseY > 0 && mouseY < 200 && !mousePressed) {
       text("L", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("L", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 800 && count < 1000) {
     fill(57, random(187), 255);
     if (mouseX > 0 && mouseX < 100 && mouseY > 200 && mouseY < 400 && !mousePressed) {
       text("Y", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("Y", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 1000 && count < 1200) {
     fill(57, random(187), 255);
     if (mouseX > 100 && mouseX < 200 && mouseY > 200 && mouseY < 400 && !mousePressed) {
       text("O", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("O", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 1200 && count < 1400) {
     fill(57, random(187), 255);
     if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY < 400 && !mousePressed) {
       text("U", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("U", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 1400 && count < 1600) {
     fill(57, random(187), 255);
     if (mouseX > 300 && mouseX < 400 && mouseY > 200 && mouseY < 400 && !mousePressed) {
       text("R", mouseX, mouseY);
     }
     else if (mousePressed) {
      text("R", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 1600 && count < 1800) {
     fill(255, 57, random(149));
     if (mouseX > 50 && mouseX < 150 && mouseY > 100 && mouseY < 300 && !mousePressed) {
       text("M", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("M", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 1800 && count < 2000) {
     fill(255, 57, random(149));
     if (mouseX > 150 && mouseX < 250 && mouseY > 100 && mouseY < 300 && !mousePressed) {
       text("U", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("U", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   else if (count >= 2000 && count < 2200) {
     fill(255, 57, random(149));
     if (mouseX > 250 && mouseX < 350 && mouseY > 100 && mouseY < 300 && !mousePressed) {
       text("M", mouseX, mouseY);
     }
     else if (mousePressed) {
       text("M", mouseX, mouseY);
     }
     else {
       rotate(random(PI));
       fill(255, 232, 57, 70);
       noStroke();
       ellipse(random(400), random(400), random(150), random(150));
     }
   }
   // reset count so it never causes an overrun error or whatever
   count++;
   if (count>2200) {
     count = 0;
   }
}