Mask Iteration

– doodle of mask ideas

2015-02-17 14.02.33  2015-02-17 14.03.57

– 3D models built in Maya

Screen Shot 2015-02-17 at 1.43.18 PM Screen Shot 2015-02-17 at 1.44.18 PM Screen Shot 2015-02-17 at 1.45.10 PM  Screen Shot 2015-02-17 at 1.46.24 PM

– Pattern unfold by Pepakura

2015-02-13 00.53.45

– Prototyping with paper

2015-02-13 00.53.03 2015-02-13 00.54.18

– Prototyping with fabric

2015-02-17 14.10.58  2015-02-14 17.37.50

– Mask iteration display –> Mask Gang

2015-02-17 16.43.44  2015-02-17 16.44.062015-02-17 16.44.33

From left to right, dirty design based on the different functions:

  • Spikes – being inhuman, scary and aggressive
  • ChickenCow – ???
  • Box – attached to body, so the mask is hard to take off
  • Ears – the sound is magnified by funnels sticking out near the ears,  thus user becomes more aware of the environment around

Virtual World Construction

– doodle of world: 1) Closed, 2) Open

2015-02-17 13.58.49

– Coding coding coding….


{ Brain } – beta version


Brain <beta version>

Brain is an automata that shows how the brain works when you think. Composed of handmade steel wires and knotted rope as pulley system. Brain functions in two ways:

1) Conscious –> Hand cranking the steel wheel to fluctuate the shells, and also rotating the wheels on the other face of brain.

2) Subconscious –> Using ultrasonic sensor to measure the distance, part of the brain will function automatically once the user is in position / wearing the helmet.


Exposing yourself & Taking in the unknown

The most exciting/weird experience of this project is the moment you stick your head into it. The motor above you starts moving; the vibration and sounds of the pulley system; the view you see through the wood cubes, knotted ropes, and steel wheels. It’s the mixture feelling of exposing yourself to undergo the vulnerability, and taking in the unknown to activate all your senses in the narrow space.


2D/paper –> 3D/physical

Inspired by renowned kinetic sculptor Arthur Ganson, I decided to use steel wire as the means for my Automata final project. Based on the photos and videos collecting from internet, I sketched out the shape first, and then tried to figure out how to bend the steel wire into wheel.


It’s a trial and error process, but thanks to magical Zoe Logan, I learned different pliers and jigs to make proper(at least better than free style) steel wheel. The whole journey is a little bit pain in the ass, but the result is satisfying. Beside boosting my stamina with heavy laboring, I’m glad the efforts somehow accumulating into something weird and terrifying looking.


I learned a lot from this transforming 2d ideas into 3d physical form process: the pros and cons of wire bending compare to the thick steel connected by welding; the limit of series connection the wheels with knotted ropes; the necessity of middleware of two big wheels to increase the tension.


gamma version

Multiple motors to fully construct the node system of brain on all the faces. Pill the paper off the acrylic sheets so it’d be totally transparent. Could have multiple hand crank nodes as well so it will become a cooperative “thinking” system.



Related posts

Concept Sketch, Process of Making.


{ Brain } – process of painfully crafting your idea

SO. Here’s the report of my { brain } automata making process.

First, prototype with cardboard. Laser cut 11 pieces of pentagons, and stick them together with my favorite tool – duck tapes.


And endless steel wire bending.2014-11-23 22.56.04


Laser Cut transparent 3/16″ acrylic and build into dodecahedron  with hinges and machine screws.
2014-11-30 17.00.26

And mount the motor my pulley system!


Things all sound easy but there are actually lot of painful struggling –>

  1. Pre drilling hole on small wood tube is hard. Crack easily.
  2. Rope has to be trimmed neatly or it will stuck with wires.
  3. Bad binding with wire and motor shaft. Asked magical Ben Light, ordered a shaft coupler to connect wire and DC motor.
  4. Have to relocation the motor. Should leave more space for the shaft side.
  5. Friction debugging nightmare…

SO. I’m really concerned about the possibility of finishing it before Final…. but whatever, I’ll keep working on it :DDDDD


Memory Glasses –> TO remember OR TO forget

[idea update, 10/19]

For the “Device to Forget”, I started brainstorming by thinking that who/what to do the action of forgetting? S/He/It could be meother peopleanimalsmachines, and even time. And then when I researched for forgetting, I gradually came out of the idea to replace the one you want to forget with the new one, like hallucinating yourself, and that can apply to my memory glasses idea!

Originally, “Memory Glasses” is putting objects that represent daily highlights into the glass bottles, and also restoring sounds related to it digitally. But now, I’m thinking about changing it into a device also can help you forgetting something too!

So. For example, A tries to forget B(could be a person or an event).

  1. First of all, A collected all the stimuli that relate to B, and put them into the glass bottles. With each glass bottles, A records the related memories into each bottles.
  2. A puts the device in a public place. People come close, looking at each bottles and listening to the memories.
  3. People are asked to come out their own versions of stories with each bottles, and record them with the device.
  4. From time to time, A comes to the device and, looking at the familiar objects but hearing the unfamiliar memories.
  5. Gradually, A‘s original memories relating to the objects fade, and new memories bloom.


[Note] – Before A listening to the stories/new memories, the device might need a C to be a filter.




[documentation, 10/13]

So. Prototype #2. Prototype #1 is a lovely but cranky one. Due to the bad connection between the theoretical workable but awful functional design, I decided to make another version of it. After the office hour with Daniel Rozin, I realized the importance of stableness of this installation. For people to casually take up and put back, the connection of switches should be robust enough, e.g. jack head base.


But because of the gear testing of Automata, I kind of fell in love with steel wire, and I’m wondering if it’s possible to cooperate glass bottles with steel wires.



And here’s the test! Thanks to Andy’s suggestion, I change the method of reading the status of the switches. From one by one to multiplexing. Here’s a detailed description/tutorial of it. It looks simple, like “oh just buttons big deal~”, but took me so much fxxking time. That’s just reminded me again: “Nothing is simple.”



***Remember to use the 10K as pull-down resistors!!! The main reason that made me struggle whole night…. even I used other resistors but not 10k. GEEZ.


{currently works with Chrome and Firefox browser}

For the composition assignment the final of Coding for Emotional Impact class, I want to create something with multiple layers and is self-explained. Inspired by the description of computer vision is a rabbit hole from Andy(because I’m learning Three.js by myself recently), I wanted to make a game about “Rabbit Hole”, and my biggest assumption is that everyone is sort of down the rabbit hole.

ps. It’s not really a fun game to play. Still confusing should it be fun to play or just an emotion-building nowhere…

– Title
Rabbit Hole
– Environment
environment     environment2
– Audience
Whoever also down the rabbit hole or wonder how it feel down there.
– Narrative arc
Rabbit HoleMetaphor for the conceptual path which is thought to lead to the true nature of reality. Infinitesimally deep and complex, venturing too far down is probably not that great of an idea.

Literary Nonsense- has no system of logic, although it may imply the existence of an inscrutable one, just beyond our grasp.

And below are three snapshots of what I’ve built so far. I made my own models in Maya and drew textures in Photoshop. Can’t view online because of some web-related issue I can’t solve to load the music(SOLVED_by hard coding the url of music file path). But have no ideas how to do the transition from scene to scene…

SCENE_ZERO: http://www.rabbithole.link/


SCENE_ONE: http://www.rabbithole.link/index_D.html

Screen Shot 2014-04-13 at 10.26.14 PM

SCENCE_TWO: http://www.rabbithole.link/index_G.html

Screen Shot 2014-04-13 at 10.27.30 PM

SCENE_THREE: http://www.rabbithole.link/index_S.html

Screen Shot 2014-04-20 at 6.44.00 PM

SCENE_FOUR: http://www.rabbithole.link/index_M.html


SCENE_FIVE: http://www.rabbithole.link/index_T.html


SCENE_SIX: http://www.rabbithole.link/index_F.html


SCENE_SEVEN: http://www.rabbithole.link/index_V.html


SCENE_EIGHT: http://www.rabbithole.link/index_E.html


( Three.js + web stuff ) == super deep rabbit hole.

css update: Healthy Movie Night

One page web-fantasy UPDATE! GO PLAY.

  1. Type in the movie you’re going to see.
  2. Type in the food you’re going to eat.
  3. Choose which exercise you’re going to take.
  4. Type in your weight, in kg or lbs.
  5. Base on the duration of movie, the calories of the food, the amount of calories born in certain exercise, and your weights, Healthy Movie Night gives you back how much food you can eat without worrying gaining any weights!

Screen Shot 2014-03-23 at 9.03.15 AM


e.g. “The Grand Budapest Hotel”, pizza, Jog in Water, 51kg.
Screen Shot 2014-03-23 at 9.03.49 AM


e.g. “Wanted”, spaghetti,  fishing, 51kg.
Screen Shot 2014-03-23 at 9.05.09 AM


e.g. “Alice in Wonderland”, cake, Ballet, 51kg.
Screen Shot 2014-03-23 at 9.05.51 AM



A flying + walking, surreal experience design for rooftop. Work done with amazing John.

It’s all start from an assignment in the class Spatial Media, with specific requirement as below:

+ be site specific (i.e. be designed for an actual location)
+ be designed for use by more than one person
+ involve a horizontal surface


Because we wanted the experience to be strongly connected with space, we developed the idea starting from space. We chose rooftop because its exciting yet rusted characters, and we thought it has the potential to be a relaxing playground for citizens, especially for cities with limited space.


+ Utilize the height and windy characters directly from space
+ Cooperate with your teammates to maximize and exaggerate the excitement


SWINGS PRODUCTION(making miniature!)

+ woods
+ necklace chains & rings
+ thin hemp rope
+ webcam
+ monitor
+ white board


+ Openframeworks
+ videoGrabber
+ videoPlayer
+ color detection
+ image sequences
+ soundPlayer

Swing range test

Infinite Loop
This is one of the amazing beautiful mistake with the infinite loop between monitor showing what camera capturing and camera capturing monitor.


+ Team A & Team B
+ swing people*5 need to cooperate to swing as high as they can to shoot out the strong thunder, or either weak thunder or NO thunder will be shoot out(different thunder sound effects).
+ people in the center can block the thunders by stepping on them(scoring sound effect + spark sequence), so two team have to try to rope in the people in the center
+ once thunders reach the other side, strong thunder gets 2 scores, weak thunder gets 1 score.

Face and Spider_60 sec. animation_{stages * 3}

Audio wave research time!

Totally not what I planed to do. I ended up make a story about a face and a spider. And it’s a face I guess represents the dark side of human beings. Scared easily by the unknown, and psyched about seeing spider being bullied by boxes.

3 stages story. Codes are gross and messy because I stayed up all night and was unconscious most of the time, and it can’t be played in Openprocessing I don’t know why… But. I kind of like the result even though it’s rough as hell, and I plan to make a v.2 of this.  Soon.


Continue reading