Week 4

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 fixed. In interactive work, the viewer makes choices that influence — or even contribute to — what they 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 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.

Interactivity in Processing

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

The loop allows your program to continuously redraw allowing for 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);
  background(100);
}

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

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

In order for there to be interactive your application needs senses. It needs to be able to receive input from the user to react to. Processing provides some variables and functions that provide information about input devices like mice and keyboards.

  • mouseX, mouseY
  • pmouseX, pmouseY
  • mouse Pressed

Look in the Processing reference for more.

// draw_loop_input.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);
}

mouse_xy

// mouse_xy.pde
// example code demonstrating mouseX and mouseY

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

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

  //draw lines
  stroke(255);
  line(mouseX, 0, mouseX, 400);
  line(0, mouseY, 400, mouseY);

  //draw circle
  fill(50, 50, 200);
  ellipse(mouseX, mouseY, 40, 40);
}

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);
}

Review

We have explored working with values and variables, loops and conditions, and making things react to user input. We have worked with much of the Processing drawing API. You have learned enough syntax to say a lot of things in the Processing language. There are some additional elements of syntax that we will still discuss, but they mostly make code cleaner, shorter, clearer and more reusable. In other words, you can do a great deal with just what we have discussed so far.

Homework

  1. Read everything up to page 59 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. Make sure you are comfortable with all the syntax we have covered so far, next week we will talk less about syntax and more about how to program (slightly) more complex interactions.

  3. Create two new sketches and reproduce the behavior of these two challenge exercises as closely as possible.

    Challenge 1
    Challenge 2

  4. Create an interactive sketch. Your new sketch should respond to changes to the mouse position and mouse button state. You should use at least 3 images that you create in traditional material. Photograph or scan the images to digitize them. As we discussed in class, these are only the minimimal requirements and create a starting point for your project. Think of this assignment as a foundation and build on top of it.

  5. Post a screen shot of your interactive drawing, as well as the source code and any required assets to the blog.

  6. Do NOT post your code for the two challenge exercises to the blog. Print the code instead, and bring it to class next week. Be sure to include your name on your print out.

Remember that all your code should include a comment header at the top of your code with the name of your program, a brief description, your name, and the name of the class. It should look something like this.

// City Skyline
// Draws a randomized city skyline. Demonstrates loops and conditionals.
// Author: Justin Bakse
// Class: PUDT 1203 Creative Computing