Narrative Self

“How we perceive the anxious feelings with AR Practice” 

For long we’ve been thinking about how we communicate our feelings to others, and how we perceive and understand other people’s feeling. The core concept of this AR practice is to visualize the indescribable feeling of anxiety. Based on personal experience, research and one-on-one interview with people, we try to approach the feelings of anxiety into different aspects, including invisible pressure, hypothetical judgement from others, panic attack, insomnia…

Into My Eye

Platform: webRTC, tensorflow.js, node.js

“Into My Eye” is a web-based project I created for the finals of both my Live Web and Machine Learning for the Web classes, which creates a poetic space for us to look into the eyes of “machines” to see the world they see.

The project is realized mainly based on webRTC, tensorflow.js and node.js running on the backend: webRTC and node.js organize and maintain the server for the program, tensorflow.js runs word2Vec, a group of related models that are used to produce word embeddings. This method allows you to perform vector operations on a given set of input vectors.

Multiple users could together visit the webpage, and trigger the program by giving a simple one-word input. When received the one word as input, the program will first compare it with the category list of Google quick-draw database, if matched, it will returns a random drawing of the category; if not matched, it will start calculate the distances between the input and the quick-draw database, and return the one word “closest” to the input based on its knowledge. All the results based on the user’s input would be framed as “To me [input] is [result]”, and results based on other users’ inputs would be framed as “Others think [input] is [result]”. Therefore, the participation of multiple users at the same time could turn the experience into a collective poetry writing experience.

For long, how algorithm processes our input, or more poetically, the way machine thinks what we think, is like a “blackbox” - and this project tries to visualize the invisible “thinking” process of machines. By framing the program results not as results, but some kind of answers to our questions, the project purposely blurs the boundary between human minds and algorithms and forms a poetic conversation between the two as part of the fantasy about cyberpunk virtual world.

Into My Eye.png

Dear Younger Me.

“If you were given a window into the past, what would you say to yourself?” 


Dear Younger Me is an interactive window installation designed, built, and exhibited with collaborators Sam Chasan and Nick Wallace. The piece invites people to share their joy, their love, their advice, their regrets, and their heartbreak with their younger selves via text message. Each message is printed out onto a continuous feed of paper, slowly filling the window and allowing passersby to read messages others have sent to themselves.

A live, searchable archive of every message sent to Dear Younger Me is available online at All code for the project is available under the MIT Creative Commons license on Github.

Me. Myself. I

Platform: Unity, Vuforia and Xcode

Could human body become objects? I have always been obsessed with the idea of human body objectification, as it has such as strong implication that blurs the boundary between real human and their avatars.

If we deprive the uniqueness of being “me“, freeing our body parts to be duplicated, folded, twisted, cut off and enlarged, and treating our body parts as something functional like tools, would the concept of being human changed?

Inspired by the idea of objectifying human body, I transformed my avatar into three common items: a spiral bound of a book, a fan and a pair of earphone.

Live Web: Midterm (on progress...still)

The project is running on

My original goals for the midterm were two-folds:

  1. letting users capture their pictures, and control the position of the image on canvas by simply saying “up” “down” “left “right”.

  2. applying some sort of game rules for the interaction of the images on the canvas

Over the past week, I decided to rewrite the structure of socket communication of this project, trying to get rid of the overlay of image.

Welcome to the Assessment System

"Welcome to the Assessment System 2018, are you qualified to be Level 3 Chinese? "

“Welcome to the Assessment System” is a Twine game that sarcastically expresses my identity exploration as a Chinese in nowadays political environment . It was adapted from the Tracery project “Cautionary Tales for Chinese”, a poetry project I created early this semester.

The Twine game uses the content generated by Tracery from “Cautionary Tales for Chinese” as its base script, and develops the script into an experience of assessing the participant’s qualification to become “Certificate Level-3 Chinese Citizen” by giving the participant three questions based on the script.

Developed from a simple "cautionary tales”, this reading test-format game reinforces the feeling of political ideology propaganda by forcing the participants to pay close attention to, repeatedly read through all the content given and understanding those inner, unspoken logics and declarations.

This text-heavy project has a pretty straightforward question-answer-question-answer structure: The page with the base script is followed by three questions, each has options standing for different scores, which will add on and give you a final score at the end of the game.

The three questions are created following the classic SAT/GRE reading test format. It also gets inspiration from my memory about answering Chinese reading questions back in high school.

And the final score you get at the end of the game assesses how “ideal” you are now as a Chinese citizen, whether you move on to being an advanced “Level 4-pending Chinese”, stay on getting your Level 3 certificate or go back to being a Level 2 pending status Chinese.

The Twine game structure:


Some screenshots of the game:

Live Web: Week 4 /Midterm Proposal

For Week 4 I created a collective canvas where everyone could capture their faces as an image, and speak “up” “down” “right” “left” to control their images. I would develop it into a Midterm project, where it will also involve game system: when two images collapse into each other, the users would be kicked out of the server.

Computer Approach to Narrative: Ren'py

Inspired by the music video Musical Fiction, a song about the song writing process, I created this Ren’py game called A Heart-broken Boy.

I basically follow the plot in the song when designing this dialogue-driven game: a lonely boy named Robert was heart-broken in a little bar because his girlfriend just broke up with him. What did he drink? Where did he go? And who did he encounter?

See the play-through below:

Live Web: Week2&3

Week 3: Collective Canvas (merged with week 2 assignment) 

Draw with words!

The webpage is now forever running here at

This is a collective canvas, where everyone could draw using their customized stroke: a word/sentence they type in the input on the top of the page. The text size isn’t fixed. It depends on how fast you drag your move, the faster you drag, the bigger the text is.

Computer Approach to Narrative: Inform 7 with Cinderella

Screen Shot 2018-10-17 at 7.43.24 PM.png

With Inform 7 I created this game named “How Cinderella become the mysterious princess”, a game that adapts the scenario of which Cinderella’s godmother asked her to get several things: a pumpkin from the garden, six mice and a fat rat from the mousetrap from the kitchen , and uses her magic wand, by a simple tap, to transform these items into a fancy coach, six horses and a coachman.

Source code could be found here.

But figuring out the logics of Inform 7 was very challenging. I have the plot now pauses at where Cinderella’s godmother has collected the elements she needs and give Cinderella a luxurious set of transportation tools and servants.

How Cinderella become the mysterious princess

An Interactive Fiction by Tong Wu

Release 1 / Serial number 180926 / Inform 7 build 6M62 (I6/v6.33 lib 6/12N) SD


You are now in this spatial room. Your step-mom and two step-sisters were all dressed up and left you for the prince's party.

When their coach gradually disappeared in your sight, you starts to cry.

Look at yourself, bare feet, a dirty grey dress. How could you go to the ball like this?

Your godmother, who sees you all in tears, who was a fairy, asks you tenderly: "You wish that you could go to the ball; is it not so?"

"Yes," cries you, with a great sigh. "Well, " says godmother, "be but a good girl, and I will contrive that you shall go. Can you check around and bring me a pumpkin?"

In the room there is a door to the south, which lead to the garden. And the kitchen is north of the chamber.

>examine grey dress

A grey dress you've been given three years ago as a gift when you dad married this woman, which later become your servant uniform. It is full of patches since it has been mended many times. But it cannot hide your beautiful appearance.



The garden is full of flowers and fruits. When you are young, your mom and you are always in the garden. She put you on her lap, sang you beautiful nersey rhyme. That's one of your sweetest memory you've always treasured.

A doorway east will give you a short cut to the kitchen. Don't bother going back to chamber to find the kitchen.

You can see a pumpkin patch (in which is pumpkins) here.

>examine pumpkin patch

Take pumpkins, as your godmother said.

In the pumpkin patch is pumpkins.

>take pumpkins

Bring it to the kitchen to see your godmother.




The kitchen is where you've been staying in for the past few years. Every day you wakes up before everyone in the house, and dedicately prepare breakfast for your families.

You god mother is now here. She is waiting for you to give her pumpkins.

You know every corner Inside the kitchen , including the mousetrap an old servant placed in the northeast corner.

A doorway south will bring you back to the chamber, or you could use the door you just came in that takes you to the west to the garden.

You can see a mousetrap (in which is six mices) here.

