Final Project (Rudi) – Haeun Yoon

Final Project: Mixr Pad

Project:

Mixr Pad

Purpose of the Project:

As stated in the essay written before, I wanted to create an interactive project where an individual with no background of music can create a short strip of music by themselves. Even with the limited knowledge of music, or even with people who have a certain background knowledge, I wanted to make this project accessible for different types of audience. I specifically worked with the layering aspect of the project, where many artists use different types of sounds that may or may not a tune to layer on top of each other, matching the beat, tone and the chords to produce a certain melody to be used in music. I experimented a lot with GarageBand, my using free copyrighted sounds online and make my own music by layering them on top of each other.

These were the sounds I used from LooperMan:

Male Choral by rasputin1963

Bad Idea Strings by bigsnook954

No Confrontation Drums by MusEquencyFrequency

Beat Box Loop 83bpm by wavtech88

Rhodes Lofi – They Used To by miazyo

Drum 83 by sushilbawa

Inspiration:

There were many inspirations that I took to produce this project. They are Launchpad, Loop Machine and an online game called Incredibox.

Image result for launchpad

Photo from Sweetwater.

As shown above, a launchpad is a machine that is used commonly by various artists today who produce their own music. Often times when creating music, artists first start off with creating a beat, and later produce melody and harmonize with them. A launchpad normally has many different buttons, often squared like the one above and each button would produce a different sound. Unlike my project, when the button on the launchpad is pressed once, it would create only a short 2-3 seconds of a sound (either a beat, thump). By pressing the buttons repeatedly, the individual would create a beat.

Image result for garageband layering tracks

Photo from Gadget Magazine.

I had researched and experimented a lot by using the GarageBand, and specifically layering tracks. These tracks were created by looping the sounds or a short beat that I would have found online. After creating the tracks, I would layer them on top of each other like shown above, and if they wouldn’t match in the beat, I would have to alter the tracks myself and adjust the placement of the loop so that if played, they would all automatically fit together.

Image result for incredibox online

Photo from YouTube.

The online game that I had found around 3 years ago experimented with a lot of beats and layering tracks on top of each other by a simple animation. The Incredibox game itself shows how different tracks can be layered on top of each other, however, when playing it, you could see that the computer was automatically aligning the beats so that it wouldn’t sound messed up. This game had 5 types of options to choose: Effects, Beats, Melodies, Chorus, and Voices. Out of these 5 categories, the user would be able to drag an icon and place it on the person, and along with a change in their costume, they would have their own sound – at the end producing an acapella.

The process:

First, I had to find 6 different soundtracks from LooperMan. They are 5-6 seconds long with the sound repeating only 3 times. I specifically wanted to keep the soundtracks to 86 bpm (beats per minute). After choosing the 6 different types of tracks, I labeled them to be: Bass, Chorals, Tune, Beat, Strings and Drum. By layering them in GarageBand, I was able to play them together all at the same time and at the end successfully complete a full track with all 6 different sounds.

From there, I converted all the individual track to be exported from GarageBand, but they would be all in m4a files. Which I found later, didn’t work with the Sound program downloaded in Processing. After, I  had to convert the 6 m4a files to 6 mp3 files. This allowed me to use the Minim from Processing which I learned was similar to how you work with Sounds.

With 6 mp3 files, I was using Arduino to Processing with Multiple Values in order for the pressed buttons to be the input, and the output to be the 6 different sounds from Processing. It was quite complicated working with so many different wires, which I had labeled them by tape so that they can be identified easily with the cords.

After laser cutting the box and assembling them, I had a rough project which looked like the photo down below.

Potential Improvements/Feedback:

After user testing, I had lots of feedback about the placement of the buttons and the way they were a bit fragile sometimes. I had decided to change the placement of the buttons and add the wood pieces on to the buttons to make the buttons have more surface area to be pressed. After the feedback, the box looked like the one below.

However, if I had more time otherwise, I would have added more types of sounds instead of having only 6 different buttons to be pressed. This would lead to more variety of music created and more creativity for the user to explore.

Additionally, there was also a feedback which was to add a recording function to the project so that the sound that is produced can be recorded and played back so that it can be of a possession. I think that would be great since the user will be able to create their own type of music and make it their own by having the beat sent to their email or have it for their own possession.

Meaning of Project/Conclusion:

This project definitely has its meaning of educating and using this project as a form of creating something new. By the user’s creativity, they are allowed to play with how the different sounds interact with one another, and how they fit or how they do not fit. This project is also used to create something brand new and show a certain user’s creativity. Without any background knowledge, the person is able to interact with the Mixr Pad and create their own type of music.

All in all, I definitely can say with confidence that this project taught me a lot. Starting from coding Arduino at first, then moving on to Processing, then connecting the two so that values can be transferred to one another. Also learning how to laser cut, 3-D print, this class was filled with so many dense information. I’m really proud of how this project turned out, how I was able to create a project by myself by simply assembling the resources I was provided with.

//*arduino*
int buttonPin1 = 3;
int buttonPin2 = 4;
int buttonPin3 = 5;
int buttonPin4 = 6;
int buttonPin5 = 7;
int buttonPin6 = 8;



void setup() {
  Serial.begin(9600);
  pinMode(buttonPin1, INPUT);
  pinMode(buttonPin2, INPUT);
  pinMode(buttonPin3, INPUT);
  pinMode(buttonPin4, INPUT);
  pinMode(buttonPin5, INPUT);
  pinMode(buttonPin6, INPUT);
}

void loop() {
  if (digitalRead(buttonPin1) == 1) {
    Serial.print("1");
  } else {
    Serial.print("0");
  }
  Serial.print(",");

  if (digitalRead(buttonPin2) == 1) {
    Serial.print("1");
  } else {
    Serial.print("0");
  }
  Serial.print(",");

  if (digitalRead(buttonPin3) == 1) {
    Serial.print("1");
  } else {
    Serial.print("0");
  }
  Serial.print(",");


if (digitalRead(buttonPin4) == 1) {
  Serial.print("1");
} else {
  Serial.print("0");
}
Serial.print(",");

if (digitalRead(buttonPin5) == 1) {
  Serial.print("1");
} else {
  Serial.print("0");
}
Serial.print(",");

if (digitalRead(buttonPin6) == 1) {
  Serial.print("1");
} else {
  Serial.print("0");
}

Serial.print("n");

delay(10);

}

//*processing*
import processing.serial.*;

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer file1, file2, file3, file4, file5, file6;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 6; 
int[] sensorValues;



void setup() {
  size(640, 360);
  background(255);

  minim = new Minim(this);
  file1 = minim.loadFile("music1.mp3");
  file1.loop();
  file2 = minim.loadFile("music2.mp3");
  file2.loop();
  file3 = minim.loadFile("music3.mp3");
  file3.loop();
  file4 = minim.loadFile("music4.mp3");
  file4.loop();
  file5 = minim.loadFile("music5.mp3");
  file5.loop();
  file6 = minim.loadFile("music6.mp3");
  file6.loop();
  setupSerial();
}


void draw() {
  updateSerial();
  printArray(sensorValues);


  if (sensorValues[0] == 1) {
    file1.unmute();
  } else {
    file1.mute();
  }
 if (sensorValues[1] == 1) {
    file2.unmute();
  } else {
    file2.mute();
  }
  if (sensorValues[2] == 1) {
    file3.unmute();
  } else {
   file3.mute();
  }
  if (sensorValues[3] == 1) {
   file4.unmute();
  } else {
   file4.mute();
  }
  if (sensorValues[4] == 1) {
    file5.unmute();
  } else {
    file5.mute();
  }
  if (sensorValues[5] == 1) {
    file6.unmute();
  } else {
    file6.mute();
  }
}




void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[11], 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) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

Recitation #10 (Rudi)- HaEun Yoon

Introduction

For the last recitation of the year, we were assigned to use both an Arduino and Processing so that what you alter in the Arduino is going to alter either an image, video or something through Processing. For this, I chose to use an image as shown below.

Credit to DaseinDesign from flickr.

Lens Test: Nikon FM2n + Nikkor 135mm f3.5

And I wanted to use a Potentiometer with the Arduino to alter the tint in the photo.

Below are the photos of the circuit itself. I used three potentiometers to distinguish the red, green and blue tints.

Some of the problems that I have faced during the completion of this recitation was the coding of the processing. Since I had first looked at the tint function of a cam setting, I had to alter the code to match the picture.

Below is the video.

 

//Arduino
// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing


void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensor1 = analogRead(A0)/4;
  int sensor2 = analogRead(A1)/4;
  int sensor3 = analogRead(A2)/4;


  // keep this format
  Serial.print(sensor1);
  Serial.print(","); 
  Serial.print(sensor2);
  Serial.print(",");
  Serial.print(sensor3);
  Serial.println();
  // put comma between sensor values
 // add linefeed after sending the last sensor value

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  //delay(100);
}

//Processing
PImage photo;
import processing.serial.*;

String myString = null;
Serial myPort;



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

void setup() {
size(640, 423);
setupSerial();
}

void draw() {
updateSerial();
photo = loadImage("man.jpg");
int w = photo.width;
int h = photo.height;
for (int y = 0; y < h; y++) {
for (int x = 0; x < w; x++) {
int i = x + y*w; 
int r = int( red(photo.pixels[i])); 
int g = int( green(photo.pixels[i]));
int b = int( blue(photo.pixels[i]));
photo.pixels[i]=color(r+sensorValues[0], g+sensorValues[1], b+sensorValues[2]);
}
}
photo.updatePixels();

image(photo, 0, 0);
printArray(sensorValues);
}



void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 27 ], 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) {
String[] serialInArray = split(trim(myString), ",");
if (serialInArray.length == NUM_OF_VALUES) {
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);
}
}
}
}
}

Recitation Documentation #9 – HaEun Yoon

Exercise 1

For this exercise, during the recitation, we were supposed to move the ellipse that we created according to the potentiometers that were going to decide the x and the y values. First, I had to remember how to create the basic circuit using the potentiometer, since they had to be connected to A0 (or A1 for y-axis), Ground and 5V. For this process, we used a single value, Arduino to Processing template. Through the changes from the Arduino (the potentiometers), the Processing would recognize the change and apply the inputs by the Arduino to the Processing, where the output would be the change in location of the ellipse. Below is the circuit that I had created:

When altering the potentiometer, the circle would move according to the altering sensor, either x or the y-axis.

 

Exercise 2

For this section of the recitation, we were supposed to create an interactive tone changing buzzer. I used the single Values Processing to Arduino. I realized that we had to use the function tone(), which you would have to input the value tone(pin, frequency, duration). Unlike Exercise 1, the process for this concept was that because of the input, which was the position of the mouse, the output, the tone of the buzzer would change.

As shown in the picture, I chose not to use the breadboard and plugged the buzzer to pin number 9.

 

Overall, with these two exercises, I didn’t have too much trouble with the coding, but with the Exercise 2, I had a bit of trouble understanding how the values from the Arduino would link with the Processing. This had to deal with the myPort.write and valueFromProcessing. By connecting these two together, I was then able to connect the two together for it to create the output.

 

/**********EX.1************/
//(processing)//
// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing


void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A1);


  // keep this format
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.println ();
 // add linefeed after sending the last sensor value

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  delay(100);
}
/////EX.1 (PROCESSING)////
// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing

/*
 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
 */

import processing.serial.*;

String myString = null;
Serial myPort;


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


void setup() {
  size(500, 500);
  background(0);
  setupSerial();
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  background(0);
ellipse(sensorValues[0],sensorValues[1],100,100);

  // use the values like this!
  // sensorValues[0] 

  // add your code

  //
}



void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 29 ], 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) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}


///(arduino)///
// IMA NYU Shanghai
// Interaction Lab
// This code receives one value from Processing to Arduino 

#include <Servo.h>

Servo myservo;
char valueFromProcessing;
int buzzerPin = 9;


void setup() {
  Serial.begin(9600);
  pinMode(buzzerPin, OUTPUT);
}


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueFromProcessing = Serial.read();
  }
  
  if (valueFromProcessing  == 'C') {
    tone(9,150,503);
  } else if (valueFromProcessing == 'D') {
      tone (9,50,503);
    // something esle
  }
  delay(10);
}
  
  
  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.

////////////////////////////////////EX.2////////////////////////////////////////////////
/////////////////PROCESSING//////////////
// IMA NYU Shanghai
// Interaction Lab
// This code sends one value from Processing to Arduino 

import processing.serial.*;

Serial myPort;
int valueFromArduino;


void setup() {
  size(500, 500);
  background(0);

  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.
  
  myPort = new Serial(this, Serial.list()[ 2 ], 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.
}


void draw() {
  // to send a value to the Arduino
  if (mouseX>=250 && mouseY>=250) {
    myPort.write('C');
  } else {
    myPort.write('D');
  }
}

////////////////////ARDUINO//////////////////////
// IMA NYU Shanghai
// Interaction Lab
// This code receives one value from Processing to Arduino 

#include <Servo.h>

Servo myservo;
char valueFromProcessing;
int buzzerPin = 9;


void setup() {
  Serial.begin(9600);
  pinMode(buzzerPin, OUTPUT);
}


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueFromProcessing = Serial.read();
  }
  
  if (valueFromProcessing  == 'C') {
    tone(9,150,503);
  } else if (valueFromProcessing == 'D') {
      tone (9,50,503);
    // something esle
  }
  delay(10);
}
  
  
  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.

Final Project Proposal – HaEun Yoon

A. Project Name

Feeling the Music

B. Project Statement of Purpose

This project will be for a generally young audience. The project will consist of making an individual’s own music by hovering over certain sensors that will create a different sound or a beat. I was inspired by other group peer’s Mid Term projects and the simple game of producing music by not actually playing any instruments. I will be making the audience to interact with this project by letting them activate the game by using sensors and responding to the change in the state of the project to create a new product. The challenge that I might face during the creation of the project may be using different types of sensors to see which one fits the best and responds quickly. The main goal of this project is for an individual to have to create a piece of work that they can easily create without having to actually play a special instrument.

C. Project Plan

For this game, the audience or an individual may position their hand above a certain sensor. Each sensor would play a different type of beat or a rhythm, and when their hand hovers over the sensor, it would play that corresponding beat. After the usage of different beats, the person would have made a piece of music by themselves by layering over the different beats on top of one another.

D. Context and Significance

This game’s purpose would be to show that one individual can create a piece of music and their individual work without having to learn a specific instrument. While my definition of interactive means to have a response of the action that opposition party does, the sensors will be one of the tools I will be using in order to fulfill that requirement.

Preparatory Research And Analysis (Rudi) – HaEun Yoon

A. my initial definition of “interaction”

Initially, I had created my own definition of “interaction” by explaining the word as a machine or a product that is acted upon by a factor of input and a factor of output. Meaning that whatever you do to it, there would be a product that is either created or affected depending on the type of input.

The work that we have done in class would exemplify this definition since most of what we did in class consisted of a way of programming to act in different ways depending on the type of input. Such as the way we used Processing conditions, if and else. This function set up different conditions that the Processing app would recognize the input, and as a result, start to produce a certain output.

B. evolved definition  of “interaction”

Now, I would define it as a form of communication with a certain audience, where messages are conveyed through different types of actions and something is changed within to produce a response factor.

For this definition, I added the word communication since I thought that word contained the implication that some sort of input and output system was already embedded inside the definition of the word communication. Whatever we said to the Processing app, the computer then understood and proceeded to do whatever it was asked to do. Also, I added “something is changed within” to show that it is acting on the input that was put in. It also means that it is not the same state as before, but a new structure to be able to show an output factor.

C. research interactive project

One project that aligned with my definition of “interaction” is called Sonic Playground by Yuri Suzuki. This form of artwork is built outdoors in order for an audience to interact with it by depending on wherever the person was standing. Depending on the location of the person, the sound that you hear would be different. Because of the software built inside, it would detect waves by the mechanism of “ray tracing techniques”. This machine would change the certain direction of the sound, and alter the geometry of the wave, to be heard clearly to the person and to elongate the sound for it to reach the audience. With the input as the distance of where the person is standing, the output as the sound it produces, the raytracing plug-in device changes its behavior to the certain input; it aligns along with my definition of interaction.

Below is a picture of the raytracing plug-in device built in the project.

Below is a photo was taken outdoors where kids are playing with the different sound changes depending on the distance change between the machine and the person.

A project that did not align with my definition of interaction was Shred Westeros’s work with Game of Thrones Map Skateboards. While these skateboards may be interesting and really cool, according to my definition, it would not be considered to be an interactive device. While it’s a simple product, wooden platform with wheels attached, with the input of a person being on it, there is no certain type of output that is in response by changing its form or changing due to the action performed by the person. The output is only created by the person him/herself pushing against the floor to gain momentum and to create energy for the skateboard to move. This action is not done by the skateboard itself but is an output created by the skater. In result, this product would not be considered to be an interactive tool based on my definition of “interaction”.

Below are images of the skateboards.

d. the new definition of “interaction”

In result, after the in-class readings and the projects, I have researched above shows that there are many details and specifics that I am lacking in my definition. My evolved definition of the word, “Interaction” would be a form of communication between two different groups of people with a factor of input and a factor of output produced by a change of state.

 

Sources:

Sonic Playground – Playful acoustics by Yuri Suzuki Design

https://creators.vice.com/en_us/article/ywwzbw/game-of-thrones-map-skateboard-decks-hbo

 

Recitation #7 (Rudi) – HaEun Yoon

Recitation Exercise

During this week’s recitation, we were assigned to create an animation but with an interactive aspect to it. Either with the interactive action using a mouse or a keyboard. As shown in the pasted code below, I have chosen to work with a keyboard. Instead of continuing from Recitation 6, I created a completely new project.

Below is the animated clip with when I am pressing the anywhere on the keyboard, it would change into a shade of color.

Recitation Homework

Step 1

Step one was very simple to do since it was only altering the void setup option.

Step 2

While changing the size of the ellipse, I decided to use the function of circleSize=circleSize*-1 for it to contract. This equation was successful, however, I realized that the ellipse doesn’t fully stop when it’s at a small circle point.

Step 3

For this step, I changed the colorMode option and inserting a random() for the ellipse to change color.

Step 4

After, I played around with the keyPressed option and created an integer x and y to change the coordinates.

int size=10;
int angle = 0;


void setup() {
  size(500, 500);
  background(0,0,0);
  noStroke();
ellipseMode(CENTER);
frameRate(60);
}

void draw() {
  angle ++;//rotation

  background(0,0,0);
  for (int y=0; y<height; y += 2*size){
    for (int x=0; x<width; x += 3*size){
      fill(map(0,0,width,300,200)+map(0,0,width,300,200));
      ellipse(x, y, size, size);
      pushMatrix();
      translate(x,y);
      rotate(radians(angle));
      fill(map(x,0,width,300,200), map(y,0,width,300,200), map(x+y, 0, width, 300, 200), map(x+y, 0, width, 300, 200)); 
      ellipse(10, 10, 30, 30);
      popMatrix();
      

      if (keyPressed == true){
        fill (0,0,0);
      }else{
        pushMatrix();
      translate(x,y);
      rotate(radians(angle));
      fill(map(x,0,width,200,200), map(y,0,width,200,200), map(x+y, 0, width, 200, 200), map(x+y, 0, width, 200, 200)); 
      ellipse(10, 10, 30, 30);
      popMatrix();
      
    }
    }
  }}
/////////////////////////////////////////////////////
//step 1
float circleSize =15;
float x=10;
float y=10;

void setup(){
  size(600,600);
  ellipseMode(CENTER);
}

void draw(){
    background(255);
   strokeWeight(3);
 

  ellipse(300,300,300,300);
}

/////////////////////////////////////////////////////
//step2
float circleSize =15;
float x=10;
float y=10;

void setup(){
  size(600,600);
  ellipseMode(CENTER);
}

void draw(){
    background(255);
   strokeWeight(3);
 

  ellipse(300,300,circleSize,circleSize);
  
 
 if (circleSize<200){
   circleSize=circleSize+1;
 }
 if (circleSize>=200){
 circleSize=circleSize*-1;
}
}
/////////////////////////////////////////////////////
//step3

float circleSize =150;
float x=10;
float y=10;


void setup(){
  size(600,600);
  ellipseMode(CENTER);
}

void draw(){
  
    background(255);
    frameRate(10);
    stroke(random(0,255), random(0,255), random(0,255));
   strokeWeight(15);

  ellipse(300,300,circleSize,circleSize);
  
 frameRate(90);
 
 if (circleSize<300){
   circleSize=circleSize+1;
 }
 if (circleSize>=300){
 circleSize=circleSize*-1; 
}



}

/////////////////////////////////////////////////////
//step 4
float circleSize =150;
float x=300;
float y=300;


void setup(){
  size(600,600);
  ellipseMode(CENTER);
}

void draw(){
   frameRate(100);
    background(255);
    stroke(random(0,255), random(0,255), random(0,255));
   strokeWeight(25);

  ellipse(x,y,circleSize,circleSize);

 if (circleSize<300){
   circleSize=circleSize+1;
 }
 if (circleSize>=300){
 circleSize=circleSize*-1; 
 
 if (x>height) {
  x=0;}

}
}

void keyPressed(){
  frameRate(10000);
  if(key==CODED){
    if(keyCode==DOWN) {
      y = y+1;
    }else if (keyCode==UP){
      y = y-1;} else if (keyCode==LEFT){
        x=x-1;}
        else if(keyCode==RIGHT){
          x=x+1;}

}


}

Recitation #6 – HaEun Yoon

Step 1

I chose Vasily Kandinsky’s piece called “Several Circles (Einige Kreise)” as my project motif.

I chose to pick this piece as a motif since I really liked the contrast between the colors and how they complemented each other. Also, it plays with geometry and the way the same shape, the circle is repeated in different shapes, sizes, and colors to create one piece of art.

Step 2

Inspired by this piece, I wanted to keep the background in a dark color. Since black compliments most of the colors. Instead of the black dotted prints off of Vasily Kandinsky’s piece, I wanted to change it to be white, and stand out of the canvas itself. I also played with the strokes and having the shapes be outlined a certain color to imitate the white color off of the big circle in the motif’s work.

 

size(600,600);
background(0,0,0);

//blue circle
fill(76,74,106);//color
noStroke();//outline
arc(300,300,width/2,height/2,0,PI+QUARTER_PI,PIE);//shape
rotate(PI/3.0);

//black small circle
fill(121,49,60);
noStroke();
ellipse(500,10,150,150);

//blue outer ring
noFill();
strokeWeight(5);
stroke(157,167,183);
ellipse(500,100,50,50);

//big green circle
fill(78,90,77);
noStroke();
ellipse(400,-400,150,150);

fill(100);
ellipse(400,-380,100,100);

fill(183,157,175);
ellipse(400,-385,60,60);

//yellow circle
fill(182,183,157);
ellipse(400,-160,100,100);

//darker purple circle
fill(139,122,142);
ellipse(400,-100,80,80);

//small white spot1
fill(255,255,255);
noStroke();
ellipse(400,10,10,10);

//small white spot2
fill(255,255,255);
noStroke();
ellipse(400,1,5,5);

//small white spot3
fill(255,255,255);
noStroke();
ellipse(300,10,20,20);

//small white spot 4
fill(255,255,255);
noStroke();
ellipse(300,-1,8,8);

//small white spot 5
fill(255,255,255);
noStroke();
ellipse(300,-400,10,10);

//small white spot 6
fill(255,255,255);
noStroke();
ellipse(300,-410,18,18);

//small white spot 7 
fill(255,255,255);
noStroke();
ellipse(400,-510,18,18);

//small white spot 8 
fill(255,255,255);
noStroke();
ellipse(400,-110,10,10);

//small white spot 8 
fill(255,255,255);
noStroke();
ellipse(400,-100,4,4);

//small red spot
fill(167,76,90);
ellipse(400,-200,20,20);

//blue spot 
fill(65,83,183);
strokeWeight(2);
stroke(255,255,255);
ellipse(100,-200,100,100);

//

Mid Term Documentation (Rudi) – HaEun Yoon

Project Name: Sip N Flip

  • We chose this name because it really explains for itself. The goal of the game is to drink the liquid in the cup, after doing so, flipping the cup so it lands on the table. This is repeated 3 times, and when all the cups are drunk and flipped and all the three LEDs are lit up, then the respective team wins the game.

Project Statement of Purpose

  • The purpose of the game is for entertainment. Instead of a simple entertainment game that you can play with your friends, this was made for an easier and simpler way to play. It was also more efficient since normally these types of games would be played in a large environment and a dark place. This device makes the game more practical. When interacting with this device, there is no need for communication, or confusion whether the cup is flipped, whether it is the next person’s turn or not. With the indication of the LED light, the next player is able to play.
  • This product resolves the problem of having to have a referee to keep account when the next person should go, or whether the cup is properly flipped or not. The LED is lit up by the connection of conducting tape and completing the circuit which is completed by the cup touching the two conductive tapes. Because the environment may be dark and noisy resulting in miscommunications and confusion, this product will clear the problem.
  • This project was thought up after reading about an artist who would by the artist Nova Jiang, with her interactive product, The Orthogonal/Diagonal. Her use of 3D printing different pieces of chess and board games, incorporating the traditional aspect and the modern use of 3D printing objects, we thought of creating our project. We thought of altering one of the traditional board games, such as the flip cup and adding elements to it to make the game more efficient.

Literature and Art, Perspectives and Contexts:

  • The article that I read online was from creators.vice.com. While exploring different projects and ideas proposed, I came across Nova Jiang’s project with her interactive project called “The Orthogonal/Diagonal”. She had used the 3D printer to print out different types of modern structure of board game pieces. These include the chess pieces, Xiangqi pieces, and Janggi pieces. All the pieces I have mentioned above were all games that are traditionally played in different parts of the world. This idea was one of the projects that had impacted us while we were planning the project.
  • Taking the idea of incorporating and developing a simple board game, we decided instead of chess or any other traditional board games, we went with a game which was most commonly viewed to a college student. We thought it would be a drinking game. Expanding from Nova Jiang’s idea, we wanted the game to be more interactive and more developed by using sensors, LEDs, speakers to make the game so much simpler and easier to understand.
  • Other projects that I have looked online were all about the element of Art. Which I admired and thought were very inspiring, many of the interactive projects included a connection to the creation of art and creating an easier machine for audiences such as architectures, designers would use. However, I thought these types of projects might inhibit us from reaching our goal, which was simplicity and directs convey of messages. We wanted to keep the idea simple as well as the design simple in order for the audience to use this product in a complicated, noisy and dark environment.
  • All in all, the literature and the art aspect still had an impact on how I had created the product. The classic color of red and white was the design for our project because the iconic red cups defined the drinking cups and the white of how college parties would make the theme to be white and red. The concept and the design of the product were to keep the game relevant and simple to the surrounding.

Project Description:

  • At first, we decided to create a flip cup game with the design below.

  • However, we soon found out that in order for the LEDs to become relevant, we would need to separate the circuits to individual circuits since when we attach a long strip of conducting tape just like above, it would only mean that it would be one big circuit.
  • Next, we also wondered where the conductive tape should be placed, at the bottom of the cup, or above the cup. Thinking it through, we thought it would be inconvenient for the person to drink out of a rim of the cup with conductive tape around it, so we decided to put it in the bottom, where the tape is covered in order for an easier completion of the circuit.

  • The next idea we considered changing were the buttons. We came across the issue of having the press the button at the same time, which in result might lead to a less accurate interpretation of who wins the game. These buttons initially were used to measure time or when the button was pressed, and when all the LEDs lit up. But because of inaccurate play of who started first and who started late, we decided to change it into one button so that both sides are fair.

  • During the peer comments reviewed after the recitation, Professor Marcella proposed an idea of using conductive tape in order to complete the circuit. This was a great idea, and we decided to change the way we proposed the idea. Below is the changed design of the product, and below is a simple circuit drawn for each stationed cups.
  • Testing the simple circuit out, we tried to cover the bottom of a cup with the conductive tape and tested the circuit out. We came across a few problems of how the tape was connected to the wires, how there must be pressure put on the cup in order to complete the circuit. Also, we came across how important it is to see the positive and the negative side of the LED.

  • Below is the final product, and a video showing the three beeps that indicate the start of the game.

I then outlined the words to make them more defined and clear.

Below is the three beeps that indicate the start of the game.

Below is the LED lighting up.

Project Significance:

  • This project’s importance and the significance is for a clear communication and for the entertainment of college kids. In a surrounding that is dark, loud and chaotic, this product allows the audience to play a simple game of drinking and flipping a cup. Without any verbal communications required, just by the visual representation of the LEDs lit up, it conveys a message of success or failure of flipping a cup.
  • We hope that this project accomplishes and solves the problem of having to shout and be confused at certain times when you play a game with your friends. Through simple indications, people may enjoy their time and get competitive with the game.
  • The audience of this product is the college students who go out to bars, clubs or any environment to have fun and drink.
  • The audience is towards the college students because of the idea that college students like to party and go out and play drinking games. However, this does not limit to other audiences who like to play drinking games. But specifically, the design of this product, red – the red drink cups and white – normally the white roll papers, are indications of a classic college house party.

Project Design and Production:

  • While designing our product, we wanted this product to be carried around and taken to any place. We then decided to minimize the size of the box, which the best we can do was to shorten the box. We have considered shortening the size of the box itself, but since this game requires a certain amount of distance and space, it was difficult for us to solve that problem. Trying to make the product portable but also for the audience to enjoy and actually playing the game was pretty challenging.
  • The LED was used because it was a best form of indication in a dark, loud chaotic room. Just a simple form of light would attract the eye, and show whether the cup is successfully flipped or not.
  • During the user testing session, we initially wanted to use a pressure sensor to sense whether the cup was placed on the drinking plate or not. However we had discarded this idea since there was a need to create a form of pressure that the cup was placed, and the sensor wasn’t sensitive enough to catch the fact that the cup was flipped.

 

Conclusions:

  • Our goal for this project was to find a way for college students to enjoy a simple game of drinking without any need of verbal communication or confusion. I personally think that we were successful in doing so, since by the simple logic of the LED lit up, it show whether or not the cup is successfully flipped or not, therefore, it conveys a straightforward message of whether the round is lost or won. However many questions arises when people asked, “How would we know a team would have won?” this question could be simply answered by seeing all the 3 LEDs lit up. Keeping in mind a noisy and dark environment, a sound system may not be the best way to communicate whether the round was successful or not. This made us turn to visibile indications of whether the round was successful, which we thought of solving by using LEDs.
  • This product is a new and efficient way of playing the game, flip cup. It makes the game more easier and more efficient since without any other forms of communication, the game can be progressed.
/*
  Blink

  Turns an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO
  it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to
  the correct LED pin independent of which board is used.
  If you want to know what pin the on-board LED is connected to on your Arduino
  model, check the Technical Specs of your board at:
  https://www.arduino.cc/en/Main/Products

  modified 8 May 2014
  by Scott Fitzgerald
  modified 2 Sep 2016
  by Arturo Guadalupi
  modified 8 Sep 2016
  by Colby Newman

  This example code is in the public domain.

  http://www.arduino.cc/en/Tutorial/Blink
*/

#include"pitches.h"


// led# is the pin that the signal that the button is closed
int led1 = 10;
int led2 = 9;
int led3 = 8;
int led4 = 7;
int led5 = 6;
int led6 = 5;
int buttonPin = 2;

int speed = 90; //higher value, slower notes

int ButtonState = 0;
int LastButtonState;

const int buzzer = 13;

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTIN as an output.

  //yellow leds
  Serial.begin(9600);
  pinMode(led1, INPUT);
  pinMode(led2, INPUT);
  pinMode(led3, INPUT);

  //red leds 
  pinMode(led4, INPUT);
  pinMode(led5, INPUT);
  pinMode(led6, INPUT);


  //button pin 
  pinMode(buttonPin, INPUT);

  pinMode(buzzer, OUTPUT);

  
  
}

// the loop function runs over and over again forever
void loop() {
  ButtonState = digitalRead(buttonPin);
  Serial.println(ButtonState);
  Serial.print(LastButtonState);

  if (ButtonState == 1){

    noTone(buzzer);
    delay(100);
    
    tone(buzzer, 500);
    delay(70);

    noTone(buzzer);
    delay(1000);

    tone(buzzer, 500);
    delay(70);
    
    noTone(buzzer);
    delay(1000);

    tone(buzzer, 500);
    delay(1000);
    
    ButtonState = 0;
    }

  if (ButtonState == 0){
    noTone(buzzer);
    delay(10);
    }

  
}

