Recitation 8: Serial Communication, by Daniel

Instructor: Marcele 
 
This is a write up for Interaction Lab SP18 Recitation on Serial Communication on Apr 19, 2019. 
 

Piano 


 
 

Tracer 


 
 

Schematics 


scheme of circuits 
 

Source Code 


Please see Github
 

Thoughts on interactivity 


Tracer 

Let’s talk about the usability. The vertical knob was hard to control. My brains couldn’t control both knobs at the same time. This makes me appreciate the invention of mouse, track pads, and touch screen. 
It is also beneficial to reflect on the limitation of human control. Understanding what humans are good at is at the core of interface design. 
 

Piano 

This piano is hard to play. Especially when there is a long travel, it is hard to nail the next note. Overshooting and undershooting is frequent. This reminds me of a GUI design equation: 
Ease = button size / travel distance 
Real pianos don’t have this problem, because of haptic feedback. We know where our fingers are. We also feel the keys of the piano. Our hands are trained to interact with the physical world. A mouse is not quite there. 
This is also one of the problems our final project needs to solve. 

Preparatory Research and Analysis, by Daniel Chin

My previous definition of interaction was: 
Giving and receiving attention. 
My argument was, if something can be ignored by the user, even if it was useful, there was still no interaction with the user. 
 
Especially when I was writing the blog post regarding my midterm project, I realized the inconsistency between what Tristan and I made and my definition of interaction. The Laser Arcade was not so much about the attention between players and the machine, but rather, more about the attention between the two players. The game has its own noticeable and memorable characteristics, but the main experience is focused on competing with your friend. 
 
Hence, I expand my definition of interaction: 
A machine giving and receiving attention with human, or a machine helping humans give and receive attention. 
 
During the process of formulating the definition, I researched some claimed-interactive projects (mostly games). Here are two of them that I will talk about. 
 
Social Interaction Trainer is a flash game. It is creative regarding its input interface: you use your mouse to direct the protagonist’s gaze. No other input. The game explorers interesting things you can do with your gaze, under a story of a young man learning to do social interaction. 
However, I don’t think this game is interactive (even if is has “interaction” in its name). The game is creative, concise, meaningful, and fun to play, but does not give or receive attention. It is only as interactive as any ordinary game. 
 
You play Keep Talking with your voice. This game predates the popular scream-control games (YASUHATI and OHC) for many years. You move objects in the game by manipulating the loudness and pitch of your voice. Each object responds to your loudness and pitch in its own way. 
This game is closely related to the expansion of my definition of interaction. Keep Talking, back in 2006, was an innovative game that breaks the invisible boundary between people in the same room. For example, if you play this game in your house, your family will definitely notice your “singing”, and it will quickly turn into a familty experience. This lines up with my new definition. 

Recitation 7: Processing Animation, by Daniel Chin

Instructor: Marcele 
 
This is a write up for Interaction Lab SP18 Recitation on Processing Animation on Apr 12, 2019. 
 

 
 
 

What I learnt 


I learnt how to work with the PVector class. It was really convenient for what I was trying to do. 
 

Interesting thing 


From line 64 to line 73 of InkLeak.pde, I used Linear Algebra to smartly orient the special effect. It was such an enjoyable moment when I pieced together my half-unsure Math knowledge from high school, and see my program correctly automated. 

class Node {
  // mode code omitted
  public void orientWith(Node that) {
    PVector perpendi = new PVector(this.y - that.y, that.x - this.x);
    if (
      PVector.fromAngle(this.angle).dot(perpendi)
      * PVector.fromAngle(that.angle).dot(perpendi)
      < 0
    ) {
      this.angle += PI;
    }
  }
}
 
 
Yet another proof of the famous saying, “Math is power”. 
 

Source Code 


Homework 


static final float SPEED = .05;
static final float WEIGHT = .06;
float progress = 0f;

void setup() {
  size(600, 600);
  colorMode(HSB, 100);
  rectMode(CENTER);
}
void draw() {
  strokeWeight(WEIGHT);
  scale(width, height);
  background(0, 0, 100);
  progress += SPEED;
  float _size = (sin(progress) + 1f) * .3 + .15;
  stroke(int(progress * 30) % 100, 100, 100);
  PVector position = new PVector(mouseX / float(width), mouseY / float(height));
  float radius = _size / 2f + WEIGHT / 2f;
  if (position.x < radius) {
    position.x = radius;
  }
  if (position.x + radius > 1f) {
    position.x = 1f - radius;
  }
  if (position.y < radius) {
    position.y = radius;
  }
  if (position.y + radius > 1f) {
    position.y = 1f - radius;
  }
  rect(position.x, position.y, _size, _size);
  strokeWeight(.03);
  line(position.x, position.y, mouseX / float(width), mouseY / float(height));
}
 
 

