PCOM / Week 14 / Final Project

FINAL PROJECT: The Protest Time Machine
For our final PCOM project, we continued on with the concept of a protest time machine to curate the political/protest songs from the 1960s to current day to help remind us what people have and still are fighting for. In last week’s play testing, we needed to make some big adjustments to the project. Since our original idea was to use the Bare Conductive paint, the buttons didn’t always work and we needed to add more programming and hardware elements to the project. We ended up substituting the paint and touch board for an Arduino Mega board with 20 buttons to help create a durable and reliable interface. We laser-cut silhouettes of the ‘protester figures’ with black acrylic sheets to fasten over the buttons in order to keep our original design. And since we wanted the buttons to not only trigger the music but the video/animation connected to the songs, my group partner, Ariana figured out the schematics and wiring of the breadboards, while using a visual patch wiring program, called Max to help connect the audio and visuals that would  later be projected on our canvas of protesters.

CONTENT:
The buttons on our piece were assigned one of twenty songs. We tried to balance the amount of songs within each decade to show the history of protest music, which ranges from anti-war protest to equal rights to curfews on the Sunset Strip.  It was interesting to see the progression of James Brown’s Say It Loud song and how he influenced Public Enemy and Kendrick Lamar’s songs about the same issue decades later. And every time we start researching for content, there were just more songs to add to the list and then narrow down. I was also trying to figure out how to visually show the relationship between the songs and came across Mariona Ortiz‘s impressive infographics on 1990s songs as inspiration.


CODE:

BOARD VIEW:
On the final version, the buttons were separated into 4 long breadboards to accommodate a larger sized button.

VIDEO DEMO:

REFFLECTION:
After hearing the feedback from our final presentation in our last class, I know that there are things to improve upon for this project. First, I would recommend to anyone taking PCOM to take a fabrication class with this class. I was scared of “the shop” and it was not on the top of my list of classes to take, but for all these midterm and final projects, using laser cutters and knowing how to use the tools just adds that polished touch to these PCOM projects. During my first PCOM class, I said that my tool of choice was an X-acto blade and now I have this newfound appreciation of constructing physical objects with something other than paper, especially after being inspired by all my fellow classmates’ projects. Thinking of fabrication also goes hand-in-hand with what buttons and sensors to use and where to place them. I’m scheduled to take the Piecing It Together class next semester and will hopefully get to work on a plinko-like clock idea that I came to mind when thinking of PCOM final project ideas. If I were to continue on this project and learning from the hiccups of building the initial interfaces of this time machine, the things to improve from the first prototypes are: constructing a sturdier and neater interface eliminating the split of the 2 boards in the middle; using more compact solderable breadboards; and using spacers or a frame to hold/hide all the wires and micro-controller together. In terms of the design, we tested the projector on the canvas after I made the animations, and noticed after the fact that my text was too low and cutting into the bottom silhouettes of the protesters making the lyrics unreadable. I would redesign the animations so the text stays in the upper top of the screen, just above the protesters’ heads.

Another improvement for this project would be creating more instant gratification when a button is pressed. We first had a whole song playing whenever a button was pressed which probably got boring if you weren’t into the song, but most users wants quick responses especially when they are running through all the buttons quickly. I tried to shorten the songs when I was making the animations, but after watching people interact with the latest version of the interface, I see that the clips need to be even shorter. A solution to this would be to add a toggle switch to create a few different modes of listening, (example: Mode #1: Short chorus of the song to make a beatbox-like instrument with all the buttons; Mode #2: Whole chorus with accompanying video/animation projection; Mode #3: Listen to the whole song). I also like the idea, which was a response from our final presentation, of making the interface more practical by being able to press two buttons at once, have the videos branch out of each ‘protester’ button to create a side by side video experience, so the user could compare and contrast the video/animation of the chosen songs, especially if the user is comparing videos representing different eras of history.

My professor, Tom Igoe’s suggestion to develop the story first and figure out the medium within which to tell a story later is something that I’ll always think of when starting a project. We were struggling at first to pick a project that we were both happy with, but we knew we wanted to work with projection mapping and videos. In this project of presenting protest songs as a timeline, the idea was initially to create an interactive TV set or something physical like that to tell the story, but it morphed into the conductive paint then into this projection canvas with graphic physical buttons. Because of the subject matter, I did end up spending too much time on gathering the content and building these videos for each song (while improving my Adobe Premiere skills), and less time concentrating on the sensors and interaction aspect. Next time, I would try to take a more balanced approach or tackle a less complex subject matter for an assignment like this.

CREDITS:
Protester Silhouettes were purchased from iStock by Getty Images; Matte Black and White Acrylics Sheets from Canal Plastic Center; All songs were purchased on iTunes.

PCOM / Weeks 11 & 12 / Final Project: Progress Report

After play-testing Pedro’s Map we received lots of feedback and interesting ideas to improve the game, like adding psychological factors to the story, controlling our character with movable magnetic pieces instead of using hand gestures and for a reward at the end, getting a combination to open a real briefcase with a prize or martini. However, Ariana and I soon realized that our hearts weren’t into the project that it was becoming and decided to come up with another idea.

The new concept came from my ICM final project idea to create a Protest Time Machine using a small selection of political/protest songs from the 1960s to today. We were inspired by this conductive ink and projection mapping project to use conductive paint for graphic touch buttons on a large white board, or possibly a wall for a larger scale project, to trigger the song.  We also plan on animating the music lyrics mixed in with YouTube music videos, news clips and iconic photos from that moment in history using a projector.

SUPPLIES
Conductive Paint
Conductive Copper Tape
Bare Conductive Touch Board
Arduino Board
Speaker
MP3s for the selection of political/protest songs
White Boards
Projector
Projection Mapping Program, MadMapper

CONCEPT 
pcom_politicalsongs

PROTOTYPE
protestpoliticalsong_illo_v1

BUILDING THE PROTOTYPE
1. Loading the songs onto the Bare Conductive Touch Screen Pad: The pad only holds 12 songs which need to be uploaded to the SD card inside the touch pad. For this prototype, we have five songs from the 60s, six from the 70s, and one from the 80s. For the finished project, we will use another touch board for an additional 12 songs to highlight music from the 80s, 90s, 00s, 10s.
img_2644-1v2

2. Building the graphic touch buttons: the graphics for the buttons were built in illustrator and laser-cut to build the stencil for laying down the conductive paint. We made the mistake of using a thick foam core board, which needed to go through the laser cutter a couple of times. For the final version, we plan on using a thinner board or plastic to create a more polished and precise stencil. I also plan on customizing the silhouettes of the protestor button to the profile of the singer of the song triggered, like Bob Dylan for his Blowin In the Wind song or the profile of that particular protester, like a student’s silhouette to represent Crosby, Stills, Nash & Young’s Ohio song about the Kent State incident.
img_2686-1

3. Painting with Conductive Paint: We used the stencil to paint the touch buttons, but used too much paint where the outlines and fine details lost it’s shape. Not only are we planning on using a thinner board for the stencil, we need to blot the ink down for a less blotchy application and it will also allow the paint to dry quicker.
img_2689v3

4. Connecting the painted touch buttons to the board: We decided to use conductive tape instead of painting the black lines to connect the graphics to the 12 small circles of the Bare Conductive Touch Board.
img_2692v2
img_2693v2

5. Testing the buttons with the board: It took a couple of tries to get the buttons to work with the board, but it could be the fact that we tested it before the paint fully dried. I saw that some buttons in the beginning of the row were not working even though they were before. When I started troubleshooting, I lifted the board and noticed the ink crossed paths with the other rows. Because if this, I needed to reapply new conductive tape to the first 4 rows to create a more secure and separate connection. I was scared to use water on the board to remove the water soluble paint, so luckily I found this tip to remove the paint from the board: scraping the paint off the board. And we need to always allow the paint enough time to try before testing it with the board.
img_2694v2

NEXT STEPS
The next steps is to add more interactivity to the project by creating animations of lyrics and imagery using map projection and connecting the touch board to an arduino. When we shared this idea of using protest/political songs for our project, there are always more suggestions on what songs should be featured. It would be great to give the participants the option to make their suggestions and incorporate it into the project somehow.

PCOM / Week 8 / Brainstorm for Finals

Now that we just finished our mid-term projects, it’s time to think of our Final project which we have 5 weeks to create. Here are some ideas that I might want to explore:

IDEA #1: THE CLOCK
After listening to yesterday’s Applications speaker, he gave a very impressive talk about VR, but he said that we should make products for the next generation in mind, the babies now. As a mother of a toddler, my child is obsessed with the IPAD and although he learns so much on these digital devices, he has temper tantrums and gets riled up when you take it away. When I talk to other parents of older kids, we are all impressed that these 5 – 12 year olds are learning how to code with games like Mindcraft, but these parents can’t get their child away from their computers to play outside.

Although you can set timers on these devices, I’d like to make a playful alarm clock for kids that give them time limits on the IPad and IPhone to remind them to play outside, read a book, draw or to play with their physical toys. My childhood was filled with imaginary places and scenarios that I made up in my head because I would got bored in the dark ages before wi-fi. And regular play or giving them a plain cardboard box without these digital devices to constantly entertain them can open up so much imagination that the child creates in their own heads.

While looking at past ITP projects for inspiration, I loved the elegance and symbolism of this clock.
Visualizing Time: A Marble a Minute
Video

IDEA #2: FILM NOIR
To create a visual art piece, using camera, motion and light sensors to reveal silhouettes and lighting that you would see in a Film Noir film with high contrast black and white shapes. Some film noir movies where the shadows and light are striking to me are in films like Carol Reed’s The Third Man, John Huston’s The Maltese Falcon or Alfred Hitchcock’s Shadow of a Doubt. When I was looking through the projects that were shown at the MOMA’s 2011 Talk to Me exhibit, I found Joon Y. Moon’s project called Augmented Shadow and would love to build off this idea for a film noir project.

PCOM / Week 7 / Mid-term Project

THE CUBE
An interactive PCOM project that uses an accelerometer and MP3 Shield to play some surprising sounds as you turned the cube up, down, left and right. We were assigned into groups of 2 for this project and I was paired up with Yanlin Ma.
dsc_0417

 
THE SKETCH
During our brainstorm for project ideas, Yanlin came up with the idea to contrast the shape of a cube with the sounds of bouncing balls. We wanted to add 3 buttons to toggle between 3 different sound types: a rubber ball, a metal ball and a wooden ball. In this iteration, I wanted to place the buttons discretely in the corner, while Yanlin preferred the button in the center with a hole for the wire to the computer or power source in the corner.

img_2515

box

 
MP3 SHIELD, 8 OLM SPEAKER WITH SD CARD
The first step in executing the idea was to get our accelerometer working to get precise sensor readings of the X, Y, Z values. Yanlin and I also worked separately in trying to get precise sensor readings on our devices, and were both having problems with our accelerometer. I was getting inconsistent readings or very slight changes in the sensor readings, so Yanlin advised me to solder the pins on my accelerometer and that worked. For sound, we needed to find or record our MP3 or WAVE sounds to map the accelerometer to. We found a site called audioblocks.com and really liked their sound effects and loops. We then decided to use MP3 files and found the MP3 shield to use with our Arduino.

dsc_0375

 
ENCLOSURE, BATTERY, MP3 SHIELD AND ARDUINO
For the enclosure, we wanted the box to be black acrylic. I found a place in Pennsylvania, misterplexi that sells lots of different kinds of plexi boxes in different colors. Unfortunately, they didn’t have the black boxes in stock and by the time they could ship them, it would be too late, so I ended up buying clear baseball display boxes from The Container Store and painting them with a matte black acrylic paint from Blick Paint.  Since I didn’t take a fabrication class (which I eventually should), I wanted to avoid drilling holes for switches and wires, so I decided to use a 9V battery to keep everything enclosed inside the black cube and making it easier for people to hold and move around. I soldered the red and black wires of the battery snap to wire that could plug into the power connector.

dsc_0397v2

 

INSIDE THE CUBE

dsc_0403v2

 

HOW IT WORKS

PCOM – Mid-Term Project from annemgal on Vimeo.

 

MP3SHIELD_PCOM_MIDTERM SKETCH
——————————————————————————————
#include <SoftwareSerial.h>
#include "MP3.h"

/** define mp3 class */
MP3 mp3;

int up = 0;
int down = 0;
int left = 0;
int right = 0;

void setup()
{
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);

  /** begin function */
  mp3.begin(MP3_SOFTWARE_SERIAL);    // select software serial
//  mp3.begin();                       // select hardware serial(or mp3.begin(MP3_HARDWARE_SERIAL);)

  // in hexadecimal
  /** set volum to the MAX */
  //mp3.volume(0x1F);
  mp3.volume(0x16);

  // signal when ready
  mp3.set_mode(MP3::SINGLE);
  mp3.play_sd(0x0001);
  
  /** set MP3 Shield CYCLE mode */
  //mp3.set_mode(MP3::CYCLE);
  mp3.set_mode(MP3::REPEAT);
  
  /** play music in sd, '0001' for first music */
  //mp3.play_sd(0x0001);

  // 1: clank
  // 2: metal rolling 
  // 3: metal dropping
  // 4: rubber dropping
  // 8: ball roll
  
  /** play music in USB-disk */ 
  //mp3.play_usb_disk(0x0001);
  
  /** play music in SPI FLASH */ 
  //mp3.play_spi_flash(0x0001);
}

