Recitation 9: Serial Communication (Leon)

Recitation 9: Serial Communication

Date: 12/16/2018

Instructor: Leon & Yang

In today’s recitation, we were asked to use Arduino to send two values to Processing via serial communication. To build a sketch that works like Etch A Sketch.

For this exercise, I built a circuit with two potentiometers first. And wrote a very simple code in Arduino to read the two analog values from potentiometers. My code in Arduino looks like this:

void setup() {

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




Then I built a sketch in Processing. Firstly I imported the values from Arduino. And then I created the ellipses which change positions according to the values from Arduino. My code looks like this:


import processing.serial.*;

String myString = null;
Serial myPort;


int Val = 2;
int[] sensorValues;
int[] oldValues;


void setup() {
size(1000, 1000);


void draw() {






void setupSerial() {
myPort = new Serial(this, Serial.list()[ 7 ], 9600);


myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
myString = null;

sensorValues = new int[Val];


void updateSerial() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
if (myString != null) {
String[] serialInArray = split(trim(myString), “,”);
if (serialInArray.length ==Val) {
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);


And the sketch works like this:


I didn’t get to the second exercise.

Final Project Documentation (Leon)

Jannie Zhou


Final Project Essay

Speed Button

James Chou & Jannie Zhou

Project Title:

Speed Button



Our purpose is to create a two-player game which is engaging and entertaining, and more importantly, interactive.

At first, we want to create a game which could make the two players interact with each other thus achieving the purpose of bringing people together. But then our ideas shift a little to create a two-player game that is engaging because we came up with a better idea of a competing two-player game. Our targeted audience is for all.



Our inspiration first came from an art exhibition by a Japanese artist Godai Sahara titled A Gift From Someone Who Wishes to Cry but Hardly Ever Does. When I was standing in the space the artist created I can feel how lonely and desperate he is. So I want to create a game to make the users interact with each other to “cure loneliness”.

(“A Gift From Someone Who Wishes to Cry but Hardly Ever Does”, Godai Sahara)

After discussing with my partner, we came to the idea of creating an engaging and entertaining two-player game. Then we thought of the game called 1-2 switch. We found the idea interesting so we used a similar concept: only obey the instructions on the screen when the background is green, but do the opposite when the background is red. Because the brain can be fooled by the instincts sometimes, we think the concept would be entertaining and engaging.

(Game “1-2 Switch”)





We discussed the plan first. We thought it would be good to keep the physical part simple and clear. So we thought of using buttons. Originally we wanted to use the buttons in the studio. We tried  them out:


But then we found that these buttons are too small to make a good game. So we bought some arcade buttons from Taobao and applied them to our project.

(New Buttons)

The Arduino part is very simple. It’s just reading the digital inputs from the buttons and send them to processing. So my Arduino code looks like this:

(Arduino Code)


When we were connecting the buttons to the circuit, we learned that we need to connect resistors to the buttons to make them work correctly. We did a pull-up button so that the default value is 1. And when you press it the value becomes 0.

And originally our buttons could light up. Though the lights are very fancy, Leon says it’s too distractive. We wanted to do something with the lights at first, like doing a demo using these lights or use the lights to trick people. But unfortunately, during soldering, we broke 2 of the lights. So we decided to cut all the lights.

(Testing Buttons)




I started my processing with creating the start page and the basic pages. I learned how to use the Font function and how to use the PImage function. I insert an array of the text and import the array of values from Arduino.

And I set the background and text random.

(Processing Prototype)


During user testing, we got some feedback. Like add some instant feedbacks when pressing the buttons, and subtract the scores when pressing the wrong button. And make the ranking at the last page.

Then I started to improve our project.

First is with the sounds. I add the sounds when pressing the buttons. The sounds are actually from another game that my mom used to be obsessed with. I remember myself thinking how cute the sounds are, so I found them online and put them to our project. And following my partner’s suggestion, I add the kahoot music as the background music. It will speed up after a few seconds to make people feel stressed.


When playing the sound in processing I actually met some problem. I learned that processing cannot play mp3 music and I learned how to use SoundFile function.

Then I did the scoring system. This is where I encountered the biggest problem. I wrote the code that is logically right. But when running it it didn’t turn out the way it should be. I asked Leon and Nick and other students for help. They all couldn’t figure out where went wrong. After multiple attempts and trying various ways to debug, I asked Dave for help. Then we found out the error is where to put the color changing function. I learned that the logic of your code is very important. Although when writing it, you make every endeavor to make it valid. However, when actually running it, you are very likely to run into problems. When encountered with errors, you need to be patient and start to debug part by part. Comment out the rest which you are not focusing on right now and examine closely the part you are focusing on. Remember to obey the logic of processing.

This is what Leon told me to make my code with structure:

And I add the last page with the ranking. I set the time limit as well. I used the frameCount to set the time.

(Final Page)

Also, I learned how to use boolean. It is very memorable because when I learned boolean in the class I actually have no idea what this is. Not to mention how to use it. But in the code, I did use 4 or 5 booleans. So I really learned a lot by doing this project.

After finishing the major part of my project, I invited some people to test our game:

In this user testing, I got feedback saying that we should add some animations on the screen to show who got the scores. I found the feedback very valueable but I didn’t get enough time to try this out. If I have more time in the future I will definitely do so.

In this user testing I adjusted the time period of our project. Not too long for people to feel boring or too short to make people don’t even know what is going on.

After this user testing, I changed the starting page. I add one more page before the game begins to make the instructions clearer.

And this is the final user testing which I am very satisfied with:

They are very engaged in this game and found the game interesting. (YASSSSSSSSSS!!!)



The fabrication part was mostly done by my partner. We used laser cutting to create a box to store the circuit. We design some arrow patterns to represent our game.



(Laser Cutting)

And the final box looks like this:



Future Development if Possible:

Firstly, as I mentioned above, I want to add more animations to create more visual effects. I think this is very easy to do with all these knowledge we have learned during class. It’s just I didn’t have enough time to do this.

Then I want to use the lights on the buttons. I want to use them to trick the users to make the game more engaging and difficult. Because when seeing lights on the buttons, people will subconsciously want to press them.

And I want to make the instructions clearer, maybe by creating a demo video or use the lights for instructions.



I put a lot of time and energy into making this final project and I learned a lot. I really cherish the process of making it. From not knowing what to do to having a rough idea. From knowing the idea to making prototypes. From drafts to the final project. We have come through a long way. And I am extremely grateful for this experience. Working with my partner, learning to code by myself online, discussing the problems with the fellows and instructors, adapting ideas from other users, and improving the project little by little.



Recitation 10: Making a Media Controller (León)

Date: 11/30/2018

In this week’s recitation, we were asked to create a physical controller in Arduino to control media in Processing sketch. I chose a potentiometer as the physical controller. And I created a Processing sketch which captures camera videos and changes the brightness of it. I use the potentiometer to change the brightness of it.

It is basically a serial communication with just one single value. And it worked out like this:


The technology was used in my project in the way just as in the Suicide Box. We both used cameras to capture videos and it counts the details. I used println function to print out the potentiometer numbers. So in a way it is “counting”.


Project Title


Project Statement of Purpose *

Our project is intended for stressed out people nowadays to chill. We have discovered that striking things can relieve your stress. And cracking things visually is a fun way to interact with the computer. We did some research on Google and then formed this decision. We seek to face the challenge that the fast-paced lives today’s society bring, and we target at all audiences. It could be a game for you to relieve your stress or simply to entertain yourself.

Project Plan *

Our project is aimed at entertaining the audiences. We did some research on Google first and discovered some interesting projects that involve Processing and Arduino. Some projects we found that could visualize the sensor data caught our attention. So we plan to use the vibration sensor. By connecting the vibration sensor to the Arduino, we get some data from the sensor. And then by serial communication, we transfer the data to Processing. And we will design some animation on Processing which could entertain people such as an egg cracking. We would use some “if” function and “while”, “for” functions. And we also need to translate the sensor data to some digital figures and restrict it to a specific range. So maybe we will need to use “map” function as well. Our principle is simple, so we will spend more time on the design and the animation part. So that the targeted audience will be entertained.


Context and Significance *

For whom is your project intended and why is it of special value to its targeted audience?

Where might your project lead, after successful completion? What might subsequent projects meaningfully build upon? For whom? And with what value?

We did some research on Google and discovered some projects that could visualize the sensor data. And we reflected on the experiences we had during the midterm project. Then we thought of sensors. At first, we thought of the sound sensor and a game involving voices and volume. Then we thought of the vibration sensor and the game we have in mind now. The ideal project could align with my definition of interaction in many ways. It involves multiple people & objects. And some of them will initiate an action and the other will respond accordingly. And what makes our project unique is we concentrate on entertaining our audiences and practical use at the same time. So, it is not only a simple game but also a practical project as well.



My Definition of Interaction Before:

Interaction is the way you interact with other people, other objects. It can be physically or mentally. It can be visible or invisible. It requires two persons/objects. One of them need to initiate an action, and the other one needs to respond accordingly. That completes a whole process of “interaction”.


How Has My Definition Evolved?

Interaction could also happen between multiple persons or/and objects. It’s the process of one initiating an action and the other response.

I came up with these when seeing others’ group research projects. The project they made could be one initiate an action and then result in a series of actions. Or could be multiple persons initiate the action and result in the same outcome.


TWO Projects:

The One Lines Up with Mine:

Click Canvas, an Interactive Wall

The project lines up with my definition of interaction because it involves the initiating one and the responding one. One clicks the cubes and it changes colors. It allows you to interact with the wall without extra guidance or instructions.

The One Clashes with Mine:

Tic-Tac-Toe with Teensy

The one clashes my definition because the board doesn’t respond to the user actions accordingly. The user can always win. It would be better if the board could sense the actions of the user and respond accordingly, which means they could win sometimes.


My New Definition of Interaction:

Interaction is the process of influencing others using specific actions. It could happen between multiple people and/or objects.

Recitation 7: Processing Animation (Leon)

Recitation 7: Processing Animation

Date: 11/02/2018


I created an interactive animation using the mouse. The video is here:

And my code is like this:

void setup(){

void draw() {
int r = int(random(0, 255));
int g = int(random(0, 255));
int b = int(random(0, 255));
int size = int(random(0,100));
if (mousePressed && (mouseButton == LEFT)) {
if (mousePressed && (mouseButton == RIGHT)) {




And my homework works out like this:

I used the sin function to change the color and size of the circle smoothly. And I used keyCode function to make the circle move with the keyboard.

Recitation 6: Processing Basics (Leon)

The image I chose for my processing is this:


The reason why I chose this image is I love the simplicity of the image and how it shows the infinity of the universe. The yellow plus to me could mean anything. It could be any form of themes, leaving the audience endless imagination.

I wanted to create a similar image with this one in processing but simpler and more explicit. Because I know that I’m not able to create that kind of fading colors right now, I made the color simpler.

I chose two violet colors for the second planet and yellow for the plus sign. Because in my mind the plus sign is a warning sign. It means a planet is aiming at the other one.  So I used the rectangle function and the ellipse function to create the planets and the plus sign. Then I want to rotate the plus sign. So I searched in the reference page for Rotation function. And I asked fellows how to use it. So my final code for the rotation function is like this:


And then I want to add color to the line. So I used Stroke function.

But because I used setup and draw, I then had problems with only stoke one shape.

So I delete the draw function.

My final code is like this:



color P1 = #E5E3EA;
color P21 = #A475D3; // this is the outer color of the second planet
color P22 = #5B1C9B; // this is the inner color of the second planet
color WASTE = #FFEE31;
color P3 = #901913; // this is the color of the third planet



And my sketch is like this:



Midterm Project (Leon)


James & Jannie


Burn Less


Just as the name suggests, our project intends to address the issue that people will easily burn themselves when drinking coffee, water or anything else. Our project is a lid with a LED that could change color according to the temperature. We were inspired by all those people who are so busy every day that they can just grab a cup of hot coffee and go. They either drink it at the spot or put it aside and never think of it again. So there’s a great possibility that they are gonna burn themselves. The position our project takes is an indicator. It indicates the temperature of the liquid. It interacts with both the user and the liquid. The sensor part interacts with the liquid while the LED part interacts with the user.


The most important reading for me when shaping the project is “Getting Started in Electronics”. The reading provides me with a basic understanding of the electronic components and theories. I found the components I need in this reading. And the artist that inspired me to do this project is Nirvana. I was listening to Smells Like Teen Spirit by Nirvana the other day and I suddenly came up with an idea of a device which will smile when you pour something into it. Then I discussed with my partner. Then we made a joke about if you pour hot water into it will it still smile or not. Connecting the fact that people always burn themselves when drinking coffee, we came up with the idea. Then we looked through the reading “Getting Started in Electronics”, we thought of using the temperature sensor. At first, we thought of using the normal LEDs. But after reading “Physical Computing’s Greatest Hits (and misses)”published 27, JULY, 2008 by Tigoe, we were inspired by the project “LED Fetishism”. We then found the RGB LED in our kit, so we decided to use it.


At first, we tried to use multiple normal LEDs, and attached them all to the lid. But then we found it impossible to include so many LEDs in one circuit and put them in the lid. We then attempted only using one LED.

For the lid, we designed it using Tinkercad. The original one is to short to hold the Arduino. So we redesigned it.

With the help of Leon, we found a smaller Arduino and found a way we could avoid connecting them to a computer. We used a battery. The all the circuit could be perfectly hidden in the lid. For the Arduino board, we used DFRduino Nano. But we ran into problems again.

We cannot upload the code we need into the Arduino. It is always like this:

I tried to restart the Arduino and replug the cable. But nothing worked. Then I asked Dave for help. We tried to reboot the computer but it didn’t work. So we searched online and found out the reason: I chose the wrong board.

Although the board we are using is called DFRduino Nano, the board we should choose is actually this:


Having worked out the board, we then had trouble with the LED.

It won’t change color as we the way we set it.

In the end, we found out that the problem is with the coding. I searched for something online and asked Dave for help. And then I worked out the problem.

One should never write things like this: xx<xx<xx in a mathematical way, instead, what we should write is: xx<xx && xx>xx.

Finally, we got it to work successfully.

And then we struggled a lot about the decoration stuff. We learned that if we want to 3D print something hollow we should not choose “support” when we print that.

Giving up the skull idea, we turned to something else. Our final decoration is like this.



Our project basically is a lid that could fit any cups. If you put the lid on a cup of water or coffee or anything, the light will go on. If the liquid is too hot, the red light will go on to warn you not to drink. Then you can put it aside to do your work. When the light turns to blue or green, then you can safely drink it. But remember, drink it before the light goes off. If you are the kind of people who prefer warm water, drink it when the blue light is on. If you prefer cold, drink it when the green light is on.

Our project is intended for busy workers and students. Just as what I presented above, they can just put the cup aside and do something else instead of having to test whether it is drinkable or not all the time.


For this project, we used plastic for our lid because of the 3D printer. And we used the breadboard and the DFRduino Nano for the foundation of the circuit. Then we used the temperature sensor and the RGB LED and a couple of wires. We soldered the LED with the wire.

We intended to use cardboard for our lid but we gave up. Because the cardboard will soak water and it’s not suitable for a lid that will be exposed to moisture all the time.

During the user testing session, we got some extraordinary feedbacks. At first, our prototype looks like this:

At the session we got feedbacks like using different colors of LED for different range of temperature. So then we made some improvement and discovered the RGB LED.


The goal of my project is to prevent people from burning themselves. And we did it. By repetitively adjusting the temperature, we found the temperature range that is acceptable for the majority. We even have two range of temperature for people who prefer hot or cold.  But if we had more time, we would definitely work on the design. We would make the lid shorter and lighter. And find a perfect place to put the sensor so that it could be sensitive enough. And we would also connect something else to it. Maybe a buzzer. To remind people when the coffee is cool enough to drink.

Week 6: Visual Communication (Leon)

Date: 10/12/2018

Instructor: Leon

Name: Jannie

During this week’s recitation, we were asked to design a poster for our research project.

First of all, I used TinkerCad to create a 3D image for our project. I didn’t only use the basic shapes. I used lots of complicated shapes to create the 3D image. Then I took a screenshot and upload it into Illustrator for further improvement.

Then I learned how to use Trace Function in Illustrator to create images for my poster.

I only used two colors for my poster in order to make it clear and simple but also draws people’s attention to it.

My final poster is like this:



Week 5 Drawing Machines (Leon)

Recitation 4: Drawing Machines

Date:  10/05/2018

Documented by: Jannie Zhou

Instructor: Leon & Rudi

Partner: Evan

At first, we were told to work separately. For step 1 I built the circuit perfectly and it worked really well.


But when I moved on to Step 2, I found there’s a little bit difference between the schematics. So I took down my circuit and rebuilt it. It took me a lot of time and the circuit won’t work.

Then I was told that I don’t need to rebuild the circuit. I just need to add a potentiometer to the circuit. It took me a lot of time and I didn’t get the work done.

Finally, I get my motor to work with the potentiometer. And then we connect my motor with Evan’motor. And then built a drawing machine.

Question 1:

What kind of machines would you be interested in building?Add a reflection about the use of actuators, the digital manipulation of art, and the creative process to your blog post.

I would be very interested in building a machine to help blind people to see. The machine is able to read the surroundings, transform the visual information into digital signals, and send these signals to the human brain. These signals can be processed by human brains and so the blind people can actually “see” things.

Question 2:

Choose an art installation mentioned in the reading ART + Science NOW, Stephen Wilson (Kinetics chapter). Post your thoughts about it and make a comparison with the work you did during this recitation. How do you think that the artist selected those specific actuators for his project?

I would like to choose Waves by Daniel Palacios Jimenez. I think this art installation is very creative and intriguing. It is very simple, just a rope and a motor. But it can create such beautiful patterns and can even respond to people. Just like our work during the recitation. It was just a motor. But connect them to some other simple things it became a drawing machine. You don’t need complex machines to do fancy stuff. Sometimes you just need the idea. I think the artist must have something clearly in his mind first and then look for what kind of actuator he wants.