The DigiSteenbeck – Interactions Lab Jeffrey Han

The Problem

The the modern day of technology, it is very difficult to keep people’s attention.  It takes more and more effort to make people interested with the world.  Film is something that is suffering from this.  People are going to the cinema less frequently because the movie going experience is just not interesting enough anymore.  The film industry is resulting to cheap tricks like 4DX or comfy seats to keep viewers in the theater.  At the same time, with VR and AR technology highly rising, simply watching a film or video is not extraordinary enough anymore.  At the same time, the process of editing a film has devolved from cutting a physical film to simply pressing buttons and clicking a mouse.  Movie making and movie watching is supposed to be a fun and engaging experience, but this is slowly started to change for the worse.

The Solution

In order to revolutionize the movie experience, we here at JRJH Productions believe the key is to make it interactive.  The viewers can interactive with the film or video itself so they can choose what they see on screen.  We want to creative a device in which the viewer can physically interact with the film in which they can change angles, focal length, or even the location, as if they are the director of the film.  This way, the movie experience can be more engaging.  At the same time, this device can also be used for editing, so the editor can have a more hands on experience.  Sort of like VJing (DJing but with video).

The Inspiration

To Design this device, we looked at the age of 35mm film and the flatbed editing system.  Back when film was not edited on a computer, people used a flatbed in which they must physically cut film.  Coincidentally, many also considered this the “golden age” of Hollywood.  A famous company that made flatbeds is called “Steenbeck”.

For this project, we want to take the old classic design of the Steenbeck and make it modern.  So we present you with — The DigiSteenbeck.

The Design

We used Adobe Illustrator to design the DigiSteenbeck, which will then be laser cut with thick 3mm cardboard.  The design uses three “film rolls” as controls for the device.  Each of them will control pan, tilt, and zoom respectively.  There will also be a “film strip” in the middle so that the user can place different film clips into the timeline to affect what will show up on screen.  We wanted the device to look modern yet retro and classic at the same time.

The Production

When making the device, we encountered many problems, the first being laser cutting.  When cutting the board the first time, the laser cutter was cutting on 5mm thick board while on a 3mm setting.  Joel and I, nor the IMA fellow, realized this until we ran the cut twice.  The smell of the laser cut was also horrible to bare.

Later that day, we had our second laser cutting attempt.  This time we paid extra attention to the settings and eventually got it right.  However, the pieces were still not completely cut through so we had to tear some of them off the board.

After cutting the schematics out, we had to put the board together.  This was a fairly straightforward process.

The Medium

For this specific project, we decided to use dance as our film.  Dance is such an elegant form of art that really must be appreciated through different angles and locations to really be able to see its complete beauty.  We collaborated with three pairs of professional dancers who performed the same piece in three iconic locations in Shanghai — EXPO Park, The Bund, and BingJiang Avenue.  As filmmakers, we wanted the cinematography to be grand.  We shot different versions with different angles, but in the end, we decided to only use the extreme wide shot for the DigiSteenbeck, so the viewer can choose to zoom and to see the details.

The Circuit & Coding

The circuit design of this project is actually pretty simple.  We had three potentiometers which operated separately, and a RFID tag to control the different videos.  Coding the device was a lot more complicated.  We quickly realized that Processing is a horrible way of loading video.  We shot our dance films in beautiful 4K, but had to compress them into tiny 720p 10mb files in order for Processing to actually load them.  This was a huge disappointment, but it was something we cannot change anymore.

Coding wise, the most annoying part was to figure out the boundaries of the zoom pan and tilt.  Because we had to zoom in with a potentiometer, the boundaries of the film will continue changing.  Therefore, we cannot map our values to a single number, and instead must map it to a math equation.  Joel and I got two of our math major friends to figure out this equation for us.  But even after we got the equation, we somehow had to implement it into the code.  This was another impossible challenge for us.  Joel and I took turns sitting down the Luis to try and figure out this equation.  It took us three hours, and still there was no perfect solution.  In the end, the system works perfectly at 2x zoom, and okay-ish at 1.3 to 1.9.  However there is this threshold at 1.1-1.3 in which it still glitches.

The Final Device

After weeks of hard work, we finally finished the DigiSteenbeck.

This elegant device attracted many people’s attention in the IMA, being praised for its design.

Initial Responses & New Changes

After some user testing, we received really positive feedback for our project.  However, some people said that this is still a very singular experience.  Only one person and play with the DigiSteenbeck at once.  This gave us the idea to add more functionality to it by adding keyboard functions.  This way, one person can use the DigiSteenbeck, and another user can use the keyboard.  This will make the experience a collaborative process, something that is highly emphasized in filmmaking.  We added functions such as color filters, slow motion, and music change that can all be activated on the keyboard.

When we tested out this version of the project, people loved it even more, but said that it would be cool to have a second device to play with instead of simply using the keyboard.  We couldn’t agree more, but because of time constraints, we couldn’t put together and laser cut another device, so we kept the keyboard.

But after this, we realized that we must have a set of instructions so the user knows what is going on.

Presentation Responses

Joel and I were really nervous before the final presentation because we had no idea what people would have thought.  However, the reaction and comments were really positive and it gave use a big relief.  I loved Nemrah’s comment that this could actually be something she would see in a museum exhibit.  It felt good to get this recognition considering we are filmmakers and not programmers or designers.

IMA Show and User Testing