void loop()
{
    /** function code here */

  // read the input on analog pin 0:
  int sensorValueZ = analogRead(A0);
  // print out the value you read:
  Serial.print(sensorValueZ);
  Serial.print(",");

  // read the sensor:
  int sensorValueY = analogRead(A1);
  // print the results:
  Serial.print(sensorValueY);
  Serial.print(",");

  // read the sensor:
  int sensorValueX = analogRead(A2);
  // p rint the results:
  Serial.println(sensorValueX);

  ////////////////////////////////////////////////

  /** play music in sd, '0001' for first music */

  if (up){
    if (sensorValueX < 550){
      mp3.stop();
    }
  }
  
  if (sensorValueX > 550){
    if (!up){
      mp3.play_sd(0x0008);
      up = 1;
      down = 0;
      left = 0;
      right = 0;
    }
  } else if (sensorValueX < 450){
    if (!down){
      mp3.play_sd(0x0002);
      up = 0;
      down = 1;
      left = 0;
      right = 0;
    }
  } else if (sensorValueY > 550){
    if (!left){
      mp3.play_sd(0x0003);
      up = 0;
      down = 0;
      left = 1;
      right = 0;
    }
  } else if (sensorValueY < 450){
    if (!right){
      mp3.play_sd(0x0004);
      up = 0;
      down = 0;
      left = 0;
      right = 1;      
    }
  } else{
    mp3.stop();
      up = 0;
      down = 0;
      left = 0;
      right = 0;    
  }  
  
  // 1: clank
  // 2: metal rolling 
  // 3: metal dropping
  // 4: rubber dropping


  /////////////////////////////////////////////

  // in milliseconds
  // slow down so p5 can keep up
  delay(100);        // delay in between reads for stability
 
}

PCOM / Week 6 / Serial Communication

In continuation of the upcoming elections, I took a ICM sketch of Hillary & Trump as bouncing balls that I created last week and attached a button switch to make an element appear and a potentiometer to make the element move around the canvas.

When I try to merge the sensorValue to the an element of the sketch that I want to map it to, it doesn’t work. First off, I ran into a couple of obstacles while trying to link the sketch to the sensors:

1) I was running my p5 sketch in Firefox in the “New Private Window”, but I had better luck making the 2 programs communicate when I ran the p5 sketch on Chrome in the “New Incognito Window.”

2) Whenever the sensors didn’t run the values in the serial monitor, I tested the readings of the initial sensorValue (before the mapping line) to make sure data was coming out and what the initial readings were.

3) When something didn’t work after I made an adjustment, I would also shut down all the programs and start fresh to clear the buffer, especially after I keep pressing the buttons to upload the program.

4) When reading the values from the potentiometer, there doesn’t seem to be a huge range in the values. I see it reading from 350 – 500 and with really small variation when I turn the knob from one side to the other. And when I run just a plain sketch of an ellipse to the potentiometer, the ellipse moves only a small distance and not from one side of the screen to the other, even though I use the width of the screen to map out the values.

img_2365

Right now I’m having problems making the Hillary ball appear with a button click. I see that the sensor values does change from 0 to 1 when clicked, but my p5 sketch isn’t registering under the draw functions. The problem, I think, is just how and where I’m writing my code in p5 so I just need to play around with that more. I also attempted to attached the potentiometer sensorValue to the Hillary ball so she can slide left to right, but that’s also not mapped out correctly in the p5 sketch so the potentiometer values isn’t moving. It was reading some sort of value before, but when I kept adjusting the code in the p5 sketch it stopped. It also could be from my Arduino sketch. I keep tinkering with the map values since the sensor wasn’t moving the ellipse from 0 to 320 on the x axis of the canvas. Despite this not working correctly, this whole exercise made me apply all the serial connection readings and videos that I learned about from the last 2 weeks. I just need to work on my debugging and coding better.