>give pumpkins

You gather the finest pumpkin you could get, and brought it to you godmother, not being able to imagine how this pumpkin could help you go to the ball.

Your godmother scooped out all the inside of it, leaving nothing but the rind. Having done this, she struck the pumpkin with her wand, and it was instantly turned into a fine coach, gilded all over with gold.

>examine mousetrap

There are six mices, all alive.

In the mousetrap is six mices.

>take mices


>give mices

You so damn brave, girl. Your godmother gives each mouse, as it went out, a little tap with her wand, and the mouse is that moment turned into a fine horse, which altogether make a very fine set of six horses of a beautiful mouse colored dapple gray.

Being at a loss for a coachman, You said, "I will check the rat trap in the yard and see if there is not a rat that we can turn into a coachman." "You are right," replied her godmother, "Go and look using the door to the west."



This is the exit of the house with beautiful lawn and a huge fountain.

You can see a rat trap (in which is three rats) here.

>examine rat trap

There are three huge rats inside the rat trap.

>catch rats

They just keep moving and screaming, make it hard to cath. But you manage to pick the one with the largest beard..

>give rats

The fairy choose the one which had the largest beard, touches him with her wand, and turned him into a fat, jolly coachman, who had the smartest whiskers that eyes ever beheld.


Performative Avatar: Morphing and rigging

Reading Questions:

  • Based on the readings, the male-gazed tendency of android/smart helper design actually fulfills the male fantasies on females. We seem to be a long way from the sensitive and caring robotic lover imagined by proponents of this technology. Would this tendency therefore lead to lower level of tolerance and consideration when it comes to real-human relationship?

  • Or it will just lead to a new era of human developing relationship or obsession with the androids they make? What could be some possible ethical discussion/dilemma rising from it?

Scan Morphing & Rigging

I used the scan of mine from last week to start morphing and rigging. When setting up the alignment points, I soon realized it’s really important to wear clothes that fits your body. My loose pants no matter makes it difficult to clearly mark each part of my legs, but also makes the final avatar to look bulky.

One of my favorite animations from Mixamo is called “Can can”. The avatar has its arms in a “T” shape and does high knee exercise constantly, which makes it easy to check if I have parts like arm pit and between-legs well scanned. As seen in the gif, the right arm pit part wasn’t well scanned, probably because of the loose blouse I wore.

Samba Dance.gif
Can can.gif

Computer Approach to Narrative Sketch #2: August 25, 1983

With the help of Twine, I adapted one of my favorite short stories, “August 25, 1983”, by Argentine short-story writer Jorge Luis Borges, into this interactive story project, “August 25”.

August 25, 1983 was the only Borges short story that uses date as its title. It’s about the meeting of two Borges: Borges of 61-year-old dreamed about that he visited the Hotel Las Delicias, accidentally ran into Borges of 84-year-old and observed his death.

The essence of the story is about “dream”. By repeatedly asking “who is dreaming about whom?” in the story, Borges creates time warp under a linear story structure. He purposely set up narrative traps inside a few suspicious keywords and hides the distorted story lines insides it. You could easily fall into these traps and get lost in his world.

The theme of the double has always been around Borges - in his short stories, non-fiction works or even inside he himself. He always tried to separate the public self from the non-public self and believe they are two people.

Therefore I adapted this short story by having two story lines going together: the 61-year-old “player” visited the Hotel Las Delicias, while the 84-year-old “player” went back to the apartment of Calle Maipé, and they ran into each other. There are several steps where, by choosing different way of answers to the question, you may switch from the 61-year-old to the 84-year-old, or vice versa. And you only notice the role change by figuring out the logics of the on-going conversation.

Twine Story Structure

Performative Avatar: 3D Scanning

I did my avatar scanning in the micro studio with Yiyao. I set up three spot lights to provide enough lighting.

I had my first scan as a burst scanning with my hair down. The texture of hair then became bulky and rigid in the final scanning result. Also it leaves terrible distortion on my shoulder part.

The second scanning went much better after I tied my hair up. But my partner started scanning my face from a side angle, which led my face look distorted.

Computer Approach to Narrative Sketch #1: Cautionary Tale for Chinese

Cautionary Tale for Chinese is a sarcastic tale generated with Tracery that features the terrible end of a Chinese who escaped from his socialistic reality and then ended up being eaten by decadent capitalism.

The tale was adapted from a 1907 children's book written by Hilaire Belloc called Cautionary Tales for Children: Designed for the Admonition of Children between the ages of eight and fourteen years. Besides the tale which I chose for this project, “Jim: Who ran away from his Nurse, and was eaten by a Lion,” the book also includes other tales with similar structure and topics: "Henry King: Who chewed bits of string, and was early cut off in Dreadful agonies”, “Matilda: Who told Lies, and was Burned to Death" and “Rebecca: Who slammed doors for fun and Perished miserably”.

The tales for children in this book have such a strong sense of disciplinary power, which keeps reminding me of the invisible surveillance and regulation from the government that I experienced when back in Shanghai this summer.

I keep the original structure of the tale as six paragraphs, and extract the key conflict of this story:

  1. “Jim” escaped from the protection of “nurse”, even though he was treated well and given lots of “good food”.

  2. “Jim” ran into a “lion”, he shouted out “words” to his “nurse”, but it was too late, and the “lion” ate him.

  3. “Jim”’s parents wasn’t too sad about their son’s death, because “Jim” wouldn’t do what he was told.

“Jim” - Here I replaced “Jim” with a collection of “Top 10 common Chinese names”

“nurse” - “Nurse” is a metaphor for something that provides protection/daily need while restricts the free will of Chinese people.

“lion” - “Lion” is the invader as well as the terminator to “Jim”’s life, which I interprets as cultural invasion. So I picked a few stereotypical cultural “invaders” to Chinese culture such as Hollywood movies, idea of LGBT equality, DINK, K-pop.

“good food” - The book The Global Trap gives this 20/80 theory, in which 20 percent of 21st century’s population keeps the economy going, while the rest 80 percent of frustrated citizens “happy with a mixture of deadeningly predictable, lowest common denominator entertainment for the soul and nourishment for the body.” These low cost entertainment is called “titty-tainment”, which is how I interpreted the metaphor of “good food” in this tale.

“words” - With his life threatened, “ Jim” finally realized his protection only comes from obeying his nurse, so he shouted out “help” to his “nurse.” Here I adapted the word “help” with the Core Socialist Value, which is a set of new official interpretations of Chinese propaganda about socialism promoted at the 18th National Congress of the Communist Party of China in 2012. Shouting out the “core value” has an explicit meaning of the ultimate surrender to his protector.

Performative Avatar: Self portrait

Adobe Fuse provides a wide array of options for users to build their 3d models, which are very detailed, intro-to-industrial-level wile intuitive control over the avatar you are making: You could be tuning the tiny details of avatar’s bone structure,facial features and are able to view the adjustment result showing on the model in a real-time, 3d way.

However, a difficulty I encountered when building the 3d model was, even though there are a bunch of available cranium types to choose from, most of them are not modeled based on Asian physical characteristics, nor did the control panel provide enough options to adjust the model’s facial feature to be close to an East Asian face. Also, the hair and cloth options for the model lack of variety and suitability. I could hardly adjust the hairstyle of the model.

I ended up with a 3d model that doesn’t quite accurately represent me. Besides lack of variety and suitability of hair/cloth, the software doesn’t develop its system based on many Asian examples. Asian people, especially east asian people tend to have thinner facial profile, therefore to build an asian-looking avatar you need more detailed tuning in its facial features instead of in its bone structure.

