Dance Dance Revolution

The UI I was thinking about while reading Fishkin, is the Dance Dance Revolution mat. DDR is a dance video game set up in arcades and available on the Playstation, which uses a mat that the player stands on and interacts with. The mat has arrows that are used to go up, down, left, and right when stepped on. This relates directly to the ‘distant’ embodiment, in that players stand away from the screen. Their input on the mat directly affects the game screen in front of them.

The metaphor being implied in this case is body movement directly representing similar body movement of the character in the game. A step forward on the ‘up’ arrow results in the character performing that action and scoring points if done at exactly the right time. Here, the TUI has a direct noun and verb analogy with its virtual counterpart. In this way, the taxonomy was helpful in understanding how we perceive and are intuitively able to use the DDR mat. It’s clear that the designers of the game wanted to provide an easy to learn experience.

ddr

Potentiometers

Description:

I connected three potentiometers to my previous set up of three LEDs in parallel, one to each LED. And then I uploaded my code that would adjust the delay of each LED with the potentiometer. I played around with it to finally get the lights to turn on and off sequentially. (video here)

The next step was to dim the LEDs using the potentiometers. I modified and uploaded that code separately and it allowed me to use each individual potentiometer to change the brightness of each LED.

Components:

  • 1 Arduino
  • 1 Breadboard
  • 3 LEDs (blue, red, green)
  • 3 Resistors (220 ohms each)
  • 3 Potentiometers
  • 18 connecting wires
  • 1 USB Cable
  • 1 Laptop

Code (Pattern):

int redSensorPin = A2;    // select the input pin for the potentiometer

int greenSensorPin = A1;

int blueSensorPin = A0;

int redPin   = 9;   // Red LED,   connected to digital pin 9

int greenPin = 10;  // Green LED, connected to digital pin 10

int bluePin  = 11;  // Blue LED,  connected to digital pin 11

int redSensorValue = 0;  // variable to store the value coming from the sensor

int greenSensorValue = 0;

int blueSensorValue = 0;

void setup() {

  // declare the ledPin as an OUTPUT:

  pinMode(redPin, OUTPUT);

  pinMode(greenPin, OUTPUT);   

  pinMode(bluePin,  OUTPUT);

}

void loop() {

  // read the value from the sensor:

  redSensorValue = analogRead(redSensorPin);

  greenSensorValue = analogRead(greenSensorPin);

  blueSensorValue = analogRead(blueSensorPin);

  // turn the ledPin on

  digitalWrite(redPin, HIGH);

    delay(redSensorValue);

  digitalWrite(greenPin, HIGH);

  delay(greenSensorValue);

  digitalWrite(bluePin, HIGH);

  delay(blueSensorValue);

  // stop the program for <sensorValue> milliseconds:

  // turn the ledPin off:

  digitalWrite(redPin, LOW);

    delay(redSensorValue);

  digitalWrite(greenPin, LOW);

  delay(greenSensorValue);

  digitalWrite(bluePin, LOW);

  delay(blueSensorValue);

  // stop the program for for <sensorValue> milliseconds:

}

Code (Dimming):

int redSensorPin = A2;    // select the input pin for the potentiometer

int greenSensorPin = A1;

int blueSensorPin = A0;

int redPin   = 9;   // Red LED,   connected to digital pin 9

int greenPin = 10;  // Green LED, connected to digital pin 10

int bluePin  = 11;  // Blue LED,  connected to digital pin 11

int redSensorValue = 0;  // variable to store the value coming from the sensor

int greenSensorValue = 0;

int blueSensorValue = 0;

void setup() {

  // initialize serial communications at 9600 bps:

  Serial.begin(9600);

  // declare the ledPin as an OUTPUT:

  pinMode(redPin, OUTPUT);

  pinMode(greenPin, OUTPUT);   

  pinMode(bluePin,  OUTPUT);

}

void loop() {

  // read the value from the sensor:

  redSensorValue = analogRead(redSensorPin);

  greenSensorValue = analogRead(greenSensorPin);

  blueSensorValue = analogRead(blueSensorPin);

  analogWrite(redPin, redSensorValue/4);  // PWM the LED with the pot value (divided by 4 to fit in a byte)

  analogWrite(greenPin, greenSensorValue/4);

  analogWrite(bluePin, blueSensorValue/4);

  Serial.println(“hello”);      // print the pot value back to the debugger pane

  delay(10);                     // wait 10 milliseconds before the next loop

}

pots

The Tactile Dome

I went through an experience recently in the Exploratorium at San Francisco’s Pier 15. It was called the Tactile Dome. The interface of the Dome is unique in that there is no digital recording online nor any virtual means of viewing what is inside. It is something that needs to be experienced first-hand tangibly to understand it. Once inside the Dome, Me and three others walked, crawled, climbed, scuttled, and fell through the pitch black interactive maze with only our hands, ears and nose to guide us. While we were practically blind, the dome gave us the opportunity to stretch our imaginations with its different ‘enclosures’ and experiences. In one, I was on my hands and knees with what felt like grass underneath me and a slight artificial breeze blowing on my face. If I paused and thought about it, I could make myself believe I was in a wide meadow under open skies. My hands and my sense of touch were so sensitive that certain feelings invoked such strong memories. McCullough was right in saying that the hands are “the most closely connected with the mind.” I relied on my hands almost entirely to find the openings that moved our group forward through the maze. I felt and probed everything in front and around me to figure out if it was safe to move ahead and emerge unscathed out the other side. The experience was designed for the users to understand and accept the extent to which our other sensory organs of touch can guide our interpretation  of the world around us.

Dimming and Keyboard Inputs

Description:

I connected 3 LEDs in parallel and covered them with a diffuser made of styrofoam and bubblewrap. The initial code changes the brightness of the LEDs one at a time through a keyboard input and pulse width modulation (eg: r127). I modified the code so that a user could enter the letters ‘r’, ‘g’ or ‘b’ a number of times to indicate the percentage of brightness that they want that LED to be at. The minimum is 0% and the maximum is 100%, so the users can enter a letter 1 to 10 times to change the value (‘ggg’ corresponds to 30%). I adjusted the code so that entering a letter once turns the LED off. In addition I added the functionality of changing the intensity of multiple LEDs in one line input. The user can specify colors by entering different letters at once (eg: rrgggbbb). If the user doesn’t enter a specific color at all, then that color doesn’t change with that input.

diffuserLED

Components:

  • 1 Arduino
  • 1 Breadboard3 LEDs (blue, red, green)
  • 3 Resistors (220 ohms each)
  • 4 Connecting wires
  • 1 Diffuser (3 styrofoam peanuts + 1 bubble wrap sheet)
  • 1 USB Cable
  • 1 Laptop

Code:

char serInString[100];  // array that will hold the different bytes of the string. 100=100characters;

                        // -> you must state how long the array will be else it won’t work properly

char colorCode;

float colorVal;

float redVal = 0, blueVal = 0, greenVal = 0;

int redCode, greenCode, blueCode;

int redPin   = 9;   // Red LED,   connected to digital pin 9

int greenPin = 10;  // Green LED, connected to digital pin 10

int bluePin  = 11;  // Blue LED,  connected to digital pin 11

void setup() {

  pinMode(redPin,   OUTPUT);   // sets the pins as output

  pinMode(greenPin, OUTPUT);   

  pinMode(bluePin,  OUTPUT);

  Serial.begin(9600);

  analogWrite(redPin,   127);   // set them all to mid brightness

  analogWrite(greenPin, 127);   // set them all to mid brightness

  analogWrite(bluePin,  127);   // set them all to mid brightness

  Serial.println(“enter color command (e.g. ‘rrrrgggbb’) to indicate percentage of brightness(1-10). Single letter for turning off:”);

}

void loop () {

  // clear the string

  memset(serInString, 0, 100);

  redVal = 0, blueVal = 0, greenVal = 0;

  redCode = 0, blueCode = 0, greenCode = 0;

  //read the serial port and create a string out of what you read

  readSerialString(serInString);

  

  colorCode = serInString[0];

  if( colorCode == ‘r’ || colorCode == ‘g’ || colorCode == ‘b’ ) {

  for (int i = 0; i < strlen(serInString); i++) {

    if (serInString[i] == ‘r’) {

      redVal++;

      redCode = 1;

    }

    else if (serInString[i] == ‘g’) {

      greenVal++;

      greenCode = 1;

    }

    else if (serInString[i] == ‘b’) {

      blueVal++;

      blueCode = 1;

    }

  }

  Serial.print(redVal);

  Serial.print(” “);

  Serial.print(greenVal);

  Serial.print(” “);

  Serial.println(blueVal);

  redVal = (redVal/10)*255;

    if (redVal < 26) {

      redVal = 0;

  }

  greenVal = (greenVal/10)*255;

    if (greenVal < 26) {

      greenVal = 0;

  }

  blueVal = (blueVal/10)*255;

    if (blueVal < 26) {

      blueVal = 0;

  }

  Serial.print(“setting colors to “);

  Serial.print(redVal);

  Serial.print(” “);

  Serial.print(greenVal);

  Serial.print(” “);

  Serial.print(blueVal);

  Serial.println();

  serInString[0] = 0;

  if (redCode > 0)

    analogWrite(redPin, redVal);

  if (greenCode > 0)

    analogWrite(greenPin, greenVal);

  if (blueCode > 0)

    analogWrite(bluePin, blueVal);

  }

  delay(100);  // wait a bit, for serial data

}

//read a string from the serial and store it in an array

//you must supply the array variable

void readSerialString (char *strArray) {

  int i = 0;

  if(!Serial.available()) {

    return;

  }

  while (Serial.available()) {

    strArray[i] = Serial.read();

    i++;

  }

}

 

diffuserLED SerialLED dimmingLED

Lab 1: Blink Blink Blink

Components:

  • 1 Arduino
  • 1 Breadboard
  • 1 LED
  • 1 Resistor (220 ohm)
  • 2 Jumper wires
  • 1 USB cable
  • 1 Macbook pro

Description:

I changed the code of the Blink example so that the red LED lights up for 3 seconds and turn off for 2 seconds on a loop. I connected the Arduino to my laptop and uploaded the code to it. I attached the breadboard with the jumper wires along with the resistor and LED. I then checked that it worked and took a picture (below).

Code:

void setup() {
 // initialize digital pin 13 as an output.
 pinMode(13, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
 digitalWrite(13, HIGH); // turn the LED on (HIGH is the voltage level)
 delay(3000); // wait for 3 seconds
 digitalWrite(13, LOW); // turn the LED off by making the voltage LOW
 delay(2000); // wait for 2 seconds
}
 

TUI-lab01

TUI-lab01

Fat Tuesdays

I came across a new form of drinking vessel during my recent trip to Las Vegas. The Fat Tuesday comes in a long cylindrical tube with expanded ends. The vessel holds a cold slushy-like drink which is sipped through an elongated straw (picture below for reference). While this was my first experience with such an interface for drinking, I was able to understand its usage easily enough because the physical embodiment fit roughly into my mental model as an instance of the abstract class of glasses (Dourish, p21). I further appreciated the tangibility of the cold drink on a warm Vegas night as well as the reduced circumference of the vessel that allowed for a firm grip even in an inebriated state. Through phenomenology, the creators of the Fat Tuesday understood that customers would enjoy the experience of an altered drinking vessel and that was a key part of their value proposition.

fat tuesday