img_2366

 

 

ADRUINO SKETCH FOR SERIAL COMMUNICATION
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  //int sensorValue = analogRead(A0);
  int sensorOriginal = analogRead(A0);
  int sensorValue = map(sensorOriginal, 200, 600, 0, 320);
  //sensorValue = (sensorValue/4);
  //sensorValue = map(sensorValue, 0, 1023, 0, 320);
  //sensorValue = map(sensorValue, 684, 1023, 0, 320);
  // print out the value you read:
  Serial.println(sensorOriginal);
  int sensorValue2 = digitalRead(2);
  Serial.println(sensorValue2);
  delay(1);        // delay in between reads for stability
}
P5.JS SKETCH FOR SERIAL COMMUNICATION
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0;		// ellipse position

// create a trump bouncy ball
 var ball = {
 x: 200,
 y: 30,
 speed: 0,
 };

var trump = {
 x: 180,
 y: 20,
 speed: 0,
 img: 0,
 visible: 1
 };

var clinton = {
 x: 0,
 y: 0,
 //speed: 0,
 img: 0,
 visible: 0,
 };

var gravity = 0.1;
 img = 0;

function preload() {
 trump.img = loadImage("./trump.png");
 clinton.img = loadImage("./clinton.png");
 }

function setup() {
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport libra
 serial.on('list', printList); // callback function for serialport list event
 serial.on('data', serialEvent);// callback for new data coming in
 serial.list(); // list the serial ports
 serial.open("/dev/cu.usbmodemfd121"); // open a port
 serial.write("X");
 }

function displayBall(ball_name) {
 //fill(random(255), 0, 0);

// head
 if(ball_name.visible) {
 image(ball_name.img, ball_name.x - 35, ball_name.y - 35, 70, 70);
 }
 //image(clinton_head_img, clinton.x, clinton.y, 50, 50);
 // ball
 // ellipse(ball.x, ball.y, 24, 24);
 }

function dropClintonBall() {
 clinton.y = clinton.y + 1;
 }

function moveTrumpBall() {
 trump.y = trump.y + trump.speed;
 trump.speed = trump.speed + gravity;
 }

function bounceTrumpBall() {
 if (trump.y > (height - 35)) {
 trump.speed = trump.speed * -0.95;
 }
 }

function draw() {
 background(255);
 stroke(255, 255, 255);
 strokeWeight(1);
 box_width = 100;
 box_height = 20;

for (var i = 0; i < 400; i += box_width) {
 //blue
 fill(102, 217, 255);
 rect(i, 0, i + box_width, box_height);
 //red
 fill(255, 0, 102);
 rect(i, 20, i + box_width, box_height);
 //white
 fill(random(255,240));
 rect(i, 40, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 60, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 80, i + box_width, box_height);
 fill(0, 0, 160, 50);
 fill(random(255,240));
 rect(i, 100, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 120, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 140, i + box_width, box_height);
 }

for (var i = 0; i < 400; i += box_width) {
 fill(255, 0, 102);
 star(25, 380, 5, 10, 5);
 star(75, 380, 5, 10, 5);
 star(125, 380, 5, 10, 5);
 star(175, 380, 5, 10, 5);
 star(225, 380, 5, 10, 5);
 star(275, 380, 5, 10, 5);
 star(325, 380, 5, 10, 5);
 star(375, 380, 5, 10, 5);
 }

displayBall(trump);
 moveTrumpBall();
 bounceTrumpBall();

displayBall(clinton);
 //dropClintonBall();
 //bounceClintonBall();

//noStroke();
 //fill(255, 0, 0)
 //fill(255, 0, 0, sensorValue);
 //rect(x, y, 50, 50);
 //text(sensorValue, 20, 20)
 // display

}

function mousePressed() {
 clinton.visible = 1;
 clinton.x = mouseX;
 //clinton.x = sensorValue;
 clinton.y = 360;

// if you click on trump, have him bounce up
 if(dist(trump.x, trump.y, mouseX, mouseY) < 50){
 trump.x = random(0, 400);
 trump.y = 20;
 trump.speed = 0;
 }

}

function star(x, y, radius1, radius2, npoints) {
 var angle = TWO_PI / npoints;
 var halfAngle = angle/2.0;
 beginShape();
 for (var a = 0; a < TWO_PI; a += angle) {
 var sx = x + cos(a) * radius2;
 var sy = y + sin(a) * radius2;
 vertex(sx, sy);
 sx = x + cos(a+halfAngle) * radius1;
 sy = y + sin(a+halfAngle) * radius1;
 vertex(sx, sy);
 }
 endShape(CLOSE);
 }

// get the list of ports:
 function printList(portList) {
 for (var i = 0; i < portList.length; i++) { // Display the list the console: println(i + " " + portList[i]); } } function mousePressed() { serial.write("X"); } function serialEvent() { var inString = serial.readLine(); if (inString.length > 0) {
 inString = inString.trim();
 //sensorValue = Number(inString/4)
 sensorValue = Number(inString);
 println(sensorValue);
 }

ICM & PCOM Synthesis / Week 5

dsc_0782v2

For this Synthesis workshop, I got my first introduction to the possibilities of what PCOM and ICM can do when they listen to each other. It was nice to be with the entire class in this hackathon-like vibe and to see what cool things would come out of this synthesis over pizza.

The design challenge was to create a Physical Variable. My partner, Roi Lev and I started off with connecting the serial communication and using a potentiometer to dim a red ellipse that was drawn in the p5.js sketch below.

We then took four colored buttons (red, green, blue and yellow) and attached them to the breadboard. Roi then programmed the buttons in p5.js to draw in the color that is pressed. For instance, to color in red, you need to hold down the red button while using your mouse to draw on the p5.js screen.

 

img_2172closeup of the circuit and breadboard

 

img_2163user testing

 


//p5.js CODE FOR RGBY DRAWING TOOL
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0;  // ellipse position
 

function setup() {
  createCanvas(600, 400);
  serial = new p5.SerialPort();  
  // make a new instance of serialport library
  serial.on('list', printList);  
  // callback function for serialport list event
  serial.on('data', serialEvent);  
  // callback for new data coming in
    serial.list(); // list the serial ports
    serial.open("/dev/cu.usbmodem1421"); // open a port
    background(255);
}

function draw() {
  //background(255);
  noStroke();
  //fill(0);
  //text(sensorValue, 20, 20);
  //fill();
    if (sensorValue > 1 && sensorValue < 500){
        fill(255,255,0,120); 
    }else if (sensorValue > 500 && sensorValue < 900){
        fill(0,102,255);
    }else if (sensorValue > 900 && sensorValue < 1010){
        fill(0,204,0);
    }else if (sensorValue > 1010){
        fill(255,51,0);
    }//else{
        //fill(255);
    //}
    ellipse(mouseX, mouseY, 30, 30);
}

 function mousePressed(){
   background(255);
 }

// get the list of ports:
function printList(portList) {
 for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
     println(i + " " + portList[i]);
 }
}

