Author Archives: Sabrina Niu

Space_ A secret space behind a plant wall


There is a space behind the plant wall. The plants have some small stitches that light can pass through. Behind the plant wall, there is a 3D space extending to a destination far away. The light fade in and out unevenly, it’s not a robot or some natural things. Is someone sending a signal? Are they looking for something? What is the light behind the wall? I just can’t see clearly. The plant smells great, I took a deep breath and felt the wind. I want to break through the plant wall and see what’s on the other side. Why is the light point towards this direction? What can they see through the plant wall from the other side? Do they know I am here?  Is it a passage? Where is the passage connecting to? Can I get on board? There are so many questions I want to ask. This is a dream I had after I saw the movie Interstellar.


Cat scratch and fish jar

I don’t have a hobby to collect Amazon boxes. But I collect them because that alleviate my guilty of wasting them temporarily.

When they filled up my small closet after several weeks, I will shield my guilty and throw them all at once…

It’s always a waste. I have a cat in China, my parents buy cat scratches for him. Cat scratches can be made with many kinds of materials: wood, paper, cardboard, rubber, ropes, etc.

How about make our own cat scratches?

Design as Strategy and Practice Week1

Creating Something

Painting on bottles

I am painting on an alcohol bottle every day. As a practice, it is sustaining and contemplative. It’s sort of like a visual journal that reflects memories, life, patterns, and friends. Also,  I will pick some as gifts for my father. My father likes alcohol and is passionate about alcohols he has not tried. I want to thank him for always supporting my study abroad, and always seeing my dreams as his own.



Axis thinking

Descriptive language is hard to depict what we have in mind, as there are infinite possibilities between two extreme positions we set, and sometimes we need to go far as to put several pairs of extreme positions together, which made the expression even harder to be concise to be perceived by others. When we think of something, my find out my emotional thinking lead and connection of my thoughts and I always try to express my thinking route in a logic way using said language. This feels like transit the analog signal into the digital signal, while I will lose a big part of information when I do this conversion. However, people can take advantage of this character, such as changing the words they put on the extreme points, which will make a big difference. Since China joined in WTO and opened the market the world, it shows that the old dualism “communism capitalism” was revealed to conceal a host of possible hybrids. Chinese government found a word between them, “socialism with Chinese characteristics“, thus they can hold their political standpoint while pushing the “reform and open” forward.



Interaction with a store “Gracefully”.

I record my emotional and physical interaction with a store “Gracefully.”  It is near my apartment, and I constantly drop by. I perceived that there may be an implicit bond between the store and me.

Day1: I did not plan to go to this store. But it is on my right. I started to think about whether to buy a yogurt( I am not very into yogurt actually), and I came in. But yogurt, and some other food.

Day2: I did not plan to enter the store. I went back home with Naichen(my roommate). She said “can you wait for me for a moment, I wanted to buy some eggs. ” “OK, I will go with you.” I entered the store with her and bought some fruit for myself.

Day3: I called an Uber to head to see a musical with my friend. I should wait about five mins. I hear the door open and close by customers, it seemed a little bit cold waiting outside. I unconsciously went into the store. When my Uber came, I get out the store with nothing bought.

Da4:It’s Monday. I don’t need to go outside on Monday.

Day5: Thesis day. I went home late. After I got off the school bus, I see the bright yellow lights inside the store, I went in with my roommate with an implicit understanding. We wondered in the store and tried to find something we had interests. Finally, we bought some fruits and snacks as usual.

Day6 Wednesday  Did not want to go in… I need to buy the batteries for my new label maker, I walked in the store. “Do you have batteries?” ” Sorry, we don’t have. You can try CVS” “Ok… Thanks”

Day7 Thursday


  1. When my friends go, I will keep accompanied.
  2. The light and the storage I can see through the window drive me in.
  3. My interaction usually happens at night, the surroundings make the store more obviously. And I usually head back home at around 9:00.


Punch card? Please don’t do it in a internet enterprise.

This reminds me of the X theory and Y theory of human motivation and management. The ‘Theory X’ manager believes that all actions should be traced and the responsible individual is given a direct reward or a punishment according to the action’s outcomes. This managerial style is more effective when used in a workforce that is not intrinsically motivated to perform. It is suitable for repetitive tasks where creativity is not important. “Theory Y is almost in complete contrast to that of Theory X”. Theory Y managers make assumptions that people in the workforce are internally motivated, enjoy their labor in the company, and work to better themselves without a direct “reward” in return. Theory Y is suitable for the network enterprises. They hire smart, determined people for a positive and creative working environment. Punch card will definitely decrease points for the healthy working atmosphere. It stresses too much on working time, but not the working outcome. And if working 5 fewer minutes could influence the performance evaluation of an individual, how does company expect their employees spend 5 more minutes thinking very hard to make better products? It’s relative.



App2: Google docs_What makes it so popular

When talking about Google docs, I would like to compare it with Google docs.

lite and simple. Easy to get a start. The entrance is only two click. Everything is online, doesn’t need to be saved manually. As for the functions, although it is not as powerful as Microsoft Office. Microsoft is even enough for designers to build prototypes. But for many users, they don’t need so many features, such as grid system, aligning tools.  Google Docs is a simple tool to organize information and make slides. It has a much shorter learning curve, which is an advantage over Microsoft Office.

So when the functions are good to use, and it isfFree.Why buy something when you can get the equivalent for free?

The third and also the most important. Real-time collaboration. You can even use it as a chat window. While it is very hard to collaborate with Microsoft office. Google docs is a network application, while Microsoft Office is more like a software.

App1: Fog of world

This is an app often made me feel that I should start to use it earlier. The Fog of world, recording the places I visit and shows it on a map. This is not a new concept. but the app takes advantages of the gaming award strategies to arouse users craving for the awards brought by the app and gradually prompt them to form a habit of using the app.

I have seen many apps record travel places before. For instance, the one I found in WeChat extensions. They give you a map.  You can tap on countries you’ve been to before, and the country you tabbed will be colored green. Then you can take a screenshot and share the map on social medias. It is a good idea, but it is a one-time interaction. Instead of marking the city or the country you visit, fog of world marks on every street. The world in the app is covered with a semitransparent layer of fog. Every street you go, no matter on foot or by bus, it will blow away the fog on the street. The progress bar on the top shows a sensible increment coordinate with the amount of fog you erased on the map, it gives a score, also a percentage how many areas of the world you have explored. And there is always a chance to get a badge when you explore something new. Even you walk on the same street for several times, you may also get a chance to be rewarded as a deep explorer on that street. By breaking down the progress and focusing on every small easy-to-reach objective, and making awards come at a proper amount at the proper time. it makes the travel record a delightful and repetitive experience.

It uses the GPS to record my routines. Even I am travelling to a foreign country without cellular service or data signal, it will still record, and sync the data on the map when I recovered my signal. So now every time I travel, I will just keep the app running at the backend on my phone. And every time when I check my progress, it makes me feel so good.


IMG_8404 IMG_8403 IMG_8402 IMG_8401 IMG_8400


Children abduction alert system:Amber Alert


On January 13th, 1996 Amber Hagerman was abducted while riding her bicycle with her little brother. Four days later she was found murdered. The unsolved abduction and murder of Amber Hagerman is the most famous case of it’s kind in United States history. It was this single tragic event that leads to the creation of the Amber Alert System and the National Sex Offender Registry.

After the activating of Amber alert, average successful child recovery in the whole country ramps up to 97% compares to the previous ratio of 3%.


02c4a69a-2385-446f-9b26-b5fb10a3c808 11443056-589a-4305-bc3e-045988a12a37


And most of the children are reported safe inside 12 hours, let’s take the statistics of Time between reported missing the activation in 2014 as an example. As we know, if a child can not be found within 48 hours, the recovery chance will drop to be very low.






animation midterm and final apporach



I am doing the propagating video for the company I interned this summer. BlueJay Health is doing telemedicine to bring doctors and patients together. The clinic visit could be done remotely. Doctors can track patients’ progress by checking the patient’s dashboard.

  1. Asking some open questions to start.


2. Doctor launches video visit.


3. Video visit connected.


4. Search in the video library.


5. Search result.


6. Select a video and play to the patient.emotion-story-08

7. visit ends. The patient receives treatment.


8. The patient is doing the exercises.


9. Patient finished the treatment.


10.Patient log everyday progress.


11. Dictor view of patient dashboard.


12. Doctor expand patient dashboard to see more data.


This is the most of the storyboard.

I separated the layers and start to do the animation.

A question bothers me a lot . How to make it more commercial? I appreciate any suggestions from any perspectives, such as visual and motion, etc.





Nudge_ inspiration


I missed a lot of umbrellas in my life. I wonder where they are right now. In my imaginary, there is a world full of umbrellas.

How can I remember to take my umbrella when I leave the place?

I try to recall my memories of every lose. Usually when the rain is light or medium when I was ahead to a place. I need to take out my umbrella to avoid getting wet. When I arrived at the place, I couldn’t pack my umbrella in my bag right away, and I left it somewhere near me. When I left the place, the rain stopped.

Another scenario could be: Left the umbrella on the subway or bus, when I remembered it, it was too late to get it back.

