Week 8 – Project 3 (Moon)

Group Member: Claudia & Chenchen

Project Name: Break Up


In this audio project, we tell a story about a couple who is breaking up by integrating music with the dialog. The audio is placed on a webpage with the design of a music player app. After users click play button, the audio starts. It will start from a dialog between the cheating husband and the wife who didn’t take good care of the husband in English. After that, there comes the wife’s singing and then followed by the husband’s rap. The vocal part is made from our adaption of the Spanish song, and record of me reading the lyrics of the Chinese song, 爱情买卖 (Love Trading). When the wife sings in Spanish, the background music is Chinese traditional music, 梁祝 (Butterfly Lovers). When the husband sings in Chinese, the background music is Spanish traditional music, Las Avispas. The subtitles will be displayed all the time and in the center of the page, there will be a broken heart rotating as the cover of a CD.

Continue reading

Week 7- Response to “The Danger of a Single Story” (Moon)

In this talk, the speaker talked about the importance of having a thorough understanding of everything in the world, rather than holding one stereotype. When people have very narrow access to a thing for a long time, they tend to take it for granted that this is the whole perspective of the object.

This is related to my experience of creating a project. When I do the project, I always tend to see what the former people did in the similar project and always question myself about what is this project supposed to be like. If I found that there are limited styles of doing the project, then I will think that this is the right way and the only way to do it. This thought will largely decrease my creativity and it is also the reason that I always ask a lot of people for their opinions to see if there are any other potentials.

In my opinion, the reason that people, like the speaker, advocate for getting a thorough understanding of everything is that this phenomenon threatened the later generations creation and development of knowledge. If people have the same narrow perspective for a really long time, it is really hard to change their mind, since people will stick to the initial impression. So, when later generations refer to their work, they will build everything on the wrong basis. In the end, those faults will accumulate and create a disaster of the world.

Week 6 – Response to Molotov Man (Moon)

This is an interesting article stating the interaction between the original creator of a photograph and the painter used the original photograph. From their words, I am inspired that the context of the work really matters. From Susan’s perspective, as she is a photographer, she really considers about the real situation or the real context of the photo she took, and she thinks others should do the same.Her saying means that she still considers Joy as doing not proper things since he gets rid of the context, which is the opposite of her idea. However, I may disagree with her. In my point of view, how to think about the goal to create a work really depends on one’s personal position. As Joy and Susan are different, the former is a painter and the latter is a photographer, they will have different beliefs. Even an original author is not happy with others adjustments with his or her works, if others give credits to them, he should let go of the thought of controlling other’s interpretations, just like they cannot control the minds of the viewers of their works in the gallery. Because the act of giving credit has already stated it clear that this is a new work different from the original one, and “this is my work, not the source author’s”.

Week 6 – Response to Ecstasy of Influence (Moon)

This article basically talks about how plagiarism is related to the art and literature works. The author is concerned about that the worries about commit plagiarism will make the creativity place of the later generations shrink. In my opinion, this situation happens because people are too aware of the rules that are set by the official organizations.

I think in terms of plagiarism, we should focus on the perception perspective rather than the mere rules. As we all know, the reason to create the concept of and avoid plagiarism is to protect the original creators, and more specifically saying, it is to protect their feelings as creators. All the rules set for plagiarism are related to the creators’ feelings. From the rules, when later generations are creating something based on the former authors’ idea, they need to give credits to them and also give it precisely (which means when others look at a second-generation author’s work, they can easily access the source that he or she is pointing to). In this way, the original author is protected, and the second-generation can also create their work freely “standing on the shoulder of the giant”. The only problem remaining is that how to cite some work the second author even didn’t remember the source.

Week6: Response to “Embrace the Remix” (Moon)

In this video, although this video mainly talked about music remix, I learned about remix as a general concept. It has always been a problem related to products or artworks considering that they are creative or not. I really agree with the speaker’s idea that new creativity has the elements of copy, transform and combine. In my opinion, when talking about copycats, people are talking about people who just take others whole products as their own without any adjustment, but making adjustments is a way of showing creativity because different people can have different taste. Those original works are like sources of their creation, just like different objects for painters to paint, but how to interpret it depends on how much creativity one has.

Week6: Project2 (Moon)

Group: Chenchen & Mary

Project Name: A Girl’s Readme


In this comic project, our group created an interactive non-linear story about a girl using HTML, CSS, and JS. The way to interact is mainly hovering above the glowing objects and clicking on the buttons.

At the beginning of the story, this girl always thought others pay too much attention to her and felt uncomfortable. Users will see the monologue of this girl and what other people are like in her point of view by interacting with the people on screen. Then the users will be led to her bedroom and by “choosing to play with different animals in her dream” (clicking on the animals), users will see beautiful scenes about the girl playing with animals in her dream. In each of the scenes, there will be different animations displayed after users interacting with it. The animals will say some educational saying to the girl to change her wrong attitude towards the world. The users can wake the girl up at any time but there will be different endings based on how many animals they interacted with. If they click above 2 animals, the result will be that the girl is happy because now she finds something in the world that is more meaningful and beautiful than worrying about others’ attention on her. If they click a little number of animals, the result will be the girl is still unhappy because of those people she thought that are watching, talking, and criticizing her. We will give users a second chance to change the girl’s mind, which will lead back to the bedroom for them to choose more animals.


Our concept is that there is no use concerning and paying too much attention to others attention and opinion on us all day long, rather, one has other more meaningful and prettier things to pay attention to in the world.


Our concept partly comes from a popular game called “travel frog”, in which a small frog travel around Japan, hiding in the grass with a mouse, view the flower with butterfly .etc. It also comes from my experience just like this girl who always thinks others are focusing on her.


  • Discussing the plot

This is the flow chart:

  • Preparing the sources

I am in charge of painting all the characters.

I also did some PS. The challenging thing is how to make the background match up with the hand-painted style of sketch and the color of characters. To do this I used the filter “Dry Brush” and reduce the brush detail while increase brush size.

e.g.This is original:

after my editing:

Mary is in charge of filling in colors to my sketch and also using PS to modify the background.

  • Creating HTML, CSS & JS files

In this part, I am in charge of creating files from the bedroom scene to wake-up scene and also think up the content of texts of the whole project to guide the users.

The challenging thing is that we want to create a global variable in JS to count how many animals scenes users viewed, so we cannot use <a href=”…”> </a> to open a new HTML file, rather, we need to stay on one HTML file. With the help of Professor Moon and Jiwon, we managed to use <iframe>.

In my first try, I used bedroom.html as a home page, and add one new iframe to open an animal HTML file as a window every time users click on one animal icon. We also have go-back button on each HTML files of an animal. I used DOM property (display: none” and “display: block”) to manipulate wipe out and show the button. Although I put the go-back button on top of the iframe, the button will be covered by new iframe added.

After asking Professor for help, I revised it. This time, I only changed the content of one iframe element then it works.

The following is the code:

(HTML file:)

(CSS file:)

(JS file:)

Animations are also not an easy task. When we first thought about having sunlight rotating following mouse, we didn’t think about how to get the angle in degree. Luckily, we found that there is function in JS which can get the arctan. Using this data in radian system, I then multiplied a constant to get the number in degree. We also came across problems related to the sharp edge of the sunlight.png. I fixed this by positioning the center of rotating sunlight outside the screen.

This is the display of sunlight with sharp edge:

The following is that code related:

(JS file:)

The final result:

Mary worked on other files.

  • Putting things together

To get a sense of consistency, I suggested making the interactive elements that are not button-like glowing. This is because we were worrying if these elements don’t look like buttons and without special effects, users don’t know what to interact with. In my suggestion, these elements will grab the users attention to lead them to interact with it.


The result:

To create linkage between HTML files that are not related to the global variable, I used <a href=”…”><a>.

Mary is in charge of making adjustments after I first link them together.


This project achieved our expectation. We are pleased to see the consistent design style and pretty animations after we tried many versions. If time allowed, we could study more about iframe since for we cannot hide the back button in the scene of girl and fish since we don’t know how to display it again when we change the content of iframe from clicking a button on this page.



Week4: Project 1 Update (Moon)

Project 1 Update

Group: Mary & Chenchen

So far, we have a clear understanding of the plot, lot of the source pictures and some animation effects.

We collected all the background pictures and drawings and used PS to adjects them to create a consistent hand-drawn style. We created html files for different scenes with background and the hand-drawn characters in it. To make sure users know what element they can interact with, which means after they hover or click there will be effects or new elements displayed, we created glowing effects around those elements. For those effects after users click or hover, we have make effects like shaking and fluttering wings.

The followings are the screenshots of our html files:

The clock is clickable (will jump to the ending, which will be developed later):

We made the butterfly fluttering the wings after hovering on the wings (we will have dialog box):

The mouse with the girl shakes when hovering (will have dialog box):

(Will have sunlight tracking mouse:)

The water drop is clickable:

After clicking the water drop, display the following picture (will have dialog box):

In this week, we still need to think about the content of texts and where to display the dialog box.  Also, we haven’t make the linkages between the pages.

Week1: Assignment (Moon)


For the context selection of this website project, I would like to use the information of Star Wars, which are the movies I like the most.


I get the text from Wikipedia about Star War’s basic introduction, films, themes and its culture. I will put these four into three tabs that will display on the top of the page, but for now, I can only insert them as hyperlinks, and create four HTML files in total. I also would like to insert some pictures suitable for the black background that I will later get. As I know that later I will use CSS to deal with the style of the website, I only edit the size of the pictures to make the website clean. To so so, I wrote “width=…”.


I am concerning about how to keep the text and images in the center.

Also, I don’t know how to play the music consistently even if users enter another HTML.


link: http://imanas.shanghai.nyu.edu/~cz1317/week1/introduction.html

Week3: JS Assignment (Moon)


For the assignment, I would like to create interaction between users and the images. I complete this assignment by finishing three parts: adding an alert to an image, adding a button that can change the text, and adding another button to close the website.


For the first part, I first put text on top of the image to give instructions to the users. I do this because, otherwise, users will search through the whole website to find where they can interact with. Then I add the alert function to the image after “<img”.

For the second part, I decided to add a button that can reveal more information besides the things already on the website. I used a little bit of logic here as I put the code of the button inside the DIV for the text that will be wiped out. By doing so, the button will be gone after people click on it, and the original text together with the button will be changed to new text. I do this because people cannot click on “see more” when there is no newer knowledge.

For the third part, I positioned the button to the right-bottom corner. I deliberately put it there because I want to create a sense of finishing to readers. By clicking on this button, the website will close, as I call it “say goodbye to cats”.



Week3: Concept Presentation (Moon)

Partner: Mary


The inspiration is from some personal experience, as well as a popular game called “travel frog”, in which a small frog travel around Japan, hiding in the grass with a mouse, view the flower with butterfly .etc. From the game, we discover that nature looks different on a small scale and hope to show the user that the world worth more exploration comparing with troubles you meet.


Our concept is about a girl who thinks others always focus on her and later realize that she is nothing after an adventure in a dream.

For the first half of this comics, we will show that she always feel thatchers are watching her, discussing her and judging her in their minds. So she hopes she can be super small to escape the crowd.

One day, in her dream, she becomes as small as a butterfly and start an adventure with mini animals and view the world from another perspective and feel the beauty of nature. In this dream, no human even discovered her because she is so small.

Later she realizes that there are so many beautiful things that worth paying more attention to than her, and even herself should try to understand the beauty of nature and shouldn’t always be concerned with how others feel about her.