function serialEvent() {
    var inString = serial.readLine();
    if (inString.length > 0) {
      inString = inString.trim();
        //sensorValue = Number(inString/4);
        sensorValue = Number(inString);

    println(sensorValue);
    }
}

PCOM/ Week 3 / Interactivity in Public

Riding the New York City subways everyday, I couldn’t help but think of the MetroCard swipers as my interactive technology to observe. There have been many times that I’ve missed a train, waiting for the person before me to swipe through the regular turnstiles or getting through the double obstacle of  a MetroCard swiper and the rib-caged revolving turnstiles.  Then there are the rough mornings where either my flimsy yellow MetroCard bent a bit on the magnetic black strip or my quick flick of a swipe was not so quick (or too quick), where it gives me the “Please Swipe Again At This Turnstile” message. My strategy in those scenarios is to wait for the 1 minute message to clear and then swipe again at the same turnstile to avoid losing money on your card or the 18 minute wait time to swipe again with the fancy Unlimited Ride MetroCards.

alg-subway-turnstiles-jpg

When observing users getting through the subway gates, you get a good sense of who is a local user and who may not be. I found that when I observed people swiping their MetroCards at our 8th Street/ NYU stop on the N and R train, not a lot of people had difficulty swiping smoothly to get that beep to “GO.”  However, when I’m at a tourist hot spot like the B, D, F and M stop at Rockefeller Center, there’s a lot of foot traffic and people fiddling around with their cards and swiping repeatedly to get through.  I’ve also witnessed some elderly people having problems, whether it being because of their eyesight of getting the thin card precisely through the slot or people swiping very slowly where the card reader tells them to swipe again.  One elderly woman that I observed was standing in front of a MetroCard ticket kiosk for over 10 minutes, trying to get a card.  Since it was taking a while and was the only machine, the 2 people in back of her were patiently assisting her. I’m not sure if there was a problem with her credit card or just figuring out card options on the touch screen.

I do think that the MetroCard turnstiles works effectively, especially when you’re a regular user and figured out the speed at which to swipe. The visibility problems, that Norman talks about in The Design of Everyday Things, could be something to improve upon in the design though and it could be just a simple line of text stating the additional instructions on the speed of a ‘smooth’ swipe (not too fast and not too slow) especially for new users. And in comparing other user interactions in similar transportation situations, I do like how the card readers on the NYC transit buses are easier to use though. It seems more user friendly cause you just dip your card in the slot, the card reader pulls it in to read the strip and then automatically pushes the card up for the user to get back. I also like the Oyster Card system in London where the cards are thicker and it’s just a quick tap on a touch pad for  gates to open up for you to pass through.

_____

Simple Application Using Analog Input and Digital Output