The pain point of losing umbrella is that the umbrella is not a stuff that we carry with us every day. On the one hand, most of us haven’t formed a habit of taking care of our umbrellas as we take care of our phones. On the other hand, after a long time of talking, studying, working, etc, we distract our memory of the rain, especially when it was not heavy, and already stopped. Lacking habits to take umbrellas and missing clues to remember to take umbrellas are the leads to the loss of umbrella.

Offer a hint from a stuff that we care, something we carry every day. If the stuff has the capability to carry information with low cost or not cost, it could be better. How about we have a notification on our phone?Our smartphones all have ways to know about today’s weather, can it send a notification to users. Whenever people check their phones, they will remember about the rain, about their umbrellas?


User Testing

Testee : 10 college students

Test flow:

1. 1 min self-walking around

2. ask about basic understanding

3. Walk them through again, ask follow-up questions about each page.





Design for change-week 1

Social Issue:

Domestic Violence

Opinion - Domestic Violence/Bullying

3 women murdered every day by a current or former male partner in the U.S.

Over 18000 women who have been killed by men in domestic violence disputes since 2003.

40 million adult Americans grew up living with domestic violence.

Many charities and NGO attempted  to help victims speak up and stop the violence. The interventions include ads, posters, installations, and apps.



1. Aspire News_Education and Reach help


Available on iOS; Android
Features: Looks like a news app. Help section contains articles on leaving abusive relationships and links to hotlines and resources. When users are in a dangerous situation, they can activate the Get Help feature by tapping the toolbar of the app three times. This sends a text or a prerecorded audio message to a trusted contact or 911, alerting the contact that the user is in danger. Once the Get Help feature has been activated, the app also begins audio recording.


2. Domestic Violence Prevention_Education and reach help


The app is designed to provide Sailors with anytime, anywhere access to both training and resources about Domestic Violence. The Name includes “Domestic Violence”. Long articles. An emergency is a phone call, I tried to call the domestic Violence Hotline, all the services are busy, I don’t know how much time I should wait. I stay online for about 1 minute and dropped the phone call.  I was asked whether to stay online or waiting for a call- back. This is extremely dangerous for a victim.


3. Stairs_ Education


4. Anar Foundation “Only for Children”_Reach Help





Mongolian Yurt Before Dawn – Blusher



Mongolian Yurt Before Dawn – Blood



Mongolian Yurt Before Dawn – Gunmetal



Mongolian Yurt Before Dawn – worship


Inspiration comes


















Web Development with open data_week2_reading report

The AI Revolution: The Road to Superintelligence

Blossom _Nature of code midterm



FullSizeRender 4


Background pixels update its location according to sin formula, the desired amount change of pixel location has been passed to flowfields as a vector. Which will be passed to vehicles as their desired velocity.

In the flowfields, each cell of the grid lives an arrow pointing in the direction according to the update of background pixels. The scale of the point has been maped between 0-5. So the steer force of the vehicles, which is calculated according to the desired velocity, could change its magnitude and direction according to a sin formula.

if you press “UP” key, you can see the change of the flowfields beneath the particles. The motion of the flowfields is updated over every frame.



Particles of the vehicles

Prepare for this work:

The most challenging part of this work is to design the mechanism to simulate flowfields. need a way for a vehicle to look up its desired vector in the flow field, so what should I do to generate the desired vectors? I want to try to build some relationship between the background pixels and the flowfields vectors. Before this last version, I tried to take advantage of brightness, color of the locomotive pixels. I tried to calculate the average direction and amount vector on each [column][row], which does not satisfy me because the result is ambiguous, I can’t tell the law of the movement according to the effect.


Finally, I tried to map the locomotion of the pixel displacement in the background with the desired velocity of the flow fields.


I tried out ways to manipulate the background pixels:

I also tried to distort the image by manipulating the color display.The Original photo is a masterpiece I searched on Google Image, which looks like this.



cat Firstly I load pixels and got the color from the image.For my first version, I took advantage of mouse location to control the alpha transparency of the pixels. Pixels will be lit up over distance to the mouse position.



Then I am thinking about to explore more on it. I set a threshold to differentiate layers of the image, the bright pixels who is above the threshold will move forward quickly and dark pixels will move forward slowly. As a result, the layers are differentiated.


How about delete the dark point and make it more like a post-impressionism color composition?

Then I am thinking about making it more interesting, I step back and reserved the original color, and let the light color transport according to the sin wave. I love the screenshot when you stop the video below at any point.

First of all, I choose a photo shot by Melanie Hoff, the original photo looks like this. The color of it is very fantastic, I am thinking of reuse these color to do a mathematical art.I get the pixels from the image and display them at the new location which is calculated by adding some amount to the previous location according to Sin formula.


Below is the effect screenshot when t equals to 25;


I changed a different photo and below is the effect screenshot when t equals to 15;



I am trying to build a texture that the pixels are mixed with each other, and below is the one that I update the pixel to near own location, which has a location shift with the neighborhood according to the sin wave.


Back to the first version of the math graphic, I changed a different photo and below is the effect screenshot when t equals to 40;

If ambitious, things will get more interesting to me, and the below result is the effect I used in this Blossom midterm project.

In this work, I distorted the pixels grabbed from the image.  I take advantage of the slope change rate of Sin formula and applied it to the whole pixels of the image. I will call this a remix of the artworks. I reserved the selected graphic components of the image according to the amplitude and frequency.

<img class=”aligncenter wp-image-651 ” src=”” alt=”RNMKY5Z]VW{3R8GSDSC5&#96;ON” width=”620″ height=”694″ />








nature of code week5_Ball in the room~

When you make some sound, the balls will be applied a force according to the amplitude of the sound that force it will go up~ the balls will always fall in the room within the boundaries and moving on the room floor. It is built in the 2D environment.

Perhaps it has some errors running in the browser, so I suggest you to run the sketch which is uploaded in the google drive folder.

nature of code week 5

Interactive music week5_My Notes & Your Notes


My previous five notes are from iPhone: “email received”, “message sent”, “type”, “photo” and “screen lock”. This week, I changed my mind of my note choosing.

Music is the most mutual and beautiful language in the world, people communicate through music but could have different understanding according to their experience, emotion, cultural respect, etc. Thousands of Musicians created countless music pieces every day,  offers us a great amount of opportunities to choose the pieces that we like. Which music pieces mostly touched you recently? What did you listen this week? Who is your best musician that never changes for decades? Which kind of style you feel like most resonate with you? This is music, relating to our most recent feelings and our preferences. I am going to let people choose their best five music pieces to be my notes.



people could generate their music name cards on a website and share with others by playing their name cards together and do collaborative music making, thus, they find friends, soul partners according to their music preference.

Once submit, I fill them into a CD, which has been divided into 10 music grid each grid takes a music track. This is going to bend  And I offer them functions to modify the music pieces just like they are doing photo modifying. When playing track is moved from one music taker to another, the previous ones start to decay and the current one fades in.



Processed with VSCOcam with m5 preset

Choreographic Intervention week4_play with shadow

These pictures are taken two weeks ago when I was in the long beach of Los Angeles. I played Shadow with my friends. I let him move to the right a little bit after I drew the outline of his shadow. Shadow is a good way to reflect figures, movement, as well as memories. It is something you can never hold in hands but it is always there with you.

FullSizeRender 2 FullSizeRender FullSizeRender 3

1.My first approach is to create a 2D square spot light who has its own shadow delays behind.

I covered a thin paper in front of my screen when the light is moving. I imagine there is a dance or story will start to happen before the translucent stage.


This is a set of cubes in a 3D environment has three lights shooting from three perspectives. When I move the mouse, the light changes due to how many areas are facing the lights. Other parts turn into shadow.


3. The third one is a hand dancing. I simulated the flashlight environment and use a 24-inch monitor lighting up the background. The light changes from dark to light and the changing frequency gradually becomes the more faster as I applied an acceleration to the timer. This idea comes from Sleep No More.



Documentary:(thanks for Melody Hu) This was the first version when I was doing hand dancing on my 15-inch mac book pro.

Nature of code week 4_ look at me

When you move your mouse on the screen, the nearby eyes will look at you. Who are they? Vampires? Rabbits? Or just human? Being part of the communities, we are participants and observers at the same time.

This project is built in Java.


What I learned:

To avoid saw tooth of a png Image, a good way is to make the png image exactly the same pixel or points(approximately 2 pixels) as the placeholder, or integer multiple of the placeholder.





interactive music 4

This week, I practiced what we have covered in class.

Try to play with random notes

adjust the “AmplituteEnvenlope”, and manipulate with “attack”, “sustain”, “delay”, and “release”.

Markov Chords

Markov chains define states and probability of moving from one state to another. We’ll use chords as our states and define a way of moving from one state to another.


choreographic intervention week 3

painting live.

our original idea is to tell a story about life, from birth to the end of life with spirit spreading. And we also want to combine the theme that drawing with body language.

We found some examples online, classical and modern. We did brainstorm together, thought about the motion graphics and did some rough sketches to express the ideas. Then we start to working on the programming things. We built 7 scenes together and left three days to combine the code together.



We know the combine part could be some difficult but never thought to be that complex the scale problem….We are still having some mapping problems but things are getting better. We have combined one of them. It amazed us that stars project on human body could be so scientific, remind me of the transformer  seeing above the city at night.

We learned how to debug and the scale mechanism of scale function and Kinect, so the next time I guess things will getting further.




Interactive Music week 3

Email importance

We get thousands of emails every morning. “dingdingdingdingdingding….!!!!!! ” flushes my ears and press my heart… If we make some changes to the warning tone, alter the pitch, adjust the delay, sustain and release, we could make a small and sweet music piece!  if every morning we open the computer, connect the internet and we hear a beautiful music according to how many email we get, will that be less bothering to get many emails? Make the unpleasant experience become enjoyable, even beautiful!

Google emails could help user mark email keywords, if we map the pitch with the keywords user marking, music could help people get the rough ideas of important emails proportion.

Rhythm Creation :

Interactive Music——week1

“We are going to develop our compositions starting from 2-5 “Notes” over the course of the semester. Your assignment for this week is to create, find, or choose 2-5 discrete sonic events and create some kind of document of your selection. Consider the relationships between your Notes.

Notes do not need to be inherently pitched or musical; you can think of them as gestures or events.

The documentation of your selection can be a recording, traditional notation, blog post or something else. This document will serve as a record of your process.”

I am thinking about using notes to tell a story of the meaning of my Chinese name. Muqing Niu

Each syllable of the prounouncination of a Chinese name has a corresponding Chinses Character with it.

Like mine, Mu(牧)qing(青) Niu(牛).

Mu牧 represent the wide grazing land.

qing青 means fresh green.

niu牛 represent the cute calf, I combined some audio elements in the track and export all the tracks as a whole.




Get & Put_ Imagine Cup 2013 Azure Challenge 3rd Prize Globle


In the history of human being, delivery is always indispensable to human activities as a means of sharing and impartation. The most intuitive vehicles of delivery are our hands. And we wondered, except for real objects like apples, books, and USB disks, what else can be grab and deliver by our hands? Can human hands grab and deliver virtual data? Can human hands be the media of data transfer? Can cloud catalyze the realization of this dream?


Get & Put is cloud-powered magic that makes humans the couriers of virtual data. Get and put empower humans to use their hands grab data from screens and deliver virtual things by hands without carrying any equipment.  Before a depth sensing camera such as Kinect, they can even give data to others hand to hand!

 Let’s see what happened with Get & Put:

We cooperated with Luwan First central primary school. To education, Get & put follows children’s nature, promotes information delivery and knowledge feedbacks between children and teacher. We also  exhibited our cooperated project “cloud classroom” on the 2013 Shanghai Education Expo.


So what is the technology behind?

Our goal is to make human be the media of data transfer, to get data by hand, put data into the screen and give data hand by hand. In order to achieve this, we need to solve two problems.


We need a space to store the data, a space to record the action. And the space is cloud. Get&Put makes users feel like that they are carrying data in hands, but the real story behind is that when the user “grabs” something, it travels into Cloud, and Cloud orientates it to the device the user wants to put data in.


So what we need to know is who is the user, what’s the action and what’s the data.Once users are detected, real-time user identification by face recognition starts to run.


Meanwhile, gesture recognition based on touch screens or motion capture cameras is running to analyze users’ intention.——whether they want to get, put, or throw the data in their hands, or give data to others.


We also design the algorithm to distinguish left and right hand on touch screens. And data are buffered in Cloud. Once a gesture is done, cloud will record this action, including who is the user, what’s the gesture, by which hand, at what time, and buffer the data carried by users’ hands.


The system looks like this. We have face Detection and Motion Recognition at the client side, and face recognition and Data Buffering at Azure. And these modules work asynchronously and cooperate with each other. Get&Put is achieved by the combination of three powers, biometric recognition, wireless network and azure.


For education use, it promotes intimate interaction and feedbacks between children and teachers; For family use, it encourages elder people to enjoy sharing photos and music with other family members; For commercial use, it brings a new style of adverts access and cultural diffusion.

Project Team:

Yi Zhou (Program Manager)

Tianxiong Wang (Developer)

Muqing Niu (Interactive and visual Designer)


How we work out the program:

Our story began in August 2013. Our first step is to generate a good idea. We spent 2 months to do the brainstorm. We generated a lot of ideas, and illustrated and emails during the brainstorm. We discussed and filtered these ideas with our beloved professors. And At the end of September, we finally determined our topic——Get&Put.

In October, we furthered the design of Get&Put, and successfully made a prototype of Get&Put on Windows Phone. From October to November,  these were actually the most creative days and also the gloomiest days. We tried a lot of possibilities for Get&Put; we stayed up in the lab; We faced a lot of doubt and frustrations. But we also got a lot of support and encouragement from our instructors and families.

During the 4 months, we continually proceeded our project.

DSC_0432   DSC_0445

In order to chase perfection,   We enhanced the user experience by making the gesture more intuitive and easier to be learned. We made videos and concept diagrams to propagate our idea. We try to show the coolest part of Get&Put, to tell how the magic of  Get&Put can change peoples’ life.We consulted our ideas to both experts and ordinary people from different backgrounds like IT professors,  educators and financial experts. With their suggestions, we  enriched the functions of get&Put.We brought the magic of Get&Put into Shanghai Luwan Primary school. We hope Get&Put will bring intimate interaction between children and teachers, and inspired the creation of children.We want to share our feeling with them. In these pictures, we are shooting videos for Get&Put. 

DSC_0421 DSC_0414 DSC_0324

We borrowed professional movie shooting equipment from media school, we invited students from the drama club as our actors, we did delicate make ups for our actress. Every ten seconds in the video, which will show you after, spent us 2 hours of work.

So in May, when we got the phone call that we were one of the world finalists of Imagine Cup2013 and we got the tickets to Russia, I cant help cry.

And 2 months later, we were on the plane to Saint. Petersburg.


Imagine Cup 2013 was hold  in St. Petersburg, Russia, with over 80 teams from the entire world competing for the final prizes. It also invited the actor of Doc. Who, an English Movie Star, to be the host. This was the website of Imagine Cup.  We were on the head.


Microsoft settled us in Hotel Park Inn, the best hotel in St. Petersburg. These pictures were taken on the signing up day.

original_rAPH_718800010ed3118f large_cyfc_2e50000084f71260 large_o3e3_15ff00005da3118c

In this picture, we were doing presentations. 


This was the press show case. In this picture, we were demonstrating Get&Put to the judges. Our project was also exhibited to journalists, experts and even legendary people in the IT field.


In the spare time of competition, entertainments were arranged. There were sightseeings and parties. And we had a lot of fun. We also went to the Summer Palace. Microsoft rent the whole summer palace, everyone was gathering at the golden fountain, and a small helicopter was used to take a panorama picture. The fountain was off at first. But when the clock knocked 9 p.m, the music raised and the fountain began to spray. And everyone was so touched and excited. The award ceremony was held in the Alexandra Theatre. There were dancing performances through the ceremony. We were both excited and nervous because the competition was fierce and only one-quarter of the over 80 teams can win a prize. It was like a dream when our names were announced. In this picture, we were awarded the 3rd prize of Mail.Ru award. In this picture, we were awarded the 3rd prize of Azure challenge.

large_UQLW_266e000052e91191 original_Kfyr_340a0000685d118e

We think imagine cup 2013 is the best event we have ever attended. Through Imagine Cup, We obtained prizes, increased our confidence and also made many awesome friends. So I really want to thank Microsoft for giving us such a good memory.


Crack of Scilence

The Story:

The background of our story involves a silent world. In this world, all the roles’ mouths are stitched together. One day, a boy finds a wounded bird; its stitch had been taken off. The boy tries to stitch the bird’s mouth again. However, the bird hums and makes out some voice. The voice thrills the boy and he becomes strongly attracted to the bird’s voice. Eventually, the bird flies away and leaves the boy alone. The boy misses the bird’s voice and takes his own stitch off in pain in to hear his own voice. He keeps singing day by day. His voice gets loud and clear, and eventually awakens other people who have kept silent during their whole life…

Project Team:

Muqing Niu (Mother of the story, After Effects, Most graphic)

Naizhen Yang (Father of the story, After Effects, Most Audio)

Xuhui Xu ( Tutor of the Story,  After Effects, Most clip)

Story Board:

IMG_3163 IMG_3164 IMG_3166

IMG_3167 IMG_3168 IMG_3169-e1448249918984IMG_3170-e1448249897158 IMG_3171-e1448249873192 IMG_3172-e1448249762160 IMG_3173 IMG_3174-e1448249827110 IMG_3175 IMG_3176


Working Flow:

The final project evolved from Muqing and Naizhen’s mid-term animation story “Crack of Silence”. We tried to make the 3D stop-motion animation in our midterm. We made a puppy, set up some scenarios, and used Dragonframe to do the stop motion movie making. It was an experimental version.

Alex joined our team when we start to do our final projects. To chase better effect, we decided to make the animation into 2D after discussion. Alex suggested that we should design a reasonable plot about how the boy and the bird meet. Therefore, we added some frames about how the boy bought a scissor from a gardening store, how he tried to cut the vine and how the bird was twined with the vine. We also add an unpleasant cat in the boy’s house to show the depressive atmosphere. In addition, to make our last frame more powerful, we designed a long composition with various colorful windows and added a hymn as the incidental music. To make our animation more delicate, we drew all the scenes and characters again by the Photoshop on a drafting board. It cost much time but it’s worthwhile since we got pretty high resolution in the final video. We also spend many days on drawing and using the After effect to make the movements. We are quite proud of what we made, but we still think the narrative could be more complete. The details and the movements of the animation could be more smoothly as well. Since we are all fond of this story, we will try to recreate it and make it become a profound animation in the future. In the end of the class, we would like to say “thank you” to Marianne, who is our great professor. We had a series of wonderful animation classes and learned many useful skills from them. We all look forward to improving this final project into a professional animation someday. Hope more and more people can find the brave of self-expression from this inspiring story.


What I learned:

When some After Effect mission comes to our teammate Xuhui, he spends a whole day learning how to use several lines of code to make out a three-second puppy walking animation piece. As we have a more than 4 minutes animation to make in less one week, I am worrying the necessarily of program learning. However,  it surprises me that the several lines of code saved us a lot of time in our later after effects, because the computer takes human’s job to do the repetitive works and frees our labor to do more things.

Some methods seem to take a lot of time when we first access to them, but may benefit us in the long-term run. Being open-minded to learn a new method  is as important as the persistence of managing every pixel and detail in the process of chasing perfect. The latter is the responsibility and character as a qualified designer, and the former is the long-term vision as an explorer.


In Bud-Final

In Bud


Project Team:

Xuhui Xu

Wave Effect, Communication, Most Kinect, Installation, Schedule Management, The First Developer

Muqing Niu

Concept, Most Audio, Installation, Material Management, User Experience Designer


Project Introduction:

In Bud is a project generating implicit understanding through a shared music generating experience without the use of direct interaction.

Your relationship is in bud.  Music arouses it, and the beauty would extend to the next spring.  We follow, we understand, we cooperate, we compromise, and we create a collaborative  melody. The changes of music in turns change our own rhythm, and arouses the implicit understanding between us.


Project Video:


Main Components:

Visual effect: Visual effect is the central core in user experience that it is just like the door of a room to motivate users  keep on exploring in the experience.

Audio : Music is the most mutual and beautiful language in the world, people communicate through music but could have different understanding according to their experience, emotion, cultural respect, etc.

To combine the two main components of our project and chase for the implicit understanding, we should get three things into consideration:

1.  Implicit understanding: Collaboration should be dominating.

How do we get the implicit understanding?  As we know, babies get to know the world and become part of it by imitating. In the nature world,  it is a safe way to do the gesture following for a new comer to show his goodwill to a group. When there is no language between two creatures, it is their nature to get the first understanding by doing the gesture following, and doing something together.  In our projects, we want to get something more substantial, emerging  from the nature of two beings, the two strangers could not see each other during the engaging experience. They standing at different sides of the two screens, getting the implicit understanding based on the same standing point to do something together other than competing with each other. That is to say, collaboration should be dominating in the user experience in this scene. When we define the quality of the implicit understanding in the collaboration, we are thinking more about how much two users waiting for each other, how much they compromising, how much they following, and how much they thinking standing at others’ point.

2. The effect should motivate user’s first trying and the continuous exploring.

If there is one thing that could make user feel special and want to explore more, the thing should not be common in the real world. It would be amazing to let something happen on the screens that could not appear in the real world. And to motivate users keeping on trying, the components in the experience itself should have a feature of continuity. How about erecting water on the wall? And how about touching flame? How about making flame growing in the water and water reflecting the shadow of frame?

3. Everything should be synchronised in the user experience.

We use our energy to control water, flame. Music expands when ripples expand, and music fades out when flame, light and everything fades out. It is just like the harmony and every connection  in the nature world but could not exactly happen, something that could be sensed their existing but never could be hold by human hand , and it surrounds you, but at the same time flows away from the moment  your touch it. Then we are thinking about using soft spandex, it is smooth and flexible, liquidity. You can touch it ,press it, move you hand creating music by control flame and water on it. You will never hold it as everything vanishes in a flash, but your memory and implicit understanding with another human being will last. Do you want to know who is behind that canvas? Who are you following, cooperating with, and waiting for? Hope you can evoke the implicit understanding, and the bud between you could blossom into something beautiful and extend to the next spring…


Behind the Story


When wave moves, it passes the near image pixels to the exact points according to the fluctuation of sin wave. When mouse or Kinect average touch points are sensed,  the visual elements would be triggered. The last time of the visual elements is according to how many music tracks are trigged.




Flame effect is synchronised with  the main melodies which is grand, continuous, strong. While the water effect is related to the music that is light, transient, and active. The screen has been divided into 16 music grid on each sides and each grid takes different music track.

A5B90E19-7B1F-448D-9804-10C4D5C2EAD6 Screen Shot 2015-11-29 at 18.27.34

The music tracks are finished in Logic Pro X. Each track is exactly 8 seconds and has the same rhythm speed. To avoid rhythm alignment, the music will jump to the exact second the start to play every time the music is triggered. And a clock is sent from the server to client for synchronising the timing.

85BE81B7-2D24-4297-90F5-92A970F27F0E 75959D4D-2F28-42AE-8EC2-141EAF177AF0

When the sensing point is moved from one music taker to another, the previous ones start to decay and the current one fades in. The decay time of music is also relating to how many pieces of tracks are playing.

E2628039-0CA4-4072-8317-2EC3B1694859 F2E127DF-EE12-46AE-B896-73C39C0B1EEA

3. Communication

The server and the client send the sensed location (by Kinect or mouse movement) to each other. Besides, the server send out a clock to synchronise the time on both sides, ensuring the music comes from both sides are always on the beats.


The future scope is that we are going to build an app that server makes people into pairs. After the collaborative implicit understanding generating, they can choose who they want to know. This is a scope for the test before people’s first date.



First we were testing the nearest one point, which is far from accuracy. After consulting Shiffman and Moon, getting average point of the depth of user’s hand is more practical.



We built our own painting frames using spandex and woods. And the woods are almost the only things we got on black Friday,haha!


6.User tests

We went through two rounds of user testing, and we got many constructive advices from our beloved professor Tom Igoe and dear classmates. We never stop chasing for better products by improve every detail. We revised our concept of projects after the user test and put all our efforts into the implicit understanding generating. We keep on enhancing visual effects and making music goes more synchronising with visual effect.

Thanks to all your help

Thanks to Tom Igoe, Daniel Shiffman, J.H.Moon, and every classmates gave us constructive advices that help us improve and become better! We are really appreciate it!




Pcomp final_after the user test

Last Wednesday, Alex and I survived the User test. People came up with some great suggestions help us  think about better interaction.

So we made the further progress in several aspects below:

  1. fixed some bugs of the boundary problems of visual effects.
  2. Make the music and the visual effect goes more synchronising. They should have a consistency to fade in the out.
  3. The fading speed of the music is related to the numbers of songs which is playing.
  4. According to some users that they can not tell exactly which song they made by themselves and which songs are made by their partners, we enhance the differentiation of music, changed the instruments of some tracks. Besides, as the volume is controlled by the depth sense of Kinect, which is real time oriented, it makes the music more easier to differentiate and the collaborative effects more obvious to see by the users.

Alex and I set up our installations. We use the flexible spandex which is sensitive to the pressure and comfortable to touch. And we made frames using the wood bars which are originally designed for the painting frames. We tested the Kinect  threshold and depth sensitivity in the real scene. It works well. But also comes some challenges, such as the spandex if more hard to press on the edges, so in case the volume is so weak at the edges of the spandex, the mapping formula of the volume and depth should be differentiate at the different parts of the canvas. Besides, when we set up all our equipments, we figured out we are using two many spaces. Daniel gave us some suggestions about the installation which could greatly reduce the space we take. We are so appreciate it and we will keep on making progress to the project after the pcomp final class.






This week, we are fortunately have a new team mate, Xuhui Xu. The team is getting more stronger! We revised and made improvements about the story talking and drew some new featured images to fill in the whole story.

We plan to build up a silence world where the mouth of every creature has been sewn up. Then one day the little boy find an injury bird on his apartment, and help to raise it up. He find that the wire of bird’s mouth has been teared up a bit, so he decides to fix it. However, when he takes away the old wire and tries to stitch it up again, the bird makes a sound. He is so wired about it cause he has never heard the sound coming out from the mouth. After hearing the sound other creatures appear to be attracted, they  jump around the bird as if they are dancing with the music. Little boy is shocked by this scene, and he cut out all the wires of his pet, they all try to make a sound. Then finally, he cut out his.


  1. The whole world has no color, no voice, everyone is silent walking.
IMG_3163 IMG_3164
2.protagonist go back to his apartment alone,

IMG_3165-e1448249963220 IMG_3166

3.He has several pet living with him, but they are all dumb.


4. one night it was thundering outside, a bird coming into his apartment, with breaking at its mouth.



5.They live together for a while, hearing its voice everyday, and he cut down all the wires of his pets, and they all try to make their sound.



6.Finally he cut down his own wires, and practice to make sound, after a long time, he can shout out to the world.





These are the basic story line of the animation, and we intend to combine the 2D and 3D together, using both AE and Maya. There is a lot of work to do, hoping that we can finish.

Final_in Progress…..

This week, Xuhui and I stick on the final project. Our goal is to build two separately spaces. The visual effect looks like they  are  dabbling the water on the wall, meanwhile generating music to get implicit understanding between two strangers.

our division cooperation in this week :

Water effect in processing

Music(music effect + coding in p5)

Combine two parts of water and music together in processing.

Testing Kinect in processing, trying to get coordinates of the minimum depth of user’s.


1.Visual Effect – Water ( flame ) on the wall




2.16 pieces of music motifs in Sibelius a.

Divide the canvas into 16 spaces.Give each space a music.

If there is already two pieces is playing, when the third one is triggered, stop the first one.



3.Looking into the “Kinect+ processing” code reference, try to get the coordinates(x,y) through the depth of the users.(seems not accurate)



Next Scope:

1.visual improvement


3.Installation part


Installation setup + Usability test


Animation_week2 “Crack of Silence”

Last week, Naizhen and I started to make our animation “Crack of Silence”. The background of our story involves a silent world. In this world, all the roles’ mouths are stitched together. One day, a boy finds a wounded bird; its stitch had been taken off. The boy tries to stitch the bird’s mouth again. However, the bird hums and makes out some voice. The voice thrills the boy and he becomes strongly attracted to the bird’s voice. One day, the bird flies away and leaves the boy alone. The boy misses the bird’s voice and takes his own stitch off in pain in attempt to hear his own voice. He keeps singing day by day. His voice gets loud and clear, and eventually awakens other people who have kept silent during their whole life…

IMG_4105 IMG_4107  IMG_4108IMG_4109 IMG_4110 IMG_4112IMG_4111 IMG_4114 IMG_4115


We made a doll to be the boy at first. For the boy’s head, we broke two IKEA’s hanging dryers and combined them together. Then we tore a pillow to make his body. Meanwhile, we made a bird by the rest of the pillow. They looked like what we designed before and we all like their charming silly faces.


IMG_2978-e1447655878179 圖片1-1

However, the dolls were hard to be controlled. Even though we tied a string on its hand, it still swung all the time. Some details of movements, such as hugging the bird and using the scissor, couldn’t show vividly. Most movements could not work smoothly as well.

Therefore, we decided to combine other materials in the animation. We took some storyboards we draw last week into the animation. In addition, we added some music, voice effects and subtitle in it.

The process of making animation taught us some lessons: First of all, we should consider the mobility of dolls more carefully, especially how to make the doll stand and turn around stably. Second, the time of making animation is longer than ordinary video. We should take time factor into account.


Animation_Week1_Storyboard_Silent world

Sabrina Niu & Naizhen Yang

I just roughly call this project “Silent world“, and I guess Naizhen and I could generate a great name later.

Work Flow:

We came up with several proposals after brainstorm.  After further thought, we decide to do with the story that I came up with and we both think it is worth digging more. A silent, black-white world where the only creatures are puppies who never made a voice in their whole life time. One day, for some reason a boy tries to break the rule and release his voice, and gradually he uses his voice turned the whole world colorful.

Naizhen and I revised the story together, built the whole story structure to hold every scene together.We explored every scene proposals together in forms of words, rough sketch, trying to make every scene and the transfer reasonable and meaningful.We brainstormed the main character’s feature together and after many times of trying, the “boy” and the”bird” comes to life.

Then I painted the final storyboard sketches while Naizhen typed the story and wrote the words for every scene.


1.The background of this story is a silent world. In this world, all the roles’ mouths are stitched.

IMG_4105 IMG_4107

2.One day, a boy found a wounded bird; its stitch was taken off. he boy brought it back and took care of it.

IMG_4108 IMG_4109

3.At first, the boy tried to stitch the bird’s mouth again.


4.In the process of stitching, the bird hummed and made some voice. The voice thrilled the boy and made him put down the scissor.


5.The bird tried to make more and more voice. Strange at first, then became graceful. The boy kept taking care of it and fascinated to its beautiful voice.


6.The bird recovered gradually. One day, the bird flied away and leaved the boy alone. The boy missed the bird and its voice with his whole heart.


7.He looked into the mirror and took the stitch off painfully. He tried to make voice. Badly at first, then became smooth and elegant. He kept singing day by day, from morning into midnight.


8.The voice got loud and clear, and waked other people kept silent in whole life. They turned on the light and extended their heads out of windows to figure out what is happening. In the end, a group of birds flied through the town and echoed the boy with beautiful voice.IMG_4118

Pcomp_week_9_Project planning

Muqing Niu & Xuhui Xu



Generate implicit understanding through a shared experience without the use of direct interaction. Let two strangers interact with each other without direct communication.




Illustrate the long term effects that individual moments have on the whole.The goal is to connect two parallel spaces. Individual movements make a litter further approach to the universal connection. The whole story telling is based on time and the amount of participants.




Part 1: Set up the time schedule.


part 2: The table of materials


part3: System diagram



1. Pandora music box

In a dark night like an abandoned town or castle, or a cemetery. where silence lays everywhere but not any light. You can create light by creating music. The way is just toby press the key board, each button represents a tone or a music motif. The combination of the tone and motif creates the chord pieces. Every your movement could possibly light up a little part of the scene. I will probably record the whole process of your trying, and you can export your own gothic chord pieces after you finishing lighting up the whole space or you want to stop your playing. If I have time, there probably be different scenes represent different music style but not only the gothic style. The whole vision of my ambition is to let people feel the different music style cross various cultures, people, and even in different historical periods, which all have very different music style, motif and composition. Many music styles even don’t base on the twelvetone equal temperament. Feel, understand, music by creating and trying.

60a5e528979681.55dc609fd5b5a lkj

Processed with VSCOcam with g3 preset

Inspiration came:

1.A music piece from the movie “Les Choristes” : L’Arrivee A L’Ecole ;

A music piece from web that I think is very splendid:

2. Monster Chorus Game:Remind me that I could let different part of the element sing.


3.Limbo: My best gothic style


2.Implicit Understanding (Collaborate with Xuhui Xu)

Let two strangers interact with each other without direct communication.Generate implicit understanding through a shared experience without the use of direct interaction. The interaction could be in the form of music, visual graphic objects like shapes, colors, light.

user proposal-02

The diagram system looks like this:





For the most gorgeous star in the sky: “夜空中最亮的星”

After going to moon’s workshop for “sound”, I was totally impressed that music can be played in such interesting way! I decided to create my own!

My goal is to create a visualization of music that the bubbles on a drum, and they jump up when they feel the sound vibration. The jump height is based on the amplitude and frequency of the sound input! And there should be shining stars in the background relate to the meaning of the song as well as the music rhythm.

Code Reference:moon
Rhythm Creation :

Adjust the physical movement of the balls. Add resistance to control their speed to mach the rhythm of the song.

Image Button:

Without Using createButton(),  but it’s my first time using  “True” and “False” boolean to control music play and pause by “function mousePressed(){}”. I change the icon image in “function draw(){}” thus it won’t be covered by background as“ mousePressed function” will only be executed one time .



pcomp_midterm_How_ Human_Touch_Virtual_Space

pcomp midterm

Bubble Billiards

How can human touch the virtual space? It is question I asked myself for two years after I created an application named “Get & Put”, letting human become the courier of data transfer, to grab pictures and music from a touch screen and put them into another touchable devices.

Could I create something that is more visible for human to see themselves touching the virtual space? Can I break through the virtual world and the physical world and let people just put, fill or through something inside the screen?

Bubble Billiards is an interactive experience where the user can bridge the physical and virtual worlds. They can push a “real” glass rod into the screen to change the trajectory of bouncing virtual glass baubles.

The virtual space has two areas. Inside the interactive space, the baubles operate under true laws of momentum, but with added resistance, as if rolling through a physical space (and therefore slowing in speed due to friction). Outside the interactive space, the baubles aren’t constrained by any physical properties like friction and truly exhibit the properties of conservation of momentum.

For the midterm projects we were paired up with the fellow classmate, my partner is Christina B C. Our work has been separated into two parts:

  1. Coding and visual design.(Me)
  2. Physical installation.(Christina)


My work flow:

Firstly, I looked into the data sheet of the potentiometer.

* Size: 90 * 20mm
* Weight: 18g
* Voltage: 3.3V, 5V
* Port: Analog
* Resistance: 10K
* Platform: Arduino, MCU, ARM, raspberry pie
* 75mm slide quality appliances,  sports performance and stability along
* Dual Output, Dual linkage
* Analog output 0-VCC voltage signal

I drew the system diagram to sort out my ideas. I connect the potentiometer to Arduino, added a resistance to protect Arduino board. P5 editor acts as the server to connect the sketch, running in the browser or P5 sketch window, with the serial port on my computer. The potentiometer is connected with the analog input on my computer, input volts could be changed by the change of the valid resistance of the potentiometer. The handle of the potentiometer should be adhered a glass stick. The range motion of the handle should be as same as possible with the range motion of the glass sketch inside the screen.


Then I tested the resolution in practical by coding a very simple program, just using the potentiometer to control the x-coordinate of a white ball in P5.JS.

Untitled-1-01 IMG_3965

Then I am thinking about What will the virtual space looks like. I tried many possibilities. What is the meaning of put something into a screen?

wormhole-wide 1-wormhole-trip-pet-serrano

I asked a crap of talent from ITP about this question, and people inspired me a lot. Especially thanks to Hao’s great creativity that inspired me a lot and finally I realized that I am doing this is because something happens in the virtual world cannot happen in the real world. Finally, I decided to create a space based on the law of conservation of momentum.

I drew a glass stick in AI, and load an image in P5. The effect is really good, and I decided to build a space based on glass effect.


P5 is still with very few 3D api, so I decided  to create a “fake” 3D effect by drawing several circles as masks based on the same center but different diameter, and set the background with increasing scale by the increase of diameter in P5. Then put a PNG exported from Adobe Illustrator on the top of the circles drawn in P5 to show the shadow.


P5 Drawing


Adobe Illustrator drawing

Background picture is totally a hard choice, after more than 1o tryings, I decide to draw a big glass ball and set the container as the interactive area. I dig a hole on the right of the ball to reserve a space where the glass stick could access.


I surf on the internet and found a really good graphic design, and I put it in the center of the glass container and drew the whole background in photoshop.


Cristina who a strong sensibility of beauty and learning ability. She made the very beautiful installation that meet both needs of function and aesthetics. I was surprised that the glass cue she bought has the exact diameter with my running P5.JS and the container to hold the Arduino is very delicate!!

IMG_3966 IMG_3967

The potentiometer’s liner only support 6cm movement that is really an limitation to the user-friendly interaction. To get over with this limitation and to chase perfect, I added various physical motion model by creating a set of chain reaction among the glass balls to expand the interactive area, thus the interaction could always be continuos and users are satisfied due to they only need to do less to get more effect. For the physical motion part, I really appreciate my dear friend LightRabbit, a genius geek, whose kindly help and some part of the code support helped me taking the ideas to reality.


Arduino Code:

const int sliderInput = A0;
int sliderValue;

void setup() {

void loop() {
sliderValue = analogRead(A0);


p5 code:

<script src=””></script>



 Front Side

The front side is originated from a picture I found online, and I am really fond of this pattern. Every line is well aligned with each other. And words have good readability. The black dots gave the whole page a sense of rhythm.


I colored it in pink and used my best typography “Oriya MN ” to print the information. And I change the regular style into bold style to enhance the readability. I also added some small squares to match the back side.


Back Side

My Chinese name is “Muqing Niu”, which starts with “Mu” and ends with a letter “u”, which is the first reason I choose these two Characters to express the spell of my Chinese Name. Secondly, I want to become a user experience designer after I graduate from ITP, so I hope “U” could also represent “UX”. Besides, my last name “Niu(牛)” represents “calf” in Chinese Zodiac. So I Shaped this “Logo” as a calf.



I planed to try something new on my name card style. I printed it out as a gift card. And I wrote a Chinese character inside each card, which is word from a Chinese song, depicting the spectacle landscapes changes by the changing of time, weathers and seasons .


Processed with VSCOcam with f2 preset



 “Angry Sabrina “

“Angry Sabrina” is a serial application enables user to change the girl’s make-up in a browser by twisting three 10-kilohm potentiometer. The application is called “Angry Sabrina”  because what I was  in a bad mood when I made this project. What I learned last week in pcomp class  I feel difficult to understand that made me frustrated . Thanks for Xuhui’s very kindly help let me become clearer with the whole stuff. Actually I like this painting style. I never tried this style before, nor do I seen this kind of style before. So I’d like to say, sometimes bad-mode could make me more creative.






The potentiometer send a string toThe circuit looks like this:


There is also a version can be played via sliders:

Rhythm Creation :


A Impressive Logo-“South Beauty”

South Beauty is famous in China, both its food and brand are very impressive. The character in this logo is originated from a Chinese traditional Changing face performance, which is an Opera Art in shaping the use of a special Character. The face in this logo figures a hero general in Ming dynasty Liu Zongmin, who was honored as  “The militarily Deity of Wealth” for his witty and courage. The face is consist of four colors, red, yellow, black and white. And all the colors has a traditional special meaning in Chinese Culture. Red represents power and courage, and never give up in face of challenge. Yellow represents creating wealth and fortune of money. Black means grave and serious while white means harmony, and these two colors combined together presents the auspicious clouds.



The Chinese Character is specially designed to combine the traditional words with a modern presentation to match the brand culture, which is the combination of food from orient with the environment from westward. The meaning of the Chinese words is “The delicate South of China”, and it is translated as “South Beauty” in English. The Chinese words  and the English words had been united into one style, gave the logo a sense of harmony and comfort.



231621920332  U9460P1480DT20140428100231  313561-1373881700600

Logo Design for my blog – “Bubble”


The logo is made from colorful rose petals. I had a bunch of colorful roses that is beginning to fade, in order to make its beauty to stay, I decide to take advantage of the rose petals to make my own logo for my blog, and to try something new.

IMG_3701 IMG_3727

The petals are so beautiful that inspired me to create some color combination. I use two pieces of old curtains as the background, a bunch of rubber band as decoration, and the petals as my drawing pen. Overhead is a photo I took for the most beautiful petals. I was so impressive and surprised to find out there are even some petals have the Gradient Ramp, which widened my inspirations of color combination.

Below is what I made on the curtain:


I made some color revise and delete the background of my feet:


I have tried some other possibilities to work on this photo, such to give the first letter “B” a shape change from the Myriad Pro Typo to petals, but I am still trying.



I dreamed a dream in time gone by….Why were you still wandering in summer when autumn came?

IMG_3637    IMG_3640

Processed with VSCOcam with c1 preset

The inspiration of the sketch comes from the cold wether and the dresses and skirts on broadway. And the hair of the women is imitated from a sketch made by T Wei I found on Behance:



Have you ever been to China when snowflakes melt in the red light of lanterns? Listen, grandpa is telling an old story of winter, but you are full of sweets in your mouth:D

Guanzhong Wu, who is a great Chinese painter, these are my imitating of his works.




Henri Matisse, I like his color composition.



This is my first time trying to combine ICM and Pcomp together. My partner is Melanie Hoff, and we had a very glad time working together today.

Our goal is to combine P5.JS code with Arduino digital input by using a switch to control the media effect on a screen. We made brainstorm and got many ideas. I came up with an idea that we could use a hand-made switch combined with the code I programed yesterday, a bubble popping up effect, to make it looks like people using brainwave to control the bubbles on the screen. And we decided to do that.

Melanie connected circuits, and I combined Arduino code with P5.JS code, and We together made the hand-made switch. The code is embed at the bottom of this blog. We made two iron rings connected with power and ground respectively,  and a a conductive tape hidden in hair . People put the rings on their index fingers and touch two ends of the conductive tape to close the switch. I also tell people to make a sizzle in their mouse.


IMG_3632 IMG_3631 IMG_3630

The visual computational media effect:

URL for the mouse-control version:

0BFD7B78-59EA-496E-B241-527C5E6E3D97 15CADB08-0657-488C-A19A-B68A5DFDB325 81BC685A-2FB5-46D2-A907-99C3EA015FE5

Two parts of code: Arduino & P5.JS





This week, I learned characters of servo motors in pcomp class. My partner is Xuhui Xu, we worked in pairs and made this simple application using a servo motor and a photoconductive resistance. The application is called “OPEN SESAME”, which is used to help our roommates open the apartment door when we forget to bring door card with us.

I made brainstorm with my roommates to get some ideas about a simple application using servo motor. There is a big problem bothers all of my roommates: We have five people but only one door card, which brings a lot of inconvenience.  If we have not bring the card and there is no one at home, we should wait outside our apartment door for a long time, waiting for someone lives in the building to show up to open the door.  Xuhui came up with an idea that we can use servo motor to create a robot who can open the door for us. We decided to work in pairs on this application.

Firstly, we observed the communication device in our living room, and we found when the room number was called,  the bell started to ring and the screen on the device lit up, and in the meantime video chat  would be available. We can use the photoconductive resistance to detect the light on the communication screen and let the servo motor to make response. We detected the range of light intensity.

IMG_3523 IMG_3525

Secondly, we detected how to trigger the buttons on the communication device to open  the door. We use different material to touch the button to see what materials could made it respond and what could not. We figured out fingers, water bags, and even gingers could trigger the button, but plastic or conductive wire could not. We guessed it was a capacitive screen. To confirm, we separated the communication device to see the embedded panel, found out the button is a capacitive screen with a pressure sensor. Then we made the conductive wire connected to the ground but it still could not trigger the button. Searching reasons on web and we found out we need to expand the contact area. We made many contact tentacle for the servo motor, and finally made one that has the best precision and success rate to trigger the button.

IMG_3595 IMG_3597





This week, I programmed a scene of moon eclipse based on functions inside objects.


I created an variable object named “shadow”, and inserted three functions in it:

display: function(){

// Create an ellipse



// Let the ellipse move



// make the text change by the change of shadow



The most difficult part of this project for me is to make the shadow into dark red color, because the creation of this project is like the layers in Adobe photoshop. If I change the color into red, people will see an bigger ellipse passing through the canvas to give the moon a red mask. My goal is to give the move a red shadow, which cannot be seen on other part of canvas. I tried many times to use functions inside the “shadow” to color the moving shadow in red, but I did not find a way to order the layers properly. So I created a very big black circle, with “noFill” but many “strokeWeight”, and two black “rect” to cover the trace of the red shadow ellipse. The order of layers from back to front is: background, moon.png, red shadow ellipse, mask(rect and big black noFill circle), text”MO_N”(actually a typo png made in AI), mask to change “MO_N”.

Below is some screenshots of my project “Moon”, and URL of the project is on the top of this blog.

2FC1C75E-A24C-4410-B282-8C9E10C6749D 2C384CEB-88E1-460A-B9A8-0D317C68BCC6

CD6DFE09-D506-4E9C-A01F-DD1C87A00C99 91B0D007-2C8D-46FE-BF0B-E1401272AD5E


visual_language_week3_Typography & Expression

Typography& Expression





My name Muqing means “sunshine and grass”. Myriad Pro gives me a sense of allegiant and gentle, makes me calm and relaxed. 


Shree Devanagari 714 is a typography I found in Adobe illustrator, which is neat and clean and I like to use it in the heading of my poster design. When I am going to give people a sense of brief and comfortable, and there is not much words to read, I will choose this typography.


Tamil MN gives me a sense of fashion and modern life.

2. Serif


Bodoni 72 Smallcaps Book is very neat and trustful, remind me of my best skin care brand: Clarins.


Copperplate is fresh and popular, and I hope I could have this typography on my sports suits.


This Courier New typo makes me think about the programming. I don’t know why, but when I see it, I think about the code. Programming is part of my life now!


all faces-01



Happy mid-autumn Festival and enjoy the red moon eclipse!


2. “louver”(blinds)

Open the louver to see the sunrise and sunset, and wait for night.


Besides, using gallery for personal website is really a big trouble:((( I need to design feature Images for every post! Finally I choose the blue one, and I hope I made the right choice!  blessing……

QQ截图20150928192618 QQ截图20150928191941 QQ截图20150928190752 QQ截图20150928185840 QQ截图20150928183916QQ截图20150928182642 QQ截图20150928182318 QQ截图20150928181658 Untitled-03-03 Untitled-4-01


To my beloved live tutor Ms Dai Linong,

Happy Mid-autumn Festival!


It is a collaborative work, I am working with Ruta Kruliauskaite.

My inspiration came from Wu Guanzhong’s oil painting “Spring”. It really caught my eyes when the very first time I saw it, and I wonder it would be so amazing if I could make this beautiful spring scene alive! And what if the season could change from spring to winter using a slider?1418607337612ERgrw

Last week we started looking into conditional statements: if/else, while, for. It made our lives a bit easier and opened doors to a much bigger imagination (and more sleepless nights).

Work flow:

1.I drew a background painting in Adobe Illustrator, and then change the color to make it looks like winter.

spring_011 冬-011

2.Then I created a code blogs of ellipses, and created vectors to let them freely move into the canvas just like the plants grow in spring and the snow dance in winter.

3. Ruta built the slider to let seasons change when sliding the slider, and the plants turn into snow.

4. We revised the program together.






I made an extension on my glass mat this week. The color of light could change by the temperature of the water. If the water is hot than 24 centigrade, the red LEDs light up, else the blue LEDs light up.

The circuit looks like this:


IMG_3477  IMG_3473


Task: Observe different ways people unlock their iphones.

User Number: 16

phone type:6*iphone 5s,  10*iphone 6

User Age: 23~28

Observation Flow:

Send users messages by Facebook Message or Wechat, and observe how users unlock their phones. After observation, ask users about the reasons for their behaviors.


There are three ways to unlock iphone5s and phone6.

Time  :  C>B>A(if A did not fail);

IMG_3494 IMG_3497 IMG_3495 IMG_3498

A:Use fingerprint

8 users used fingerprint identification to unlock their iphones.

reason1: “This is convenient!”( It is bothersome to input the password)

reason2: “Fingerprint is cool, it is more technical than password input!”


B: slide the slide bar on the below side of the screen + Password Input

5 users used this method to unlock their phones, for the reason that fingerprint identification always fail.


C: slide the message + Password Input

3 users used this method to unlock their phones.

Reason:” I could directly see the message when I slide the message. If I slide the screen, I need to go to the app first, then see the message.”


If an physical interaction is easy failed, users will feel frustrate and may not use the kind of interactive method latter.

Always offer multiple choices for users.



visual_language_week_3: Signage and Wayfinding Systems


  1. An mysterious sign on a street near my home:


On the lower half, a “P” is in a red circle of the sign with a broom on it. What is the meaning of this icon?

I thought it had some relationship with the parking rules. However, the text on the red circle gave me an interesting clue: “Don’t Litter”. There is also a time explanation on the right side shows “9:30~11:30 TUES & FRI”.  So what I got is a very ridiculous interpretation that people are not allowed to litter during  9:30~11:30 TUES & FRI because there would be a street cleaning during that period.







2. The light problem of a railway signage


It is difficult to recognize the text on the railway sign when night approaches, especially when there are strong lights above and below the sign.

3. How to find the restaurant?


The advertisement sign is consist of a plate of food on the bottom side, a line of words ” KICK HASS GUAC” in the middle, and a icon on the top. How to get to the restaurant? As there is no telephone number or location on the sign to help users find the restaurant when the advertisement catch their eyes, and it takes some time labour to search the restaurant info by themselves, users are easily giving up finding the restaurant when they have some other food choices.

4. Emergency


This is a sign in the apartment I live in. I spent two seconds to read this sign the first time I saw it.  As every second matters in emergency, I think the design of the sign should be improved. For instance, the color of ” YOU ARE HERE” and “STAIR” could be changed into green, which could help improve the reading efficiency.


This MacDonald sign really caught my eyes when I first saw it on line. The sign only have a half of “M”,  and the glass reflect the other half. The optical effect is more obvious at night than in the day, which successfully matches the words ” open all night”. To conclude, this sign is designed for the targeted users who get out at night for food!




Use color to emphasis important info. Let user quickly know where they are and where is the safe stairs. The green color offers people the mental suggestion of safety!

Bubbles Variation_ICM_week_2

It is my second time programming. I really want to code something to match my website”Bubbles”.

My project URL:

At first, I made a quick draw in Adobe Illustrator and input every component in Java Script. It was quiet a heave work, after three hours, I made a stuff looks like this:


But the whole image is still  with no random, I wonder how to make these mushrooms appear randomly.

After seeing Leon’s perfect work, I was very impressed!  I referenced his code to learn how to fill the components responsive to the mouse position and make components appear randomly, which is different every time when I open the URL.

Below is what I created:

38B5DB36-55C3-45B2-86A9-D8409A13ECF7 111135jpg


Every time when you open the browser, the bubbles will show in a different way. The light of bubbles will change when you move your mouse.

Below is my code:



Pcomp_Switches and LED circuits_Magic time for a glass cup mat!

After seeing the very interesting application Mustache Switch, I wonder if I could make a interesting application with just Switches and LED circuit.

Firstly, I made a LED circuit. In order to make them brighter, I gave them 5V input, and made a parallel circuit with 3 LED. To protect the components in the circuit, I added a 220Ω resistance.


Let them work!


I held a glass of ice water, thinking about what to do next. I observed my surroundings, trying to find some inspiration. I looked things through my glass cup and everything seems be distorted into strange but interesting shapes. How about make something interesting with glass? I turned on the laptop on my iPhone and let a beam of light illuminate through the glass of water. It was very beautiful when light reflect and refract between  glass and water! How about using the glass cup to trigger the switch? If I put a glass of water on the LED and it turns on directly?

How about a cup mat!? When I put the glass on the switch, the LED light up!

Then I figured out one thing that my glass could not stand still on one single switch. So I decided to make three switches in parallel with each other and form a triangle to hold the glass. So if any of the switch were triggered, the LED will turn on.


This is the final circuit looks like. In order to make the switch reachable by the glass, I made a bow on the LED, and use tapes to permanent their position.


After finished making the circuit, I began to think about the cover of the cup mat. I cut a piece of paper from a ads magazine and fold it into a box.

456 IMG_3338

Dig two holes, and embed the bread in the box.


put the glass on the hole, and here is the magic time!





Actually, I don’t regard this design as a interactive design, as it does not interact with people. However, I am considering embed some interactive functions inside this design. For instance,  binding the cup mat with Facebook. When the two person put their glasses on the mats in a near distance, the more similar of their shared info detected (hobby,music, interest,etc.), the more similar light will light up, which could be used for the blind dating!

Visual language week 1-Analyze visual elements

Visual language week 1-Analyze visual elements 

Adobe Media Encoder Illustration: 

Edge Reflow – Import Photoshop and Illustrator assets


1. About:

Yukai Du, a illustrator and animator from China, currently based in London.

It is a graphic design work visualizing a story about edge reflow of Adobe Media Encoder importing photoshop and illustrator asserts. The designer compare the edge reflow of importing asserts to the railway stevedoring work. Workers stand beside the railway carriages to get, put, deliver and exchange goods to the right places. Data, information are abstracted into colorful lumps with different textures.

2. Color



Color system in the design work has a strong sense of brightness and hue contract. The dark blue color sets the background that make the other colorful elements standing out. The color clash of  blue background and the yellow hue elements emphasize the visual contraction. However, as each color has been added to greyscale adjustment, the whole color effect become mild and relief.

3.Grid System


All the lines vanished at one point, makes the image looks comfortable and reasonable.

2DADD7DA-6448-4463-A88F-7FB056250DFB 4

The horizontal lines are arrayed in comfortable orders. And ratio of the height of the biggest block A to the combination of the height of other blocks B is approximately equal to 1:0.618, which is the Golden Ratio.

4. Texture


Colorful spots enrich the bumps color effect and make the whole image full and variety. We can see the containers have not been added with small spots, but the data has. The spots analogy a metaphor indicate the complexity of the data.

Link to the design work:


Code a portrait using JS

This is my first time coding, and I am so excited and never thought that I could draw a picture with code. I want to create a portray of my professor Dan Shiffman.

At first, I made a quick sketch use pen and marker pen.


Then I took a photo and put it into Adobe Illustrator and made a lattice in order to make it easier when I need to calculate the coordinate in the later work.


Firstly I created the glasses, I was trying to make a same one but I…haha! Not the same style, but it is similar, right?


After creating the glasses, I got a little familiar with the code drawing, and I tried to create the whole face.


This is what I got!

Finally, I filled the glasses with some color to make it looks like a 3D glasses.


Below is my code:

function setup() {
// background(‘white’);
function draw() {
quad(720, 393, 755, 400, 755, 425, 720, 425);
quad(275, 400, 310, 390, 310, 425, 275, 425);
curve(357, 505, 357, 370, 460, 370, 460, 515);
curve(567, 445, 567, 370, 670, 370, 670, 515);


stroke(0, 0, 0);
curve(350, 655, 365, 455, 455, 455, 450, 585);
curve(350, 340, 375, 460, 445, 460, 450, 375);

ellipse(410, 465, 43, 43);
quad(415, 446, 425, 456, 425, 461, 417, 456);
//remove extra eyebowl
curve(350, 352, 375, 472, 445, 472, 450, 382);
curve(365, 565, 367, 439, 455, 455, 450, 635);
curve(435, 430, 455, 460, 375, 490, 0, 405);
curve(550, 605, 565, 455, 655, 455, 650, 625);
curve(550, 435, 565, 462, 645, 462, 650, 370);
ellipse(610, 465, 43, 43);
quad(615, 446, 625, 456, 625, 456, 617, 456);
//remove extra eyebowl
curve(550, 352, 575, 472, 645, 472, 650, 382);
curve(550, 675, 565, 455, 655, 438, 650, 535);
curve(600, 410, 565, 470, 640, 490, 800, 405);


// lip below
triangle(395, 655, 631, 655, 510, 1020);
triangle(410, 655, 615, 655, 510, 950);

rect(415, 655, 15, 15, 2, 1, 1, 5);
rect(430, 655, 25, 25, 2, 1, 5, 10);
rect(455, 655, 25, 35, 2, 1, 3, 7);
rect(480, 655, 30, 38, 2, 1, 3, 3);
rect(510, 655, 30, 38, 2, 1, 6, 3);
rect(540, 655, 25, 35, 2, 1, 10, 4);
rect(565, 655, 20, 25, 2, 1, 10, 3);
rect(585, 655, 20, 20, 2, 1, 10, 2);
rect(605, 655, 7,12, 2, 1, 5, 2);
rect(415, 700, 15, 15, 2, 1, 1, 5);
rect(430, 710, 15, 15, 2, 10, 1, 1);
rect(435, 726, 15, 15, 2, 9, 1, 1);
rect(440, 742, 20, 15, 2, 7, 1, 1);
rect(447, 759, 25, 35, 2, 25, 1, 1);
rect(475, 776, 25, 30, 10, 5, 1, 1);
rect(503, 776, 25, 30, 6, 4, 1, 1);
rect(530, 776, 25, 30, 10, 5, 1, 1);
rect(558, 762, 15, 30, 7, 1, 5, 1);
rect(595, 700, 15, 15, 4, 1, 1, 5);
rect(585, 710, 15, 15, 6, 10, 1, 1);
rect(575, 726, 15, 15, 7, 9, 1, 1);
rect(565, 742, 20, 17, 9, 7, 10, 1);stroke(‘black’);
line(410, 655, 460, 805);
line(614, 655, 564, 805);
// upper lip
curve(200, 855, 395, 655, 525, 655, 600, 700);
curve(306, 755, 506, 655, 631, 655, 716, 800);
curve(-150, 450, 395, 655, 631, 655, 880, 600);
//mouth corner
curve(360, 600, 395, 655, 418, 655, 440, 600);
rect(410, 655,10,3);//lip below arc
curve(445, 650, 445, 800, 580, 800, 580, 650);
//remove extra
curve(445, 675, 435, 825, 590, 825, 580, 675);
curve(445, 640, 448, 789, 576, 789, 580, 639);

curve(445, 624, 449, 778, 570, 780, 580, 624);

URL to the project:

What is physical interaction?

After reading” Crawford, The Art of Interactive Design, Chapter1&2″ and “Bret Victor, A Brief Rant on the Future of Interaction Design “, it is my first time seriously think about what is interaction, and the definition of good interactive design projects.

According to Crawford, interaction could be defined as “a cyclic process in which two actors alternately listen, think, and speak”. He illustrated the cyclic process by giving the examples of communication between people at first, and then he talks about the degrees of interactivity to measure the interactivity, which could be high, moderate, low and zero. The complete interactivity require all three part of “listening, thinking, and speaking”. Good interactivity need all three parts work well and work with each other. Thus, to be a good interactive designer, he or she should address the entire interaction between user and computer: Listen to user’s intention, think about it, calculate, and make corresponding respond. At last, Crawford says interaction could be defined in many ways. So I am trying to make a definition myself according to the reading material as well as my own opinions.

Physical Interaction:

A cyclic and continuous process in which participants (both people and machine) alternatively “listen, think and speak “, which involve physical communications in the whole process. The physical interaction could both be explicit and implicit. For the explicit interaction, while users are detected, the computer system starts to run by analyzing user’s intention . Meanwhile, computer system give out the real-time interaction responding to users’ activities that satisfy user need or incentive users’ next movement. For the implicit interaction, while users’ activity matches computer’s trigger point, the responsive interactivity made by computer starts to run, to achieve users’ expectation or surprise them, thus to incentive users’ continuous respond.

What makes for good physical interaction :

1. Good Physical interaction should be human-centered, user-based as well as persona-targeted. According to the book, the Nintendo refrigerator offers adults some intellectual utility, but could offer an interactive door game for children. For different users, the level of interactivity could be different. For adults, the refrigerator does almost zero level of interaction. But for children, the refrigerator does much more higher level of interaction. This is what we are talking about, the targeted users. A physical interaction project do not need to satisfy or surprise all users, if the developer created a project that could meet the requirements of the target users’ ideal model, then the product could be defined as a good physical interaction.

2. To be intuitive, easy to use and short learning curve! People do not need to learn how to interact with the projects or the learning curve appears to be shorter than users’ expectation.

3. Through down to the last detail but as little design as possible.

4. You think it is good! As everyone has a hamlet, some interactive projects may judged by a lot of people but suit your tastes, you can define it as a good physical interaction project.

Physical interaction in the future :

After I read “Bret Victor, A Brief Rant on the Future of Interaction Design “, I feel very excited :D!!!!!!   Two years ago, I formed a team with two friends and created a project named “Get & Put”. It is cloud-powered magic that makes humans the couriers of virtual data. With the Get & Put app installed and online, users can grab pictures, music, or drawings from the screen, carry them by hand, and put them into other devices without carrying any equipment. Get & Put makes users feel like that they are carrying data in hands, but the real story behind is that when the user “grabs” something, it travels into Cloud, and Cloud orientates it to the device the user wants to put data in.Get&Put is achieved by the combination of three powers, biometric recognition, wireless network and azure. However, due to the limitation of human face recognition technique, the project could not survive in all scenarios. But I believe in the future, Get & Put will appear in classrooms to promotes intimate interaction and feedbacks between children and teachers, encourages elder people to enjoy sharing photos and music with other family members at home and maybe it can brings a new style of adverts access and cultural diffusion for commercial use. Ok, I will stop wagging :D!


Talking about physical interaction in the future, I would like to imagine that the future interactivity will break the wall between the physical world and the virtual world, and the interactive projects would cross the boundary of people, art, design and technology. People could use instinctive activities to reach, feel, and touch to the virtual world. Thus, even the very young children and the older people could also enjoy the new era of data and information!


Interesting games lead to the first understanding of programing

draw a picture with instructions It's a clock!

It is quite an amazing way to get the very first understanding and interests in programming!

We are asked to work in pairs, think about a mental picture model and write instructions with descriptive language such as “draw a line/circle/triangle/… on/under/beside/…”, “repeat/resemble…”, “the coordinate is (x, y)…”  After finishing the instructions, we exchange our instructions and try to draw other people’s mental model with the help of instructions.

My partner and I want to write a instruction of drawing a cat, but it is really hard to describe, so we turns our idea into a pig. “1:draw a big circle. 2:draw a small triangle on the left top of the circle and another small triangle on the right top of the circle. 3: draw four very little circles in the center of the big circle, which looks like a button. 4:draw a ellipse inside in big circle and include the lower two very small circle ” We hand the instructions to others. The funny part is coming! Due to some descriptions in the instructions can be interpreted in different ways, and everyone has a hamlet, the drawings appear to be more than abstract :D!!!

My partners and I got an instruction and we finally got two elliptical clocks. Some of the classmates who already had some programming experiences gave out more accurate instructions.

I get some idea about programming that if I want the machine to understand what I am thinking about, I should use the very logical and accurate descriptive orders, or the orders can be interpreted in different ways. It is the accuracy makes programing very interesting and the accurate instructions could help us the effects we want. However, I think the implicit instructions sometimes may comes to a surprise effect beyond our expectation!