Xiaonan/Casey-Week8: Project 3/Audio Project (CHEN)

Link: http://imanas.shanghai.nyu.edu/~yp947/ELEANOR/


Basically in this project we want to make a short Hollywood-style trailer, to make a trailer only with audio and make it epic.


So in this project, we tell a story about a girl, who is the king of her people. And it’s her destiny to protect a relic in her species, the seed of Aya. However, the enemy attacked her city and killed her people, one of which is her beloved grandpa. So she decided to revenge, and she killed a lot of people. But eventually she was lost in her endless killing, and she found out that there was no difference between herself and her enemies — endless killing people, no matter what the reason might be. So she walked into the forest and met a fairy, who gave her the answer, “everything is born with sins”, and then she decided to kill the dragon which is composed of devil inside people’s heart, to end this world of fighting and killing.

Make-up process:

So all the sound in this small trailer came from three kinds of sources. First, the recording from the Tascam. For example, we use our finger to imitate clatter of a horse’s hoofs; we use the tissue to imitate the sound of wind; we use knife to imitate the sound of battle.

And the second source is the background music from Two Steps from Hell. And the third source is from the open source of all kinds of audio, like the sound of the battlecry, or the sound of dog.

And we cut two background music to 2 minutes and connect them. Then we began to add elements to it. The process is quite fun because sometimes it did sound like a Hollywood trailer!


1.We are still not very good at using Audacity to change the effect of the sound clips, and sometimes we don’t get what we want.

2.It’s quite difficult to speak like a Hollywood actor, and the people’s sound sometimes doesn’t fit the background.

Xiaonan Li-week7:Response to Theft and Artistry, NPR (CHEN)

The first time I heard the song Hymn for the Weekend, I found it quite amazing, including its MV. Its MV, shot in India, has brought two different cultures together, and also gives its audience a good image about Indian culture. And the first time I had a chance to watch this video was a high teacher showing us in class, and she gave quite high praise to it for mixing up two cultures so smoothly. And I have searched online about Chinese people’s comment about this song and the MV, most of it is merely compliment about the song itself, and also about the MV shot in India. However, in foreign people’s perspectives, they view this thing quite differently, and I think this is also because the cultural difference between Chinese people and foreign people. Our sensibility towards cultural things is not so high, and usually we will not think so much. And talking about their opinions about this song, I think that the culture is the fruits of all human, and cross-cultural works actually will do a great job for people to get to know about other’s culture.

Xiaonan Li-week6:Response to On The Rights of Molotov Man(CHEN)

In the article On The Rights of Molotov Man, there are two perspective of one event. One is Joy Garnett, another is Susan Meiselas. They have very different opinions, and I have found out that people have very different ideas of copyright, and their understandings vary. And when some thing goes to extremely popular, and everyone is talking about it, using it, modifying it, it would be much more difficult to control. And the photo and the painting in this article is one of the examples. Personally, I don’t like what Joy has done although I think it’s ok to borrow other’s idea and recreate them. However, when someone is borrowing an idea, he should inform of the original creator and ask him for permission.

Xiaonan Li-Week6:Response to Lethem(CHEN)

In Lethem’s article, he talks about plagiarism and inspiration. Some works of art do borrow some previous thoughts and based on those thoughts they have been added new ideas and meanings. So it’s quite difficult to distinguish a mere inspiration and a act of plagiarism. Because, as the author states, most of the work, especially art work, grows up from some previous work. Adding innovation to those existing works is also a way to produce new amazing arts. And it reminds me of several authors’ opinions of plagiarism. First one is Barthes, who writes an essay called the death of author. And in this essay, he claims that text is non-linear, but a multi-dimension space, and every works is born from it, none of them original. Although he is talking about literature world, I think it could also be applied to the art world. Second it reminds me of Pennycook who has written an essay about the complexity of plagiarism in 1996, pointing out that it is really difficult to define plagiarism because we need to take the complex context in account. So basically, I think that one should not deliberately copy others’ previous work and pretend it to be his own, but it’s ok for some one to be inspired by some brilliant works and add their own ideas upon it to produce an amazing remix, with a notice to audience about whose work he has borrowed.

Xiaonan Li-Project2:Interactive Comic(CHEN)

-Our link: http://imanas.shanghai.nyu.edu/~xl2149/project2/


For our project, we call it “我” which means “I” in English, since our main character Susan is a Chinese small town girl who can not integrate into the life of New York quickly. This small game is about how Susan deals with the struggle between popular aesthetic standard and her own unique personalities. Although New York is the city of fashion, it respects originality and specificity as well. Susan will experience the initial confusion and desperation, the painful changing process, and finally she understands the best way to live in New York is just be herself. Love yourself, then New York will love you.

We will demonstrate her whole changing process on our web, users can help her find herself by interacting with her. We decide to create our character Susan on the web “www.zefrank.com”, since we love its random lines around the figure. We also use photoshop for detail revise. We put background music and voice over to make Susan vividly. We even use the local language of Chongqing province to make it more reliable. Furthermore, users can keep interacting with the web by clicking the mouse and moving the mouse, it will provide users interesting experience.

-Coding part:

Basically, the projects consists three different types of functions, first of which is the use of array to push forward the conversation text.(as follows) So when user click the window, the conversation will keep happening.

Second kind of the coding is the most difficult one. For there is one part in our project to give make up to the little people, so we need to have users to finish the make up by move the mouse and click. And it’s quite difficult to calculate the coordinates, and to make the element show one by one.

The third kind of the coding is quite interesting when we are trying to make the little person move by the key press of the user. So in this part, users have to use left and right keys to move the person. And in the meantime, there will be sound of walk.


It’s not easy to write different kinds of codes and compose them together, and every transition takes a lot of times to plan and make. However, we still enjoy the fun making it with learning new functions and elements at the same time. And the result of our projects looks like this:


Xiaonan Li-Progress of the Project2(CHEN)

Partener: Hailun

Basically, we have drawn or created all the elements we want, including the human figure, the big smile faces with different facial expression, the text box and different backgrounds.

We’ve started to put those elements in the browser. The first picture below is the welcome page of the whole project. It’s quite clean and simple, which is the discussion result with my partner. We don’t want our project to be too complicated, instead, we want a simple style. And when the user click the “我” (which is the name of our project), it will jump to another page and start the story, as the following pictures show.

And then in the new page, the little face will start a conversation and user can move on by clicking anywhere they want, and the text will change, then the little face will receive a letter which will lead the user get onto the next stage. And in the next stage, the little person will move around, which we temporarily find difficult to achieve.

Xiaonan/Hailun-Week 4: JS exercise 2(CHEN)

This is the link of the exercise:


Some difficulties we encountered:

  1. At first we thought we should change the background color while change the mouse location, but we found out later the innerrect already with blue background
  2. And we didn’t find out the use of “display” at first, then we found out we can use it to make invisible turn into visible

		function checkLocation() {
			var xpos = event.clientX;
			var ypos = event.clientY;
			if(xpos > 250 && ypos < 250){
			document.getElementById("topright").style.display = "block";
			document.getElementById("topleft").style.display = "none";
			document.getElementById("bottomright").style.display = "none";
			document.getElementById("bottomleft").style.display = "none";
		}else if(xpos > 0 && ypos < 250){
			document.getElementById("topleft").style.display = "block";
			document.getElementById("topright").style.display = "none";
			document.getElementById("bottomright").style.display = "none";
			document.getElementById("bottomleft").style.display = "none";
		}else if(250>xpos > 0 && ypos < 500){
			document.getElementById("topleft").style.display = "none";
			document.getElementById("topright").style.display = "none";
			document.getElementById("bottomright").style.display = "none";
			document.getElementById("bottomleft").style.display = "block";
		}else if(xpos > 250 && ypos < 500){
			document.getElementById("topleft").style.display = "none";
			document.getElementById("topright").style.display = "none";
			document.getElementById("bottomright").style.display = "block";
			document.getElementById("bottomleft").style.display = "none";

Xiaonan/Hailun-week3:comic ideas(Chen)

Story line:

After our short discussion, we decided to create a story about personal struggle of contradiction between popular aesthetic standard and his/her unique personalities, since it is a valuable question for people to define themselves in a big society.

At the beginning, we will draw a simple smile face with some emoji above it to show its feeling. Moreover, we will show its psychological activities as well, such as “I like myself! I look perfect!”. When users click the button “next”, scene will change. This smile face is invited to take part in a fashion party, everyone there looks so cool and all of them wear heavy make-up. The smile face is laughed by others and it feels so ashamed and sorrowful. It starts to change the way how it sees itself, such as “I am not that beautiful. People love cool kids, how can I look as cool as them?”

Continue reading

Xiaonan Li-Week 2: CSS Website (Chen)


(Some things will not be right on safari…chrome works fine)

The first time I used html to create my own page, it was about Naruto and there was no css style and it’s quite simple. Then in this project, I continue using the topic about Naruto and tried to make it more complicated and more beautiful.

There are four pages in this project. The first one is the main page, where there is an entry button to lead people to get in the second page. There are not a lot of stuffs in the first page because I prefer the style to be more simple.

And in the second page, the content is a little bit more complicated but the style is still quite simple. There are two images on this page and one of them is Naruto and the other is Sasuke. But there is a little trick on this two images. When one moves his mouse on the photos, the photo will gradually disappear and show the introduction on that character, and when he moves away his mouse, the image will gradually appear.

And the third and the forth page lead one to more detailed information of Naruto and there entry lies beside the left photo. One of them tells the storyline and another is people’s comments on this anime. Interestingly, in the storyline page, when one click the body of the page, the background page would change, from young characters to old ones, which is not obvious, but can be a little bit surprise for Naruto fans.

And there are names beside the images and click the names, it will lead to the wikipedia page for more detailed introduction of the characters.

And the issues I encountered is that although the images and the texts look all good when the browser is at normal size, but once I adjust the browser size and make it smaller, the images will cover each other and the texts will be removed to another places. I tried to figure out how to make the image sizes change with the browser size, but I failed to do so. And I may consult a fellow later for this problem.

A quick video for the page: