Final Project- Flappy Shadow

Final Project

by Tong W,  Kai H

Concept & Reference

    The idea of this  project comes from our childhood memory- shadow puppet. Before we grown up and become more sophisticated to this world , we usually play with and connection meanings and objects with a more creative way. A stick can be a sword of a warrior. A shadow can be a monster hiding in the room. But most of us lose this ability of imagination. In this project, we want to waken people’s early  habit of imagination and revivify the shadow into our living environment.

    Our reference is “The Treachery of Sanctuary” from Chris Milk’s. The installation art takes viewers through three stages of flight through the use of Kinect controllers and infrared sensors. Viewers could come closer to the screen and start waving their hands. The “shadow” of their arms are transformed into two giant wings and move as viewers waving their arms and walk closer toward or further from the screen.


Design & Prototype



    In the original design, we want users can first create a real shadow with their bird gesture, which is the easiest shadow animal gesture. Then, the shadow can fly into the screen become a graphic bird which represent the imagination being vivified. At last, bird goes to the projection and live in the real environment.   

    We choose Kinect sensor, but leap motion or the combination flex sensor and accelerometer as our input sensor is owing to that it have a great range of sensing zone and intuitional experience. For the output, we use overlook viewpoint to mimic the shape of shadow. The bird image is draw by illustrator and animated by P5.js.

    The first problem we faced is the position arrangement of the flashlight, projection and the Kinect. They influence each other and the movement of users.The second problem is the control of Kinect. We spent lots of times to erase the noise when Kinect detect more than one person. At last, we originally want to use three.js to show a 3D bird in the browser but fail.


Technique & Source Code



Intro TO FAB -Enclosure (W4)

For the enclosure assignment this week, I use a candy box with painting of Miyazaki Hayao animation. At first I want to build a noise generator with basic analog circuit which I seen before.

However, I find that the analog isn’t that easy to build. So I turn to build a arduino enclosure, because I can’t really spare more time from the final project. Then I remove the lid of the box.



I build a new lid with acrylic which is done by laser cutter.

Shockingly, I fail to wrap the wire well and it connect together form a short circuit through the metal box. This burn my battery holder, but lucky, this is the only lost to learn this lesson.

Intro TO FAB -Lazer Cutter (W3)

This week I try to build a 3D illusion acrylic and it comes out many failures and experiences. My first try is to create a spatial sensitivity with following picture.

I burn the cardboard because the line is to dense. I found it’s hard to cut acrylic into a perfect straight line with the round saw, and I still need to practice the use of the sanding machine. I love it.

My first try is a failure. The spatial effect seems not good.

My second try is better, but still didn’t reach my expectation. I try to print a mount Fuji with its contour line.


My Third try is still in the planning phase, because there’s no more time slot for put this image into execution. This time I use the contour line gram of Taiwan. I expecting that when I stack up different layers of map it will display an 3D Taiwan in the acrylic cube. It takes lots of time to processing the image.


If I want to do roasting etch, should I fill the shape with color that I want to print in the illustrator file or only using black represent filling the shape in the machine setting?

ICM -Data -Week 7

Create a sketch that uses an external data source. Plan to present in class using the classroom computer or your own laptop if you prefer. Here are some ideas:

1.Track personal data over the course of a few days. Enter the data manually into a JSON file and visualize the results.
2.Count word frequencies in two different text sources and visualize the results.
3.Use weather data to affect elements in a sketch.
4.Gather data from a google spreadsheet and use in a sketch.
5.If you are interested in maps, check out ITP 2nd year Cris’s Mappa p5.js library.

Please download file here:

ICM -Objects and Arrays -Week 5

Design a sketch in an object-oriented fashion. Follow these steps and see how far you get.
1. Write a class with a constructor function and generate one single object.
2. Put one or more functions in the class function and call them on the object.
3. Try making two objects without an array. Can you make them different?
4. Duplicate the object using an array and make as many as you like!


This week, as the usual, I get some wood chunk and luckily found five pin pon  ball at the same time. Hence, I decide to build five paddle for it.

1.My raw material are not in a beautiful shape and surface that I have to do some pretreatment like cutting it into pieces with vertical angle. This will help with the afterward process,

2.Mark on the wood to unite the shape and size. Then use bandsaw to cut the material into target shape.

3.Use sanding machine to refine the edge and polish the surface to offer a smooth touch,

(now facing some issue of uploading pictures of process )

Take away:
1. It’s important to check if the shape of material upright
2. Jigs are so important to eliminate the mistake of human craft

PCom -Observation -0905

Pick a piece of interactive technology in public, used by multiple people. Write down your assumptions as to how it’s used, and describe the context in which it’s being used. Watch people use it, preferably without them knowing they’re being observed. Take notes on how they use it, what they do differently, what appear to be the difficulties, what appear to be the easiest parts. Record what takes the longest, what takes the least amount of time, and how long the whole transaction takes. Consider how the readings from Norman and Crawford reflect on what you see.

ICM -Functions: the basics -Week 4

Explore re-organizing your code. Keep setup() and draw() as clean as possible, and do everything in functions that you create yourself:
1.Break code out of setup() and draw() into functions.
2.Use a function to draw a complex design (like this) multiple times with different arguments.
3.Write a function to that returns the result of a mathematical operation that you need to do several times in your code.