Category: Interaction Lab

Posted on

Media Controller

Recitation

// 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.*;
PImage photo;

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(800,500);
  background(0);
  setupSerial();
  photo = loadImage("May.jpg");
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  image(photo, 0, 0, width, height);
  //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()[0], 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]);
        }
      }
    }
  }
}


// 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.*;
PImage photo;

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(800,500);
  background(0);
  setupSerial();
  photo = loadImage("May.jpg");
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  image(photo, 0, 0, width, height);
  //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()[0], 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]);
        }
      }
    }
  }
}

Reflection

I think my project was a low-level version of anything they discussed in Computer Vision for Artists and Designers. I feel like nothing compared to that because I just did one simple thing with an image. I think I should have done something with Capture if I wanted to get close to what they were doing.

Posted on

Serial Communication

Recitation


// 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 = digitalRead(13);
  /*int sensor2 = analogRead(A1);
  int sensor3 = analogRead(A2);*/

  // keep this format
  Serial.println(sensor1);
  Serial.println(sensor2);
  /*
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.print(",");
  Serial.print(sensor3);
  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);
}


// 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.*;
PImage photo;

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(800,500);
  background(0);
  setupSerial();
  photo = loadImage("May.jpg");
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  image(photo, 0, 0, width, height);
  //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()[0], 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]);
        }
      }
    }
  }
}

Reflection

Before I had only worked with Processing or Arduino separately, so this was an interesting level of interaction between the two programs that was very different than what I was used to. Most of the time, the only hardware I could use with Processing was the keyboard or the mouse, but in this case, I was able to use other things which was pretty cool. 

Posted on

Final Project: Final Blog Post (December 18, 2019) – Jackson McQueeney

Vocal Art – Jackson McQueeney – Marcela Godoy

CONCEPTION AND DESIGN:

After discussing our six ideas, my partner and I decided that “Vocal Art” would not only be the most realistic project to execute, but it would also best fit our definitions of interaction. The conception of this project was simple, especially in the way we foresaw users interacting with it. Since the main component of this project was a microphone, we decided that the physical aspect of the project should be an intuitively-designed microphone.

Additionally, we decided to add three potentiometers—each controlling one RGB color value—to add another layer of interactivity. Since the overarching project idea was rather simple, it had a rather simple design. We housed the microphone and potentiometers in a laser-cut wooden box, with basic instructions and its function etched into the box. We tried to connect my partner’s computer to a large TV screen in order to display the output to a large audience, but due to technical difficulties, we were not able to achieve this. At one point, we affixed a cardboard cone to the microphone in an attempt to better receive sound input, but the cone covered the instructions, so we ultimately removed it. One suggestion made after we finished and presented the project was to put colored caps on the potentiometers, each corresponding to the red, green, and blue values that they controlled, but since this suggestion was made after our final presentation, we could not implement it.


Potentiometers and buttons soldered for the circuit


Complete circuit before being housed


Two angles of the Arduino circuit housed in the box

Top of the wooden housing (Showing instructions, buttons, and potentiometers)

Video of the Processing code running after multiple microphone inputs

FABRICATION AND PRODUCTION:

After our initial conception and design phase, we built our project. The most significant steps of the process were constructing the Arduino circuit, writing the code for Arduino and Processing, and using digital fabrication to make components of our project. In the latter step, I believe the project could have been improved by elevating the microphone by fabricating a more appropriate housing and by including colored caps on the potentiometers.

Although I could not be present for the user testing session, my partner relayed to me some of the feedback that the project received. Two major aspects of the project were developed following this feedback, specifically placement of the output circles on the Processing screen and the use of potentiometers to control RGB values. From the feedback, we decided to make the placement of the circles random, and we incorporated potentiometers to control their RGB values. I believe that these changes were effective, since they added more dimensions of interactivity to the project, while keeping the overall concept simple and concise. 

CONCLUSIONS:

The broad goal of this project was to facilitate interaction between multiple users and the project. Specifically, the goal was to translate the users’ voices into a visual output that preserved outputs from previous uses after each subsequent use. Through this course and an ever-evolving definition of interaction, I currently define interaction as: “the communication between two or more organic or machine actors, facilitated by an interchange of inputs and outputs between actors”.

I believe that our project aligns with this definition in that it required the inputs of many human actors to achieve its full goal/effect in the form of its output in Processing. This translation from input to output was facilitated by the sound sensor in Arduino. This project does not align with my definition in that the inputs and outputs were not necessarily interchangeable, but I think that is a problem with my definition rather than a problem of the interactivity of the project. Based on this definitions and my expectation of the audience’s response, I believe that my audience interacted with the project in that they provided an input in the form of their voice, and the project generated an output based on the variable volume of each individual user, and I think that this form of interaction was exactly what my partner and I expected.

Based on audience feedback after our final presentation, I believe a few ergonomic/intuitive improvements could be made to the physical design of the project, had we more time. These include using a more sensitive microphone to pick up more nuanced volume differences between each user, elevating the box so that users do not have to bend over to speak into the microphone, using a different LED so that the color of the LED more accurately represented the color of the generated circles, and using colored caps for the potentiometers so that users could more easily determine their function.

One idea that I thought would be interesting (though difficult) to attempt would be to implement some sort of method to determine the user’s mood, and base the output on that rather than volume. Though this might be too advanced for our current ability, I think that our project could be improved by changing outputs based on pitch as well as volume, since pitch is easier to determine than mood.  With the completion of this project and course, I feel more confident in my coding abilities and my circuit-building abilities using Arduino. I think the most consequential outcome of this project was its simplicity. Many other projects, both during midterms and finals, had some big overarching moral message or attempted to solve some major global issue, ultimately losing some aspect of its interactivity. However, I believe our project was successful because it focused on the interactivity aspect.

Posted on

Functions and Arrays

Recitation Work

I forgot to record the individual steps, but here is the final part

float[] xX = {};
float[] yY = {};
int[] cC = {};

void setup()
{
  size(600, 600);
  rectMode(CENTER);
  /*for(int i = 0; i <100; i++)
  {
    displayVulgar(random(600), random(600), int(random(255)));
  }*/
  expand(xX,100);
  expand(yY,100);
  expand(cC,100);
  for(int i = 0; i <100; i++)
  {
    append(xX, random(600));
    append(yY, random(600));
    append(cC, int(random(255)));
    
  }
  
}