Recitation creation 

I used two sketch files. 
InkLeak.pde is a library I wrote for an eariler lecture, see my Github
r7_interactive_animation.pde is the main code. The content is here: 

final int RADIUS = 66;
final float NOISE_MAG = .1f;
final float NOISE_SPEED = .02f;

float rotation = 0f;
float V = 4;
PVector pos;
float orient;
float noise_i = 0;
int echo_i = 0;
String echo_mode = "high";
Timer t;
int counter = 5;
boolean legacy = true;
boolean legacy_phase = false;

void setup() {
  size(713, 577);
  background(#233333);
  pos = new PVector(width/2, height/2);
  orient = PI / 4f;
  t = new Timer();
  background(255);
}

void draw() {
  strokeWeight(1);
  float target_rotation = new PVector(mouseX - width/2, mouseY - height/2).heading();
  if (target_rotation - rotation > PI) {
    rotation += PI*2f;
  } else if (rotation - target_rotation > PI) {
    rotation -= PI*2f;
  }
  rotation = rotation * .99 + target_rotation * .01;
  translate(width / 2, height / 2);
  rotate(rotation);
  scale(0.5);
  noise_i += NOISE_SPEED;
  orient += (noise(noise_i) - .5f) * NOISE_MAG;
  PVector v = PVector.fromAngle(orient);
  v.mult(V);
  pos.add(v);
  if (pos.x = width - RADIUS) {
    orient = PI - orient;
    pos.x = .95 * pos.x + .05 * (width/2);
    acc();
  }
  if (pos.y = height - RADIUS) {
    orient = - orient;
    pos.y = .95 * pos.y + .05 * (width/2);
    acc();
  }
  while (orient < 0) {
    orient += 2 * PI;
  }
  while (orient > PI * 2) {
    orient -= 2 * PI;
  }
  noStroke();
  fill(255);
  ellipse(pos.x, pos.y, RADIUS * 2, RADIUS * 2);
  stroke(#233333);
  if (legacy) {
    clsWithEcho();
  } else {
    echoClear(echo_mode);
  }
  /*while (t.spin(1000)) {
   counter --;
   text(str(counter), width/2, height/2);
   }*/
  stroke(255);
  strokeWeight(10);
  noFill();
  rect(0, 0, width, height);
}

void acc() {
  counter --;
  if (counter == 0) {
    switch (echo_mode) {
    case "low":
      echo_mode = "high";
      background(255);
      V = 4;
      counter = 5;
      break;
    case "high":
      echo_mode = "low";
      background(255);
      V = 7;
      counter = 9;
      break;
    }
    if (legacy_phase) {
      legacy = ! legacy;
      legacy_phase = false;
    } else {
      legacy_phase = true;
    }
  }
  if (counter % 2 == 0) {
    fill(#3EFFB6);
  } else {
    fill(#FFC0CB);
  }
  textSize(1300 * pow(2.718, float(-counter) / 2.5f));
  text(str(counter), width/2 - 128, height * .5);
}

final int ECHO = 20;
final int ECHO_MODE = 0;
int echoPhase = 0;
void clsWithEcho() {
  if (ECHO_MODE == 0) {
    int times = int(height / ECHO);
    int r;
    for (int i = 0; i < times; i ++) {
      r = int(random(height));
      line(0, r, width, r);
    }
  } else if (ECHO_MODE == 1) {
    echoPhase ++;
    if (echoPhase > ECHO) {
      echoPhase = 0;
    }
    for (int i = echoPhase; i < height; i += ECHO) {
      line(0, i, width, i);
    }
  } else if (ECHO_MODE == 2) {
    int times = int(height / ECHO);
    for (int i = 0; i < times; i ++) {
      line(int(random(width)), int(random(height)), int(random(width)), int(random(height)));
    }
  }
}
 

Laser Arcade – Daniel Chin – Marcela

Context and significance 


My previous research (Group Project) helped me define interaction, so that I create something interactive for the midterm. The projects and interactions I researched for the Group Project were: the Alexa Parasite, and the Smart Home Counterspy. 
 

Previous research, quoted from an earlier post 

Parasite of Alexa 

This project is a Man In Middle between Amazon Alexa and the user. It acts as a firewall, protecting the user’s privacy. The device sits on top of an Alexa, playing a random noise to the Alexa’s microphone. Only when the device hears the user speak specific wake words will it stop playing the random noise for a while. 
 
I think it is a good initiative, but not an interactive device. Its idea very well manifest social science principles like the Division of Power and Mutual Supervision. It protects privacy. However, The human uses it as a mere tool. The “encapsulation” is so good, the user may as well forget about the existence of the device! It is not a bad thing, just not interactive. 
 

Smart Home Counterspy Agent 

This project is a router for smart home devices. It displays the traffic of each smart home device with intuitive graphics. The purpose is to reveal to the user how much data their smart home devices upload every day. 
 
This one is interactive. The user feels they are actively protected. The device communicates with the user. Every time the user looks at it, the user can feel the amount of thought the device put into its job when the user was not around. That creates emotional sympathy. This is what I mean by “a dead thing making a living thing feel they are given attention. ” 
 

Conclusion 

And hence my definition of interaction formed: interaction is giving and receiving attention. 
 
Interaction with physical computing is: 
A dead thing making a living thing feel they are given attention.  
 

Significance of Laser Arcade 

 
Laser Arcade is a laser aiming game + drawing machine control. I think the later part distinguishes it from general laser aiming games (field CS, field PUBG…) in the following aspects: 
1. The drawing machine control is difficult to master, adding explorability and depth into the game. 
2. The drawing machine control is tricky, and gives frequent surprises to the players. This is emotionally engaging, and ensures a level playing field for beginners. 
3. The complexity and predictability of the control mechanism invites players to formalize their understanding of the control. That may inspire players to pursuit Engineering and Physics. 
 
I envision Laser Arcade to appear in arcades, for kids to play. It is fun, and it also inspire people to become Engineers, as mentioned above. 
 

Conception and design 


When we deigned Laser Arcade, because the idea was pretty simple and playable, we spent the most effort on ensuring the balance and competivity of the game. The way we understand our users to interact with Laser Arcade is for them to play it repetitively. Therefore, we designed a lot of details, such as placing the target in opposing directions for the two players, letting the target rotate, uncorrelating the rotation of the two targets, offsetting one player’s height to make sure there is no “safe zone” for either of the player to hide. We wanted to encourage aggressive game play and fast decision making. For the same reason, we set the winning animation to be very short, enabling players to rematch quickly, creating a game flow. 
 
Because we pursuit playability and competivity, we chose materials and forms that provided the best stability. For example. the V-nails that came with the drawing machines only fastened the drawing machine arms very loosely, and we were unsatisfied because the arms could shake uncontrollably. We replaced the V-nails with nuts and bolts for higher control precision. Also, we used rigorously supported 3D-printed frame structure to hold the servos, in order to minimize the deformation of the machine during game play. An alternative would be to use cardboard, which wouldn’t be as strong. 
3D model of skeleton 
photo of skeleton 
The result is a durable hardware: 

 
And a nicer overall appearance: 
 
 
We also pursuit a friendly control. For example, the potentiometer is small and hard to fiddle with. So we printed “handle V1”. 
photo of handle V1 
However, during user testing, a lot of players thought the potentiometer was a joystick! We realized: the model looked like a joystick. Marcela recommended us to change the shape, and here we did: 
model of handle V2 
photo of handle V2 
“handle V2”. It worked very well. 
 

Fabrication and production 


Tristan and I first made drafts on paper: 
some drafts 
some drafts 
some drafts 
 
And then we started 3D printing and coding. I used a python script to do serial communication with the two Arduino Unos. 
python script running 
 
Anti-noise technology is adopted for potentiometer input: 
code snippet 
 
I also created a communication protocol between two boards: 
photo of two Unos connected 
Diagram of two Unos connected 
 
During the user testing, many people asked: “What should my laser hit?” So we wrapped our light sensor with a bullseye: 
Diagram of two Unos connected 
It totally solved the mystery. 
 
Another player reported that the winning moment was too vague to tell and not cheerful enough. We want the winning moment to be “arcade-like”, playful, and extra. So we added a sound effect with a strong attack. 
Diagram of two Unos connected 
 
 
One of my favorite parts of Laser Arcade. 
 
Another player gave feedback that there is actually a “safe zone” on the right border of the play field. We fixed that by changing the target rotation range and skew it to the left. 
 
Here are our notes from User Testing: 
user testing notes 
user testing notes 
user testing notes 
 
 

Conclusions 


The goal of Laser Arcade is to provide a fun and competitive experience with drawing machine mechanism. I think that is pretty much achieved, since every player liked the game and wanted to try times after times. It was very fun for the creators, too. Even the creators did not get bored of playing it. I know that’s something rare. 
 
It also aligns well with my definition of interaction! The player definitely pays attention to Laser Arcade. In fact, the two players pay attention to each other, too. Tristan would argue that is more important. I agree. 
 
Ultimately, our audience treated Laser Arcade as a game. They tried to prevail in the game, and during that process, they have fun and bond with their friends. 
 
If we had more time, we would add win streak celebration and dynamic difficulty adjustment. 
 
From the failure of “handle V1”, we learnt the hard way what a “Norman Door” was: a design that tells you to do the opposite of what you are supposed to do. We learnt the value of user-oriented design. 
 
Our greatest accomplishment is the collaboration between us two. It worked super well. Many times, I face a design challenge I can’t solve, and I speak aloud, and Tristan provided creative solutions that would never have occurred to me. The same happens the other way too. There were frequent enlightenments. I learnt that when people from different backgrounds form a group they create surprising solutions. I cannot imagine how many more worthy interdisciplinary idea exchanges that we humans are not overtaking. 
 

So what? 


Not a lot of people will remember Laser Arcade. For those who do, I hope it was a fun experience to remember. 
 
For me, the creation of Laser Arcade connected some neurons in my head, and gave me many more ideas regarding interactive projects and performances. 
 
I do believe Laser Arcade is an idea that works. A more matured production can totally be adopted in parties, arcades, ice-breaking activities, inspirational education for kids, or in VR environments. The unique experience that Laser Arcade offer makes the above possible. 

Recitation 3: Sensors, by Daniel Chin

Instructor: Marcele 
Recitation partner: Linhui 
 
This is a write up for Interaction Lab SP18 Recitation on Sensors on Mar 1, 2019. 

Joystick controlling buzzer 


The X input of the joystick controls the pitch, and the Y input controls how fast it beeps. 
 
Our code: 
tone(10, x + 220, y); 
delay(y + 100); 
 
We referenced Analog Joystick and tone for help. 
 
Our interaction with it: 

 
 
The schematic: 
scheme of circuit 
 

Questions and my answers 


What did you intend to assemble in the recitation exercise? If your sensor/actuator combination were to be used for pragmatic purposes, who would use it, why would they use it, and how could it be used? 

 
I intended to try something I never tried before in the recitation. First, we decided to use the vibration sensor. Fascinated by it, I looked up how it worked. It was mind-widening. Then, we went for the joystick, since neither of us worked with one before. Soon we got readings from the joystick. Lastly, we tried to decide what output to use. Because joystick provides 2-dimensional input, we chose the buzzer, intending to make a Theremin-like instrument. Then we discovered that tone() cannot control the volume it plays, so we implemented periodic beeping. 
 
If your sensor/actuator combination were to be used for pragmatic purposes, the first image popping into my head is a weak patient using it to express their needs. They may be too weak to speak, and the traditional bell button only accepts yes/no input, so this little circuit could help. 
 

Code is often compared to following a recipe or tutorial. Why do you think that is? 

 
Because the CPU faithfully executes whatever we code it to. 
 
We prepare the “recipe” for the CPU. 
 

In Language of New Media, Manovich describes the influence of computers on new media. In what ways do you believe the computer influences our human behaviors? 

 
Computer changes how we create data and how we find data. 
 
I remember the time when Microsoft Word was not as powerful, and I would write down math formulas on paper and scan them into my Word document. However, now, I just alt + 3 to insert new formula and build my formula in Word. Notice how my feelings changed. Back in the days, I would feel frustrated to do formulas in Word, and writing formulas on paper felt much easier. On the contrary, now if I have a Word document open, I feel too lazy to grab any paper. Generally speaking, the process of how people create data is slowly migrating from the material world to the computer world. 
 
The same applies to how we find data. With the Internet and all the search engines available, we do not need to go to the library as often. My family love to debate on questions, including but not limited to Physics, Philosophy, Health, Life Living, etc. When we encounter something we feel uncertain about, we would inquire on the Internet. The tools we used upgraded from Baidu to Google, and to Google Scholar. 
 
Computer really changes our behaviors throughout the years.