During the IMA Show, we put our stand right next to the door, and thankfully this attracted huge crowds at our station.  The audiences were very intrigued by our invention, and many even wanted to take a picture of it.  This was a special feeling because when someone wants to take a picture of this artwork, it means we are doing something right.

However after many visits to our stand, we realized a trend of problems.  The first one being we only wrote our instructions in English.  We forgot the fact that we are in Shanghai and many visitors may only speak and read Chinese.  So many of the Chinese viewers had no idea was going and I had to verbally explain to them what to do.  Our labels Tilt, Pan, and Zoom were also only in English.  But even so, we did not realize that might have been film jargon.  Even some English speakers who understood the instructions did not know what the different wheels were supposed to do.

Another problem was with loading in the film clips.  On the film strip, we had three frames.  The middle frame was empty and had the RFID under it.  We thought and empty frame would be very straightforward and mean that this is where they should load the clip, but people still tried loading the clips in the other frames, which already has images on them.

However, other than that, I am really pleased with the project.  I do believe the functionality can be clearer, and if I were to do this project again, I will make sure that is the case.

But in the end, I just want to thank Antonius for this great semester, and all of the IMA Fellows for their support!

//DIGISTEENBECK PROCESSING CODE
import processing.serial.*;
import processing.video.*;
import processing.sound.*;

String myString = null;
Serial myPort;
//char valueFromArduino;
SoundFile m1, m2, m3;
Movie Ch1, Ch2, Ch3;
Movie Chapter = Ch1;
PImage helpimg;

int x, y, w, h, vid, counter;
float zoom, pan, tilt;

int NUM_OF_VALUES = 4;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues;      /** this array stores values from Arduino **/

void setup() {
  background(0);
  helpimg = loadImage("DigiSteenbeck Instructions.jpeg");
  imageMode(CENTER);
  setupSerial();
  //myPort = new Serial(this, "/dev/cu.usbmodem1411", 9600);
  //size(640, 360);
  fullScreen();
  w = width;
  h = height;
  Ch1 = new Movie(this, "IBR_BJ.mp4");
  Ch2 = new Movie(this, "IBR_EXPO.mp4");
  Ch3 = new Movie(this, "IBR_WT.mp4");
  //Ch1.play();
  //Ch2.play();
  //Ch3.play();
  Ch1.loop();
  Ch2.loop();
  Ch3.loop();
  m1 = new SoundFile(this, "doppelganger.mp3");
  m2 = new SoundFile(this, "TRACK UNO.aiff");
  m3 = new SoundFile(this, "100000.mp3");
  m1.play();
  //m2.play();
  //m3.play();
  //m1.loop();
  //m2.loop();
  //m3.loop();
  //Ch1.pause();
  //Ch2.pause();
  //Ch3.pause();
}

void mousePressed() {
  counter+=1;

  if (counter==1) {
    m1.stop();
    m2.play();
   // m2.jump(15.3);
  }
  if (counter==2) {
    m2.stop();
    m3.play();
   // m3.jump(15.3);
  }
  if (counter==3) {
    m3.stop();
    m1.play();
    counter = 0;
  }
}

void keyPressed() {
  if (key == 'w' || key == 'W') {
    Ch1.speed(4.0);
    Ch2.speed(4.0);
    Ch3.speed(4.0);
  } else if (key == 'a' || key == 'A') {
    Ch1.speed(.5);
    Ch2.speed(.5);
    Ch3.speed(.5);
  } else if (key == 's' || key == 'S') {
    Ch1.speed(2.0);
    Ch2.speed(2.0);
    Ch3.speed(2.0);
  } else if (key == 'd' || key == 'D') {
    Ch1.speed(.25);
    Ch2.speed(.25);
    Ch3.speed(.25);
  } else if (key == 'p' || key == 'P') {
    Ch1.pause();
    Ch2.pause();
    Ch3.pause();
  } else {
    Ch1.speed(1.0);
    Ch2.speed(1.0);
    Ch3.speed(1.0);
    Ch1.play();
    Ch2.play();
    Ch3.play();
  }

  if (key == 'h' || key == 'H') {
    image(helpimg, width/2, height/2, width/2, height/2);
  }

  if (key == CODED) {
    if (keyCode == UP) {
      filter(INVERT);
    } else if (keyCode == DOWN) {
      filter(THRESHOLD);
    } else if (keyCode == LEFT) {
      filter(ERODE);
    } else if (keyCode == RIGHT) {
      filter(POSTERIZE, 2);
    } else if (keyCode == RIGHT) {
      filter(POSTERIZE, 2);
    }
  }
}
void draw() {
  updateSerial();
  //printArray(sensorValues);
  // to read the value from the Arduino
  /*while ( myPort.available() > 0) {
   valueFromArduino = char(myPort.read());
   }
   if (valueFromArduino != '0') {
   println(valueFromArduino);
   }
   if (valueFromArduino == '1') {
   println(valueFromArduino);
   image(Ch1, x, y, width, height);
   }
   if (valueFromArduino == '2') {
   println(valueFromArduino);
   image(Ch2, x, y, width, height);
   }
   if (valueFromArduino == '3') {
   println(valueFromArduino);
   image(Ch3, x, y, width, height);
   }*/


  vid =sensorValues[0];
  zoom = map(sensorValues[3], 0, 255, 1, 2); 
  zoom = round(zoom*10);
  zoom = zoom/10;
  //pan = map(sensorValues[1], 0, 255, w/2-(((w*zoom)-w)/2), w/2+(((w*zoom)-w)/2));
  //tilt = map(sensorValues[2], 0, 255, h/2-(((h*zoom)-h)/2), h/2+(((h*zoom)-h)/2));
  //pan = map(sensorValues[1], 0, 255, 320-(320*zoom-320), 320*zoom-320);
  // tilt = map(sensorValues[2], 0, 255, 180-(180*zoom-180), 180*zoom-180);
  if (pan<= width*zoom-width) {
  }

  if (tilt<= height*zoom-height) {
  }
  if (zoom>1.2) {
    pan = map(sensorValues[1], 0, 255, (w/2)-((w/2)*zoom-(w/2)), (w/4)*zoom);
    tilt = map(sensorValues[2], 0, 255, (h/2)-((h/2)*zoom-(h/2)), (h/4)*zoom);
  } else {
    pan = w/2;
    tilt = h/2;
  }

  if (vid == 1) {
    //    Ch1.read();
    pushMatrix();
    //translate(width/2, height/2);
    scale(zoom);
    image(Ch1, pan, tilt, w, h);
    popMatrix();
  }

  if (vid == 2) {
    pushMatrix();
    //translate(width/2, height/2);
    scale(zoom);
    image(Ch2, pan, tilt, w, h);
    popMatrix();
  }

  if (vid == 3) {
    pushMatrix();
    //translate(width/2, height/2);
    scale(zoom);
    image(Ch3, pan, tilt, w, h);
    popMatrix();
  }

  //println("pan=", pan, "tilt=", tilt, "zoom=", zoom, "vid=", vid);
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, "/dev/cu.usbmodem1411", 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = 'n'  Linefeed in ASCII
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}



void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = 'n'  Linefeed in ASCII
    if (myString != null) {
      println(myString);
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
  /*  if (m == Ch1) {
   Ch1.read();
   } else if (m == Ch2) {
   Ch2.read();
   } else if (m == Ch3) {
   Ch3.read();
   }*/
}

Recitation 10 – Jeffrey Han

For this recitation section I decided to work on the Serial Communication workshop.  It was the most troubling aspect of my midterm and I needed to figure out a way to make the code more concise.  During the recitation, Nick taught us a way to print more values using the Serial.print function.

Serial.print(value1);

Serial.print(“,”);

Serial.print(value2);

Serial.print(“,”);

Serial.print(value3);

Serial.println();

By using this method, I can more easily organize my code.  The reference code Nick gave us also provided me with a lot of insight.  The code used two potentiometers to give two readings for the analog input.  But separating the readings with commas, I can get both these values at once, instead of only getting one value from Serial.write.  For my final, I will use the Serial.print function to control the data from my color sensors and other control sensors.  The different values in the color sensors will translate to a different sets of video on Processing

Digital Fabrication – Jeffrey Han

For my project in digital fabrication, my partner Joel G. Rao and I decided to make Luxo Jr. (aka the Pixar lamp).  For the lamp head, we chose to construct it in tinkerCAD.  At first wanted to create the entire structure using TinkerCAD, but after a talk with Prof. Cossovich, he suggested that we laser the body instead since the pieces are essentially flat sheets of metal.  After examining the structure, we agreed that this is the best way to go.  We made the supporting body on Illustrator to be laser cut.

[Final 3D printed and laser cut piece will be updated at a later time]

For the stupid pet trick and midterm, I used cardboard to create my projects.  With the help of digital fabrication, my designs can be more precise and aesthetically pleasing.  For example when making the laser shooters for the midterm project, the it was very difficult trying to make a solid sturdy structure with soft cardboard.  If we can laser cut with plastic, it will be better.  For the final project, Joel and I want to make a modern day version of a steenbeck.  This will require precise design and measurements for each piece to fit in perfectly with each other.

In the year of 2149, Digital technology will be completely advanced now.  The most annoying thing about digital fabrication is actually creating the structure by hand on the computer.  In the future, hopefully we can just think of the idea and it will be created immediately.  3D printing will also be way more advanced and faster than it is now.  Maybe we will be able to print out a structure as fast as we print out a piece of paper.  The opportunities are endless and the limit is our imagination.

Final Project Essay – Jeffrey Han

You, In the Director’s Chair

In the world of digital media and new technology, suddenly a physical piece of artwork is not enough anymore.  Today, the human interaction with art is the new way to go.  Things like VR and AR are making traditional and simple forms of video less attractive for the viewer.  Even though filmmaking and cinema has been around for centuries, they are on the slow decline and are in the great need of new innovations to bring it to a new golden age.  What if the viewer can choose what they see?  What if the user can physically interact with what happens on screen as if they are sitting in the director’s chair.  

For this project, my goal is to create an interactive movie going experience.  The viewer will get their chance to create their own custom film in the form of an interactive dance music video.  When sitting in our custom studio, the audience will be presented with a movie timeline, and nine different “clips” – three locations, three dancers, and three camera angles.  Instead of watching a pre-edited music video, the viewer can be the director and choose which location, dancer, or angle to watch.  These variables can be switched around at anytime during the duration of the experience.  All they have to do is place the “clip” onto the timeline.  

In order to achieve this, we will incorporate the physical computing of Arduino and the screen based media shown through Processing.  On the physical computing side, we will have a machine inspired by the flatbed editing machine used to edit film back in the early 1900s.  But instead of rolls of film, we will have a series of color coded “film clips” that represents each location, dancer, and angle.  The viewer will proceed to place the “clips” onto a timeline of color sensors.  The sensors will read the data registered on the “clips” and send this information to Processing where the visual media will load on screen.  The dance film will then proceed to play based off how you, the audience, want to watch it.  The audience can switch the clips at any time of this interactive experience, giving them absolute freedom of choice.  They will also be able to rewind to relive their favorite moment by turning a knob forward and backwards, similar to the original flatbed.  

We chose a dance film as the subject because dance is a visual art that should be a virtual reality experience.  If watching a dance on stage at one angle, the viewer cannot fully appreciate the complexity and beauty of the art form.  The freedom of changing dancers, location, and angle will not only allow the audience to more deeply appreciate this art form, but also give dance enthusiasts a platform to learn and analyze the piece.  

This project not only brings interaction to traditional movie experience, but also gives me a chance to apply my learning in this class to my profession.  As a graduating senior at NYU Tisch School of the Arts, I still have a deep love for cinema.  But I do believe adding physical interaction features will give a refreshing experience for the audience to this medium that I deeply love.  I do not just want to create any random machine, I want this project to have meaning in my future career.  This project gives me the perfect chance to combine physical computer with the beauty of film.  

Drawing Machine – Jeffrey Han

Part A

Materials Used:

  • Stepper motor
  • IC chip
  • Power jack & supply
  • potentiometer
  • Arduino, breadboard, cables, etc.
  • Arm mechanisms
  • Marker
  • Paper

Even though the circuit map was drawn out already for us, it was still complicated to put the device together, especially because of the 16 pins on the IC chip.  It was very important to make sure each leg was connected to the correct wire.  After putting together the circuit, another challenge arrived.  Due to the multiple warnings from Antonius and the IMA fellows, I did not want my Arduino to be plugged into my computer.  So I uploaded the code to the Arduino first, without connecting the power supply.  Then I gave the Arduino power from an outlet as well to make sure nothing is connected to my computer when the circuit runs.  It worked out fine and nothing blew up.

(sorry I accidentally shot the video in Timelapse mode)

Next, I added the potentiometer to the mechanism and used the source code of Motornob to control it.  My partner Joel and I then combined our devices to create the drawing machine.  It was really funny watching the machine do its thing, even though the drawing made absolutely not sense.  BUT it is ART and ANYTHING can be considered art right?

Part B

I feel like the phrase “digital manipulation of art” is very broad and can be interpreted in too many different ways.  The most common example used in my daily life is Photoshop, where I use it to enhance my work.  However, in Photoshop, I am still the person controlling the digital manipulation.  I am still the artist.

In the case of the drawing machine, I can program the arms to move in the certain way, or even in a random way.  In this case, am I the artist or is the machine the artist?  Yes, I am the programmer, but if I make it do random rotations at a random speed, the machine has a mind of its own.  This draws the grey area between art created by man or machine.  But when I am turning the potentiometer, the arms are used as an actuator, and I am still the artist.

However, in the digital world, machines can be used as a tool to make creating art easier for the artist.  My main art form is filmmaking.  It would be great to have a rig that mimics my motions through motion sensors.  So I can put the camera in dangerous or hard to reach locations, yet still have 100% control over the camera as if I am actually holding it.

In the case of other artworks such as “Waves” by Daniel Palacios, the human manipulates in digital art instead of digital art assisting the human.  In this case, the actuator is the elastic rope that moves in the waves.  The artist probably chose this actuator because of its visual impact.  Even though the rope itself is not a wave and is just at thin piece of string, the illusion behind it makes the artwork eye catching and stunning.

With the help of the digital world, art is made easier for the artist, and also allows viewers to interactive with the art add another dimension to the work.

#include <Stepper.h>

// change this to the number of steps on your motor
#define STEPS 100

// create an instance of the stepper class, specifying
// the number of steps of the motor and the pins it's
// attached to
Stepper stepper(STEPS, 8, 9, 10, 11);

// the previous reading from the analog input
int previous = 0;

void setup() {
  // set the speed of the motor to 30 RPMs
  stepper.setSpeed(30);
  Serial.begin (9600);               
}

void loop() {
  // get the sensor value
  int val = analogRead(0);
  val= map (val,0,1024,200,0);
  // move a number of steps equal to the change in the
  // sensor reading
  stepper.step(val - previous);
  Serial.println(val- previous);
  // remember the previous value of the sensor
  previous = val;
}

Duel: An Arduino Dueling Game – Jeffrey Han

PART 1

PRE PRODUCTION

When Antonius assigned the midterm to us, Joel and I immediately decided that we wanted to make a game.  However, we did not know which game to make.  The very first ideas were Russian Roulette or Cut the wire.  However, as we tried to prototype and design each of these games on Arduino, we ran into many problems.  When making the cut the wire game, we nearly blew up an Arduino.  After thinking about many safety concerns, we decided to make a reaction game instead.

PROTOTYPE

Our basic concept was to use the button as a trigger.  With the help of IMA fellow Nick and Luis, we successfully created the circuitry and made our first prototype.  [Shown in the image below]