“Face your manga“ ( is an online social application for creating, modifying, collecting and sharing 2d, cartoonish avatars. It gives shape and color options for you to choose from when making avatars, but doesn’t give accessibility to adjust or fine-tune the details of the options.

The highlights of this platform is that it has a variety of options for facial features, providing shapes of eyes, eyebrows and hairstyles that are typical for building an asian looking avatar. Also it provides clothing of different styles which could better express the identity and personality of the avatar.

The avatar I created via “Face your manga”, I feel, express more of “who I am” than the one I built in Fuse. Although Adobe Fuse beats “Face your manga” for no doubt in terms of the lifelikeness, and the flexibility and freedom of creation avatar, besides the similar facial appearance and the flesh, the final model I made in Fuse lacks of context details that in result not making me feel much connected to it.


  • What kind of detail characteristics the avatar has would strengthen/weaken the psychological bonding between users and the avatars of them?

  • Parts of our consciousness become virtual and inhabit online, represented by our “avatars”. Could we define our avatars as an external existence of us?


A surveilling installation that confronts the audience with the panopticon of digital age

Highlight: Communication Arts 2019, Interactive shortlist

Collaboration - Tong Wu & Barak Chamo


In the age of mass surveillance and commoditized information, we are all, willingly or not, constantly watched. Our devices, online presence, transaction history and even physical presence have become an asset for social network, world governments and corporations to own - we live in a digital panopticon devoid of consent and, in many cases, even awareness. As in Bentham’s architecture, the watchman’s all-seeing eye keeps us from misstepping and policing ourselves.

Through Panopticon, we've created an experience of being both the "observee" and the "observer". It is a critique and a wakeup call to the alarming prevalence of mass surveillance all around us, to how tracking and surveillance devices have become largely invisible to us and to how insensitive we have become toward privacy invasion. 

Inspired by the system of control of the same name, we created the project “Panopticon”, an interactive media sculpture that breaks the illusion of privacy and control of our digital identity and physical presence. Multiple camera rigs monitor users throughout the exhibition space, tracking and capturing faces, and collecting the facial data to be projected on a semi-torus sculpture.




  • laser-cut modeled foam core

  • Acrylic thread

  • Apple Mac Minis

  • Logitech c920 webcams

  • LG Short-throw projector

  • DMX spotlights

  • Vectorworks

  • Max/MSP

  • MadMapper

  • Adobe Premiere CC

  • Amazon AWS Rekognition

  • OpenCV

  • Python 3


1. Final Presentation

ShoweromancyShoweromancy result

The demo for Showeromancycould be accessed at

This mediation, together created by Tong Wu and Yipeng Chen, is a way of divination based on the observation of our shower time. A nice, clean interface as shown in the picture has two buttons. Once the "Take a Shower" button is clicked, the project would record the current time in a day, and start a timer. When the person is done with the shower, he/she could simply click the "Done showering" button, and the calculation would start and generate the reading. The reading results are 15 kinds, based on five different time periods within a day, and three types of shower length.

15 results

I-Ching Master

1.Final Presentation

"I-Ching Master" is an oracle deck I created, where the querent uses their own sketch instead of flipping coins to get I-Ching hexagon results that tells their fortune or gives suggestion about their concerns.

 The demo could be accessed at

2. Inspiration & Methodology

I was inspired by two very traditional divination methods originated from east Asia, I-Ching and literomancy.

Traditional I-Ching divination consists of 64 hexagrams, composed of six stacked horizontal lines, where each line is either Yang or Yin decided by throwing three coins together for six times.

Literomancy is a form of fortune telling widely practiced in Chinese-speaking communities, where the querent asks the reader a question or tells a concern, then writes down a Chinese character. The reader tells the fortune or gives prediction on how to solve a question based on analyzing each single part of the character, or by adding strokes to or subtracking strokes from the original character to indicate potential change.

My oracle deck was just a clean, black box mimicing Fu, an important tool which is the symbol of Daoism practice, on which Daoist practitioners draw the incantation and make it function as summons or instructions to deities, spirits. An individual who participates in my divination practice could think about his/her concerns in mind, and then freely draws on the black canvas. The "Erase" button could clear the canvas if the participant is not satisfied with the drawing. Once done, he or she could press the "divination" button, which then generates four hexagram results from I-Ching based on the drawing. And the "read" button would generate content that explains what each hexagram result means, based on the traditional interpretation of I-Ching.

 3. The Algorithm Behind

I-Ching Hexagons

The algorithm behind this prototype is based on calculating the proportion of the pixels actually being painted in four different sections of the canvas, and mapping each of the four outcomes generated by the sketch to 16 hexagon results.  Therefore, each drawing could generate four random results from 64 possible hexagon results.

4. Reference

Simple I-Ching hexagons illustration: I-Ching hexagon result interpretations: