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.

ICM / Week 14 / Final Project: The Protest Time Machine in Lyrics


To view full screen

TITLE:
The Protest Time Machine

DESCRIPTION:
A timeline of selected protest and political songs from the 1960s to present time to remind ourselves of what people have been fighting for then and now. Music brings people together and this small collection of songs are examples of the frustration and disappointment in an event and is a call to bring awareness and challenge in a creative and constructive way.

PROCESS:
1) Inspiration: The concept for this project was inspired by a couple of things. First, the results of the 2016 election were surprising and disappointing to many with anti-Trump marches going on across the country to the protests of the Dakota Access oil pipeline. I also was inspired by what was going on in my part-time job. I’m currently designing a Rock N’ Roll bookazine and after reading the chapter on protest and political songs, I wanted explore this content further and to try to create a p5 sketch that could be an extension of the print form, where you would be able to listen to these songs in one place as you read along.

2) Data Collecting: To help me collect all the content, links to YouTube video links, wikipedia description, songs, I kept track of everything in the this excel document below.

3) Design and Coding: I found it helpful to throw all the elements into a Indesign layout program to figure out my design and how to organize the content. It became my blueprint for when I started coding and also held all the data together, so I could copy and paste data quickly.


4) Next Steps: There is so much more that I want to do with this that I didn’t get to, but I’m very happy to have a base that I can build on. The main thing that I would like to do is to make the design less static and more interactive by highlighting photos, videos and caption description from that particular moment in history. While researching and collecting these songs, I not only learned more about the history of that time period, but discovered all these side stories behind the songs and I want to focus on that part of the sketch next. I also used this concept of the protest time machine for my PCOM project, but kept the projects separate because there so much of coding that I still do not have a good grasp on and this project was a good exercise on implementing what we have been learning or are still trying to grasp. But from the feedback of my PCOM project, I saw the need to compare and contrast songs from a certain year or particular cause, like comparing the songs from the Civil Rights era to what is going on with Black Lives Matters decades later and would like to figure out how to code functions like that. And I need to fix small things like having the text scrolling to be in sync with the song playing and to make the play buttons more visual, along with improving the functionality. Lots to learn (and revisit) over the break till the next semester starts again.

 

CODE

Digital Imaging / Week 14 / Final Project: Webcam

For my Digital Imaging final project, our professor, Eric Rosenthal gave us a webcam to strip down and make into a camera or any device that uses the webcam to capture an image. I decided to turn my webcam into a microscope after finding this idea on the web. I was able to invert the lens inside the webcam to create a macro view and was inspired by Thomas Blanchard’s work with oil, colored acrylics, dish-washing soap and milk to create the images to focus in on. Below are some images that I was able to capture with the reconstructed webcam:

screen-shot-2016-12-05-at-7-05-45-am
screen-shot-2016-12-05-at-7-05-33-am
screen-shot-2016-12-05-at-7-05-29-am
screen-shot-2016-12-05-at-7-03-25-am
screen-shot-2016-12-05-at-7-03-00-am
screen-shot-2016-12-05-at-7-02-28-am
screen-shot-2016-12-05-at-7-02-21-am
screen-shot-2016-12-05-at-7-01-42-am
screen-shot-2016-12-05-at-7-01-18-am
screen-shot-2016-12-05-at-7-01-11-am
screen-shot-2016-12-05-at-7-00-51-am
screen-shot-2016-12-05-at-7-00-42-am
screen-shot-2016-12-05-at-7-00-02-am
screen-shot-2016-12-05-at-6-59-42-am
screen-shot-2016-12-05-at-6-59-22-am
screen-shot-2016-12-05-at-6-58-58-am
screen-shot-2016-12-05-at-6-58-29-am
screen-shot-2016-12-05-at-6-57-03-am
screen-shot-2016-12-05-at-6-56-21-am
screen-shot-2016-12-05-at-6-56-00-am
screen-shot-2016-12-05-at-6-55-46-am
screen-shot-2016-12-05-at-6-55-13-am
screen-shot-2016-12-05-at-6-53-21-am
screen-shot-2016-12-05-at-6-53-12-am
screen-shot-2016-12-05-at-6-49-46-am
screen-shot-2016-12-05-at-6-49-29-am
screen-shot-2016-12-05-at-6-48-26-am
screen-shot-2016-12-05-at-6-48-06-am
screen-shot-2016-12-05-at-6-47-49-am
screen-shot-2016-12-05-at-6-46-57-am
screen-shot-2016-12-05-at-6-45-54-am
screen-shot-2016-12-05-at-6-45-31-am
screen-shot-2016-12-05-at-6-45-24-am
screen-shot-2016-12-05-at-6-45-18-am
screen-shot-2016-12-05-at-6-44-54-am
screen-shot-2016-12-05-at-6-44-26-am
screen-shot-2016-12-05-at-6-41-08-am
screen-shot-2016-12-05-at-6-37-50-am
screen-shot-2016-12-05-at-6-36-22-am
screen-shot-2016-12-05-at-6-35-59-am
screen-shot-2016-12-05-at-6-35-10-am
screen-shot-2016-12-05-at-6-34-50-am
screen-shot-2016-12-05-at-6-34-28-am
screen-shot-2016-12-05-at-6-29-33-am

MATERIALS
Webcam
Extra-Bright 9-LED Anywhere Light
Clear Box with Brushed Nickel Lid
Movable USB Light
Milk
Oil
Dish-washing soap
Colored Acrylics
Plastic Petri Dish
Helping Hands Soldering Aid
dsc_0868
dsc_0883

SETUP
1. ) To take apart the webcam and create a camera with a macro viewpoint, detach the camera sensor from the case and then invert the lens. Using electric tape, attach the upside down lens on top of the camera sensor board.
dsc_0875
dsc_0864v2

2. ) Attach the sensor to the ‘helping hands’ clips and create an illuminated stand with the LED light inside a clear acrylic box. To find the right distance between the lens and the subject to focus, I used a piece of paper from a magazine to zoom in on the CMYK dots. I also connected the USB camera to the Photo Booth program on a MAC to view the image on the computer monitor.
dsc_0900
dsc_0929img_2728

3. ) Mixed a concoction of milk, oil, dish-washing soap and colored acrylics (red and blue in this case) in a petri dish to create the images to photograph up close.
img_2759
img_2760v3

VIDEO

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.

ICM / Week 10 / Final Proposal: The Protest Time Machine

FINAL PROPOSAL:
In wake of the 2016 election results and all the protesting, hate crimes and uncertainty going on around the country, I wanted to take a look at the songs from the past that were written in response to the helplessness of an event with a call for action. I have a selection of iconic protest/political songs that range from anti-war sentiment to a woman’s demand for dignity to a southern man’s response to a song written about his role in slavery and racism. There is even a song that was partially influenced by a 1979 nuclear reactor accident in Pennsylvania that expresses the fear of nuclear war, zombie invasions and food shortages. What I would like to do is to revisit these songs and allow the user to access the history behind them while visualizing the lyrics in p5. I would also try to design a version for a mobile device as well. The act of listening to these songs and understanding it’s intent is a reminder or an introduction of where we’ve been and what is still relevant now.

http://www.metrolyrics.com/for-what-its-worth-lyrics-buffalo-springfield.html
 

http://www.metrolyrics.com/respect-lyrics-aretha-franklin.html
 

http://www.metrolyrics.com/sweet-home-alabama-lyrics-lynyrd-skynyrd.html
 

http://www.azlyrics.com/lyrics/clash/londoncalling.html
 

http://www.metrolyrics.com/blowing-in-the-wind-lyrics-bob-dylan.html

protest-song-timeline

ICM / Week 8 / Sound and Film Noir


Here’s a little sketch inspired by Film Noir movies. I found this infographic online designed by Melanie Patrick and took it apart to create this scene in p5. I still have things that I’m trying to add to the sketch, like other sounds when the detective comes in contact with the other characters, but I don’t seem to be writing my “if” and “else” statements correctly, which is something I need to work on more.

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
 
}