Recitation 10 Documentation: Media Controller (Leon)

Below are codes for Processing:

import processing.serial.*;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 2;
int[] sensorValues;

PImage img;

void setup() {
size(400, 600);
img = loadImage(“Unknown.jpg”);


void draw() {
for (int i=0; i<100; i++) {
//int size = int( random(1, 20) );
int size = int(map(sensorValues[0], 0, 1023, 1, 20));
int x = int( random(img.width) );
int y = int( random(img.height) );
color c = img.get(x, y);
ellipse(x, y, size, size);



void mousePressed() {


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

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

sensorValues = new int[NUM_OF_VALUES];

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


Below are the codes for Arduino:

void setup() {

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



For this recitation exercise, I chose to alter an image found on the internet with two potentiometers. I think the hardest part of this exercise is the Processing part. For the Processing part, using array and integers were pretty difficult and hard to understand. However, the Arduino and the circuit was pretty simple. The circuit did not require a lot of wiring and the Arduino coding only needed serial print and connecting it to the right port. Overall, I thought this exercise was an interesting way to changes images and create a different type of art.

Final Project Documentation (Leon)

Interaction Lab Final Project Documentation

Project Partner: Jannie Zhou

Project Title: Speed Buttons

Project Statement of Purpose:

Initially, we had many ideas for our final project. For my mid-term project, I used a temperature sensor and created a lid for a cup. Since Jannie and I are working together again, we thought about using a different kind of sensor for our final project. We thought about using a vibration sensor, temperature sensor, moisture sensor, or sound sensor but we just couldn’t come up with an idea of how to incorporate them. We decided to think about the idea over the weekend, and while Jannie was visiting an exhibition, she came across an art piece that tells the story of the artist fighting with depression and loneliness. Then, we decided to do something that could cure loneliness in the aspect of being with another person. Our first idea was to create an interface that the user could talk to using the sound sensor, and the computer would respond. However, the issue was that there were too many factors that we had to include and we did not have the time to be able to complete what we wanted. Therefore we had to move on. While we were thinking about a game for two players, I thought about the game that I enjoyed called 1-2 Switch, and in that game, multiple mini-programs involve two players which one of them was called Signal Flag. In the game, there will be two voices, a male voice and a female voice in which you would have to follow the female’s voice directions and do the opposite when you hear the male’s voice. Instead of just doing the same thing, we decided to make the output with button and use our computer screen to give directions of up, down, left, and right. On the computer screen, when the background is green, you would follow the directions, and when the background is red, you will do the opposite. When we came up with this idea, we both liked it and hoped that it becomes a game of competition and excitement. However, we knew that we were going to face challenges like coding issues, which kind of fabrication we would want to use, as well as how to design it so that it is user-friendly. Ultimately, we want this game to be something that people will want to play when they see it and continue to play after they leave the game.

Project Description:

For our project plan, Jannie and I split the work into two. Jannie will focus more on the coding while I would focus more on the hands-on work like Arduino, fabrication, and wiring of the buttons. We chose to use buttons for our project because we thought it would be the easiest for players to follow the directions on the screen and it is also a more satisfying feeling when you can hit a button hard to relieve some stress. We tried to use the button that was given to us in the Arduino kit but that was too hard to press, and it was also very small. Then, we moved on to the buttons that we soldered in the very first recitation class, but those were too small to press as well. Then, we went on Taobao to look for some buttons that we could use and finally arrive on one that is much like an arcade button game which is big, easy to press, and it has a satisfying feeling to it when pressing the button. Initially, we only got four buttons because we wanted to try it out before we order more. When the buttons came, it had one red and one black wire attached to it, but we had to no idea how to wire them because we didn’t know what it was connected to. Until Professor Young helped us with figuring out which part is power and ground, then we were able to solder the wires to the buttons.

After building the buttons, we then focused more on the coding so that we actually would have something to test with. While Jannie worked on the coding, I started to think of the design for the box and how to fit the wiring as well. I looked at examples of arcade game button placements and realized that they were all on this rectangular platform. This was the idea that sparked our design. I then cut up cardboard boxes which its width could fit the buttons of up and down and the length that could fit two sets of buttons with some space in the middle. The prototype worked well at the user testing, and there were not many comments on the physical design of the buttons or the box. However, people did ask why I made it into one box, and it was simply because the buttons all share the same Arduino board and breadboard therefore if there were two boxes, then there would be wiring in the middle, and that would look not as good.

For the fabrication, I decided to use laser cutting instead of 3D modeling because 3D modeling cannot print something that large. I used Makercase for the template of the box and imported into Adobe Illustrator to add designs to the box. I thought it would make sense to add designs of arrows on the sides of the board to match the arrows on the buttons. The first print of the box was half successful in a way that everything came out correctly except the hold to but the buttons and the wire through. They were a bit small. However, that was an easy fix. We put the box back to the laser cutting machine and made the hole on the computer a bit bigger along with adding another small hole to fit through the power for the LED in the buttons. After the second print, everything was successful.

One of the most time-consuming parts of this project which I did not expect was soldering the wires. For some reason, the solder would not stay on, or it would fall off, or I would accidentally melt something. This process took about 4 hours and finally it was all soldered on. However another difficult part was putting all the wires into the breadboard, and in the beginning, there were some short circuits because the wires would accidentally touch each other so we would have to tape up all the exposing wires. While putting the buttons together, two of the buttons would not light up anymore, and since we got many feedback from user testing on the button lights, we decided just to cut the wires. This was a tough decision to make because it was either going to be a bad decision because we could have used the LED lights somehow or it was going to be the right decision. Jannie and I figured that the lights would only be more of a distraction since our game is already messing with people’s minds there is no need for the buttons to do anything as well. Therefore, we decided to cut it off.

Context and Significance

For our project, I think it is a high level of interaction since it requires not only the hands, but you also have to put thoughts into it. Most of the time, people are not able to press every direction correctly because they are playing under pressure and most of the time their brain cannot react that quickly. In terms of Arduino and Processing, I think our project has achieved a pretty good job connecting both of the elements. We have used a good amount of Arduino work by using buttons, and most of our project is working with Processing. In Processing we were able to put music, transitions, booleans, if statements, arrays, etc. Overall, I think our final project really shows what we have learned throughout this semester.

For our game, I don’t think we tried to recreate the game from 1-2 Switch because it has very different elements to it and our input and output are different as well. However, our goal is to make a two-player game as well as helping a person’s loneliness. After we have presented our project, Nick commented on our project saying that he doesn’t think we have reached the purpose of our project. However, I would like to disagree because whenever I play a game with another friend or person, him or her and I would always talk afterward and if it is a competitive game, we would want to play again. By talking to each other, by wanting to play together, it creates an opportunity to reach out to each other and maybe there will be a chance for them to become friends.

Further development of project if possible:

Jannie and I both know that this project still had a long way to go from being decently nice therefore we came up with a list of things that we could do to improve the quality of the project. First would be the interface of the project. We would want to try to make it more beautiful by changing the fonts of the letters, add more animations, make everything more smooth, and just an overall polish. Second, we would want to include some more technical improvements in our coding like having a record-keeping list so that players can see how well they did compare to others. We want to make it similarly like an arcade game so that people can try to compete and see where they are on the scoreboard. Moreover, the game will feel much more personalized if it could include the players’ names.    

Thing I learned from this project/Conclusion:

From this project, Jannie and I learned some valuable lessons that will help us as we come through with more IMA classes. Something that we learned that I think its the most valuable is that everything thing that we decide on our project should have a reason and a purpose to it. Why should it be a box? Why should it be buttons and not other sensors? Why the arrow designs on the box? Things like these should all have a reason and purpose on why it should be included in our project and not just because it looks nice or we need to fill up space. I feel like not only this interaction class but Professor Leon has continuously emphasized on the purpose and reasoning of each action that we choose to do, and it not only applies in IMA projects but also in our daily lives. Overall, interaction lab has certainly opened up a new spectrum for me in terms of technology and design and definitely made me rethink the definition and possibilities of the word “interaction.”

Coding of Processing and Arduino:

Laser cut and design of the box:

Wiring of the buttons:



Final Project Proposal Essay (Leon)

Partner: Jannie Zhou

A. Project Title

Egg cracker

B. Project Statement of Purpose *

For our project, the purpose is to entertain people when they play our game. A specific audience we have is more so groups of people who are gathering and they can all play the game together. In the beginning, we are not exactly sure what kinds of projects we can do to combine Arduino and Processing together. We looked at some examples and one that caught our attention was using Processing to show the data collected on Arduino by using a temperature sensor. This was something familiar for us because for our midterm project, we also used a temperature sensor and looked at the data to create our project. We thought we could do something similar again but this time changing it up into a game instead of practical use. The game would bring people together with laughter, excitement, and ultimately a good time with friends.

C. Project Plan *

The plan that we have so far is to create a game using either sound sensor or a vibration sensor. The plan is first design characters of the game using Processing and allow the character to change its size and shape when it detects data changing. Our initial plan is to create an egg who has facial features and moves around. Then, there will be an indicator that the game is ready for the user to play. There will be instructions given to the user and the user will then began to hit the table or any surface that the vibration sensor is on and the egg will begin to crack. The purpose however, is to hit the egg but not to be the one that lets it crack. So a group of friends will go around the table and each hit the vibration sensor and whoever is the one that makes the egg crack, he or she loses. We are not exactly sure if this will be the final project but this is just our initial idea.

D. Context and Significance *

We came up with this idea first from looking at Arduino and Processing projects on Google. We saw that people have previously used Processing to represent data collected in Arduino. Then, we thought about using sensors as a way to collect data. We initially wanted to use temperature sensor again but we also wanted to try something new. For our project, we want to be able to test the vibration sensor or the sound sensor to see which one we prefer or if there is a way, we could incorporate both sensors into our game. We also draw inspiration from the game that when you press on the alligator’s teeth and you pass the alligator around and whoever is the one that makes the alligator closes its mouth then that person loses. Our project idea is still rough but we are on a good track to know what we want to do and ultimately have a good purpose for our project.


Recitation 8: Final Project Process Documentation (Leon)

  1. Go back to your definition of interaction as you defined it during the group project. How has your work in this course involved that definition?

During the research project, I defined interaction as an action and a response from both human and machine. My work during this course has been creating a certain machinery or a piece of technology that needs an action to initialize the purpose of the machine and as a result, a response will be given.

  1. Based on the initial definition and your experience developing and executing your midterm project, how has your definition of interaction evolved? Be as specific as possible.

After being in interaction lab for more than half of the semester, I feel like my definition of interaction still fits but only needs to be adjusted a little bit. I used to think that interaction in terms of technology is between human and machine. However, after the midterm project and doing all the Processing and Arduino circuits, I realized that machine can have interaction within themselves as well. I realized this especially during my midterm project when I created a lid which indicates the hotness of the beverage in the cup.  The interaction between human and the machine was actually not very much. But the interaction occurs more so in the form of heat and machine. These two elements are like having a conversation with each other.

  1. Research two other interactive projects, one that aligns with your definition of interaction and one that differs from it.
  • Discuss why the first project lines up with your definition and why the second one clashes with your definition of interaction. Be precise, as always.
  • In your research process, you are strongly encouraged to consider interactive projects and experiences drawn from and in a variety of sources, media, materials, formats, etc.

A project that I found that fits my definition is this. I think this project fits because it shows the interaction between humans but as well as a conversation happening between the wall and the computer. When the human touches the wall, the wall lights up and meanwhile the wall lights up, the computer connected to the wall also has a reaction. This reaction that happened was not necessarily caused by the human but more so from the wall.

The second one that I thought clashed with my definition was this project. Even though it requires high interaction with a human, there is not much between the technology itself. Because the human is mostly interacting with the machine while the machine are not interacting with each other much.

  1. Write a “new” definition of interaction in your own words. Draw from your account above and try to evolve your definition beyond the current convention. It should be polished and professional: imagine it will be printed on IMA Interaction Lab’s next course syllabus!
  • This definition should reflect the evolution of your understanding of interaction through both the above research and analysis process as well and your semester engagement with course readings, discussions and work.
  • Your definition may not replicate something you have read. You are an original, you will arrive at this semester’s end with an understanding and practice of interaction of your own—not others’—making!
  • Again, as in every step, be specific, give details.

Definition of interaction: Interaction is the ongoing “conversation” or activity between two elements, most often human to machine or machine to machine.


Recitation 7 Documentation (Leon)

For this week’s recitation, we are working with Processing again.

I created this interaction art by combining both keyPressed, and mouse track. When any keyboard letter is pressed the image will change color and only when a keyboard letter is pressed, the mouse track will draw whatever your mouse track draws. I wanted to keep the drawing that the user drew but I wasn’t sure what to do. Below is the coding:

// keyPressed function example

void setup(){




void draw(){





void keyPressed() {

 int r = int(random(0, 255));

 int g = int(random(0, 255));

 int b = int(random(0, 255));





Recitation Homework:

Below is the coding for the recitation homework.

int posX = 200;

int posY = 200;

int hue = 0;

int rad = 150;

boolean Ellipse = true;

void setup() {

size (600, 600);

colorMode(HSB, 100);


void draw () {

background (#FFFFFF);

ellipseMode (CENTER);

strokeWeight (15);

stroke (hue, 150, 150);


if (hue > 100) {

hue = 0;


ellipse (posX, posY, rad, rad);

if (Ellipse) {


if (rad == 100) {

Ellipse = false;


} else {

rad ++;

if (rad == 200) {

Ellipse = true;



if (keyCode == LEFT) {

posX = posX – 1;


if (keyCode == RIGHT) {

posX = posX + 1;



For this homework, the difficult part trying to add the color to it. I couldn’t figure out until my friend helped me with it. I also wanted to add the movement for up and down but the coding did not work out as well.




Interaction Lab Midterm Documentation (Leon)


Project Partner: Jannie Zhou

  1. Project Name: BurnLess
  1. Project Statement of Purpose:

Our project, BurnLess, is a product that helps people who like to drink hot beverages not burn themselves by putting a LED indicator inside a cup lid. BurnLess is a lid that will sense the heat coming from the hot beverage, and it will indicate the temperature of the steam to allow the person who is drinking the beverage to know when the beverage is at the right temperature for their best liking. BurnLess resolves the problem of people burning themselves by allowing the user to know when the beverage is ready to drink so that they can avoid the pain of burning their mouth.

Initially, we researched at which temperature people like to drink their beverage and how hot is “hot” drinkable. However, we realized that since the temperature sensor cannot sense water temperature, we could only estimate the temperature by sensing the steam and taking a sip of hot water to test if it is drinkable. Despite that, we also do not know another important factor; what temperature do people like to drink their beverage at. Therefore we created three different kinds of temperature setting and used red light, blue light, and green light to indicate the different temperature setting. Our goal of this project is to make sure people understand these indicators and always enjoy their beverage at the liking of their temperature.                                                                            

  1. Literature and Art, Perspectives and Contexts:

One of the readings that I read was “Getting Started in Electronics” by Forrest Mims. This reading helped me understand the basic components of electrical circuits and theories. My partner was listening to Nirvana one day, and the song Smells Like Teen Spirit came up, and initially our idea was to create a cup connected with a moisture sensor and a stepper motor connected with a smiley face and when water is poured into the cup, the stepper motor will raise the smiley face. However, we thought this idea did not serve a purpose because what exactly can raising a smiley face do or help the user. Then, after understanding more of “Getting Started in Electronics” we thought about using the temperature sensor. This idea is more practical and applies real-world problems and try to create a solution as we learned in the Interaction Lab class. We stayed firmly to an idea that relates to water and a cup and thought about what kind of issues do people usually face when drinking water. Then I realized I had burned myself multiple times drinking hot water not realizing how hot it is especially in a restaurant when they serve hot tea. Even though touching the cup may make you think that the beverage is ready because hands can usually withhold hotter temperature than your tongue, that is not always the case.

We dug into more research on Arduino projects that have used a temperature sensor, and we found a similar one that correlates with our idea. Instead of using a lid, the project used a coaster that senses the temperature of the cup and uses LED to indicate the hotness of the water. We decided not to use the coaster for multiple reasons. For one, our project would be too similar, and we did not want to copy it. Secondly, we wanted to create a lid because it does not let the heat escape that quickly so that people can drink at their own time and still enjoy a beverage that is supposed to be hot in the first place. Lastly, building a coaster would have been much harder compared to making a lid because the coaster is much smaller and the Arduino and circuit that he used was much more advanced. As a result, we decided to stick with making a lid.

For our project, we actually did not do much reading because the project design, components, and process are all taught to us in Interaction lab class, or we came up with our project mostly by ourselves.

  1. Project Description:

After deciding that we should make a lid for our project, we began to prototype and think of how to design our lid. Our prototype was using a cup and a lid from the cafe. We first wanted to test how the temperature sensor worked and how sensitive it was and surprisingly, it was sensitive enough even to sense room temperature as well as hand temperature. After knowing that, we knew sensing the heat of the water would not be a problem. We put the sensor under the lid and used the serial monitor to check the temperature. For the coding of the Arduino, we found a basic temperature sensor coding from this website, and we applied it to our Arduino. Some problems that we faced and had to reconsider our design was that we knew the temperature sensor could not get wet therefore it cannot be in close contact with water unless there is a thin layer blocking it. Therefore when we were designing the lid, I only made it half a millimeter so that it is thin enough to make the sensor sense heat still. Initially, the lid design had a rectangle box on top of the circle in order to fit the Arduino. However, after realizing that we had to use the breadboard as well, we wanted to figure out a better way to fit everything together more coherently. Then I asked Professor Leon if there is a smaller Arduino we can use and thankfully, there was an Arduino named Arduino Nano which was less than half of the size of the Arduino Uno. In our Arduino kit, there was also a smaller breadboard which was used for the Arduino shield, so we took that and connected to the Arduino Nano and all in all, the size was still only half of the original idea. Therefore we redesigned the lid as well. Instead of having a box on a circular lid, we decided to build up the circular design and try to make the diameter for the lid big enough to fit the circuit. For the LED, we wanted to make a cool design of a skull and put the LED inside the skull’s eyes so that when it lights up, the eyes will be red.

After finishing all the circuit wiring, we realized that in order to power the circuit, we still had to connect it to our computer which did not make sense because cup lids should not be required to connect it to a computer. Therefore I asked Professor Leon again if we had something that could power up the Arduino without connecting it to a computer. He showed me a battery with one red and one black wiring that is almost the same size as the small breadboard we are using which contains 5V of power. After knowing that the battery works, we moved on to printing our first design of the lid. After waiting for almost 3 hours, our lid came out too small. The breadboard was not able to fit inside the lid. Therefore we had to make a bigger one. Since the design had three circular layers, we made each layer just a bit bigger without changing the bottom diameter of the lid because the 3D printer can only print a 10x10cm design.

Another problem we ran into was the design of the skull. The first skull that we printed was from Tinkercad’s resource box, but after printing it, it was too small and not hollow at the bottom. Therefore we went onto a website for a 3D print called Thingiverse and looked up designs of skulls. We found a cool design with a hollow bottom and decided to try it out. After printing it, the skull was still not hollow even though on Tinkercad it was. The problem was that in Tinkercad, when a design is hollow, they use support to support it but since the skull was so small, the support was much stronger, therefore, it was not possible to use the skull. Not only that was a problem, but also the LED light was not strong and bright enough to see it through from the skull’s eyes. Therefore we ditched the idea of using a skull and decided to put the LED light design aside first.

When the circuit is put together, we realized that the wiring had a plastic rectangular box-like material wrapped around the bottom of the circuit and the problem was that if we had to put the lid cover on, it would be too high and that material is not bendable as well. Therefore we had to cut wires and solder it with the LED and temperature sensor as well.

In our first user testing, we did not have enough time to print a top cover for the lid to hide the circuit, so we created a prototype with a cardboard box to cover up the circuit. We made a small hole on top of the lid so that the LEDs could show. During the user testing, we got some feedback like using different LED color to indicate the different levels of the temperature of the water or that we should have a design on top to indicate hotness instead of using a skull. These were all excellent feedback from our project, and we took account of everything that was given to us and tired our best to adjust our lid.  

After user testing, we decided only to pick a few adjustments that needed to be made because of the short amount of time we had. The first thing we did was redesign the top cover of the lid so that it can close up. I made the circumference much bigger without changing the size of the bottom base. During the 3D print process, it took four tries to finally made the top cover. During the first print, the printer just stopped and did not print anymore. Both second, third and fourth print failed due to the machine itself got caught up with other wiring and moved the whole print. After taking almost a full day to print, the top cover was printed successfully, and we did not need to readjust anything else. The next step for us was to find a way to design the cover for the LED. We thought about just making a sphere out of transparent 3D print material, but the material that IMA lab had was not a suitable material to use. We then decided to take the concept of Beauty and the Beast of putting a glass over the flower; however, we could not find any material like that and did not have time to go out of our way to find one. We then decided to wrap the LED with gold paper and made it look like a flower that lights up. That was the last touch to our project.  

The night before our presentation, our project design fell apart due to two main reasons. The first reason was that our second temperature sensor broke. Because we have been bending the sensor so often, the wire eventually broke off. Even though our main component broke, we quickly recovered it by getting another temperature sensor from our friend and was able to continue with our project. A lesson that we learned was that we had to be careful when handling with our components; they are more fragile than they look. Another reason which was the biggest reason was that the battery did not work anymore. For some reason, whenever we connect the battery to the circuit, it will continuously light up the LED light and not change the LED color according to the temperature. Initially, we thought it was something wrong with the coding. Then we connected the Arduino board to our laptop, and it worked fine. Then, we thought it was something wrong with our circuit connection. However, we knew our circuit was fine as well because when we connected to our laptop, it worked perfectly. At that time, it was late with no fellows around so we could not ask anyone for help. Therefore we came in the next day trying on two more different batteries, and it was the same result. As a result, when we presented our project, we had to use a USB cable to present which was not something we wanted to. The battery not working at the end was the downfall of our project, and if we only had more time, we could try to figure out what had happened to it and ideally reach our project goal.

5. Project Significance:

I believe that the significance of our project is that if it worked successfully and given more time, it could be a product for everyone to use. Most of the time when we create a project for class, it is mostly only for the class purpose only. However, BurnLess is a product that had high practical usage, and it benefits people. When we first began our project, we expected to create an all in one lid without connecting to other power sources. I am more than proud to say that we did accomplish that goal but it had also failed on us at the last minute. However, my partner and I learned valuable lessons from this project, and we did not get upset by it just because it was not what we wanted for our presentation.

Our product is intended for individuals who drink hot beverages but often burn themselves by not being careful enough or just rushing to drink the drink. Having a lid that can indicate the readiness of the beverage can help by allowing the individual to do whatever they have to do without having to check if their drink is ready continually. Moreover, it also shows the different temperature setting so that they can always drink their beverage at the temperature of their liking.

  1. Project Design and Production:

 Materials Used:

-Arduino Nano board

-Small Breadboard

-Jumper Cable

-3 220 Ohm resistor


-Lm35 Temperature Sensor

-3D print materials

-5V battery


For this project, we used the Arduino Nano board instead of the UNO because we did not require many analog pins or number pins and we needed the circuit to be as small as possible. We connected the Nano board to the small breadboard that was given to us in our Arduino Kit and left enough to space to fit in 3 spaces for ground pins and 3 for 5V power. For the wiring, we mostly had to use wires that we had to cut ourselves rather than the ones that were provided for us because the plastic around the bottom of the wire is not bendable and it would also make the lid too tall. Therefore as a design aspect, we decided to use bendable wires. In order to connect the wires and the temperature sensor, we had to solder the wire to the sensor. When we were soldering the wire, for some reason, the soldering machine was not heating up, so it took a long time to solder the wires without burning the temperature sensor by accidentally touching it. We also soldered the RGB LED with each wire connecting to a 220-ohm resistor so that the LED does not burn out. After putting it all together, we were able to bend the wires and cover up the whole circuit with the lid cover. We did not try any other methods or designs for the lid based on time, so we could not try different concepts. However, even though we did not try other methods or design, I liked the lid we designed and the functionality of it. Even though it might look a little bit bigger than the usual cup lids, it had to be like that because of the circuit.

7. Conclusion:

The purpose of our project is to ensure that each individual when drinking a hot beverage, does not burn themselves while still enjoying a hot beverage. Our project was a successful project because for us, the coding worked, the circuit worked, and the design was nice and clean just the way we wanted. We compacted every element of our project into a lid only by the size of 10cm x 10cm. What did not work out though was the battery that we used. Ultimately it did not work with our project, and even up until today, we are not entirely sure why it happened and what caused it not to work all of a sudden. Throughout this project, the battery was not the only problem we ran into. The first design of the lid was too small, two of the temperature sensor broke, we tried to print the top cover of the lid four times which took up most of the day, and the wiring of the circuit was too big. Through these problems and mistakes, we learned some valuable lessons as well. For me, the most important lesson that I learned was to appreciate what engineers, developers, and designers do to make up a small piece of technology. We learned that it is challenging to build a circuit that is physically small. Moreover, the also takes a couple of times to reach our project goal, and in the end, we did not even reach the goal we were trying to achieve. Another lesson was that sometimes, things just fell apart. Like our battery, it fell apart on us at the last minute when we did not expect it to happen. Lastly, we learned how to spend the minimal time to create a product and prototype by making the 3D print process shorter or using quick sketch ideas for the design. Ultimately, if we had more time, there are improvements we would like to do. For example, be able to use the battery successfully and also be able to charge the battery without taking the top lid off. We would also want to make the design slimmer and sleeker as well as adding more visual designs. Through these improvements, I feel like our project will be much better and even something that could be sold to the market. So far, we have not seen a product like ours, and we feel that if everything worked out perfectly, it could be something that is useful for people in their daily life.


-our first prototype

-first print of our lid

-then it got ruined

-the lid was too small to fit the circuit

-bottom of skull was not hollow

-The design for user testing day

-final design of our lid

-coding for the Arduino

-final look of the project



Recitation 6: Processing Basics Documentation (Leon)

Original Art Work:


Processing Art Piece:


The image I chose above is a painting by Josef Albers which is part of his collection Homage to the Square: Apparition. In this painting, it shows four squares that are painted on top of each other while moving each square a little bit lower from the background square. The reason why I chose this image was not that I had any connection to it or felt that it was an amazing painting but only because it looked like something I could replicate in Processing. I felt that at my level of skills, this painting is something that I can reproduce without being too easy or too challenging.

When I first started using Processing, I created a rectangle by typing in the location of the x-axis, y-axis, and the width and the height. However, when I press run, it gave me a tiny square all the way in the corner, and I had no idea what happened. Then after getting help from Mercila, I realized I had to make the location and size of the rectangle much bigger. I readjusted the size and put two more rectangles on top of each other. Initially, the color was off because I tried to look up the colors on Google for their RBG numbers. Then, I realized I could also use the Digital Color Meter that is in the Apple system. After changing the colors, my Processing replica was much closer.

I feel like my digital art in Processing compared to the actual art piece is pretty close, but the difference is the feeling when looking at the art piece. In Alber’s piece, you could see and feel that he brushed each stroke carefully to achieve that texture of the painting. In Processing, however, the image looks much smoother with no shade or angle effect. I think that even though the effect of the painting is a little off, Processing still served as a suitable means of realizing my design. I am surprised at how similar these paintings are with only using the basic coding. I am eager to learn more about how to use Processing and explore its potentials.


Recitation 5: Visual Communication Documentation (Leon)

In this week’s recitation, we strayed away from using arduino and started exploring Tinkercad and 3D designs as well as Adobe Illustrator. Our purpose of this recitation was to use Tinkercad and Adobe Illustrator to create an advertisement design for the product of our group research project. For the my research project, our group created a box with two spirals on the side that allows the user to twist it and it would elevate a smaller box inside to the top which presents the extinct flower. As the first time using Tinkercad for me, I felt that trying to replicate my project was very difficult. Initially, I was trying to find every identical piece that I had in my project in the Tinkercad tool box. However, after realizing it was impossible and we also did not have to make it identical, it became easier to make. I started with a box from the basic shape section and put two springs from the shape generators on the side of the box. The problem that I encountered was that my project had an open top design for the box but there were no shapes like that so I had to incorporate other shapes to cut the open top.

In order for me to cut the open top, I had to create a smaller box and make it a hole and place it on top of the bigger box. By grouping them together, the smaller box that is a hole will cut the top off as well has leaving space at the bottom to fit a container like piece. For the design of the poster, I kept it simple and put some images on of flowers and trees in the background with the slogan “Your Only Way to Nature”. Using Adobe in general is a struggle for me because that is something really out of my field and it became really hard for me to even design a poster. One of my improvements that I wanna learn is how to use the illustrator betterly and make more interesting designs.


Recitation 4: Drawing Machine Documentation (Leon)

In this week’s recitation, we created a drawing machine that required using a stepper motor, H-Bridge, laser cut arms, motor coupling, and paper fastener to complete the machine. Initially, creating the circuit using the Arduino website was not too difficult. However, it was a very complicated circuit that could have been easily messed up. After putting each hardware and wire into place, I tested out if the coding and the wiring would match by using the Arduino example of the stepper one revolution. After seeing the stepper motor rotate once, I knew the wiring was correct and moved on to step 2 which was adding the potentiometer. At first, I had no idea where to add the potentiometer to a circuit that was already complicated. Then, I looked up the Arduino Motor Knob circuit and we had to place it next to the H bridge connecting the power, ground, and the potentiometer to the circuit using wires. However, my mistake was that I put the potentiometer only on one side but not in the middle, therefore, my stepper motor was not working correctly. After fixing the mistake, my stepper motor was still not working correctly. I realized that I needed to use the map function for my coding in order for the stepper motor and the potentiometer to have the same ratio. Therefore by inserting “val = map(val, 0, 1023, 0, 200);” into the void loop section, the stepper motor worked as I turn the potentiometer.

Moving on to step 3, my partner and I put together the drawing machine together and connected our stepper motor with laser cut arms. Both of our machines worked but not in a symmetrical or in any order. The drawing did not look like it was symmetrical mostly because our motors were turning at different times and the rotation numbers were different as well. Overall, being able to create a machine that can produce a drawing is something that I have never done before and being able to do that is a big accomplishment.

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 interested in building a machine that will automatically do my morning routines of washing my face and brushing my teeth. I feel like people are usually rushed or lazy in the morning that they just do not have enough time to take care of themselves and if a machine can do all of it for you and you just have to stand there, that would be a nice thing to have. In terms of actuators, they would be used to turn the components that will brush your teeth as well as washing your face with a brush. The actuator could even be a hydraulic actuator from the water from the sink. That way, it will save electricity and water usage.  

In terms of the digital manipulation of art, I believe the connotation for “artwork” nowadays not only includes paintings and drawings but also art that is innovative, interesting, interactive, and useful for users. The movement from old-style art to what we see as art right now was mostly shifted by the creation of technology. Technology has been the driver of interactive art and an addition of digital art. However, I believe that art can sometimes be a form of technology but technology cannot be a form of art. For example, I do not consider the machine I am interested in building a form of art, rather a daily practical use of machinery.

The creative process for this machinery is mainly from looking at daily problems and issues of people’s lives and trying to solve them. Initially, for the prototype, I would not include the teeth brushing component because there will be two different types of sets each individual could buy. The machine would look modern and slick but not portable at first. Later on, the models will improve and ultimately reaching a machine that is easy to use, portable, and most importantly, cleans.


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?

The art installation that I chose is an art piece done by Daniel Palacios Jimenez called Waves. This particular art installation rotates an elastic rope to create a complex sound and visual wave oscillations. From an outsider viewer, this piece may seem simple. However, what the viewers don’t realize is that this piece needs different actuators working at different times also embedding motion sensors so when people walk past it will work and when there are no movements, the piece is stable. The comparison of this piece with our drawing machine is drastically different. For starters, our piece needs to be moved by hand meanwhile Waves is an automatic art piece that moves by sensors. Secondly, the artist had to connect the sensors to signal the actuators of when to turn on. Third, the actuators had to work at a different timing in order to make the rope loop in an oscillation wave. Lastly, somehow the artist also incorporated music into the waves. On the other hand for our drawing machine. We just had to connect the pen to the stepping motor and turn the potentiometer manually for the pen to start drawing. The artist selected those specific actuators to make the art piece look aesthetically pleasing and also they must spin very fast in order to make an oscillation wave.

Images of Drawing Machine:



Images of circuit and coding:

Videos of Drawing Machine: