Interaction Lab, Week 10, 3D Modeling, Yun-Jui Hsieh, Professor Mikesell

Author: Yun-Jui Hsieh (Jerry)

Professor: Dan

Date: Apr. 21th. 2017

Project: Make a wearable device, a game controller or a security device by TinkerCAD

Partner: Maya Wang

Initially, I wanted to make a traditional controller because it can be easily connected with a joystick. However, Maya refused to do that with me because she thought that was not innovative. Then we got the idea of making a helmet with a propeller, which is one of Doraemon’s most famous tools.

We started from drawing a big half sphere as the top part of the helmet, and then we drew another half sphere as the back part of the helmet. We use another sphere to dig a hole, hollowing the middle part of both the half spheres.

We need to attach a stepper motor on the top of the helmet in order to make the propeller move. Therefore we dig another 4*4*4 box-shaped hole there.Screen Shot 2017-04-21 at 11.52.08 AM Screen Shot 2017-04-21 at 11.52.17 AM Screen Shot 2017-04-21 at 11.52.24 AMScreen Shot 2017-04-21 at 11.52.35 AM

Then, we moved on to draw the propeller. We drew two elliptic flat columns and connected them together. We also measured the diameter of the stick on the stepper motor and then created a hollowed column which can fit the stick.

Screen Shot 2017-04-21 at 12.05.44 PM Screen Shot 2017-04-21 at 12.05.58 PM Screen Shot 2017-04-21 at 12.06.15 PM

Finally, we combined this two stuff together, and our final product looks like this:

Screen Shot 2017-04-21 at 12.07.57 PM Screen Shot 2017-04-21 at 12.08.27 PM Screen Shot 2017-04-21 at 12.08.15 PM


Actually, this was not my first time making a 3D model, and I did some practice before this class, so it was not very hard for me to start this project. The biggest problem I faced with was that I couldn’t adjust the size by typing numbers, so it took me a lot of time adjusting the size and the position manually.

Overall, I really enjoyed the process of this project, and I am very happy that I made a complete and nice-looking 3D model.

Interaction Lab, Field Trip to Autodesk. Yun-Jui Hsieh (Jerry), Professor Mikesell

Author: Yun-Jui Hsieh (Jerry)

Professor: Daniel Mikesell

Field Trip Date: Apr. 14th 2017

On Friday, we went to visit Autodesk company near the school. The narrator introduced the company to us, about their products, programs, and their technological development. Autodesk recently established online platform called TinkerCAD, which will be used in our class. The most amazing thing is that the 3D printing technology is able to print out products that are nearly impossible for people to make by their hands, and this technology is even used by commercial brands, such as Under Armour (UA). UA even cooperated with them to produce 3D-printed shoes, which looks pretty cool.

Gate of Autodesk


3D-printed Chair

The one on the left uses the least materials, but it is as stable as the other ones.


3D-printed Shanghai Tower (Large)



3D-printed Chess


3D-printed puzzle chair


3D-printed UA shoes


3D-printed violin


3D-printed animal


3D-printed Penguin


Overall, this field trip is really interesting. It provides me with a chance to take a glance on the high-tech industry, and it was enjoyable to see those impressive products.

Interaction Lab_Week 9_illustrator, Stamp_Yun-Jui Hsieh_Professor Mikesell

Author: Yun-Jui Hsieh (Jerry)

Professor: Dan

Date: Apr. 11th (in-class)

Project: Make my own stamp by using illustrator

Initially, I follow all the steps that are introduced in the clip. I created a 24*18 (inches) artboard as what the instruction says, and drew two circles with “stroke” but without “fill.” I also drew two invisible circles that acted as the baselines of the text, and I type my name, “Jerry Hsieh,” on the top and my school, “NYU Shanghai,” on the bottom. Additionally, I drew a cat figure in the middle, using ellipses, triangles and lines. I wish my stamp to be like this:

Screen Shot 2017-04-13 at 4.25.34 PM

Afterwards, I transformed the texts into shape by using the function “making outline,” so then the whole graph was made up of shapes. I created a new layer and drew a circle which is slightly larger than the outer layer, then my stamp looks like this.

Screen Shot 2017-04-13 at 4.39.41 PM

Something weird happened then, but I didn’t notice it. All the white parts on the stamp were supposed to be red at that time, but the ones inside the cat’s eyes were not. However, I kept on going. I used the “exclude” function to make the shapes united, changed the color to red again and then drew black bound for the stamp. Finally, I reversed the stamp vertically; however, it was not like what it is supposed to be.

Screen Shot 2017-04-13 at 4.49.47 PM Screen Shot 2017-04-13 at 4.56.17 PM

Since I really want to make an actual stamp, I tried another time. This time, I simplified the process, merely typing “Jerry,” my English name, in the middle. I re-did all the process myself, and the final product looks nice.

Screen Shot 2017-04-13 at 5.04.08 PM Screen Shot 2017-04-13 at 5.04.22 PM Screen Shot 2017-04-13 at 5.06.16 PM



Overall, this project is interesting. That was my first time using illustrator, so it was a little bit difficult at first. After using for a while, I then got the logic of this software, so I could do something creative in it.

There is still something I need to figure it out. First, I have to know the reason why my first stamp looks so weird. There must be some functions that didn’t work in the smaller circle. Second, I need to try making a more complex and more interesting product next time.

Interaction Lab Midterm: Yun-Jui Hsieh, Maya Wang, Professor Mikesell

Author: Yun-Jui Hsieh

Parter: Maya

Instructor: Daniel Mikesell

The Pharaoh’s Escape: A Maze Stimulation

Using a joystick and mouse to enjoy the story and escape from the pyramid-like maze on the screen.

After entering the game from Processing, a pharaoh figure will appear on the screen and the player has to click on the start button to continue the game. The screen of the story will show, and the following screen will tell the players about the rules and notes. Then it will take the player to the gaming screen, which has a pyramid-like maze and a movable pharaoh figure, and the player can use the joystick to move the pharaoh figure. Moreover,  the wall will block the figure from crossing the wall, so the player must follow the specific track to finish the game. If the player makes the exit within 100 seconds, then the gaming screen will be changed to success screen which shows a rotating pharaoh and the word “Congrats,” otherwise if will be changed to failure screen that has a restart button, which allows the player to start over again and again.


Final Maze

new pyramid_whole



The Whole Project

Conceptual Development

Initially, I wanted to make an extension of my stupid pet trick. I made a “cupholder for lazy people” for that project, and I wanted to add another servo to make it work better. However, my professor turned this proposal down, saying that the midterm project “is about application, not necessarily about the complexity of coding or the items.” He asked me to think about something interactive and related to art, so I started finding some examples of interactive art online. After viewing several picture online, I got the idea of making a delicate LED pedestrian traffic light, whose human figure can move and walk instead of standing still. However, after deeper consideration, I found three difficult problems of the idea that is nearly impossible for me to conquer. First, it is not interactive enough. Second, the DFRduino board might not be able to process such a complex code. It does not have enough holes that I can connect to. Third, the idea is not new. Although the human figure of pedestrian traffic light in Shanghai does not move, it is “movable” in Taiwan, my hometown, for several years. Since it is not innovative, as well as the lack of skills and equipments, I finally gave up this idea.

Then I started thinking about something that can be both displayed on the computer screen and controlled by buttons. The idea of making a maze suddenly stroke me— I can’t remember where this idea came from— so then I started to search for some images online. The idea was approved by my professor in the second individual meeting (03/22/2017), and he told me that I needed to do “collision detection (by color),” so then I stated working on it.

Technical Development

I chose to make a triangle maze at first because I thought rectangle one was not challenging and creative enough. I finished a triangle maze in the following day (03/23/2017) after computing the positions of the lines. In addition, I even composed a simple story about the maze. (Story: the triangle figure is actually a pyramid. One day, an old pharaoh was accidentally buried in the pyramid during his deep, deep sleep. After he woke up, he found himself buried, so he had to escape from the pyramid within 100 seconds, or the entrance would be closed forever!) Moreover, I drew a pharaoh, which acts as the main character in the game. By the way, the pharaoh is made of several quadrangles and lines.

First Pharaoh


First Maze (Triangular)


After finishing the maze and the movable item, the pharaoh, on Friday (03/24/2017), I started to work on “collision detection.” I worked with Luis, and we tried to use the exact positions of the lines to detect collision. However, since nearly all values (x and y) of the lines are not rational, we couldn’t make effective detection. Therefore, after several hours of struggling, I decided to draw another triangular maze which is made of vertical and horizontal lines. I made another maze on Saturday (03/25/2017).

Second (Final) Maze

new pyramid_whole

However, making collision detection by detecting the exact values was still hard, so I asked Jiwong if I could detect by color as what professor Mikesell suggested. Therefore, she taught me how to use “get” function and some basic ideas about pixel. I used to arrow buttons on my computer then, so we only chose four points (because there are only four directions!) around the pharaoh figure’s mouth to do color detection. Finally we made successful collision detection (03/27/2017).

Collision Detection (The detecting points was lower, so it may be confusing at first)

After making collision detection, I started to think about “game logic.” I needed a beginning as well as a ending screen for the game, and I also needed several buttons that brings players to the story screens, the gaming screen, and the restart screen. I asked Luis and Antonius, and they asked me to create several new functions, such as “Successscreen” and “Failscreen,” so that the game can be actually “ended” and “restarted.” Also, I used “if statement” to create several rectangular buttons and used “text” function to type words like “start,” “go” and “restart” on the screen. By the way, the starting screen has a frightened pharaoh figure whose eyeballs are missing, the success screen has a rotating pharaoh figure with its eyeballs, and the failure screen is also a restart screen, which has a big restart button in the middle (03/28/2017 & 03/29/2017).

Final Code on Processing

So far, the Processing side is ready; however, on the Arduino side, our serial code didn’t work. Several days ago, Maya tried to make a tilt sensor, but it simply didn’t work then. We tried to use buttons next, but first, the direction was always wrong, and second, it was not entertaining enough. Finally, we chose to use joystick instead, trying to make our project more interactive. After several hours of research, Maya finally found out the solution, so the joystick can move the pharaoh figure on the screen.

Maya decorated the joystick box afterwards, using some pictures of scarab and bricks to decorate it. In ancient Egyptian myth, scarab would lead the dead person to be alive again, so it makes more sense since we have to rescue the dying pharaoh in our game. Also, using picture of Egyptian bricks allows people to know more about our project at first side, so that is why we chose to use these two elements to decorate our controller.

Joystick box


Lessons Learned

Collision detection is the most difficult technique I have learned in this project. However, there is still one flaw in my collision detection. Initially, I used arrow keys to control the pharaoh, therefore I used merely four points to detect the lines. They are on the top, down, right, left parts of the pharaoh’s mouth. However, we changed the controller to joystick at last, so the detection points sometimes do not work for it. Since joystick can give two values (e.g. up and left) and the same time, the moving object can move diagonally, thus sometimes it crosses the wall since the is no detecting point on the corners. It works fairly well for the most of the time, but sometimes it crosses the wall accidentally.

After doing this project, I have gained a lot of knowledge about Processing. I learned the importance to put codes in the right loops and right order, and learned the way to use some new, unfamiliar functions, such as “get()” and “class.” The improvement in the ability of coding on Processing is the most valuable things I got from doing this project.

Lab 6_Serial Communication

Author: Yun-Jui Hsieh

Instructor: Dan

Date: Mar 17th. 2017

Project: Exchange data between Processing and Arduino

We did this practice yesterday in class, therefore I had a set of codes for mouse and LED already. I started the class from testing the previous code. I set up the circuit again, and it worked fairly well.

After recording the LED circuit, I decided to change the LED to the buzzer. However, the buzzer didn’t work at first. It kept making clicking sound whenever I clicked the mouse. Therefore, I turned to Moon. He told me that I had to use the tone function [tone (pinMode, Frequency, duration) and delay()]. Then I started to set the tone for my buzzer, and I finally made out a song.

The code:

The result:


Today, I am more familiar with the “Serial” code, and know the way to tell the functions of “Read” and “Write.” Now I know how the two softwares work together, and the logic behind them.

Interaction Lab_Stupid Pet Trick (Jerry)

Author: Yun-Jui Hsieh (Jerry)

Instructor: Dan

Project: Stupid Pet Trick—Lazy People’s Cup Holder

I started my project at Wednesday’s workshop. I wanted to make a cupholder which can rotate, but I had no idea of getting started. Therefore, Antonius came to my aid, telling me that I had to connect a servo to the Arduino. Therefore, I used the small servo in my kit box first, and then use the following code to make it work.

Servo A

void setup() {

void loop() {

else {

Then, I borrowed the distant sensor. I got the wrong ones twice, so I spent one hour finding the correct sensor I should use. Finally, Dan helped me find the right IR distance sensor, so I could move on and finish my circuit.


But I got stuck right away because I didn’t know what code I should use. One fellow came to my help, and he told me to open a file in the library. Therefore, my IR sensor started to work.

The next step was to make my sensor be able to control my servo. Again, I asked a fellow, and he taught how to use “if statement.” We typed he following code:

if (sensorValue >= 50)
//I move the servo and wait
Serial.println(“move “);
else {

Therefore, when my hand moved toward the sensor, the servo rotated. Then I move to the final step–make the device out.

I needed to choose something light because small servo couldn’t hold heavy stuff. I chose sponge first. I carved a hole on one side of the sponge, and then I connected the other end to servo. The first problem was that the sponge was too soft, so the other end would drop when it rotated. I tried to use pin and paper tape to make it fixed, it worked somehow but it wasn’t perfect.

So on Thursday’s class, I changed the material I used. The sponge was replaced by cardboard, and the hole was replaced by iron wire, and the small servo was replaced by big one. I used copper wire to connect the cardboard to the big servo, and use a paper box to make my device taller. It finally worked like this.


Although I only had three days to finish this project, I was still able to accomplish the task. After doing this project, I have gained more insight of code and know more about if statement. It was pretty helpful for me to re-exam what I have learned so far.

Interaction Lab-Lab 4-Sensors (Jerry)

Author: Yun-Jui Hsieh (Jerry)

Instructor: Dan

Lab section: 11:15 am-12:30 pm

Project: Learn how to use sensors, and use sensors to control other devices.

Today’s instruction was a little abstract. First, the professor asked us to borrow a sensor and make a circuit with it. I wanted to borrow ultrasonic ranger at first, but there were too many people, so I borrowed an accelerator at last.

Then I went to the link and download the code for accelerator. However, I didn’t know how to connect it correctly, then I asked a fellow. He told me that GND means ground, VCC means power. And then we look up the usage of SDA and SCL online. With his help, I was finally able to make a circuit. This is how it worked:

However, I didn’t know how to use the sensor to control other objects no matter how hard I tried. Finally I turned to Moon, and then he explained “if statement” to me.

First, I have to decide which hole the new device should go in. I tried the buzzer at first, but he suggested me use LED instead.

Then I have to use “if statement.” I set a value first, and then stated:

if (x<0.5) {




After writing this code, my circuit worked like this:


I was not able to comprehend all the things in lectures, so I had some troubles making circuit and creating new codes. I still cannot comprehend those new codes like map, else if, etc. I think next time I have to pay more attention on the lecture, and ask more questions before the lab.

Interaction Lab-Lab 3-Animation in Processing (Jerry)

Lab Date: Feb 24, 2017

Instructor: Dan

Aim of the lab: Create an animation with Processing using any 2D primitive or vertex shapes

Part one: Use various shapes to draw an item.

I drew a cat in a previous class, and I also doing some online research in order to understand the way to draw a triangle and an ellipse. Therefore, instead of merely using “vertex,” I tried to use some triangles and ellipse to draw a cat.

First, I drew an ellipse and two triangle. However, I didn’t type them in the right order, so it looks like this:


Then I realize the importance of typing in correct order. Those who are typed earlier will be at the back, and vice versa.

Soon, I created a cat’s face by adding more ellipses and an triangle, trying to create its eyes and mouth.


I wanted to know how to make it rotate, so I ask Moon. Moon first introduced the concept of “translate” and “push and pop” to me. “Translate” can change the origin, “push and pop” can make the item independent from the outside.

I want my item to spin around the center (width/2, height/2), therefore, Moon added a “push and pop” first. Then he translated the origin to (width/2, height/2). The cat fell to the right down corner of the screen.

版本 2

Then we enter “rotate(radians(a))” and “a ++” below “translate,” then the whole cat spin around the center like this.

But this is not the result I want. I want it to spin at the same place.

So Moon added another “push and pop” inside the first one because we just wanted to control the image but not the rotation center. We again translate the origin, we typed “translate (-width/2, -height/2)”, which means we moved the image back to the original place again.

Therefore, the outside “push and pop” is finally used to change the “rotation center,” and the inside one is used to “put the item back to the original place.” That’s why I needed two layers.

But I wanted to do even more, so I asked a fellow if I can make the head go back and forth. He told me that I have to change the variables.

This is what I typed first:

float a=0;



if (a>=30) {a=0}

Then he told me that I should add another variable to make it smooth. Adding a variable makes it possible to move in the different direction smoothly.

This is what I typed at last:

float a=-30;

float x=1;


a +=x;

if (a>=30) {x=-1};

if (a<=-30) {x=1};


I learn a lot more about Processing in this lab. It was abstract when the professor explained those function in class, but after practicing for several times, I finally understand its logic.

Actually I didn’t have to learn that much in class (e.g. add a new variable to change the direction of rotation), and I was not supposed to do so, but I just want to understand programming in a relatively short period. I was able to reach the goal before the end of the class, I really enjoy the process!

Interaction Lab-Lab 2-Jerry Hsieh

Author: Jerry Hsieh

Instrutor: Dan

Feb. 17th 2017

Lab section: Friday 11:15am-12:30pm

Part one: Traffic light

Materials: Wires, breadboard, LED*5, 220Ω resistor*5, 10KΩ resistor*1, a switch, a DFRduino

1. Traffic Light

Today, I didn’t have a partner. Therefore, I follow Antonius’ suggestion to work with another two guys whose names are Mark and Shir. However, I still made those circuit by myself because we finally got our own kits.

Initially, I used the wrong board. Fortunately, one upper classmate told me this, and I changed it right away.

First, I connected the DFRduino to breadboard.


Then, I put the LED on the breadboard and finished the right part of the circuit.


I did the same thing to the left side, and then I connected the 10kΩ resistor and the switch.


Finally, I pasted the code to my computer, and here is the result:

Part two: Temperature Alarm

Material: Wires, breadboard, a DFRduino, a buzzer, an LM35

2. Temperature Alarm

This one is relatively easy. I just plugged in the temperature sensor and the buzzer.

Part three: RGB Light Dimmer

Material: Wires, breadboard, a DFRduino, LED, Variable Resistor, 220Ω resistor*3

3. PGB Light Dimmer

The professor told me the longest leg of the LED is the ground because it connects to any others, therefore I should connect the longest leg to the ground. Then I follow the diagram and finished my circuit.

Part four: Ambient Light

4. Ambient Light

I followed the diagram, but at last I still could not make it work. Still, I couldn’t find anything I did was wrong.



This was my first time working alone with various project. Having the experience from previous week, now I know more about the DFRduino and the breadboard. However, I am still not able to call every item’s usage and name.

I didn’t modify the code when doing experiment because I was crazy for making new circuit. However, I think it is even more important to understand what the code is talking about. So next time I will try to modify the code for a little bit, and hopefully I will know more about programming and circuit.

Interaction Lab-Lab 1-Jerry Hsieh

Author: Jerry Hsieh

Partner: Maya Wang

Date: Feb. 10th. 2017

Instructor: Dan

Lab section: Friday 11:15am-12:30pm

Exercise 1: To build a circuit based on the following circuit diagrams


Part one, connecting the buzzer

Materials: an LM7805, a buzzer, a switch, wires and a electricity transformer

It was hard to read the diagram at first, but luckily, my partner had some experiences of making circuit, so she helped me a lot. For the first one, I didn’t do many things because I was watching and learning. Initially, the circuit couldn’t work normally although we couldn’t find anything wrong. After checking several times, we finally realized that we took the wrong transformer. We were supposed to take the 5V one, but we took the 12V one, and that was the reason why our circuit din’t work.



Part two, connecting LED

Materials: an LM7805, a 220Ω resistor, an LED, a switch, wires and a electricity transformer

Having previous experience really helped a lot. This time, it was my turn to make the circuit. Since everything is almost the same, I did not do a lot of changes. I inserted the resistor and made sure I put the LED in the right direction, then we finished this part.


Part three, adding a variable resistor

Materials: an LM7805, a 220Ω resistor, an LED, a switch, wires and a electricity transformer

This one was relatively more simple because the only thing we had to do was to insert a variable resistor. However, we didn’t know if there was any difference between the three legs, so we turned to professor Moon. He told us the single leg had to be attached to the positive, but the other two had no differences. Soon after, we finished our third circuit.


Extra one, connecting buzzer to variable resistor

Materials: an LM7805, a 220Ω resistor, a buzzer, a switch, wires and a electricity transformer

We just changed the LED for the buzzer. We did it after being permitted by professor Antonius.



It was very hard for me to read the diagrams initially. However, after several practices, I finally understood the way that the breadboard works, and I also understood the way to distinguish horizontal and vertical lines of the breadboard. It was even more interesting than I expected.