Session 2: Make multiples of something

For this assignment, I attempted to use glass bottles as the main material. Initially, I was trying to cut the glass bottle into two pieces. I followed this tutorial on YouTube step by step to cut the glass bottle. Basically,  I used a glass cutter to cut a circular gutter around the bottle first. Secondly, I have to create the imbalance of thermal expansion to let the glass bottle to crack at the gutter I cut. I utilized candle to heat it up and use cold water to cool it down, repeatedly.

However, I failed…

again and again… It’s very hard to control the cracking path of the glass. The cracking surface is super rough and sharp.

This procedure is very time-consuming and I couldn’t succeed once. As a result, I start to think about how to simplify my project. I couldn’t find a proper replacement until I bumped into this beautiful decoration.

It seems way easier to make. I decided to do it without any hesitation since time is running out. The following are materials I used other than the glass bottles.


1. Wood board * 5
2. Part of the wood frame * 1
3. Protection Pads
4. Clips
5. Hinges
6. Screws
7. Hemp twine


I broke down the process into four main steps
Step 1: 
Create the connector between the board and glass bottle 
Step 2: Attach the hemp twine to the wood board 
Step 3: Attach the connector to the wood board
Step 4: Attach the glass bottles to the connector

Step 1-1
I used woodcutter to cut the wood into five pieces of the same length
Step 1-2
Polished the rough cut surface
Step 1-3
Attached the clips onto the wood pieces
Step 1-4
Put the protection pads onto the inner surface of the clips
Step 2-1
Drew the position of the holes
Step 2-2
Bond the hemp twine to the wood boards
Step 3
Used hinge to attach the connector to the wood boards

Step 4
Attached the glass bottles to the connector
Final Product

Session 7: Data Visualization

Population Size of Cities in Taiwan

Source Code

In this assignment, I utilized the data from Ministry of the Interior of Taiwan. I combined the longitude and latitude and the population size data into one CSV file. The following is the raw data for 19 different cities(Sort by population size).


I used the circle area size to represent the population size. The x, y coordinates of every circle are the longitude and latitude of the cities; The diameter stands for the population size. Besides, when the population exceeds 1 million, the color would change from blue(#00c8ff) to orange(#f0641e). I used Adode Illustrator to generate the background map. The difficulty I met was mapping the location with the background map. In the beginning, the circles’ locations are distorted because I neglect one factor: The distances between each degree of longitude and latitude are different. What’s more, the distance between each degree of longitude would vary in different latitudes. I fixed the distortion after I found this formula, which allowed me to calculate the length ratio of the longitude and latitude between 120.2513 – 121.7195 and 22.54951 – 25.10898.

Session 1: Stop Motion Animation – Dinoseed

Idea and Inspiration

In this assignment, we started to shoot the photos without having a solid storyline. We only had two things we want to create in mind before we started.

  1. We want to create an illusion which blurs the line between physical and digital world
  2. We want to sow seeds but the seeds eventually transform to a dinosaur egg because we have this, a dinosaur hatching toy.

    We improvised most of the parts in the animation. Luckily, we had a lot of amazing impromptu and serendipity when we were shooting.

Section 1: Grabbing seed pack from the screen

We photoshopped two images and made a real seed pack to create this illusion. One image has seed pack photo on it. The other image was blank on the seed pack photo’s position. When the hand grabs the real seed pack, the image switches to the blank one.

Section 2: Sowing

At this part, we used high angle shot to create a close-up view of seeds.

Section 3: Watering

This is the most challenging part we met because we can’t use real water since water has fluidity. It’s extremely hard to capture the real water movement. As a result, we used a piece of light blue textile to symbolize water. This foldable, flexible and smooth material could create the fluidity effect in stop motion.

Section 4: Fertilizing

We use heart shapes as a metaphor to symbolize it takes efforts to cultivate something

Section 5: Germinating and hatched

The seeds germinated to an egg and baby dinosaur hatched from the egg. We used a marker to create the cracking effect and literally cracked the egg and pulled the dinosaur out of the egg.

Final Project: Adoll

ADOLLS Dolls for Adults

Do you ever just want/need your own time and space? Do you look attractive and non-threatening? Do you always find yourself in situations where people insist on invading your personal space? Whether it’s on public transportation or in public restrooms, the library, movie theaters etc., we want to help you solve this problem. Introducing ADOLLS: Dolls for Adults to help you get out of awkward and uncomfortable situations. This portable and collapsible mannequin will deter those who choose to ignore social norms and courtesies by sitting/standing next to someone when there are clearly other options available to them.


Studious Woman: Mary Notari
Strange Man: Alden Jones

Directed by Hau Yuan, Sandy Hsieh
Screenplay by Hau Yuan, Sandy Hsieh
Produced by Hau Yuan, Sandy Hsieh

Session 8: Final Project Ideas and Inspirations

My final project inspiration came from my mid-term project and personal experiences. My mid-term project’s idea was to utilize sound to evaluate one’s pressure. After mid-term, I’ve made up my mind that I want to do something related to emotion for my final project.

As a consequence, I started to dig out deeply from myself. I am a very rational person. I rarely lost the control of everything in my life. However, when I feel desperately stressful and upset due to the urgent accident or crazy schedules and deadlines, my mind would shut down, and I could barely do anything like a paralyzed soldier. Under this circumstance, I would stop doing anything and write down my thoughts, worries, and the reasons why I felt the extremely negative feelings. After I talked to my notebook or a piece of random paper, I felt relieved, and I could start to organize my mind again.

After half of a year later, when I saw my worries and thought again, the emotion has converted from negative to positive feeling. It’s interesting and worthwhile to ruminate when seeing the negative thought generated by yourself past. The scenario is like: Why this circumstance trapped me so bad a year ago? Can I cope with the emotion again when dealing with the same situation?

As a result, I want to transform this interaction with myself to a physical interaction device. I want to create a device or installation that is very approachable. You can tell all your secrets to the invention, and it will “listen” and help you store your worries and thoughts. The device will upload your thoughts to the computer, and you can set the date you want to listen to it again. In a nutshell, this is a “time capsule” of your emotions.

Session 1: Making a flashlight

Idea and Inspiration

At the very beginning, I stuck at the brainstorming stage for ideas. I browsed the flashlight DIY tutorials on YouTube and couldn’t find any inspirations. As a result, I decided to leave my laptop behind and go to grocery stores to explore. Luckily, I bumped into this…

Commonly, hands control most of the flashlights. What if I create a flashlight controlled by my mouth. Here is the original sketch I drew.


The controller is in the pacifier part, and the lighting is at the bottom of the bottle.

9V battery, wires, battery connector, switch
Super bright LED
Soldering iron
  1. Switch Part
  2. Drill a hole at the bottom of the bottle to insert LED
  3.  Testing the LED and calculate the resistance I have to add
  4. Assemble the LED with the bottle, battery, and switch

    How it works

Session 6: HTML controls

Source Code

I used uses slider as the HTML control to modify the sketch’s behavior in real time. This interactive artwork basically consists of a for loop and trigonometry functions, which could create waves graph. To fully understand waves, we need to understand measurements associated with these waves, such as how often they repeat (frequency), and how long they are (wavelength), and their vertical size (amplitude).


In a nutshell, the wave speed of the wave in my artwork is constant. I set Wavelength and Amplitude as two modifiable factors. What’s more, users could also adjust the color palette in the third slider. With different combination of wavelength, amplitude, and color, the graphs could transform hugely to different structures. The chameleon waves could look like waves, DNA(Double helix shape), and Carbon Nanotube.

Session 7: Mid-term Project


My inspiration came from the struggle and pressure with mid-term projects. All of a sudden, I bumped into the illustration I drew three years ago.

I created this illustration just for fun. The idea is very straight-forward. The left side is a healthy condition. As it goes to the right side, it represents how stressful the character is. I used an exaggerated way to as the pressure goes up. An idea popped up right away after I saw my drawing. I wanted to use this illustration to be the interface of an indication of someone’s pressure.

Afterwards, I start to think about how I can map and indicate someone’s pressure. What do stressful individuals do to relieve? Yelling! Eventually, I used sound as an indicator of stress.

How it works

On the physical interface’s side, I used Electret Microphone Amplifier – MAX9812 as the sound level detector and p5.serialcontrol to transmit the data from Arduino to the laptop.

On the digital interface’s side, I set five volume bars from low to high. There are five different states to tell users how loud they shout. When the volume passes the threshold, the corresponding illustration and animation would trigger. The following are the five different states:

state 0
state 1
state 2
state 3
state 4
state 5

Source code

Session 5: Array

work 1

Source code

work 2

Source code
This week, I’ve been experimenting what the possibilities of the array in JavaScript are. First, I created a simple sketch which could allow the user to use clicks to create the vibrating circles. When users click a specific point on the canvas, a vibrating circle will generate at the point which users clicked. When the circles reach the edge of the canvas, they will bounce back. It looks pretty much the same as the Shiffman’s example. I wanted to explore more possibilities. I found another online coding learning platform and watched their video. I found the way to create “echo” of a moving shape by using the array, and I combined the code with trigonometry function. However, I met some difficulties when I was trying to modulize it into constructor function. I am still looking for the way to do that

Session 6: Serial Communication with p5.js

p5.js source code
This week, I used my assignment in ICM class to do this project. Initially, I used a simple for loop and trigonometry functions to create an animated DNA shape. For this task, I transferred the analog input value from potentiometer to the sin() function. I made the wavelength and amplitude changeable by putting the fromSerial value both inside of the sin() function parenthesis and also let it multiply the sin().

for ( i = 0; i < CircleNum; i++) {    
  var g = map(mouseX, 0, 1280, 100, 255);  
  var b = map(mouseX, 0, 1280, 255, 0);  
  var x = i*(width)/(CircleNum); 
  fill(random (0,255),g,b,200);