Kinetic Interface Midterm (Emma)

Project Name: An Interacitve Shawdow Play Experience

Project Overview:

This is a video showing how the project works:

Concept & Inspiration:

Even before I start this concept, I got super interested in leap motion and decided to take use of it in my project. However, I hope leap motion in my project is not just a replacement for the mouse, instead, it should work as an extension of hands, our ten fingers. Also, I feel it would be great if I can combine this modern technique with traditional Chinese culture where I have lived in.

Based on these two concepts, the traditional Chinese shadow play is what comes to my mind first. I chose the character Monkey King cause it’s very familiar to audience all around the world, and stands it a symbol of Chinese culture.

Visual Assets:



   monkey king body parts                                              shadow body parts



Basically I divided my whole codings into four assets and five mechanism. Here is a picture introducing their relations:

I’ll give a brief introduction here one by one.

The first mechanism I use is the map function. Following the codes in picture, I could get an angle, angle a (red in picture). This angle is very important cause it allows me to express all the following points, positions, and lines.

By using angle a (same as angle1 in the picture), I could locate the moving points, and thus create the moving lines. Thanks to professor Moon!He taught me about trigonometric functions which plays a really important role here.

After creating lines, images, and shadows, I want to make use of the object function taught in class. So I created this particle system with flower in it. I referred to some codes online so I can create the effect like snow flackers fallilng down gently.


During the whole process, I came across following problems:

  1. Sound Library – sound library in processing goes in a mess. I tried to play background music in my project but that didn’t work. However after presentation, Candy told me that I could use a library could mineo, in which sound works quiet well.
  2. Text font – I have no idea, but, acutally transparent backgrounds of png. pictures shows up as black when font files (.vlw) gets imported in data file. So I gave up doing texts by coding, instead I created them in Illustrator.
  3. Projection – I really hope to present my work on projected platform. However, it took me some hours to find out that absolute coordinate doesn’t work in projection mode, thus I have to convert points like “(360,100)” into “(offscreen.width – 440, offscreen.height – 700) “ … That’s just too much work and I did not have enough time, so I gave up.

Possible Improvements:

For future work, I kind of want to improve this project into my final project. Now I’m thinking of:

  1. Add to the movements of leap motion. Audience can not only control images on up down direction, but also on left right direction.
  2. I hope to add another character that follows the other hand of the audience, with two characters, it would be possible to make my interaction into a story-based one.
  3. Thanks to fellow on critic session, he mentioned that there’s way to make different parts of images work as a whole and rotate in some linear ways. If it works, the whole process would get closer to the true fact of shawdow playing in real life. I’ll ask Professor for help in following days!

Leave a Reply