Upon the announcement of the assignment, how I located the sound element to visualize stemmed from the inspirations during One Black Square and from the design methodology in Gestalt theory. It was fascinating to see how repetitiveness and similarity of different elements (shapes, letters, concrete objects etc.) could sophisticatedly constitute a design that not only creates a strong visual effect, but also conveys concept and meaning. In practice, I played around with these effects during One Black Square and typography exercise and I really enjoyed the process of designing from the ground up and place different visual elements to better illustrate my concept, even though the concept can be rather simplistic, like an illuminati sign or an eye shooting bright lights. Therefore, I aspired to continue and complicate the exploration process to create something that I personally view as an upgrade from my premature one black squares. The intention was to visualize a sound that is repetitive while never dull nor boring for the audience. I guess the motif for my design is to capture the excitement and delirium of repetitiveness and regularity.
I’ve always been fond of techno music, a genre usually considered to be an essential music element of underground culture and nightlife. This niche genre of music is composed on the basis of repetitiveness – at least from my point of view. However, the beats are very intense and almost furious. Typically, things that are repetitive and similar are considered boring and robotic, but techno music provides quite the contrast. And this is why the song I chose matches meticulously with my design motif – it only has eight lines of lyrics but the beats drop like a storm and the humming vocals surround the instrumentals create space for imagination.
Process
The first draft of my poster is rather simple. I wanted to create small elements I would like to incorporate in my final poster before putting them together to constitute a design. The main component of the poster is a large 3D circle (a Möbius circle) composed with different layers of letters. I imagined it as a DJ set that “shoots out” strong and busy beats and melodies. I also incorporated the shape of the “i” to recreate the flashlight in the club.
Personally I really liked the poster for mid-critique. I placed the main component – the Möbius circle in the center of the page and I dynamically combined the “flashlight” and the “dj set” for cohesion. Upon that I also added several lines of letters to represent parts of the song where changes occurred – in between the busy and intense choruses, there are several intervals that are calmer and quieter. However, I also aspired to add more to my poster – either by adding elements or repeat existing ones. The current one seems very empty and unbalanced. Therefore, I also came to the mid-critique session hoping to find advice on how to complicate my poster.
To further improve my design, I tried several approaches to repeat elements of the main circle and finally decided on the following design. I used them to represent repetitive waves of melodies and beats of the song that are floating in the imagined space.
Another big change is that I changed the background color in white. The new black background not only contrasts with the design elements more strongly, it also creates a sense of mystery and dark feeling, which aligns perfectly with the song – a dark dance anthem.
Mounting my work was probably the hardest part for me throughout the whole process, especially as someone who is most definitely not the strongest in handcrafting and paper cutting. The first challenge I encountered is the precision problem. Even though I measured very carefully, the lines always twisted around and strayed from the original path. The cutting also gave me a hard time because it was not easy to cut through the paper with one try, while multiple cuts could also make the sides very crusty. In the end I managed to make a decent, while not the most perfect, mounting to represent my poster.
Conclusion
Overall I’m satisfied with the final design of my poster. I think I used the letter elements smartly and they do symbolize my vision for the music I chose. Most of all, I think it was a fun result in my exploration of the Gestalt theory and the glamour of repetition.
If I had more time, as professor also recommended in the critique session, I would incorporate the letter element in the background. For instance, use the letter “T” in bold to construct a dark background instead of justing changing the background color. Besides, I would also redesign the “flashlight” element. Currently they are too simple. I might break it down with smaller letters and expand it to the edge of the dimension to reinforce the illuminating effect I want to emphasize.
We decided to explain the evolution of communication methods to the aliens. We want to emphasize on how technology advancement and societal changes shape the ways human communicate by including important milestones and highlights (new tools, better speed etc.) throughout human history.
The primary way of communication is via oral expression. It is a straightforward way for us human to exchange information and it became more important after written and spoken languages were constructed. It is also important to let aliens understand how our biological limitations and capabilities shape the way we communicate with one another. On the plaque, we wanted to use long lines to represent the “talking” process. As introduced in the book, aliens used long antennae to write. Therefore, we think it makes it easier for them to understand what we are trying to convey if we could borrow some of their communication elements and incorporate into our plaque.
The next component on the plaque sheds light on how humans overcome physical limitations to convey and exchange information. In ancient times, humans used pigeons as messengers due to their natural homing abilities for long-distance communications. The notes are tied to the birds’ legs and they are sent home with a message. This signifies the primal phase of remote communication that is rather time-consuming and unstable.
With the development of governance, communication systems were made possible. We included the postal system to signify how humans could also collaborate with one another, on the basis of social systems and constructs (governments, religion etc.) to facilitate the process of communications. However, the tool to communicate stays rather primal. Horses were the main way to transport these mails.
With the advent of electrical telegraph and the continued study of how sound is transmitted via the human voice, a more convenient method of communication emerged. This is a significant development in the evolution of communication methods because of the amount of time and resources saved on this important invention. Telephones made it easier for businesses to communicate with each other and as the network expands, the area one could reach is also expanded.
The eventual two devices represent the modern way of communication. Humans started to apply written and spoken language on devices (mobile phones, laptops) to communicate with one another. The communication system is more advanced compared with traditional dialing system and the possibilities of communication become almost limitless.
To build links among these different phases of communication, we used arrows. Even though it could be risky for aliens to understand that this signifies progress, it is a safe and easy way to represent the concept of evolution without overcomplicating the plaque.
To further simplify the threshold of understanding the plaque, we used a circular pattern to demonstrate the whole process as in the book aliens were accustomed to using circular shapes to write and comprehend texts.
How are the aliens’ language and communication style in the story different from human language (oral, pictographic, phonetic, etc.)?
Aliens’ language (seagram) is different from human language from various perspectives. First off, the overall structure of seagram comes in twofold based on the way of communication (speaking or writing). The aliens have developed two different set of languages in different expression scenarios. Unlike human language where we literally speak out the words that we write, seagram A and B are in parallel with each other.
Secondly, the written language of seagram is pictographic. As a “fully fledged general purpose graphical language”, seagram B is designed exclusively for writing purposes and the language is composed based on icons. The sentences look like a graphic design and every alteration in the overall design affects the ultimate expression of meanings. This is similar to the ancient Chinese language where written characters originate from the actual object (see the illustration below). However, a lot of human languages are not pictographic such as English, French, or Spanish. The expression of meanings are based upon separate letters.
Lastly, the logic of the seagram is different from human language that commonly uses a linear logic to convey information and express emotion. This is especially true for seagram B. When the aliens write down the graphics, they already know what is going to take place in the future, and writing down these words is simply a ritual to reach that imminent reality. So when they write down the words, there is no linear logic – verbs and subjects cling on the main word and expand in different directions to compose a sentence.
How does the physical structure of our body inform the way we communicate? How about the aliens?
Physical structure of our body dictates how our language is designed, constructed, and used in communication. The frequencies of sound we can hear and the capacity of our sound system limit the design of our spoken language. The logic of human thinking and comprehension abilities limit the design of our written language. In short, how we communicate embodies the limitations and capacities of our physical bodies. This is similar for aliens as well, even though they are more capable and potent in communications than us, they still design their language within their intelligence realm and physical capabilities. From my perspective, languages are tools. In one way or another, their very existence is to convey information and exchange it more efficiently. Therefore, language systems need to be designed in harmony with the physiology of the species.
When brainstorming ideas for the final project, one YouTube video called “The Button” came across my mind. In the show, a pool of romantic hopefuls speed date each other with a mysterious — and unpredictable — button on the table. And the goal was to see the perfect combination of players who have winning chemistry choose each other. I realized that I can incorporate Arduino and Processing in this concept and expands this concept to a broader level. So the concept of our project is to stimulate communication among people to get to know each other in a less awkward way by an easy pop quiz. To make it more fun and increase the suspense, we add a curtain to block the two participants. The curtain only opens when both parties press “yes”. The overall concept and the design of this project are by and large formulated from the feedback in class and the preparatory research on several artistic projects. For example, the inclusiveness of “the cloud” inspires me to create something that can reach a broader audience.
We did make some facilitations and special designs to better assist the communication among the participants. For example, we added a sad, moody, and romantic song to the quiz to create an atmosphere that imitates the dating situation. We also design the buttons in a way that the corresponding light on one side would illuminate according to the other person’s answer, so they can see each other’s answer simultaneously. We also make the whole aesthetic theme as pink and red. And we added some heart elements on the curtain.
During the user test session, we received a lot of useful feedback. The most common one was that the curtain is too slow, so it took some time for the final reveal. For that we were recommended that we can 3d print something that can be attached to the motor and change the texture of the string to make it faster. Based on that, I attempted to find some fabric and glue them around the motor thinking that it would help. However, the final version didn’t help that much and it became the biggest flaw of our project. Another feedback we received was that the quiz part is not long enough. It was because of our false assumption about the time. So we added more questions and some fun comments along the questions.
FABRICATION AND PRODUCTION:
Step 1: Sketching & Planning
The most important part for me is to come up with an easy and effective curtain structure that works fluently with the servo motors. After inquiring with the TAs, I borrowed some shooting equipments to sustain the curtain and hold the string. However, which fabric material to choose becomes another problem. I picked about 8 different fabric materials from fab lab and attached them on the structure to test out which one works the best. After picking the best material, another problem is that the curtain is not moved by the motor because of the lack of tension and friction.
To solve this problem, I tried to use the scroll wheels from fab lab, but the size didn’t fit. So I resort to another solution, which was to use fabric materials that have a strong grip to cover the motors, so it could move the string more powerfully. Another solution is to use 3d printing to design a scroll wheel that fits the servo motor. I didn’t take that option because we didn’t have that much time and I was personally a bad user of Tinkercad. But looking back from now, I realized that there were some misjudgments and this solution would’ve benefited our project a lot.
Step 2: Coding for interaction
The codes for making a servo motor work are relatively easy. But how to connect the servo motors with Processing has become a problem. If we want processing to send values to the stepper motor, we will have to connect it with our laptop, which would potentially fry our laptop. Therefore, we abandoned the plan of connecting the servo motor with processing.
Another problem is to increase the speed of the stepper motor. The maximum speed was identified through trial and error. Because when I set the steps too high, the motor would just vibrate crazily and doesn’t spin. Eventually, I found the best steps for a servo is around 300.
CONCLUSIONS:
The goal of our project is to provide an opportunity for hopefuls to get to know each other through a social interactive game that is entertaining and makes the whole communication easier. I think our project partially achieves our stated goal. The communication process is successful because of the button interactions and the fun questions. The curtain blocking each other’s view is also a good set up. However, one of the main parts of our project, which is to use the curtain to reveal each other’s face, didn’t work very well. The servo motors were not able to move the curtain in a reasonably speed while the quiz part does not make any connections with the servo motor parts. I think the reason behind this is that our initial project planning was not adequate enough. My partner and I focused on different parts without sufficient communication. So when we were trying to combine the two parts together, we had a hard time making them compatible with each other, which also wasted a lot of our time.
Ultimately, the participants understood the concept of our project easily. And the questions also led them to interact with each other. However, I think it would be more effective if we use eyepatches to cover their eyes before moving to the project so it felt more like a blind dating.
Our project aligns with the concept of interaction in several ways. First of all, the project is not solely based on the interactions between human and computer. The computation serves as a platform or a channel that encourages the two human participants to interact with each other. The quiz and the whole concept provide an incentive for both sides to make input for the system and actively get feedback from the project. Also, the continual answering of the questions require consistent feedback to them based on their input and eventually the influence of the interactions would last because of their new understanding of the other person.
If I had more time, I would definitely worked on the following parts:
1.Make the questions more fun and comprehensive. According to our user’s feedback, the questions were interesting but didn’t really help them to get to know each other. So if we could do more research on the questions, it will improve the quality of the communication.
2.Make the servo motors move faster by creating a scroller wheel.
3.Try to connect the servo motors with processing so the whole interaction process is consistent and logical.
4.Improve the aesthetics. Because we focused more on the fabrication and computation, the visual of our project is not really great. We only painted the title and made some hearts; we also covered the buttons with pink fabric. However, there is so much more we could do. For instance, we can get flowers and paint the whole curtain to boost the dating mood. We could also make changes to the music so it fits the communication process better.
After completing this project, the biggest takeaway for me is that a thorough and detailed planning before getting your hands on the project is very important. We rushed to the coding and fabrication without seriously planning the whole project. So eventually the lack of planning led to miscommunication and brought a lot of trouble to the final delivery of out project. I also learned that it is important to actively communicate with your partner. We’ve been working since the midterm project and I think we did a great job in communicating and dividing the work. Overall I think I’m glad that we deliver such a project that is originated from the desire for socializing and continues to help people communicate with each other through real interactions instead of mobile phone apps.
TECHNICAL DOCUMENTATION:
//FOR FINAL PRESENTATION//change fontimportprocessing.serial.*;importprocessing.sound.*;SoundFileromanticMusic;StringmyString=null;SerialmyPort;PFontf;//declare Pfont variableintWELCOME_STATE=0;intQUESTION_STATE=1;intRESULT_STATE=2;intMAX_QUESTIONS=10;intcurrentState=0;intnumOfQuestionsAnswered=0;intmatchingAnswers=0;floatpercentage;intsensorValues[]=newint[4];booleanpButtonsPressed[]=newboolean[4];booleanbuttonsPressed[]=newboolean[4];booleanbuttonsClicked[]=newboolean[4];booleanhasPlayerAnswered[]=newboolean[2];booleananswersToCurrentQuestion[]=newboolean[2];String[]questions={//"Welcome to Dynamic Dating! Press a button to continue :)", "Do you believe in astrology?\n[blue] yes \n[red]no","Do you believe in second chances?\n[blue] yes \n[red]no","Do you value personality over appearance?\n[blue] yes \n[red]no","Do you believe in reincarnation?\n[blue] yes \n[red]no","Do you believe in love at first sight?\n[blue] yes \n[red]no","Do you enjoy camping?\n[blue] yes \n[red]no","Do you consider yourself to be religious?\n[blue] yes \n[red]no","Do you want kids in the future?\n[blue] yes \n[red]no","Do you think education is important?\n[blue] yes \n[red]no","Do you drink coffee in the morning?\n[blue] yes \n[red]no","Do you enjoy working out?\n[blue] yes \n[red]no","Do you enjoy shopping?\n[blue] yes \n[red]no","Do you think beauty is subjective??\n[blue] yes \n[red]no","Do you think the environment is important?\n[blue] yes \n[red]no","Do you enjoy cooking?\n[blue] yes \n[red]no","Are you a night owl?\n[blue] yes \n[red]no","Would you consider yourself attractive?\n[blue] yes \n[red]no",//17"Do you like pineapple on pizza?\n[blue] yes \n[red]no","Do you get nervous on dates?\n[blue] yes \n[red]no","Would you move to a different country?\n[blue] yes \n[red]no",//20"Do you like tea more than coffee?\n[blue] yes \n[red]no","Are you a morning person?\n[blue] yes \n[red]no","Are you a night owl?\n[blue] yes \n[red]no","Do you enjoy learning new things?\n[blue] yes \n[red]no","Is Interaction Lab your favorite class ever ;)?\n[blue] yes \n[red]no","Do you believe in soulmates?\n[blue] yes \n[red]no","Do you like eating stinky tofu?\n[blue] yes \n[red]no","Do you consider yourself a spontaneous person?\n[blue] yes \n[red]no","Would you ever get plastic surgery?\n[blue] yes \n[red]no","Do you enjoy living in big cities?\n[blue] yes \n[red]no","Can you speak more than one language?"};intn;voidshuffle(){n=int(random(30));}voidsetup(){size(1200,800,P2D);println("Click: YELLOW BUTTON: Yes! RED BUTTON: No!");println(str(percentage)+"%");romanticMusic=newSoundFile(this,"FINNEAS - Let's Fall In Love For The Night (Official Audio).mp3");setupSerial();}voiddraw(){getSerialData();//printArray(sensorValues);PImagephoto;// newphoto=loadImage("background.jpg");// newimage(photo,0,0);// newpercentage=map(matchingAnswers,0,MAX_QUESTIONS,0,100);//background(250, 182, 182); // newf=createFont("Arial",20,true);textAlign(CENTER);textSize(30);text("Your Compatibility Score Is "+str(percentage)+"%",width/2,25);//textSize(15);if(sensorValues[0]==1){buttonsPressed[0]=true;}else{buttonsPressed[0]=false;sensorValues[0]=0;}if(sensorValues[1]==1){buttonsPressed[1]=true;}else{buttonsPressed[1]=false;sensorValues[1]=0;}if(sensorValues[2]==1){buttonsPressed[2]=true;}else{buttonsPressed[2]=false;sensorValues[2]=0;}if(sensorValues[3]==1){buttonsPressed[3]=true;}else{buttonsPressed[3]=false;sensorValues[3]=0;}for(inti=0;i<4;i++){//buttonsPressed[i]=(sensorValues[i]>100);buttonsClicked[i]=!pButtonsPressed[i]&&buttonsPressed[i];}//WELCOME STATE!!!//calculating the stateif(currentState==WELCOME_STATE){if(!romanticMusic.isPlaying())romanticMusic.play();//plays musictextAlign(CENTER);textSize(25);text("Welcome to Dynamic Dating! Click a button to continue :)",600,200);for(inti=0;i<4;i++){if(buttonsClicked[i]){currentState=QUESTION_STATE;break;}}}elseif(currentState==QUESTION_STATE){text(questions[n],width/2,height/2);if(buttonsClicked[0]){answersToCurrentQuestion[0]=true;hasPlayerAnswered[0]=true;println("player 1 has answered yes");}if(buttonsClicked[1]){answersToCurrentQuestion[0]=false;hasPlayerAnswered[0]=true;println("player 1 has answered no");}if(buttonsClicked[2]){answersToCurrentQuestion[1]=true;hasPlayerAnswered[1]=true;println("player 2 has answered yes");}if(buttonsClicked[3]){answersToCurrentQuestion[1]=false;hasPlayerAnswered[1]=true;println("player 2 has answered no");}if(hasPlayerAnswered[0]&&hasPlayerAnswered[1]){println("both player 1 and 2 have answered");shuffle();if(answersToCurrentQuestion[0]==answersToCurrentQuestion[1]){matchingAnswers+=1;println("answer matched");}numOfQuestionsAnswered+=1;println(numOfQuestionsAnswered,"questions now");hasPlayerAnswered[0]=false;hasPlayerAnswered[1]=false;//changeCurrentQuestion(); if(numOfQuestionsAnswered>=MAX_QUESTIONS){currentState=RESULT_STATE;//text("Do you want you to see your date?",width/2,height/2);//calculateResult();println("max questions");}}}elseif(currentState==RESULT_STATE){textAlign(CENTER);text("Now, that you've taken the test ... Do you want to see your date?",width/2,height/2);for(inti=0;i<4;i++){if(buttonsClicked[i]){//text("date?", width/2, height/2);delay(7000);//resetData();break;}}}//acting upon the stateelseif(currentState==WELCOME_STATE){textAlign(LEFT);//text("Welcome!!!", width, height);}elseif(currentState==QUESTION_STATE){textAlign(LEFT);textSize(30);text("5 questions from love...see your date's answers light up!",width/5,height/4);}elseif(currentState==RESULT_STATE){textAlign(LEFT);//text("Now that you've taken the test, do you want to see your date?", width/5, height/4);}text(currentState,1000,1000);//current state in numerical valuefor(inti=0;i<4;i++){pButtonsPressed[i]=buttonsPressed[i];}}//void resetData () {// //reset values;// matchingAnswers = 0;// numofQuestionsAnswered[0]=false;// hasPlayerAnswered [1] = false;// answersToCurrentQuestion[0] = false;// answersToCurrentQuestion[1] = false;//}voidsetupSerial(){printArray(Serial.list());myPort=newSerial(this,Serial.list()[4],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 ASCIImyString=null;sensorValues=newint[4];}voidgetSerialData(){while(myPort.available()>0){myString=myPort.readStringUntil(10);// 10 = '\n' Linefeed in ASCIIif(myString!=null){String[]serialInArray=split(trim(myString),",");if(serialInArray.length==4){for(inti=0;i<serialInArray.length;i++){sensorValues[i]=int(serialInArray[i]);}}}}}
// IMA NYU Shanghai// Interaction Lab#include<Stepper.h>#defineSTEPS100Stepperstepper(STEPS,8,9,10,11);//intprevious=0;/** This example is to send multiple values from Processing to Arduino. You can find the Processing example file in the same folder which works with this Arduino file. **/#defineNUM_OF_VALUES1/** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **//** DO NOT REMOVE THESE **/inttempValue=0;intvalueIndex=0;/* This is the array of values storing the data from Processing. */intvalues[NUM_OF_VALUES];voidsetup(){//Serial.begin(9600);// pinMode(13, OUTPUT);stepper.setSpeed(60);}voidloop(){getSerialData();if(values[0]==1){// Servo1.write(0);}if(values[0]==0){stepper.step(0);// Servo2.write(0);}// add your code here using elements in the values array//this is an example/* if (values[0] == 1) { //turn on an LED when the mouse is pressed digitalWrite(13, HIGH); // map values from mouseX to frequency from (0 - 500 pixels) //to the output pitch range (120 - 1500Hz) int f = map(values[1], 0, 500, 120, 1500); // map values from mouseY to frequency from (0 - 500 pixels) //to the output duration range (10 - 2000 milliseconds) int d = map(values[2], 0, 500, 10, 2000); // play the pitch: tone(8, values[1], values[2]); delay(1); // delay in between reads for stability } else { digitalWrite(13, LOW); } *///end of example}//receive serial data from ProcessingvoidgetSerialData(){while(Serial.available()){charc=Serial.read();//switch - case checks the value of the variable in the switch function//in this case, the char c, then runs one of the cases that fit the value of the variable//for more information, visit the reference page: https://www.arduino.cc/en/Reference/SwitchCaseswitch(c){//if the char c from Processing is a number between 0 and 9case'0'...'9'://save the value of char c to tempValue//but simultaneously rearrange the existing values saved in tempValue//for the digits received through char c to remain coherent//if this does not make sense and would like to know more, send an email to me!tempValue=tempValue*10+c-'0';break;//if the char c from Processing is a comma//indicating that the following values of char c is for the next element in the values arraycase',':values[valueIndex]=tempValue;//reset tempValue valuetempValue=0;//increment valuesIndex by 1valueIndex++;break;//if the char c from Processing is character 'n'//which signals that it is the end of datacase'\n'://save the tempValue//this will b the last element in the values arrayvalues[valueIndex]=tempValue;//reset tempValue and valueIndex values//to clear out the values array for the next round of readings from ProcessingtempValue=0;valueIndex=0;break;}}}
For part 1, I used a potentiometer to control the speed of the video of a cat. The overall process is simple, one thing noteworthy is when to use the map function to adjust the value sent to processing and make it work better.
Processing code:
// 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.*;
import processing.video.*;
Movie myMovie;
int NUM_OF_VALUES = 1; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int sensorValues[]; /** this array stores values from Arduino **/String myString = null;
Serial myPort;
voidsetup() {
size(1000, 1000);
background(0);
setupSerial();
myMovie = new Movie(this, "屏幕录制 2021-04-30 上午11.52.15.mp4");
myMovie.loop();
}
void movieEvent(Movie movie) {
myMovie.read();
}
voiddraw() {
getSerialData();
printArray(sensorValues);
image(myMovie, 0, 0);
float newSpeed = map(sensorValues[0],0,1023,0,2);
myMovie.speed(newSpeed);
// use the values like this!// sensorValues[0] // add your code//
}
void setupSerial() {
printArray(Serial.list());
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.
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 = newint[NUM_OF_VALUES];
}
void getSerialData() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCIIif (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 Code:
// IMA NYU Shanghai// Interaction Lab// For sending multiple values from Arduino to Processingvoidsetup(){Serial.begin(9600);}voidloop(){// to send values to Processing assign the values you want to send//this is an exampleintsensor1=analogRead(A1);// send the values keeping this formatSerial.println(sensor1);delay(100);// end of example sending values}
Video:
Part ii: Processing to Arduino
In this part I used the example of amplitude and volume for sound media. The motor would not move when the amplitude and volume falls into a “normal” range. By normal I mean the song is played at an understandable speed and pitch. The motor would move only if the volume and pitch are too high. The value of volume and pitch is determined by the position of the mouse when clicking the stage.
This process is definitely harder than the first one. The main problem is that every time I click, the song starts again and adds another layer to the whole sound. I solved this problem by adding a boolean value.
Arduino Code:
// IMA NYU Shanghai// Interaction Lab#include<Servo.h>ServoServo1;//intleftPin=6;/** This example is to send multiple values from Processing to Arduino. You can find the Processing example file in the same folder which works with this Arduino file. **/#defineNUM_OF_VALUES1/** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **//** DO NOT REMOVE THESE **/inttempValue=0;intvalueIndex=0;/* This is the array of values storing the data from Processing. */intvalues[NUM_OF_VALUES];voidsetup(){Serial.begin(9600);pinMode(6,OUTPUT);Servo1.attach(leftPin);}voidloop(){getSerialData();if(values[0]==1){Servo1.write(45);delay(1000);Servo1.write(0);delay(1000);}elseServo1.write(0);}// add your code here using elements in the values arra//receive serial data from ProcessingvoidgetSerialData(){while(Serial.available()){charc=Serial.read();//switch - case checks the value of the variable in the switch function//in this case, the char c, then runs one of the cases that fit the value of the variable//for more information, visit the reference page: https://www.arduino.cc/en/Reference/SwitchCaseswitch(c){//if the char c from Processing is a number between 0 and 9case'0'...'9'://save the value of char c to tempValue//but simultaneously rearrange the existing values saved in tempValue//for the digits received through char c to remain coherent//if this does not make sense and would like to know more, send an email to me!tempValue=tempValue*10+c-'0';break;//if the char c from Processing is a comma//indicating that the following values of char c is for the next element in the values arraycase',':values[valueIndex]=tempValue;//reset tempValue valuetempValue=0;//increment valuesIndex by 1valueIndex++;break;//if the char c from Processing is character 'n'//which signals that it is the end of datacase'\n'://save the tempValue//this will b the last element in the values arrayvalues[valueIndex]=tempValue;//reset tempValue and valueIndex values//to clear out the values array for the next round of readings from ProcessingtempValue=0;valueIndex=0;break;}}}
Processing Code:
// IMA NYU Shanghai// Interaction Lab/** * This example is to send multiple values from Processing to Arduino. * You can find the arduino example file in the same folder which works with this Processing file. * Please note that the echoSerialData function asks Arduino to send the data saved in the values array * to check if it is receiving the correct bytes. **/import processing.sound.*;
import processing.serial.*;
SoundFile sound;
boolean playing=false;
int NUM_OF_VALUES = 1; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int values[] = newint[NUM_OF_VALUES]; /** this array stores values you might want to send to Arduino **/
Serial myPort;
String myString;
float pitch;
float vol;
float duration;
voidsetup() {
size(600,600);
background(0);
setupSerial();
sound = new SoundFile(this, "videoplayback.mp3");
}
voidmouseClicked() {
// when the mouse is clicked// use mouseX to determine the pitch// toward left is lower pitched, toward the right is higher pitched
pitch = map(mouseX, 0, width, 0.1, 5);
// use mouseY to determine the volume// toward the top is louder volume, toward the bottom is softer volume
vol = map(mouseY, 0, height, 0, 1);
// set the playback rate for the soundfile
sound.rate(pitch);
// set the amplitude for the soundfile
sound.amp(vol);
if (playing==false){
sound.play();
// play the sound once, with pitch and amplitude
playing=true;
}
// can also be written with parameters for the play() method// sound.play(pitch, vol);
}
voiddraw() {
if (duration==222){
playing=false;
}
background(0);
//println(pitch + "," + vol);if ( pitch > 2.5 || vol>0.5) {
values[0]=1;
} else {
values[0]=0;
}
sendSerialData();
}
void setupSerial() {
printArray(Serial.list());
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.
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;
}
void sendSerialData() {
String data = "";
for (int i=0; i<values.length; i++) {
data += values[i];
//if i is less than the index number of the last element in the values arrayif (i < values.length-1) {
data += ","; // add splitter character "," between each values element
}
//if it is the last element in the values arrayelse {
data += "\n"; // add the end of data character linefeed "\n"
}
}
//write to Arduino
myPort.write(data);
print(data); // this prints to the console the values going to arduino
}
Video:
Reflection:
In part 1, the basic technology supporting the whole project is the computing system for processing and Arduino. They are able to receive values from basic interactions like the user rotating the potentiometer, and eventually send the value to control the play speed of the video. Processing is also capable of analyzing the index of the imported video, such as its resolution, speed and duration.
In part ii, similarly, technology is used to detect the values of imported sound flies and build the communication bridge between the two computing systems.
// IMA NYU Shanghai// Interaction Lab// For sending multiple values from Arduino to Processingvoidsetup(){Serial.begin(9600);}voidloop(){// to send values to Processing assign the values you want to send//this is an exampleintsensor1=analogRead(A0);intsensor2=analogRead(A1);// send the values keeping this formatSerial.print(sensor1);Serial.print(",");// put comma between sensor valuesSerial.print(sensor2);Serial.println();// too fast communication might cause some latency in Processing// this delay resolves the issue.delay(10);// end of example sending values}
Processing Coding:
// 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.*;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int sensorValues[]; /** this array stores values from Arduino **/String myString = null;
Serial myPort;
voidsetup() {
size(1000, 1000);
background(0);
setupSerial();
}
voiddraw() {
getSerialData();
printArray(sensorValues);
circle(sensorValues[0],sensorValues[1],50);
// add your code//
}
void setupSerial() {
printArray(Serial.list());
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.
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 = newint[NUM_OF_VALUES];
}
void getSerialData() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCIIif (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]);
}
}
}
}
}
Schematic:
Capture:
Exercise 1-2:
Arduino Coding:
// IMA NYU Shanghai// Interaction Lab// For sending multiple values from Arduino to Processingvoidsetup(){Serial.begin(9600);}voidloop(){// to send values to Processing assign the values you want to send//this is an exampleintsensor1=analogRead(A0);intsensor2=analogRead(A1);// send the values keeping this formatSerial.print(sensor1);Serial.print(",");// put comma between sensor valuesSerial.print(sensor2);Serial.println();// too fast communication might cause some latency in Processing// this delay resolves the issue.delay(10);// end of example sending values}
Processing Coding:
// 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.*;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int sensorValues[]; /** this array stores values from Arduino **/int prevX=0;
int prevY=0;
String myString = null;
Serial myPort;
voidsetup() {
size(1000, 1000);
background(0);
setupSerial();
}
voiddraw() {
getSerialData();
printArray(sensorValues);
stroke(50);
strokeWeight(20);
line(prevX,prevY,sensorValues[0],sensorValues[1]);
prevX=sensorValues[0];
prevY=sensorValues[1];
// add your code//
}
void setupSerial() {
printArray(Serial.list());
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.
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 = newint[NUM_OF_VALUES];
}
void getSerialData() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCIIif (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]);
}
}
}
}
}
Schematic:
Capture:
In this exercise, the user acts as an artist who can draw on processing by manipulating the two potentiometers (the painting brush). By varying the shape of the brush (circle/line), the user can create different graphic design.
Exercise 2:
Arduino Coding:
// IMA NYU Shanghai// Interaction Lab#include<Servo.h>ServoServo1;ServoServo2;//intleftPin=6;intrightPin=9;/** This example is to send multiple values from Processing to Arduino. You can find the Processing example file in the same folder which works with this Arduino file. **/#defineNUM_OF_VALUES2/** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **//** DO NOT REMOVE THESE **/inttempValue=0;intvalueIndex=0;/* This is the array of values storing the data from Processing. */intvalues[NUM_OF_VALUES];voidsetup(){Serial.begin(9600);pinMode(13,OUTPUT);Servo1.attach(leftPin);Servo2.attach(rightPin);}voidloop(){getSerialData();if(values[0]==1){Servo1.write(45);delay(100);Servo1.write(0);}if(values[1]==1){Servo2.write(45);delay(100);Servo2.write(0);}// add your code here using elements in the values array//this is an example/* if (values[0] == 1) { //turn on an LED when the mouse is pressed digitalWrite(13, HIGH); // map values from mouseX to frequency from (0 - 500 pixels) //to the output pitch range (120 - 1500Hz) int f = map(values[1], 0, 500, 120, 1500); // map values from mouseY to frequency from (0 - 500 pixels) //to the output duration range (10 - 2000 milliseconds) int d = map(values[2], 0, 500, 10, 2000); // play the pitch: tone(8, values[1], values[2]); delay(1); // delay in between reads for stability } else { digitalWrite(13, LOW); } *///end of example}//receive serial data from ProcessingvoidgetSerialData(){while(Serial.available()){charc=Serial.read();//switch - case checks the value of the variable in the switch function//in this case, the char c, then runs one of the cases that fit the value of the variable//for more information, visit the reference page: https://www.arduino.cc/en/Reference/SwitchCaseswitch(c){//if the char c from Processing is a number between 0 and 9case'0'...'9'://save the value of char c to tempValue//but simultaneously rearrange the existing values saved in tempValue//for the digits received through char c to remain coherent//if this does not make sense and would like to know more, send an email to me!tempValue=tempValue*10+c-'0';break;//if the char c from Processing is a comma//indicating that the following values of char c is for the next element in the values arraycase',':values[valueIndex]=tempValue;//reset tempValue valuetempValue=0;//increment valuesIndex by 1valueIndex++;break;//if the char c from Processing is character 'n'//which signals that it is the end of datacase'\n'://save the tempValue//this will b the last element in the values arrayvalues[valueIndex]=tempValue;//reset tempValue and valueIndex values//to clear out the values array for the next round of readings from ProcessingtempValue=0;valueIndex=0;break;}}}
Processing Coding:
// IMA NYU Shanghai// Interaction Lab/** * This example is to send multiple values from Processing to Arduino. * You can find the arduino example file in the same folder which works with this Processing file. * Please note that the echoSerialData function asks Arduino to send the data saved in the values array * to check if it is receiving the correct bytes. **/import processing.serial.*;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int values[] = newint[NUM_OF_VALUES]; /** this array stores values you might want to send to Arduino **/
Serial myPort;
String myString;
int xpos = 25;
int ypos = 250;
int xspeed = 3;
voidsetup() {
size(500, 500);
background(0);
setupSerial();
}
voiddraw() {
background(200,28,193);
fill(0);
circle(xpos, ypos, 50);
xpos = xpos+xspeed;
// set the values to change the servo motor if you ball hits the edge of the screenif(xpos < 25){
values[0] = 1;
} else {
values[0] = 0;
}
if(xpos > width-25){
values[1] = 1;
}
else{
values[1] = 0;
}
// bounce the ballif(xpos < 0 || xpos > width) {
xspeed = -xspeed;
}
// give values to the variables you want to send here//change the code according to your project//for example:/* if (mousePressed) { values[0] = 1; } else { values[0] = 0; } values[1] = mouseX; values[2] = mouseY; *///end of example// send the values to Arduino.
sendSerialData();
}
void setupSerial() {
printArray(Serial.list());
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.
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;
}
void sendSerialData() {
String data = "";
for (int i=0; i<values.length; i++) {
data += values[i];
if (i < values.length-1) {
data += ",";
}
//if it is the last element in the values arrayelse {
data += "\n"; // add the end of data character linefeed "\n"
}
}
//write to Arduino
myPort.write(data);
print(data); // this prints to the console the values going to arduino
}
Capture:
Schematic:
In this exercise, the user interacts with the ball by controlling the servo motors. But the interaction doesn’t require users’ input since we have already align the ball’s position with the movement of the motor.
Additional Homework
Arduino Coding:
// IMA NYU Shanghai// Interaction Lab// For sending multiple values from Arduino to Processingintdo_we_displayA=0;intdo_we_displayB=0;intprevious_buttonA=0;intprevious_buttonB=0;voidsetup(){Serial.begin(9600);pinMode(2,INPUT);}voidloop(){intbuttonA=digitalRead(6);if(buttonA==1&&previous_buttonA==0){// button went from released to helddo_we_displayA=1-do_we_displayA;}//anothershapeintbuttonB=digitalRead(9);if(buttonB==1&&previous_buttonB==0){//1pressesdown//0notpress// button went from released to helddo_we_displayB=1-do_we_displayB;}previous_buttonA=buttonA;previous_buttonB=buttonB;// send the values keeping this formatSerial.print(do_we_displayA);Serial.print(",");// put comma between sensor valuesSerial.print(do_we_displayB);// Serial.print(","); // put comma between sensor values// 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);// end of example sending values}
Processing Coding:
// 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.*;
int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/int sensorValues[]; /** this array stores values from Arduino **/String myString = null;
Serial myPort;
voidsetup() {
size(500, 500);
background(0);
setupSerial();
}
voiddraw() {
getSerialData();
printArray(sensorValues);
// use the values like this!// sensorValues[0] background(0);
// add your codeif (sensorValues[0] ==1) {
pushMatrix();
translate(width*0.3, height*0.3);
rotate(frameCount/100.0);
star(0, 0, 30, 70, 5);
popMatrix();
}
if (sensorValues [1]==1) {
pushMatrix();
translate(width*0.7, height*0.7);
rotate(frameCount/100.0);
star(0, 0, 80, 100, 40);
popMatrix();
}
}
void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
void setupSerial() {
printArray(Serial.list());
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.
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 = newint[NUM_OF_VALUES];
}
void getSerialData() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = '\n' Linefeed in ASCIIif (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]);
}
}
}
}
}
Capture:
Schematic:
In this exercise, the user interacts with the graphic design by clicking the push buttons. It could make the star appear or disappear.
float []xpos =newfloat [100];
float []ypos=newfloat [100];
voidsetup() {
size(800, 800);
background(255,239,222);
for (int i=0;i<xpos.length;i++){
xpos[i]=random(width);
ypos[i]=random(height);
}
}
voiddraw() {
background(255,239,222);
for (int i=0;i<xpos.length;i++){
iceCream(xpos[i], ypos[i], color(random(255), random(255), random(255)),color(random(255),random(255),random(255)),color(random(255),random(255),random(255)));
}}
void iceCream(float x, float y, color c,color d, color e) {
fill(c);
triangle(x, y, x+random(40),y,x+random(20),y+random(80));
noStroke();
fill(d);
circle(x+20,y-15,50);
fill(e);
noStroke();
circle(x+20,y-30,45);
}
Similar to what I did in the previous recitation, I used Array function to store the data.
Step 3: Adding Individual Movement
Code:
float []xpos =newfloat [100];
float []ypos=newfloat [100];
color []icecolor1=newcolor [100];
color []icecolor2=newcolor [100];
color []icecolor3=newcolor [100];
int speed=10;
voidsetup() {
size(800, 800);
for (int i=0; i<xpos.length; i++) {
xpos[i]=random(width);
ypos[i]=random(height);
icecolor1[i]= color(random(255),random(255),random(255));
icecolor2[i]= color(random(255),random(255),random(255));
icecolor3[i]= color(random(255),random(255),random(255));
}
}
voiddraw() {
background(255, 239, 222);
for (int i=0; i<xpos.length; i++) {
iceCream(xpos[i], ypos[i],icecolor1[i],icecolor2[i],icecolor3[i]);
if (xpos[i]>width/2){
ypos[i]+=speed;
}
if (xpos[i]<width/2){
ypos[i]-=speed;
}
if (ypos[i] >height){
speed=-speed;
}}}
void iceCream(float x, float y,color col1, color col2, color col3) {
fill(col1);
triangle(x, y, x+40, y, x+20, y+80);
noStroke();
fill(col2);
circle(x+20, y-15, 50);
fill(col3);
noStroke();
circle(x+20, y-30, 45);
}
Screen Recording:
To add individual movements, I used the variable speed and if function to make half side of the icecream moves up and the other half goes down. They would eventually come back to the screen but they would keep bouncing and twitching.
Question: What is the benefit of using arrays? How might you use arrays in a potential project?
I think the biggest benefit of using arrays is that it considerably condenses codes and saves a huge amount of time. Besides, I think it makes it easier for us to arrange the data types and make variations to the code. I could definitely see the significance of this function when we connect Processing and Arduino together. I would create several variables and make each of them change in different directions and colors to make an aesthetic artistic project that can vary according to the viewer’s positions and movements.
As one of the loyal audience of a YouTube show called “The Button”, I’ve been very interested in the concept of speed dating and how the experience of social activities like dating can be reconstructed and improved by technology. Me and my partner Alyanna did some research on the similar interactive artifacts but few of them are focused on dating, while most of the dating apps are screen-based. With Arduino and Processing, it would be possible to design and create a dating installation that encourage people to engage in this activity, make dating less awkward, and thus improve the success rate. Furthermore, as more and more people attach great importance to how good-looking the other person is in dating, “Dynamic Dating” provides a chance to let people who are looking for partners or hoping to meet more people re-focus on the inner qualities of their date by offering a personal, interactive and amusing experience.
PROJECT PLAN
Step 1: Brainstorming (April 20)
Based off of the general idea and concept we have, me and my partner will have a 30-minute discussion to specify how we would like this installation to look like in terms of the aesthetics and the professional techniques applied. During the brainstorm discussion, we finalized on the idea of using Arduino and Processing to invent something that improves the dating experience and make it more interesting.
Step 11: Research (April 20-April 25)
This stage would require sufficient research on interactive projects and dating applications that already exist. It is also important to research on different functions of Processing and Arduino so the requirement of the final product would not be out of our league. It would also be great to talk with a professor or friends who have such experiences to ask about their advice.
After sufficient research, me and my partner would meet again to sketch out the original project and specify how each part would look like. We would also divide the work and schedule the time slots to meet in the next few weeks.
Step 1v: Prototype (April 27)
In this step we will make a really simple and crusty model to test out if this idea would work. For example, we can have one button and one screen connected to the Processing and make one question pop up when the button is pressed. We can also make several adjustment after prototyping.
Step v: Making it (before May 7)
Dive into the ocean of codes and wires, and make everything work!
Step v1: User Testing (May 7)
Let users test out “Dynamic Dating” 1.o and carefully write down the feedbacks and suggestions. After the session, we will make several adjustments according to the feedback.
Step v11: Final Version
Invite friends to play with the final version of “Dynamic Dating” and have fun!
CONTEXT AND SIGNIFICANCE
One significant feedback of our midterm project is that it is too small for the viewers to interact with. So this time we intend to make something big, and let the participants take the lead of the interaction. I was truly fascinated about the nervous structure project because of the aesthetics of the interaction and its glamour to attract the audience immediately. Combine this mindset of something big and something interesting together with my obsession with dating shows, we decided to create an installation that encourages people to interact with each other in a more sincere and fun way. We will have several buttons, two screens, and a curtain that block the two participants’ faces. They will be asked different questions and they will be able to share their answers and talk more about it. There would be bizarre sounds effects and lighting effects to make it less awkward. This installation requires constant, neutral, and unpredictable feedback from both sides and it is entertaining enough for participants to engage with it.
The potential of this project is also great. It could be expanded in term of numbers of participants, variations of questions asked and sub-activities involved. The concept can also be extended to a game show or just another household game. Furthermore, this could also be used for schools and companies during social events like an ice-breaking session or orientation.
The insight drawn from this project is to find the potential of how interactions between the computing devices can help artists create art in a more efficient and easier way, which is inspired by an in-class video that shows how a tech company created a glasses for incapable artists to create graffiti. This project aims to provide a real-time working option for artists to free their creativity and provoke their imagination. This incentive is achieved by using Processing as the canvas to draw the artwork, and using Arduino to control brush to paint on a real paper according to what is portrayed on the canvas. For instance, users can draw a circle with preferred size, shape and color on the canvas using the Mouse, and the brush remote can automatically draw the expanded version of the circle on the paper hung on the wall.
PROJECT TITIE: GALAXY
PROJECT STATEMENT OF PURPOSE
During my research, the project CLOUD inspires me to create something that is aesthetic and also informative. This project aims at creating a hand-made galaxy with planets and stars made by waste that is produced on everyday campus life. The interaction lies in the illumination of the stars. Users can go under the galaxy and try to illuminate them by controlling the pull string attached to each planet. They can also customize the color of the planet using Processing (which could be a bit tricky to accomplish). This project helps the participants to understand how waste can be recycled and raise awareness of waste management that should be paid attention to for every individual.
PROJECT TITIE: Adventure Time!
PROJECT STATEMENT OF PURPOSE:
This project is inspired by Mario games. It is an entertaining game that is based on the cartoon, adventure time. We will set up different tasks like jump up the brick, avoid the monster, and shoot the blockers for the players to accomplish. The starting page and the winning/losing page is displayed with Processing and once the game is initiated, it will be real-life interactions between the player and Arduino related setups. There will be a wide range of sensors, arcade buttons, and other components applied and it is going to take up a relatively big space to operate the game.
The general rundown of the game is like this: The little doll controlled by a handle can go up and down. The player needs to make it avoid the monsters that are likely to pop up out of a box, avoid the blockers, and eventually go up the stairs to collect the flag. By clicking restart or end game, the player would also be able to move the doll back to the starting point.
PROJECT TITIE: Speed (Blind) Dating
PROJECT STATEMENT OF PURPOSE:
This is inspired by a YouTube channel called the button where players are asked questions by a robot and by communication, if one of the two players feel bored, they can click the button and the other player is evicted. Then the next player can replace him/her and keep the game going until neither of the two players push the button. This can be achieved by using Arduino to lift up/down a board that blocks both players. And before meet up both players need to complete a survey on Processing about their basic information like zodiac signs. If both of them are interested, they can click “start talking”, and the board would go down. If one of them click the button, they will need to leave and let the next player come up. It is a social interactive game that is entertaining and good for making friends!
voidsetup() {
size(800, 800);
}
voiddraw() {
background(255,239,222);
for(int x=40; x<=width; x+=100) {
for(int y=80; y<=height; y+=200) {
iceCream(x, y, color(229, 208, 191),color(243,160,189),color(255));
}
}
}
void iceCream(float x, float y, color c,color d, color e) {
fill(c);
triangle(x, y, x+40,y,x+20,y+80);
noStroke();
fill(d);
circle(x+20,y-15,50);
fill(e);
noStroke();
circle(x+20,y-30,45);
}
Screenshot:
Comments:
For step 1, I created a grid based on the size and number of the ice-cream and adjusted the code accordingly. I think it would save me a lot of time if I start from creating my design before creating the grid.
Part 2: Custom Pattern
Code:
voidsetup() {
size(800, 800);
background(255,239,222);
}
voiddraw() {
}
void iceCream(float x, float y, color c,color d, color e) {
fill(c);
triangle(x, y, x+40,y,x+20,y+80);
noStroke();
fill(d);
circle(x+20,y-15,50);
fill(e);
noStroke();
circle(x+20,y-30,45);
}
voidmousePressed(){
iceCream(mouseX, mouseY, color(229, 208, 191),color(243,160,189),color(255));
}
voidkeyPressed(){
println(key);
if (key == ' '){
background(255,239,222);
}
}
Screen Recording:
Comments:
For this part I simply added two functions, mouthpressed and keypressed to achieve the requirement. It took some time for me to realize how to incorporate mouthPressed function with the icecream function.
Part 3:Random Pattern
Code:
float []xpos =newfloat [100];
float []ypos=newfloat [100];
voidsetup() {
size(800, 800);
background(255,239,222);
for (int i=0;i<xpos.length;i++){
xpos[i]=random(width);
ypos[i]=random(height);
}
}
voiddraw() {
background(255,239,222);
for (int i=0;i<xpos.length;i++){
iceCream(xpos[i], ypos[i], color(random(255), random(255), random(255)),color(random(255),random(255),random(255)),color(random(255),random(255),random(255)));
}}
void iceCream(float x, float y, color c,color d, color e) {
fill(c);
triangle(x, y, x+random(40),y,x+random(20),y+random(80));
noStroke();
fill(d);
circle(x+20,y-15,50);
fill(e);
noStroke();
circle(x+20,y-30,45);
}
Screen Recording:
Comments:
During the recitation I didn’t figure out how to display the ice cream 100 times on the screen. But after Tuesday’s class I find out that using the array function, this goal can also be achieved.
Questions & Answers:
In the reading “Art, Interaction and Engagement” by Ernest Edmonds, he identifies four situations in an interactive artwork: ‘Static’, ‘Dynamic-Passive’, ‘Dynamic-Interactive’ and ‘Dynamic-Interactive(Varying)’. From the exercise you did today which situations you identify in every part you executed? Explain.
The first step where I designed an ice cream and arranged it in a grid pattern is static because there is basically no interaction from the users’ side and there is no variations triggered by the users; The second step where I created a sticker function is the dynamic-interactive situation because the user can trigger the interaction by clicking their mouse and empty the canvas by pressing space. The very last step is a dynamic-interactive(Varying) situation where the size and the color of the ice-cream is also affected by the processing function as it randomly selects the size and color of the ice-cream.
In today’s exercises you designed something that allows humans to interact with technology. How do you think that you can re-design what you did today, using Processing and Arduino, to allow humans to interact with humans through technology? Explain.
I think a lot can be achieved when we combine Arduino and Processing together. For instance, we can create a game with four players where they are placed at the four corners of the grid. They can also use a grid to control their own characters. Together they need to figure out how to let their characters get out of this ice-cream grid puzzle. I think this is a good way to encourage human interactions.
If you had to connect what you did in Part 2 today with Arduino, what sensor(s) would you use to replace the mouse? Why? How do you think this or these sensors will increase the degree of interaction or make the interaction more meaningful?
For example, we can create a platform with arcade buttons in designated places where the user can press the button and an ice-cream pops up on the screen according to the relative position of the button on the platform. Or we can use the temperature sensor to sense the heat of the environment, and the hotter it is, the more ice-creams pop up on the screen. Or we can use a pressure sensor. The harder the user squeeze the sensor, the bigger the ice-cream ball is. I think these sensors can help construct connections between human interactions and the variations of the design on Processing. For example, the pressure sensor converts the extent of the strength to the size of the ice-cream, which illustrates the power index in a more fun and vivid way.
and I really enjoyed the process of designing from the ground up and place different visual elements to better illustrate my concept, even though the concept can be rather simplistic, like an illuminati sign or an eye shooting bright lights. Therefore, I aspired to continue and complicate the exploration process to create something that I personally view as an upgrade from my premature one black squares. The intention was to visualize a sound that is repetitive while never dull nor boring for the audience. I guess the motif for my design is to capture the excitement and delirium of repetitiveness and regularity.
![Arrival Explained [Video Essay]⏤ Villeneuve's Balance of Fear & Intrigue](https://s.studiobinder.com/wp-content/uploads/2010/03/Arrival-Video-Essay-How-to-Balance-Fear-and-Intrigue-WP.jpg)
Similar to what I did in the previous recitation, I used Array function to store the data.
