Music: Vib Ribbon / Intro

Interactivity

A core issue in interactive work is how the viewer effects their experience. In non-interactive works, the viewer has no influence on the form of the work; what the viewer sees and hears is decided entirely when the work is created. In interactive works, the viewer makes choices that influence — or even contribute to — what they see and experience.

One of the key things to consider when designing or criticizing an interactive project is what options and choices are presented to — and withheld from — the user.

If you believe that communication is essential to art/design, then all mediums of art/design are arguably interactive to some extent. We tend to call a work interactive only when the the user’s actions and choices are an intentional, substantial consideration of the artist.

Animation in Processing

The code we have discussed so far runs only one time and results in a static image. Because these programs do not allow any time for human input, they are not interactive.

In processing the draw loop allows your program to repeatedly redraw. This allows animation, reaction to user input, and interaction.

// draw_loop.pde
// Animates a flashing circle, demonstrates using the setup() and draw() functions.

void setup() {
    size(400, 400);
}

void draw() {
    background(100);
    fill(random(0,255), random(0,255), random(0,255));
    ellipse(200,200,200,200);
}

The draw loop lets your work take on the aspect of time; your work changes from a static composition to a dynamic one which can change and react. You now have to consider not only what to do, but also when to do it. What would happen we moved the background() or fill() command in the example above into the setup function?

Functions

In the code example above, setup and draw are functions. Functions are small sub-programs. Processing will run the setup program once when your program starts. Processing will then run the draw program repeatedly. We will learn more about functions in the next two weeks.

Interactivity

In order to be interactive an application needs senses; It needs to be able to receive input from the user. Processing provides information in two ways: by updating the values in some special variables, and by calling functions when user interactions occur.

These variables hold information about the state of the mouse:

• mouseX
• mouseY

• mousePressed

  // drawloopinput.pde
  // Animates a flashing circle at the position of the mouse.
  // demonstrates using the setup() and draw() functions and introduces interactivity

  void setup() {
  size(400, 400);
  background(100);
  }

  void draw() {
  background(100);
  fill(random(0,255), random(0,255), random(0,255));
  ellipse(mouseX, mouseY, 50, 50);
  }

interactive_random

// interactive_random.pde
// example code demonstrating mouseX and mouseY with random()

void setup() {
  size(400, 400);
  background(100);
}

void draw() {
  background(50,50,50);

  //draw circle
  fill(50, 255, 50);
  ellipse(mouseX + random(-30, 30), mouseY + random(-30, 30), 40, 40);
}

interactive_map

// interactive_map.pde
// example code demonstrating mouseX and mouseY with map()

void setup() {
  size(600, 200);
  background(100);
}

void draw() {
  background(50,50,50);

  //set fill color based on position of the mouse, use map to scale range
  fill(map(mouseX, 0, 600, 0, 255));

  // compare to the following fill command, which doesn't scale the range
  // fill(mouseX);

  rect(20, 20, 560, 160);
}

sunrise.pde

// sunrise.pde
// draws an interactive illustration of a sunrise
// demonstrates use of mouseX, mouseY, map, etc.

void setup() {
    size(400, 400);
    noStroke();
}

void draw() {
    background(0,0,0);

    //draw sky
    //night->sunrise
    if (mouseY > 300){
        fill(   map(mouseY, 300, 400, 255, 0), 
                map(mouseY, 300, 400, 50, 0), 
                map(mouseY, 300, 400, 0, 0));
    }
    //surise->noon
    if (mouseY <= 300){
        fill(   map(mouseY, 200, 300, 50, 255), 
                map(mouseY, 200, 300, 50, 50), 
                map(mouseY, 200, 300, 255, 0)); 
    }
    if (mouseY <= 200){
        fill(50, 50, 255);
    }

    rect(0, 0, 400, 400);

    //draw sun
    fill (255, 255, 0);
    ellipse(300, mouseY, 75, 75);

    //draw ground
    fill(   map(mouseY, 0, 400, 50, 0), 
            map(mouseY, 0, 400, 200, 0), 
            map(mouseY, 0, 400, 50, 50)); 
    rect(0, 350, 400, 50);
}

Homework

1. Read everything up to page 64 in the book.

2. Make sure you are comfortable with everything we have covered so far. Take some time to look over previous class notes, re-read everything in the book, review your earlier assignments. We’ve covered literal values, variables, operators, expressions, statements, conditional statements, loops. This week we are introducing user interactions. Already, these are a very powerful set of tools.

3. Create a Processing sketch for each of the challenges below. Recreate the interaction and look of each as closely as you can.

4. Review the spec and make sure you files are named correctly and have the proper code headers, etc. Do not post your code to the blog. Bring a single zip containing all of your challenge sketch folders to class to turn in.

Challenge 1

Challenge 2

Challenge 3

Challenge 4

Challenge 5 (Bonus)