Interactivity

Interactivity is a much ballyhooed concept of the late 20th and early 21st century. We walk around listening to iPods while texting on our cell phones, drive according to directions from a satellite spoken to us live in a calm computerized voice, and are constantly reviewing our blogs, Flickr pages, Google Alerts, and email.

Interactivity is not new. The archaeologist Alexander Marschak has argued that the caves at Lascaux was an interactive site; it was a place where people visited to leave reactive marks. From chess to basketball, mahjong to tennis, games are ancient interactive forms of entertainment, intellectual diversion, and fun. Though interactivity is not new, its is increasingly pervasive as a mode of relating to information, people, and entertainment. Building up from the most basic set of logical arguments, early computer programmers created games. Spacewar, Pong, and Space Invaders all share more or less the same basic set of interactivity: Move left; move right; shoot a missle; did it hit?; if it hit, then the alien explodes; if it didn't hit, nothing happens.

Visual Examples

Spacewar, 1961, Martin Graetz, Stephen Russell, and Wayne Wiitanen, computer program for DEC PDP-1 computer. (Photo CC-BY Joi Ito)

In 1961, at the height of the Cold War US/Soviet space race, three MIT graduate students (Martin Graetz, Stephen Russell, and Wayne Wiitanen) programmed Spacewar, the first video game. In the game two spaceships shoot at each other. The creators added moving stars and changing brightness, a technological feat at the time. If we break the game down into its core interactions, you and your opponent can turn your spaceship right or left, go forward, and shoot. Lastly, the program registers whether your ship has been hit by your opponent's missile. This is pretty simple, but it forms the basis for much game based interactivity. Put simply: Move your avatar around and shoot things.

Trigger Happy, 1998, Jon Thomson and Alison Craighead, computer program written in Macromedia Director, the predecessor to Flash. (http://www.thomson-craighead.net/docs/thap.html)

In 1998 the artist duo Jon Thomson and Alison Craighead created a Space Invaders inspired game and gallery installation called "Trigger Happy". While the player is playing a game that is very similar to Space Invaders, the content is quite different. The player reads and shoots at snippets of text that create a theoretical argument for the death of individual authoring. The trigger-happy viewer becomes a collaborator in the authoring of the text in the installation. From the players point of view, playing Trigger Happy is like playing Space Invaders where the controller moves the avatar left and right and shoots.

Exercise 1: Introducing true and false

In this chapter we are going to introduce basic interactivity. We want to create user controls that enable and disable our animation. When certain conditions are met, the program should continue to update our circle's position, but otherwise, we will keep it's position fixed. In programming, conditions like this are called state. We want to keep track of the state of our sketch. To do this, we will introduce a new variable. It will keep track of whether or not our circle is moving. Let's call it moving.

1. Add the following line below your other variable declarations created in Chapter 19:

boolean moving = true;

The keyword "boolean" introduces a new "data type". The previous data type we've seen was "int", which stored a whole number. "boolean" indicates that our variable will only store two values: true or false. Let's set our variable to true for now. We will change it later.

2. Use the new variable. Add the if statement shown below around the line of code that updates the circle position:

  if ( moving ) {
    circleYPosition = circleYPosition + circleVelocity;
  }
  

Since the moving variable is of type "boolean", we can use it directly as the condition of an if statement. When moving is true, the if statement will execute all code inside it; when moving is false, it will not.

Run that sketch and you shouldn't see any change in behavior. Our moving variable is set to true, so our position variable gets updated every frame. Your code should look like this:

/*
Creators: Rory Solomon and Becky Heritage
 Date: Feb. 8, 2009
 License: CC-BY-SA
 */

// variable declaration
int circleYPosition = 200;
int circleVelocity = 1;
boolean moving = true;

void setup() {
  size(400,400); // the size of the sketch
}

void draw() {
  background(255);

  smooth();
  noStroke();
  fill(100,100,250);

  // draw a circle
  ellipse(200,circleYPosition,100,100);

  fill(250,100,100,150);

  // draw a square
  rect(150,225,100,100);

  fill(250,250,100,100);
  triangle(125,200, 275,200, 200,100);

  // move the circle
  if ( moving ) {
    circleYPosition = circleYPosition + circleVelocity;
  }

  if ( circleYPosition < 50 || circleYPosition > 275 ) {
    circleVelocity = circleVelocity * -1;
  }
}
  

Exercise 2: Responding to the mouse and keyboard

Now let's explore how to change that boolean value. In this exercise we are going to respond to user input to change the value of our variable, called moving.

1. Add two new blocks: keyPressed and mousePressed. Inside the new blocks, modify the value of moving. The code should look like the following:

/*
Creators: Rory Solomon and Becky Heritage
 Date: Feb. 8, 2009
 License: CC-BY-SA
 */

// variable declaration
int circleYPosition = 200;
int circleVelocity = 1;
boolean moving = true;

void setup() {
  size(400,400); // the size of the sketch
}

void draw() {
  background(255);

  smooth();
  noStroke();
  fill(100,100,250);

  // draw a circle
  ellipse(200,circleYPosition,100,100);

  fill(250,100,100,150);

  // draw a square
  rect(150,225,100,100);

  fill(250,250,100,100);
  triangle(125,200, 275,200, 200,100);

  // move the circle
  if ( moving ) {
    circleYPosition = circleYPosition + circleVelocity;
  }

  if ( circleYPosition < 50 || circleYPosition > 275 ) {
    circleVelocity = circleVelocity * -1;
  }
}

void keyPressed(){
  moving = false;
}

void mousePressed(){
  moving = true;
}

2. Analyze the code. We have two new blocks. We already know that a setup() block will be run at the beginning of the sketch, and a draw() block will be repeated at the rate set by framerate().  A keyPressed() block will activate whenever a user presses any key, and a mousePressed() block will activate whenever the mouse is clicked.

In our example, pressing a key will change our variable to false, and should stop the circle. With moving switched off, the program no longer changes the position of our circle.

Clicking the mouse will change moving to true. The circle will begin moving again from the position where it stopped. Run the sketch, use your keyboard and mouse, and see what happens.