void draw()
{
  //for(int i = 0; i <xX.length-1; i++)
  //{
  //  displayVulgar(xX[i], yY[i], cC[i]);
  //}
  displayVulgar(random(600), random(600), int(random(255)));
      
}

void displayVulgar(float x, float y, color c)
{
  noStroke();
  fill(c);
  rect(x, y, 100, 100);
  rect(x+75, y+75, 25, 50);
  ellipse(x-75, y-75, 50, 50);
}

Questions

  1. If you place your for loop in setup, it will run the for loop through its iterations once, while in draw, it will run through the for loop an infinite number of times. 
  2. Arrays allow for better creation of individuals, I’m not sure I will use it for my final project, but I’m not sure yet. I think in the future, it will be easier for data storage, instead of just creating individual sprites. 
Posted on

Processing Animation

Recitation Work

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

void draw()
{
background(0);
rectMode(CENTER);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
if(mouseX >= 272 && mouseX <=328 && mouseY>= 320 && mouseY<= 376)
{
background(0);
stroke(0); //turn yellow square
fill(0);
rect(width/2, height/2+48, 56, 56);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);

}
if(mouseX >= 252 && mouseX <=348 && mouseY>= 292 && mouseY<= 388)
{
background(0);
stroke(0); //turn gray square
fill(0);
rect(width/2, height/2+40, 96, 96);
stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 232 && mouseX <=368 && mouseY>= 262 && mouseY<= 398)
{
background(0);
stroke(0); //turn blue square
fill(0);
rect(width/2, height/2+30, 136, 136);

stroke(0, 155, 47); //green
fill(0, 155, 47);
rect(width/2, height/2+20, 176, 176);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);
}
if(mouseX >= 212 && mouseX <=388 && mouseY>= 232 && mouseY<= 408)
{
stroke(0); //turn green square
fill(0);
rect(width/2, height/2+20, 176, 176);
stroke(62, 155, 203); //blue
fill(62, 155, 203);
rect(width/2, height/2+30, 136, 136);
stroke(207, 208, 209); //gray
fill(207, 208, 209);
rect(width/2, height/2+40, 96, 96);
stroke(245, 223, 20); //yellow
fill(245, 223, 20);
rect(width/2, height/2+48, 56, 56);

}
}

Additional Homework