The basic concept was to have two push buttons connected to LEDs.  If you press the button first, the LED lights up.  However, this design is too simple.  This is when we decided to turn this into a Dueling game.  We would have two guns and the players would play the game much like a wild west dueling match.

We added a random buzzer so the players would not know when to shoot.  This anticipation and tension is what makes the game fun and intense to play.  We want the game to create the mood similar to the climax of “The Good, The Bad, and the Ugly”.

PRODUCTION 

The the design of the gun itself, we wanted to create something that did not look like a real gun, so it will be more friendly.  We based it off of more science fiction like shooters like those from Star Wars.  The also attached and LED to the tip of the gun that will only light up if you win.

For the programming aspect of the game, we wanted to incorporate both Arduino and Processing.  After first we wanted to use a gun sound, but again to make it more friendly, we decided to use a laser beam sound like the shooters Storm Troopers use in Star Wars.  Processing will also show who wins the match.

Materials Used

  • Arduino
  • Breadboard
  • Jumper Cables (FM and MM)
  • Buzzer
  • Push Buttons
  • 10K Resistor
  • Color LEDs
  • Cardboard
  • Processing

For our presentation, we made a short product video promoting our game:

USER TESTING

In the user testing, we received many useful feedback and constructive criticism.

The main complaint we had was that the buzzer was not loud enough.  As we tested the game in a quiet environment, we did not have issues when testing.  But during the loud recitation session, the players had a hard time knowing when the buzzer goes off.  Maybe playing the sound from Processing would be an improvement.

People also pointed out that we should minimized the use of the computer screen.  As the players should look each other in the eye when playing the game, they should not have to turn to the screen to see who wins.  Even though the lights on the gun only lights up if you win, our users said this effect was not dramatic enough.

Others pointed out that because we are only using a push button it actually makes the game too easy and simply a test of reaction time.  If the players had the gun on the table and had to pick up the gun to shoot, or if there is only one gun and at the sound of the buzzer they have to fight to grab the gun, it will make the game more intense.

But overall, most of the players really enjoyed the game and think it is fun to play.  When the players paid close attention to the buzzer sound and fired the gun, we can see the smiles on their faces from the anticipation and nervousness, exactly the effect we wanted.  Two of the users kept on playing the game even after we told them to stop playing.  It appeared to be weirdly addictive.

– “It’s dumbly competitive” – Briggie Schrunk

– “Like angry birds competitive” – Jacob Stone

However, aside from the technical feedback, we also got one major ideology concern.  Some users mentioned that this game might be downplaying the dangers of gun violence, and promoting the idea of shooting each other.  When designing the game, we already realized this and decided to use science fiction design instead of realism.  However, even with our consideration, some feel it is not enough.  They suggested that instead of shooting at each other, maybe the players can shoot at some aliens.

FUTURE

Overall, I am very pleased with my projects and really took all the feedback to heart.  There are many things we would improve if making it again.  Aside from the ideas given by our users, we also have our own thoughts on how to improve DUEL.

While building the game, Antonius mentioned that there are tilt switches we can use so that the gun will only actually activate when the gun is tilted at a specific angle.  This would make the game more like a wild west dueling game.

We would also want to make the game wireless, as the wires were a huge hassle.

Overall, creating this project was a fun experience.  I learned the importance of user testing as how we think something works may not be how others view it.

PART 2

PROJECT I TESTED:

After user testing multiple projects, one game stood out to me from the rest, “Shape Battle” (or something along that name).  The game is a two player game with a controller in the shape of a hexagonal prism.  There are four buttons on the controller corresponding to four different shapes that appear on screen.  However, the buttons are not labeled so that the user would have to memorize the position of the buttons.  If you hold the button when the corresponding shape appears on screen, you earn points.  The player with the most points wins.

I played against another classmate and the competition got really intense.  We were scrambling to find which button to press when the shapes showed up.  As we played the game, looked at the score counter go up, at the timer go down, my heart started to beat fast.  In the end, we played two rounds.  I won one, and my opponent won one.

I feel like this game is original and well designed.  To be honest, I had no criticism on the spot. Of course, it is not perfect, but I enjoyed every aspect to it.  Maybe adding music and sound effects can make can make the game even more intense than it already is.

ARDUINO CODE:

const int buttonR = 8; // Right Push Button
const int ledR =  9; // Red LED
const int buttonL = 6; // Left Push Button
const int ledG =  7; // Green LED
const int buzzer = 12; // Buzzer Pin
int counter = 0; // Win
int bcounter = 0; // Buzzer
int buttonStateR = 0; // right pushbutton state
int buttonStateL = 0; // left pushbutton state

void setup() {
  pinMode(ledR, OUTPUT);
  pinMode(buttonR, INPUT);
  pinMode(ledG, OUTPUT);
  pinMode(buttonL, INPUT);
  pinMode(buzzer, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  // read the state of the pushbutton value:
  buttonStateR = digitalRead(buttonR); //reading the right button state
  buttonStateL = digitalRead(buttonL); //reading the left button state

  if (bcounter < 1) {    //code for the randomized starting "pistol" so that players know when to start

  delay(random(1000, 5000)); //the value for randomized start
  Serial.write(5);
  tone(buzzer, 1000);
  bcounter += 1; //prevents the buzzer from playing unless a win condition is set
}
  if (buttonStateR == HIGH) { //checks value from right button
  digitalWrite(ledR, HIGH); // turn LED on:
  counter += 1; // if button reads first counter goes up by one
  noTone(buzzer); // stops the buzzer from buzzing
  } else {
    digitalWrite(ledR, LOW); // turn LED off:
}

  if (buttonStateL == HIGH) { //checks value from left button
  digitalWrite(ledG, HIGH); // turn LED on:
  counter += 2; //if button reads first counter goes up by 2
  noTone(buzzer); //stops buzzer
  } else {
    digitalWrite(ledG, LOW); // turn LED off:
}

  if (counter == 1) { / /if only right is registered--right player wins
    //Serial.println("Right Wins");
    Serial.write(1); //writes to serial
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledR, HIGH);
    bcounter = 0; //resets buzzer counter for next round
    delay(500);
    Serial.write(4);
    delay(500);
  }
  if (counter == 2) { //if only left is registered--left player wins
    //Serial.println("Left Wins");
    Serial.write(2); //writes to serial
    digitalWrite(ledG, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    bcounter = 0; //resets buzzer counter for next round
    delay(500);
    Serial.write(4);
    delay(500);
  }
  if (counter == 3) { //if only both values are registered counter goes up to 3--players draw
    //Serial.println("Draw");
    Serial.write(3); //writes to Serial
    delay(100); //LED's indicate a draw
    digitalWrite(ledG, HIGH);
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    digitalWrite(ledR, HIGH);
    delay(100);
    digitalWrite(ledG, LOW);
    digitalWrite(ledR, LOW);
    delay(100);
    digitalWrite(ledG, HIGH);
    digitalWrite(ledR, HIGH); 
    bcounter = 0; //resets buzzer counter
    delay(500);
    Serial.write(4);
    delay(500);
  }
  delay(50); //small delay before next round
  counter = 0; //win counter set to 0
}

PROCESSING CODE:

import processing.serial.*;
import processing.sound.*;
SoundFile file;
SoundFile file2;
PFont f;


Serial myPort;
int valueFromArduino;
int counterL = 0;
int counterR = 0;
int counterWR = 0;
int counterWL = 0;
PImage img; 
PImage img2;
PImage img3;
PImage imgS;
PImage imgI;
int counter = 0;

void setup() {
  f = createFont("Arial", 16, true);
  size(500, 500);
  printArray(Serial.list());
  img = loadImage("right.png");
  img2 = loadImage("left.png");
  img3 = loadImage("draw.png");
  imgS = loadImage("start.png");
  imgI = loadImage("Instruct.png");
  myPort = new Serial(this, "/dev/cu.usbmodem1411", 9600);
  file = new SoundFile(this, "gun.wav");
  file2 = new SoundFile(this, "start.wav");
  image(imgI, 0, 0);
}


void draw() {
  if (counter<1) {
    if (mousePressed == true) { //inital duel screen
      image(imgS, 0, 0);
      counter+=1;
    }
  }

  textFont(f, 16); 
  textSize(32);
  fill(0); 

  if (counter>=1 && counter<=5) { //duel screen
    image(imgS, 0, 0);
    //text("counterL", 150, 400);
    //text("counterR", 250, 400);
  } else {
  }


  //

  // to read the value from the Arduino
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }

  //println(valueFromArduino);

  //if (valueFromArduino == 5) {
  //file2.play();
  //}

  if (valueFromArduino == 1) {
    background(255, 255, 0);
    image(img, 0, 0);
    file2.stop();
    file.play();
  }

if (valueFromArduino == 8) {
  counterR = counterR + 1;
}
  
  if (valueFromArduino == 2) {
    background(255, 0, 255);
    image(img2, 0, 0);
    file.play();
    counterL+=1;
  }

  if (valueFromArduino == 3) {
    background(0, 255, 255);
    image(img3, 0, 0);
    file.play();
  }

  if (counterR >= 1) {
    counterWR+=1;
    counterR = 0;
    println("CounterR=", counterR);
    println("CounterWR=", counterWR);
  }  

  if (counterL >= 1) {
    counterWL+=1;
    counterL = 0;
    println("CounterL=", counterL);
    println("CounterWL=", counterWL);
  }
}

Recitation 6 Serial Communication – Jeffrey Han

Step 1:

For the Processing to Arduino sketch, I created a light system that activates when you press different buttons.  There is a green, red, and yellow light on the Arduino.  If you press “R” on the keyboard, the Red LED lights up.  If you press “G” the Green lights up.  If you press “Y” the yellow lights up.

The process of creating this sketch is relatively simple.  Once I figured out how to control one of the lights, I just had to duplicate it three times to write the code for the other two.

Step 2:

For the Arduino to processing sketch, I connected a button to the screen.  When you press the button, the screen turns pink.  This idea is useful in many real world scenarios when you need a button to control visual media.

Step 3:

  1.  The possibilities are endless with serial communication and the data interactions between the physical Arduino and the screen based computer.  Instead of only using a keyboard to control the computer, other gadgets can be added.  For example we can use a infrared distance sensor as a mouse.
  2. Computers are made to make life easier for everyone.  The computer screen based system gives the benefit of a convenient visual presentation of media.  We can see images, videos, and other medium that we can react to.  But watching a screen itself has no interaction.  We are not directly connected with the system.  Once you add buttons to it, you can control what you see on the screen.
  3. This type of serial communication is seen everywhere in the real world.  Even our computers themselves use this.  The keyboard is the physical component and the monitor presents the screen based content.  In arcades, we use the controller to play a game.  In some vending machines, we press a button and the display shows us the information of the product we are buying.  In digital art, we can draw on the drawing board physically, and it will send the information into digital form.  Physical and screen based media interactions are endless.

Animation in Processing – Jeffrey Han

Recitation Session:  Fri 11:15 – 12:30

Instructor:  Antonius

I always had a love for geometric shapes and images.  Even though some may say that geometry in an image is too structured and boring, but I believe everything must have structure and we can create complexity within these boundaries.

For this animation, I wanted to create something geometric.  i was inspired by artists such as Vera Molnar, Manfred Mohr, and the “Muriel” works.  They utilize geometric shapes to create something cool.

For this animation, I wanted to create a dream catcher.  I think even though it is a very simple structure, it can have all sorts of cool designs.  The final product looks as follows:

I think the most important thing about this creation in processing is its randomness.  When we create something by hand, like those artists who inspired this piece, every decision they make, every stroke, is a conscious choice.  They know what they are doing.  However, in this piece, the shades of the lines are random.  Every time you press the play button, a slightly different dream catcher appears to symbolize the uniqueness within everyone’s dreams.  There is a beauty to this randomness that gives the piece character.  Even though it is created by a computer, it gives a feeling that would take a long period of time and patience to replicate by hand.

At the same time, this dream catcher has some motion to it.  The bulls eye in the middle will always keep rotating.  The formation of the dreamcatcher is also a cool coming together animation.  This motion gives life to the art, and makes the dreaming more magical.

Drawing in processing can be easier or more difficult than hand.  If you are to create something simple, drawing by hand is the easy way to go.  We do not need to spend a long time trying to come up with a code.  However, if you want something complicated with repetition, drawing with a program will save the artist a lot of time.  But at the same time, you have more freedom when drawing by hand.  It is also easier to correct.  Both methods have their pros and cons, and we just combine the techniques in both to really create something special.

float x, y;
int h, w;
void setup() {
  size(500, 500);

  //Red 
  noStroke();
  fill(255,0,0);
  quad(0,0,125,0,250,250,0,125);
 
  //Orange 
  noStroke();
  fill(255,125,0);
  triangle(125,0,250,250,250,0);
  
  //Yellow 
  noStroke();
  fill(255,255,0);
  triangle(250,0,250,250,375,0);
  
  //Spring Green 
  noStroke();
  fill(125,255,0);
  quad(250,250,375,0,500,0,500,125);
  
  //Green 
  noStroke();
  fill(0,255,0);
  triangle(250,250,500,125,500,250);
  
  //Turq 
  noStroke();
  fill(0,255,125);
  triangle(250,250,500,250,500,375);
  
  //Cyan 
  noStroke();
  fill(0,255,255);
  quad(250,250,500,375,500,500,375,500);
  
  //Ocean 
  noStroke();
  fill(0,125,255);
  triangle(250,250,375,500,250,500);
  
  //Blue 
  noStroke();
  fill(0,0,255);
  triangle(250,250,250,500,125,500);
  
  //Violet 
  noStroke();
  fill(125,0,255);
  quad(250,250,125,500,0,500,0,375);
  
  //Magenta
  noStroke();
  fill(255,0,255);
  triangle(250,250,0,375,0,250);
  
  //Raspberry
  noStroke();
  fill(255,0,125);
  triangle(250,250,0,250,0,125);
}

void draw () {
   
  x = x+1;
  y = y+1;
  
  // y=-x
  noStroke();
  fill(0,random(255),random(255));
  ellipse(x,y,50,50);
    
  noStroke();
  fill(0,random(255),random(255));
  ellipse(500-x,500-y,50,50);
  
  // y=x
  noStroke();
  fill(0,random(255),random(255));
  ellipse(x,500-y,50,50);

  noStroke();
  fill(0,random(255),random(255));
  ellipse(500-x,y,50,50);
  
  // y=0
  noStroke();
  fill(random(255),0,random(255));
  ellipse(x-1,250,50,50);
  
  noStroke();
  fill(random(255),0,random(255));
  ellipse(500-x,250,50,50);
  
  // x=0
  noStroke();
  fill(random(255),0,random(255));
  ellipse(250,y-1,50,50);
  
  noStroke();
  fill(random(255),0,random(255));
  ellipse(250,500-y,50,50);
  
  // y = -x/2
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((125+(x/2)),y,10,10);
  
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((375-(x/2)),500-y,10,10);
  
  // y = x/2
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((375-(x/2)),y,10,10);
  
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((125+(x/2)),500-y,10,10);
  
  // y = -2x
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse(((2*x)),(y+125),10,10);
  
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((500-(2*x)),(375-y),10,10);
  
  // y = 2x
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse(((2*x)),(375-y),10,10);
  
  noStroke();
  fill(random(255),random(255),random(255));
  ellipse((500-(2*x)),(125+y),10,10);
 
 if (frameCount % 1 == 0) {
 fill(0,random(255),random(255));
 pushMatrix();
 translate(250, 250);
 rotate(radians(frameCount % 360));
 rect(0, 0, 100, 1);
 popMatrix();
 
 if (frameCount % 1 == 0) {
 fill(random(255),random(255),0);
 pushMatrix();
 translate(250, 250);
 rotate(radians(frameCount % 360));
 rect(0, 0, 80, 1);
 popMatrix();
 
 if (frameCount % 1 == 0) {
 fill(random(255),0,random(255));
 pushMatrix();
 translate(250, 250);
 rotate(radians(frameCount % 360));
 rect(0, 0, 60, 1);
 popMatrix();
 
 if (frameCount % 1 == 0) {
 fill(0,random(255),random(255));
 pushMatrix();
 translate(250, 250);
 rotate(radians(frameCount % 360));
 rect(0, 0, 40, 1);
 popMatrix();
    
 if (frameCount % 1 == 0) {
 fill(random(255),random(255),0);
 pushMatrix();
 translate(250, 250);
 rotate(radians(frameCount % 360));
 rect(0, 0, 20, 1);
 popMatrix();
 
 }
 }
 }
 }
 }
 }

Stupid Pet Trick – Jeffrey Han

Angry Bird Pet Trick Documentation

Pre-Production:

It was very difficult coming up with and idea for the Stupid Pet Trick.  My first idea was to make some sort of dog to celebrate the Chinese New Year, year of the dog.  However, this idea was immediately dismissed with the fear of being too simple or cliche.  One day during break I was making a paper crane, and a brain wave hit.  This is when I thought it would be cool to make a bird.

After I got a solid idea, the next step was to figure out what type of bird to use.  In the end, I picked to model my pet off an ostrich, because it is a funny looking bird.  It is also a bird that does not fly, which will make the action of flapping its wings funnier.  I want to make an “angry bird” that angrily flaps its wings when a person gets too close to its territory.

Production:

Machine Components:  2 Servo Motors, Infrared censor, buzzer, Arduino, breadboard, and jumper cables.

Design Components:  Cardboard, tape, curtain hooks, wooden board

To build the angry bird, I used a infrared censor as its eyes, so the animal can see when an enemy is in close proximity.  I hid the wire on the infrared censor along the neck of the ostrich.  For the wings, I mounted two servo motors next to each other.  After I got a general shape done, the final step was to actually have the bird stand up.  I tried using different cardboard material but none was able to support the weight.  Then when looking inside the scraps room, I found two curtain hooks that made the perfect support.  They even look like feet.

I then added a buzzer to the circuitry as an alarm system that will go off if anyone comes too near the the bird.

Programming:

Programming the bird was relatively straight forward.  However, the most difficult part was figuring out the angle of the servo motor.  There was a lot of trial and error.  I did not want to bird to flap its wings too large of an angle as it will look unnatural.  Another challenge was to sync the two servos together, so they would flap at the same angle.  I also did not want the wings to flap too quickly as it will completely destroy the creation.  In the end, this is the code for the angry bird:

Result:

Reflections

After the pet show, I am somewhat pleased with the result.  People seemed to enjoy the bird’s flappy wings and the fearful sound the buzzer makes.  Even though it is a simple project, it seemed to be funny to watch.

However, I could have done a lot more to make the bird look more realistic.  Even though it has the shape of a bird, I believe I could have done more with the design.  One major comment was that it was missing a beak. A beak would give the bird more personality, and of course, look more like an actual bird.  I also should have hid the Arduino behind some sort of barrier so the board is not messy, and the entire project will look more professional.  After looking at other pet tricks in the show, I thought it might also be cool to give the bird some LED eyes.  The eyes can also light up when a person comes too near to the bird, which will make it look even angrier than it is already.

Interactions Lab Recitation 3 – Jeffrey Han

Part A –  Partner:  Joel Rao

We took the infrared sensor and connected it to a motor and fan in order to create a fan that turns on when the user is near.  For this machine, we used a diode, Tip 122 Transistor, a resistor, and of course the motor and infrared sensor.

To code the device, we referenced a code of the infrared sensor and then used a simple ‘if statement’ to allow the machine to work.  In our first attempt, the sensor was too sensitive, making the fan turn on almost all the time.  We then changed the threshold to make the device less sensitive.

Even though this is a very simple device, it can be applied to actual fans we use in our life.  For example, on a hot summer day, we can program the fan so when it senses a human being come in the room, it turns on automatically.  This eliminates the use of a physical button and we can enjoy the comfort of a cold room without spending for energy walking to the fan.

How it Works Click Here

If I were to continue with this project, it would be great to find a way to change the speed of the fan.  Most fans we used in our daily lives have different settings for if we want strong or weak wind.  It will be useful if we can somehow allow the fan to change speed without an physical button press.

Part B

Making dumplings is a great metaphor for writing code.  The functions we use are like the dumpling skins.  When making a dumpling, we know what the final product we want looks like, but we have to get there.  The filling, minced meat, cabbage, mushrooms are the different components in the code — The inputs, the outputs, and commands.  Once we have the components, we can wrap them together into a functional code.  Sometimes we might put too much filling inside the skin and thus the dumpling will explode.  This is like trying to write too much useless code.  We need to find a way to simplify and minimize in order to create the most beautiful dumpling/code.

In a way, computers help simplify human behavior, and it makes our lives easier.  simple computers like calculators help us solve math problems, more complex computers like those used by NASA help bring people to space.  Through computers human beings are able to achieve the unbelievable.  However, some say that computers make people lazier.  This might be the case, but in order for a computer to work, the human must also interact with it.  And remember in the end, it is humans that invented and made the computer.  Without the human input on technological development, we will not have the computer.  It is this mutually beneficial relationship between humans the technology that helps the world move forward.