Recitation Documentation #5 (Rudi) – HaEun Yoon

Introduction

Continuing from the group research project, in this recitation, we were supposed to make a visual 3-D representation of our project on TinkerCad. Which is what I did as shown below.

There were many versions I had in mind since I wanted to alter some things about the project that was discussed during the question time when we presented our idea in front of the class. I decided to go with the photo on the left since it showed that there would be different options that could be selected on the screen.

After, I used Adobe Illustrator to trace the 3-D figure and create a poster of it. I had to trace, choose what colors to show, expand and then ungroup so that I had to change the size or the figure of the 3-D model.

Lastly, I added a logo, other photos from freepik. The photo I used on freepik was done by the user “Evening_tao/Freepik”. Since this website’s photos were free for commercial use with attribution, I wanted to credit the creator.

Below is the final result. I wanted the poster to be clean and organized since it was for educational purposes and for an academic use.

Recitation Documentation #4 (Rudi) – HaEun Yoon

Introduction

For this recitation, we were supposed to create 3 types of circuits, 1st the stepper circuit, where the machine is automatically moving, 1 round clockwise and another round counterclockwise. 2nd, the same but with a motor knob attached to it so it is more interactive. The circuit is conducted as a person turns the knob to change the direction of the movement. Lastly, the 3rd circuit, which is arguably the same circuit as the two above, but combined with another person’s circuit in order to create a drawing machine. Below are more details.

Circuit 1

Materials: 1 stepper motor (42STH33-0404AC), 1 ic chip / Integrated Circuit (H-Bridge) (SN754410NE), 1 power jack, 1 power supply (12 VDC), 1 Arduino kit and the materials.

Above is the outline of the circuit.

During this exercise, we were supposed to know the direction of the H bridge by the indicating marks on it. The “U” shaped part of the H-bridge would have to be indicated for the wires to be connected together. If this process is not checked, then there is a chance that your computer might be permanently damaged.

Below is the successful trial.

Circuit 2

The Materials are the same as Circuit 1.

Circuit 2 contained the same elements as Circuit 1 but instead attached with a motor knob so that it can be turned.

Circuit 3

Materials: 2 of the final circuit 2. 2 small laser cut arms, 2 longer lasers cut arms, 1 laser cut motor holder, 3 3D printed motor coupling, 5 Paper Fastener

Questions

Question 1

I got this idea from the circuits that we were working in class. I was wondering when searching for a specific picture in Google or any type of search engine, and you don’t know what it is, it would be more efficient if the search engine could recognize the colors and the drawings done by the searcher to match them to a picture online.

Just by drawing sketches online, the program would recognize the outlines, colors and try to match them with an uploaded image already online in order for the searcher to get more information about what the picture represents.

Question 2

Waves by Daniel Palacios is a project that creates visual waves according to the type of sounds that they hear. If a viewer was to make different sounds, it would be able to catch on to the sound and project a sine wave that would be in motion. Compared to the work that we did in the recitation, it shows that it is similar since the way both projects create forms of art is the way a person would interact with it.

It would make sense that the way the artist used a sine wave refers back to the science of how sound is visible to us. The project took what was familiar to the audience and incorporate it to be visually different.

/*
 Stepper Motor Control - one revolution

 This program drives a unipolar or bipolar stepper motor.
 The motor is attached to digital pins 8 - 11 of the Arduino.

 The motor should revolve one revolution in one direction, then
 one revolution in the other direction.


 Created 11 Mar. 2007
 Modified 30 Nov. 2009
 by Tom Igoe

 */

#include <Stepper.h>

const int stepsPerRevolution = 200;  // change this to fit the number of steps per revolution
// for your motor

// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

void setup() {
  // set the speed at 60 rpm:
  myStepper.setSpeed(60);
  // initialize the serial port:
  Serial.begin(9600);
}

void loop() {
  // step one revolution  in one direction:
  Serial.println("clockwise");
  myStepper.step(stepsPerRevolution);
  delay(500);

  // step one revolution in the other direction:
  Serial.println("counterclockwise");
  myStepper.step(-stepsPerRevolution);
  delay(500);
}


/*
 * MotorKnob
 *
 * A stepper motor follows the turns of a potentiometer
 * (or other sensor) on analog input 0.
 *
 * http://www.arduino.cc/en/Reference/Stepper
 * This example code is in the public domain.
 */

#include <Stepper.h>

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

// 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);
}

void loop() {
  // get the sensor value
  int val = analogRead(0);

  // move a number of steps equal to the change in the
  // sensor reading
  stepper.step(val - previous);

  // remember the previous value of the sensor
  previous = val;
}