For task1, I had to make a Etch-A-Sketch through Processing. To achieve this, I’ll send values of two potentiometers to Processing, where I used SerialRecord library.
To test whether the value has been send, I used ReceiveMultipleValues in the example of Processing for test. Values sent are displayed in the left corner.
In the next step, I modify the example so that the potentiometers can control a circle.
But to make it a Etch-A-Sketch, I had to draw lines. To achieve this, I drew multiple short lines, which appeared like dots, but became a line when connected together. New variables were created to record previous coordinates. In this task, I encountered problem that I can only draw a dot on the screen. Consulting the professor, I understand the background function in draw() will override each time it is called, so it should be put into setup.
import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;
float px;
float py;
voidsetup() {
size(500, 500);
String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
background(102);
// If the Arduino sketch sends a different number of values, modify the number// `2` on the next line to match the number of values that it sends.
serialRecord = new SerialRecord(this, serialPort, 2);
}
voiddraw() {
serialRecord.read();
int value1 = serialRecord.values[0];
int value2 = serialRecord.values[1];
float x = map(value1, 0, 1024, 0, width);
float y = map(value2, 0, 1024, 0, height);
stroke(255);
line(x, y, px, py);
px=x;
py=y;
}
The interaction is that Processing immediately respond to the change of potentiometers that are controlled by me. Therefore, it happens between me and the computer. However, it only gives visual feedback, which makes the communication rather weak.
In task2, we wanted to display a ball in Processing which bounces from left to right. Position of the ball is sent to Arduino, so that the servo motors on both sides move as if they hit the ball. The major problem was not in Processing, but in Arduino where the servo motors move randomly. Even though we set the boundaries in the if condition correctly, the problem still existed. Professor suggested we only send 0 or 1 to Arduino instead of the position of the ball, so that the condition is clearer.
Processing:
import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;
int x;
int add=10;
voidsetup(){
fullScreen();
String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 115200);
serialRecord = new SerialRecord(this, serialPort,1);
}
voiddraw(){
background(0);
fill(255);
stroke(0);
circle(x,height/2,50);
if (x>=width){
add=-add;
serialRecord.values[0]=0;
serialRecord.send();
} elseif (x<0){
add=-add;
serialRecord.values[0]=1;
serialRecord.send();
}
x=x+add;
}
Arduino:
#include <Servo.h>
#include "SerialRecord.h"
SerialRecord reader(1);
Servo myservo;
Servo myservo2;
int value;
voidsetup() {
// put your setup code here, to run once:
Serial.begin(115200);
myservo.attach(8);
myservo2.attach(7);
}
voidloop() {
// put your main code here, to run repeatedly:if (reader.read()){
value=reader[0];
if (value==0){
myservo.write(100);
delay(250);
myservo.write(0);
} elseif (value==1){
myservo2.write(100);
delay(250);
myservo2.write(0);
}
}
}
I didn’t stick the servo motors onto the computer, but I asked my teammate Hanwen Hu and Ricky to hold them. They also helped me to build up the circuit.
Considering the interaction, it happens within the computer itself, but it is really interesting. The audience can easily get the message.
Avoid the Trap is a two-player game that requires one player to set the trap among 10 options and the other have to avoid choosing the trap. When the player select one LED, a random LED other than the trap will also automatically go out. This mechanism is to make the game more difficult. In the second stage, a computer-controlled ghost will enter the game, which means it will choose a LED to be the trap. As you can see, the topic of this project is ‘game’. Different from my midterm project, it involves two players and a computer player, which is more innovative and interesting.
The idea comes from a children’s toy. It bites the player when he/she press the wrong teeth. My project changes the interaction between human, so that the audience can immersively play this game.
2. The Adaptive helmet:
This helmet not only just covers your head, but also it can adapt itself to the size of your head. I intend to make a button for the user to initialize the helmet or to turn off the helmet. More functions can be added to it, like playing music. This helmet appears pretty much like the one of iron man’s, but his is more superior.
The interaction happens between user and helmet. I want to give the audience a new horizon of what can happen in the future. Moreover, many other functions can be included, so the imagination is also spurred.
3. The Boundless Light:
This series of light will respond to the audience and change their color. Approching from different directions, the lights will display different colors. Besides, the more distant a light is, the less bright it will be. Through this, I believe the audience can have a fantastic and fariy-tale like experience. This idea originates from the “teamLab Borderless Shanghai”, where there is a room filled with lights working in similar pattern. But the brightness of the lights is modified my my project according to the distance, which seems more rational, and appears as if you are a light source.
In task1, I tested the Neopixel using the FastLED library, which makes the first LED blink. The circuit looks like this.
In task2, I need to use SerialRecord to send messages from Processing to Arduino. The function of the given code is to change the color of the Neopixel according to the coordinates of mouse.
The main part of the recitation was task3, where I first downloaded and tested a given code. It displayed a circle that changes according to the volume of the music. To add my own music, I had to transform mp3, the type of my downloaded music, into aiff, the acquired music type.
voidsetup() {
size(640, 480);
W = width/NUM;
// load and play a sound file in a loop
sample = new SoundFile(this, "Alan-Walker-Faded.aiff");
sample.loop();
You can actually see I add the soundfile of Faded. The modification was successful. Since the original code already display a visualization on computer, I just needed to focus on how to make the Neopixel produce the light. The code in task2 gave me inspirations. If it can make Neopixel shine when mouse is clicked, then I only need to change the variables to the volume of the music, so that not only the circle in Processing will change, but also the LED on Neopixel. There are 60 LED on Neopixel, so I need to reset them after it reaches the capacity.
After the Neopixel was done, I could consider modifying the visualization of Processing. I want to change the pattern displayed after a certain amount of time, but I won’t change the code before that point. Writing the code during refcitation would take much of the time, so I utilized the code from my IMA post. Adding the code to Processing, the final result looks like this.
import processing.sound.*;
import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;
int W; //width of the tilesint NUM = 60; //amount of pixelsint[] r = newint[NUM]; //red of each tileint[] g = newint[NUM]; //red of each tileint[] b = newint[NUM]; //red of each tileint i;
int m=1;
SoundFile sample;
Amplitude analysis;
voidsetup() {
size(640, 480);
W = width/NUM;
// load and play a sound file in a loop
sample = new SoundFile(this, "Alan-Walker-Faded.aiff");
sample.loop();
// create the Amplitude analysis object
analysis = new Amplitude(this);
// analyze the playing sound file
analysis.input(sample);
String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
serialRecord = new SerialRecord(this, serialPort, 4);
serialRecord.logToCanvas(false);
rectMode(CENTER);
}
voiddraw() {
//println(analysis.analyze());long t = millis();
background(125, 255, 125);
noStroke();
fill(255, 0, 150);
// analyze the audio for its volume levelfloat volume = analysis.analyze();
// volume is a number between 0.0 and 1.0// map the volume value to a useful scalefloat diameter = map(volume, 0, 1, 0, width);
// draw a circle based on the microphone amplitude (volume)circle(width/2, height/2, diameter);
println(t);
if (t>13000){
background(255);
//for(int m=0; m<width;m=m+noFill();
for (int j=-10; j< 10; j = j+1) {
stroke(50,82,234);
ellipse(width/2,height/2,m + j *30 ,m+j*30);
}
m=m+5;
if(m>=width){
m=-m-150;
}
}
if (i>60){
i=1;
for (int j=1;j<60;j=j+1){
serialRecord.values[0] = j; // which pixel we change (0-59)
serialRecord.values[1] = r[0]; // how much red (0-255)
serialRecord.values[2] = g[0]; // how much green (0-255)
serialRecord.values[3] = b[0]; // how much blue (0-255)
serialRecord.send();
}
}
light(i);
i=i+1;
}
void light(int i){
int n = floor(random(60));
r[n] = floor(random(255));
g[n] = floor(random(255));
b[n] = floor(random(255));
if (analysis.analyze()<0.3){
serialRecord.values[0]=i;
serialRecord.values[1]=r[n];
serialRecord.values[2]=g[n];
serialRecord.values[3]=b[n];
} elseif(analysis.analyze()>0.3 && analysis.analyze()<0.6){
serialRecord.values[0]=i;
serialRecord.values[1]=r[n];
serialRecord.values[2]=g[n];
serialRecord.values[3]=b[n];
} else{
serialRecord.values[0]=i;
serialRecord.values[1]=r[n];
serialRecord.values[2]=g[n];
serialRecord.values[3]=b[n];
}
serialRecord.send();
delay(50);
}
The first project I chose is “The Ascent” by xxxy, which is an automtic show-control system. It engages the player and audience into this levitating ride. For the players, they had to release thier desire and contend with themselves. I think the imaginative design and the engaging experience are what attracts me most.
The second project is “Mind the ‘Uuh'” by Benedikt Groß, Maik Groß and Thibault Durand. This clock-like device is aware of “uhh” fill words and gives signals. In contrast to the first one, it is rather simple, but useful, which is the reason why I chose it.
They both inform my work, but in different ways. “The Ascent” informs me that I should engage audience into this experience and be creative, while the second one pulls me back to reality, since it’s impossible for me build such artifact as a real artist, so functionality is also important. I once give the definition of interaction as “a conversation between two individuals (man or objects) that conveys messages with each other without limimtation”. Based on this and the research of the two projects, I realize to provide an interactive experience the involvment of the audience is vital.
Ernest Edmonds summarizes experience into three categories——“attracting”, a matter of dawing attention, “sustaining”, the process of retaining the that attention, and “relating”, development of a long time interest (12). In other words, the experience is about leading audience into my project maintain and further produce a long-time feeling. The role of the audience can’t be more obvious, because they are the ones that are experiencing my project. Whether my project is creative or pragmatic, these all serves for providing an unforgettable while long-lasting experience. Thus the key to an interactive experience is how to use there elements to produce involvment.
Work cited
Ernest Edmonds,Art, Interaction and Engagement, 2011, International Conference on Information Visualization(IV), pp.451-459
The post in recitation6 required us to make a fixed pattern that covers the whole screen. I got inspiration from the animation in the recitation instructions.
The circle in it goes from center to the border. To create my own post, I decided to make to circle goes back from border to the center, so that it appears more like a ripple.
As the circle moves, its color also changes according to the range. The text appears when the center is blank, so that the whole picture seems more filled. I encountered a problem when I want to generate multiple circles, then Professor suggested me using a for loop with a new variable ‘j’, which not only counts the time, but also change the radius.
To make it more interactive, I added a function to it that the color changes when the mouse is clicked. Besides, clicking different places will display different colors.
The mouseclicked function appears to be useful and interesting. It records the x coordinate of the mouse when it is clicked, so that the color can be changed. Through this function, I can do things more than just changing colors, for example, I have the thought of making a ripple in the place where mouse is clicked.
In recitation 5, we had to draw an image using Processing. The reason why I chose the picture above was that the main tower in it was made of blocks which means easy to drawn by Processing. Besides, I would like to try whether Processing can accomplish a picture as complex as this.
To draw the tower, I plan to break the top into small blocks and use curves to form the lower part. I decide to use rect() to draw the blocks above. I’ll use vertex to draw the ring around the tower and the lower part of it.
I first started drawing the sketch of it. Though I simplified the tower, I was still to complex for a beginner, so I decided to further reduce the blocks and curves during my composing process.
The final work looks like this. During the process, I had to record the coordinate of some important points for reducing my job. Despite that drawing the 3D blocks was still time-consuming.
I try my best to make it conforms to the original image, but I found using Processing to deal with details is challenging for beginners, which is what my drawing lacks. However, it does manifest the overall shape of the tower.
In conclusion, I think Processing can handle most of the sketches, but, as far as I’m concerned, it is not capable of drawings demanding various details due to the fussy and bald modification work. However, it is enough for my interaction design. After all, I’m not a professional artist.
My project was influenced by a book called “The Maze Runner”, where the maze in it can change its own structure. The maze in the book was designed for trapping and testing the protagonists, but viewing from another point, it can also be of great fun playing it. Besides, in my group project, the cleaning machine was intended to be more automatic, but ended up activated mannually, however, the performance turned out to be satisfying. Therefore, it gave me an idea that interaction should include the pyhsical movement of users. Inspired by the two thoughts above I came up with the maze that alters its level according to the time player uses for level 1.
I remembered playing a kind of maze that requires users to tilt to control the ball. My design can automatically change its level, so that users won’t be bored at it. I intend to warn people who are so busy working, studying or doing anything that forget to enjoy the pure fun. The sincere joy is especially vital for them.
Conception and design:
In my understanding, user have to actually touch the artifact to interact with it, so I design the maze to enable the user to hold and play with it, so the maze doesn’t need to be very big.
As for the maze, we had the idea of changing the walls of the maze to alter the leve, which is closer to the maze in the book. But this meant that more servo motors and programming were required, so instead, we decided to make a gate for directing users to different route.
The body of the maze can be made through cardboard. As for the sensors, we considered using pressure sensor, but we were afraid that the ball may be to light to be detected. After discussion with professor, we finally targeted light sensor, because it can be hide in the hole under the cheching point and changes its routes according to the ohms given. However, it was not the best option, because magnetic sensor can be more accurate, since the light sensor is easily affected by lights from surroundings. In the absence of a magnetic ball, we had to gave up magnetic sensor.
Fabrication and production:
During the process, my partner was responsible for the code, and my job was to build the maze. First, I had to carefully design the maze. Level 1 is rather easy, but since Level 2 has three routes, I had to balance the difficulty. The third route is a bonus route, which is open when your time is at a certain number. Designing was far from enough, measurement was inevitable when applying theory to practice, meaning that all the length of the walls needed reexamine. This was the most significant step. Because my work was doubled when I found out the thickness of the cardboard should also took into account, which meant that some of the original design wouldn’t work. What’s more, it turned out that I had to pinch them so as to make them thiner.
the original design looks much more difficultthe last edition
After finishing building, we assembled and tested the maze together——whether the ball could go through all the tunnels, and whether the checking point could send the ball into different routes. The latter one took us a long time, since the servo motors can only rotate 180 degrees, so for each route the degree rotated must be modified. In this phase, I told my partner the angle of the servo motor, then he modified the code. But it was still not enough for three routes, we struggled for a long time, then I came up with the idea of using two servo motors, so that one motor for the bonus route and one for the other two.
there was only one servo motor at firstwe added the second one later
During the user testing, we had to manually block the sensor to activate the gate, due to the lack of fabricating time. We recieved suggestions on the sensor, the start and end, and the reward when finished. To solve the problems, we hide the sensor in the hole of the checking points, which are sticked to the back of the maze. We wrote some words to indicate the start and the end. To signal one has finished the game, we added a buzzer to it. These adaptationsa are very effective, because their purpose is to make the experience smoother, so that the maze automatically operates.
The bonus route was not in my original idea, but I added it later. The reason is that I want the game to be more exciting. You see, I put in a second servo motor just because of it. In this perspective, I can say I really accomplish my goal.
Conclusion:
My project goal is to let users play with my maze and have fun. I once defined interaction as a conversation between two individuals (man or objects) that conveys messages with each other without limitation. In fact, I think in playing the maze, the users are pyhsically engaged in it. Many users during the user testing and final presentation played the maze and explored different routes. I think they get my message of having fun. Besides, they also interact with the maze, because it changes their route according to their time. Therefore, there is certainly interaction in it.
To improve the maze, I can make the walls more smooth by using other materails. Decoration can be considered to improve the outlook. More importantly is the start and the end, because I found most of the time users are unable to identify them.
In conclusion, the midterm project may be the most difficult and most insightful project I ever made. But the ultimate question returns to “So what?” and “Why should anybody care?”. To answering these questions, I also want to go back to the goal of my project——having fun. In this busy era, everyone is in a big competition with those around, which is a tendency called involution. But we all gradually forget the real fun of taking a rest and relaxing. I want to send out the message to those who play my maze.
Annex:
#include <Servo.h>
Servo myservo;
Servo yourservo;
int sensorValue1;
int sensorValue2;
int state=1;
Recitation4 requires us to build a circuit and mechanism with our partners.
Task1:
First, a circuit must be done to test the motor. Besides, a USB protector was used to protect our computers from possible damage.
According to the diagram above, we connected the parts together rapidly.
I suppose it is because we have got used to building circuits that we are able to finish the task in a short time without any error.
The video above shows how the circuit works.
Task2:
Before building the cardboard mechanism, we needed to cut the parts from a cardboard with template glued to it.
Some parts required a small hole for rivelts, since we forgot to bring our soldering irons, so we tried to pierce it with the box cutter, but, apparently, it was not suitable for this task. At last, we had to borrow a soldering iron from another group. The template indicated the usage of each part, so it was not hard to build the mechanism. By using a hot glue gun, those parts could be easily assembled.
The movement of the mechanism looks like this.
Task3:
Adding a small cardboard plane on top of the mechanism, it seemed that the plane was flying in the air.
Additional questions:
1.The Autotelematic Spider created by Ken Rinaldo and Matt Howard is a community of bionic robots that mimic the behavior of ants and spiders. They learn from the interactions with each other, communicating the recharge ports, which are their food. Apart from the mechanism I built in the recitation, this robot also requires sensors and communication units. In order to manifest the idea of interaction, the artist had to choose whether to interact with the audience of interact among the machines themselves. Apparently, Ken and Matt chose the latter one.
2.My midterm project is a self-leveling maze, in which I will use servo motors to build the mechanism. The maze changes it level according to the time used in Level1, through which the user is involved in an interaction between he/she and the project, experiencing the fun of various routes. Different from using an animation on a digital screen, the motor with a mechanism is more direct and allows the user to test and explore the project.
Inspired by a book called “The Maze Runner” where the maze in it actually changes its own structure, the self-leveling maze is a game that detects the time used for Level1, then directs the player to different routes in Level2 accordingly. In the book, the characters are trapped in the maze due to its self-changing ability, then, thinking in another angle, by utilizing the self-changing function, a single maze can offer the player countless experiences. It is a fun game suitable for players of all ages, where,players can indulge himself/herself in exploring various routes, interacting with himself/herself.
In the first meeting of group 4, we allocated all the ideas on the three fiction stories and came up with one that was applicable, which was the cleaning machine. In order to fulfill the criteria, we focused on how to make the machine as imaginative as possible. The washing machine for cars was a suitable prototype, so we added more on it’s basis, for example, the machine was supposed to contain more funtions rather than washing, disinfectioning and drying, but functions like putting minirobots into patient’s body would add up to our work, so we gave up.
We decided that one member needed to write a script about the project, and three people built the different parts of the machine. To be specific, I wrote the script, Wendy, Nomun and Daniel were assigned the later role. Furthermore, I was the doctor in the story, Jim was the patient and narrator, Wendy, Nomun and Daniel were the machine.
sketch of our designshower headUltraviolet lampdrier
This mahcine can be more interactive than we performed. I defined interation as “a conversation between two individuals (man or objects) that conveys messages with each other without limimtation” in the first step of group project. This machine involves interaction between patients and doctors——patients tell their health contidition to doctors before and after cleaning. Since we decide to make the machine a more general cleaning machine, patients don’t necessarily have to tell which disease they have.
Of course, this artifact we built has many flaws. One of the failures was that we intended to build a gate for the machine, but ended up using our own bodies to imitate the door, which looked really stupid. However, it turned out to be a good idea, because we could make the machine looked like as if it had AI in it, so thinking from another angle, it might also be one of the successes. We also failed to build more parts of the machine, limiting it to only three basic processes. But performing to much may be unacceptale for the audience, so it seems a wise choice.
The roles we need to play were determined after the script came out. No need to mention, I was the doctor in the story. Until the last second before performance, I was still fixing the script according to their suggestions. To be specific, we rehearsed the first draft together, which, from time to time, was interrupted by new ideas come from group members. For example, the part that I tested the positivity of the patients before and after cleaning wasn’t in the original test, actually, Wendy suggested I add it into the performance to make it more natural.
controller of the machinethermometer
To demonstrate this, I attached the controller and the thermometer built just before our performance.
This is how we worked together, from deciding the artifact to performing.
Below is the script, though we may have some improvisation, the overall plot is correct.
In the future, the plague that can turn human into stone swept the world. Among all the infected areas, section 11 is the worst. The Emergency Management headquarters try to gather all possible infected patients and test positivity, but first they need to go through a machine……
Staff: Good morning doc.
Doctor: Good morning. Have you organized today’s schedule.
Staff (pass the schedule): Sure, we have a few possible infected patients from section 11.
Doctor (looking at the schedule): Section 11…… A place of death. How did they possibly survive the plague?
Staff: Luck, I suppose.
Doctor: That make sense, but I believe in science. All right, bring them in.
(Operator1,2,3 starting the machine, patients in)
Patient: Hi, doc.d
Doctor: Hi, welcome to the front gate of Emergency Management headquarters, let me first test your positivity.
Doctor: Apparently, positive. Now you just need to go through the machine.
Patient: Can you save us doctor?
Doctor: Yes, and no. Why not ask yourself?
Patient: What do you mean?
Doctor: Don’t tell me you have no idea about section 11.
(Patient silence)
Doctor: Now hurry up and get the hell into that machine!
(Operators push patients into the machine)
(Patients slowly go through the gates)
(Patients perform to show how the machine works, use performance not words, but he can say like “I feel water coming down” to indicate the purpose of each gadget.)
Staff: All the procedures are finished, doc.
Doctor: Well, let’s test again.
Doctor: Congratulations, you are negative now.
Doctor: Excellent, bring the next crew in. We still got a lot to do.
Analysis on group6:
The project of group 6 is crime detecting glasses, which will alarm user when it spots a crime. The glasses also includes playback function, by clicking it, a virtual screen that shows how the crime happened will appear. This invention relates to the first fiction story “The Veldt”. In group 6’s clarification, in the story, the glasses can detect what crime the children want to commit, so that the parents won’t end up eaten by lions. I think their project relates to the story, since the backgrouds of it allows many virtual reality devices to exist and their project do make sense in the content. What is pity is that a glasses like that won’t necessarily exist in a normal family. Despite that, the project is also interative, in the way of alarming the user when dectecting a crime.
They imbeded the crime detecting function in glasses, but I may design a more inconspicuous device, like watch or earphone. The reason is that you want to make criminals focus less on it. For example, in group 6’s performance, students suddenly noticed that the teacher was wearing a crime detecting glasses, because he didn’t have myopia before. But if the device is a articles for daily uses, those students may drop their guard.
Nevertheless, they demonstrated how the glasses work compellingly, from the backgroud of the story to how the glasses spot the crime. Especially the part that they display the playback of the crime, I didn’t expect they would make a play window, which was creative and interesting. However, it wasn’t wise to add another character for giving and explaining the glasses, since it would make the plot look unnatural. For improvements, they can her a salesman on the teacher’s way home where he came up with the idea of buying a crime detecting glasses.