Tiny Piano from annemgal on Vimeo.

PCOM/ Week 2 / Electricity Labs and a Switch Project

This week I started to use my Arduino Starter kit to connect the breadboard to the microcontroller and light up my first LED diode. Had a couple hiccups when putting the resistors on the board. There were so many variations of the middle color stripes and ohm values of the resistors. And they are so tiny that it’s hard to distinguish what’s what. Luckily, my starter kit had a book with a very helpful chart on ‘How to Read Resistor Color Codes’ and decipher the math behind it. Another small problem that I ran into when uploading my code in the Arduino application was that I plugged the USB cable from the microcontroller to the wall instead of my laptop. Once I fixed that connection, my LED started blinking.

LED from annemgal on Vimeo.

For this week’s homework of putting together a simple application for switches and LED circuits, I found a sample project of connecting 3 LEDs to a push button switch and used that as the base for the coding and schematics of the assignment.

img_1825

My initial idea was to make a little house and use the switches to open a door or light up a window, but it morphed into an idea seeing silhouettes through windows at night. With the base that I had, I wanted to fill the house with LED lights, so I added a couple more LED lights to the board and adjusted the code.

img_1829

I then cut black paper silhouettes and taped them to the board in front of the LED lights and constructed a see through building with tracing paper to enclose the lights and paper figures.

img_1841

I was contemplating whether to draw black lines for windows, but I liked the cleanness of the white walls without the window and door details.

img_1839-1

And here’s the finished version of the LED Dance Party on a Breadboard.

Dance Party from annemgal on Vimeo.

PCOM / Week 1 / What makes for good physical interaction?

My first project for Physical Computing class was to create a Fantasy Device and my group came up with a device meant to communicate different languages instantly. Whether you are studying abroad and English is your second language, wanting to understand what is said in a classroom without any delays or traveling to a foreign country and immersing yourself in a culture without being lost in translation. We intended to create an earpiece that can take in the words and sounds, then process the information quickly to output in a device near the mouth that can say the words in the language specified.

If interaction is a conversation of listening, thinking and speaking (imputing, processing and outputting), differences in languages or being out of your comfort zone can slow down interaction. With the help of devices for digital interaction, it can help fill in those gaps of slow listening, slow thinking and slow speaking for faster processing time or other platforms to converse remotely if face to face conversations scares you and it helps to participate in your comfort zone.

But when I watched the ‘Vision of the Future’ video in Bret Victor’s rant on the Future of Interaction Design, my immediate thought was that the future was so well designed with clean, translucent interfaces to help organize travel, work, design, collaboration, family, time management, donating with a click of a button, learning and making decisions in seamless ways—how wonderful! Then I started thinking about how we kind of have the foundations behind all this already. Real life looks and is more chaotic and we have numerous apps spread out and so many different companies wanting us to log all of our information into their sites to help us ‘manage’ our lives. Reading Bret Victor’s viewpoint on ‘the future’ made me realize that we’ve forgotten the tactile quality of things because swiping our fingers and hands on our phones and Ipads have become the norm. We’ve forgotten about some of our five human senses of sight, hearing, taste, smell, and touch.

I recently visited the Cooper Hewitt, Smithsonian Design Museum to take my 2-year old son to the Pixar exhibit and I was pretty impressed with the hands-on exhibits and wands that could be used to scan barcodes next to the art pieces that you liked and want to revisit. Although the wands are similar to the swiping of our finger on the glass interfaces, it responds back to you in a way that it can help store the overwhelming amount of images that you see and allows you to collect and save images of the art that caught your eye for after you leave the museum. The wands are also used as stylus on the huge interactive tables to engage more with the digitized art pieces. These physical interactions with the exhibit made it easy for a 2-year old to participate in and hold his attention.

dsc_0349v2-copy

Physical interaction is and should be a conversation that engages one another with any or all of our 5 senses to delight and enhance our dialogue with one another.