Final: Art project(Moon)

  • Name: Han
  • Link:
  • Date: May 10th
  • Partner: Quinn He
  • Inspiration: Han Fu(Han Clothes) are traditional clothes for Chinese people in the past, which also has some cultural meaning in it. But few people know it nowadays. Therefore, We want to use the web as an approach to let more people feel the beauty of Han Fu.
  • We also inspired by a series of App called fans/Sunmao/Bushi, which are all designed in Chinese style. Their excellence user experience gives us many inspirations.
  • Introduction: The web has two parts, one is for users to view different type of Han clothes, as well as learn some basic information and history. The other is giving users chances to design their own clothes.
  • Process:
    • Photoshop Part: First, we did some researchers, finding six types (3 for male and 3 for females) of clothes we want to work on. Then I  need to prepare the pictures for viewing part and designing part. For the viewing part, as the pictures are put on a Chinese style lantern, I decided to make the pictures in traditional Chinese realistic painting style.
    • The main method is first reducing all the color of original pictures, only living the outlines with Inverse-Minimum(filters), then adjust the line with curves, finally, put one colorful layer under the line one, changing the model to soft light. After these processes, I also need to adjust the color and style to make sure the style is constant.
    • The other work is preparing the pictures on design pages, considering that it will be easier for users to understand the structure of Han Clothes, we chose sketches rather than real photos on designing pages. After dealing with the images we find online, we find that the resolution of pictures is not enough for exhibiting on the web and will influence user experience. Then with Moon’s suggestions, I redraw all the pictures in Photoshop.
  • Coding Part:
    • For the coding part, I’m in charge of the design pages, which allow people to change colors and adding some patterns on the page, as well as provide a downloading function that users can save their works.
    • The most challenge we meet is how to paint the clothes base on the area, which means, when user choose a color and click on one area, all the area will be painted to the chosen color. The way we figure out is putting two same size images, one is black and white, while the other one is painting in different colors based on the area. Therefore, when clicked on the picture, we can detect which area is clicked on by getting the pixel’s color in the colorful picture, then find all the pixels with the same color in the colorful picture, finally match the serial numbers of these pixels and change the same pixels in the w/b picture to the target color
    • However, after setting the function, we find that there are misplace on deciding which part is clicked on. With Jiwon’s help, we find that the get() function is to get the pixel at (mouseX, mouseY) in the whole canvas, rather than the picture itself, after setting a map function to match the two position, the function worked well. The code is:
    • Because we have two interfaces that are color and patterns, to make it looks neat and fluent, I add two dots at the bottom and some dynamic effects on switching. I also set up different boolean values, and change them basing on which stages users are in so that different functions won’t mess up.
    • For the color chosen, with Leon’s suggestions in idea presentation, we do some research on Chinese colors, finally, all the color we chose are exactly the color people use in the past, and all the colors have their own names.
    • Because the pattern Quinn designed can’t perfectly fit the picture, with Moon’s suggestions, we put another picture on the top, which is transparent in clothes’ shapes but the same color with the background in other parts.
    • Another challenge is most of the functions in designing page is based on mouse pressed, so I spend a lot of time on how to plan different factors to avoid overlapping so that when mouse pressed, it’s able to trigger different functions based on mouse position.
    • In the end, we add a function that user can download their design for saving, another consideration is, if they are really interested in Han Clothes, they can give their design to some shops and have the Han Clothes be made out
  • Course Learned
    • How to detect areas based on color.
    • How to use p5.js in web design
    • How to control different stages by using boolean value.
  • Further development
    • Because of time limitation, as well as the difficulties in translation, we only provide Chinese version now, later we can add a language button that user is able to change the language.
    • For the color and pattern, we can provide more choices and user will have more freedom to design.
    • For pictures for design and view, the style has to much difference and users may get confused, in the future, I will try to figure out how to balance the “soft” and “hard” style.
  • Special Thanks: Many thanks to my excellent partner Quinn, who contribute a lot to this project. And special thanks to professor Moon and fellow Jiwon for their help during the process.

Week 10: Response to Rachel (Moon)

In “A history of Internet Art” Rachel introduce the development process of Internet Art. Some people argue that web and art is a  great combination while someones keep an opposite idea that this combination will damage the fine art. In my opinion, this is a trail of interactive art and its appearance is a natural result of internet development.

First, I don’t think this will damage the fine art, actually, they are in different areas that web art will use the cyber elements in their creations including codes, computer symbols and so on. Therefore the web art has special characters comparing than other arts, and they don’t conflict with each other.

Second, I think the appearance of web art is a natural result of internet development. Traditional art like painting or some combined project will be limited by the object, which means visitors need to view them onsite. Although photos and videos can help spread their pieces, the effect will be influenced. But web art has an advantage here, as long as users are accessible to the internet, they are able to view the project and the effect won’t be affected by their locations. The interaction brought by this form also add more attractions to users, and users’ identity change from only visitors to users, which let them become a part of the project.

Therefore, I’m really interested in the development of web art, as well as other forms come from the technology developments. I believe they are have great potential in art area

Week 10: Final project proposal (Moon)

  • Title: Han
  • Partner: Quinn He, Mary Zhang
  • Concept: Hanfu, Han people’s traditional Clothes,  has existed for thousands of years, but they are not known by most of the Chinese people, therefore, we would like to create a project to introduce the beauty of Hanfu. We hope that foreign users can learn some basic knowledge of Hanfu and related Chinese culture, while Chinese users can raise awareness for our own culture.
  • Description: Once users enter the website, they will see a lantern(走马灯) which can be swiped. Each side of the lantern will display a different style of Hanfu.

  • The user can choose a style they prefer and design their own Hanfu.
  •  Chinese style patterns with animation, as well as some ink-brush-painting effects, will be provided for users to design it.


  • Users can easily drug and put them to design their Hanfu

  • In the end, users can print out their designs as bookmarks and postcards.

Week 9: Response to Paul Rand (Moon)

In the article “Computer, Pencils, and Brushes”, Paul Rand expresses his concerns on design education in school,  he says that school shouldn’t pay most attention to the computer as computer is more like a tool and nothing can replace the training on hand in the early stage. I understand his worried, but I have some different ideas with him.

First, which tool to use depend on the kind of design, if it’s a hand-drawing style design, even though the designer uses computers to complete, the drawing ability is necessary. However, if he is designing some modern art, like a video, then the ability to draw by hand is not a big deal. Second, in my opinion, what really matters is aesthetic adjustment rather than basic skills. A student with bad aesthetic appreciation can’t become a good designer, even though he has excellent drawing skills. However, students who have a shortage of drawing skills can make it up through the technology. 

Therefore, in my opinion, we can’t deny the value of basic drawing skills training, but this aims to help students build a sense of designing and art. It’s not proper to overemphasize its importance and deny the value of computer, as the form of arts is changing, the tool of it must change together.


Week 10: Response to Paul Graham

In his essay “Hackers and Painters”, Paul argues that hackers are, in some way, similar with Painters. He points out that the old impressions are not proper that “computer” is a huge area containing many branches, and some of the hackers are working as artists. In the essay, He says that “A programming language is for thinking of programs, not for expressing programs you’ve already thought of”, on which I have some thoughts base on my personal experience.

In the past, I always think a project is delivered in a process that I first find some ideas and design it in details, then I choose proper skills to make it come out because this method seems effective. However, during the real experience, I find this method will, on the contrary, causes limitation for the project, as when I decided the whole idea first, most efforts will be spent on finding the proper skills to complete it rather than thinking of the idea itself. So I think Paul’s opinion really inspires me that my purpose is expressing my idea through projects. If I plan all the details beforehand and then only focus on coding, I may miss chances to explore the potential of my project.

I think this is also the meaning of user test as projects are not only made for ourselves, but also for users, therefore, their opinions can help us think deeper on projects, including our goal and current effects. If we are stubborn to our original idea and treat the coding process as a manual work, the final effects won’t be satisfied.

Video Project(Moon)

  • Project Name: Destiny
  • Date: May 14th
  • Link:
  • Partner: Jerry Yu, Claudia
  • Inspiration: We, as people, are always think too much on “ego”, that we view the world only from our perspective, and we only care about ourselves like “I’m worried about my grade” “I hope my girlfriend will like this” .etc. Therefore, we hope through this project, users can view some simple actions in life form both people’s perspective and other object’s perspective, and after they can care more about the world rather than the ourselves. Then we all feel Family Mart is a good choice, first it, and other convenient stores  plays an important roles in our life, and we seldom think from foods’ perspective for the buying process. So we think this will be really interesting.
  • Process
    • Preparing part: 
    • At first, we would like to shoot the three stories through normal camera, and on the web, when user click on the object, it can change the perspective to it. But the problem we meet is how to make the two video keep the same pace. Then with Moon’s suggestion, we change the device to 360 camera. After Jerry making a demo of 3.Js, we decided to use 360 camera instead of normal camera Then I draw the story board and Claudia wrote the script for the food and people.
    • Shooting part:
    • We went to Family Part to shoot the video, the first difficult we met is the connection between cellphone and 360 camera was not strong enough, that the connection sometimes broken down, so we had to stop and figure out it during the process. The second problem is, as the 360 camera can’t be attached to tripod, though we try different ways, we find it’s not a good idea to shoot in moving by 360 camera as users may feel uncomfortable for the scene. So later on, we decided to reshoot the ending part through the normal camera, so that user can easily understand the ending.
    • Because of changing the shooting devices, we had to redraw the story board for the three endings, and ask the actors to help as reshoot them again.
    • Editing part:
    • In the editing part, I’m in charging of edit the video and record the voice. During the editing of video, the most difficult is the video export from 360 video is different from the normal videos. The scene contains two circles, so I need to first change the video into rectangle first. Even though the video is twist and sometimes I need to rely on my imagination to edit it. Also, differ from the normal part, the effect fo the video can only to be tested by uploading to the web. So I need Jerry’s feedback for further development.
    • Because of the technology limitation, we had to change our way to express again and again. At the beginning, we would like to show the perspective of both people and food, but we found that the 360 camera is more like standing between the food and people and is able to see both of them. So we slightly change our idea that the user can change their perspectives to see both sides.
    • So we change our plan from when user changing perspective, the voice will change to relevant object to when user scroll to the food’s part, food’s voice will turn up and when scroll to the people part, people’s voice will turn down. Then I recorded voices for the five characters. And re- cut them that each video will be saved as three parts including video, audio for people and audio for food.  But by some user test, we found user may get confused the five voices while scrolling the scene, even though the five voices all have different “personalities”.
    • Finally, for the food, we uses bubbles instead of voice to show there mind, and make a feeling of “time stop” when both people and food are “thinking”. Then Jerry fond that if we add the bubbles on web, it will brings lot of work to find the right position, but if we put them in video, they will become twisty. Finally, we found if the images are small enough, the effect won’t be too weird and is able to be read. So I re-cut again that all the dialog are made in video to apply to the changing in coding.
    • Also because the video is like a expanded view of a ball, we also made some mistakes to figure out which direction the arrow should point to, and had to do some extra work in PS.
    • Comparing with the first half, the ending part is easier and my concern is more about how to express the story clearly while avoid being verbose, so I ask different people to view them and try to delete all the unnecessary scenes.
  • Evaluation
    • The using of a new technology  is not only need to know how to exactly use the technology, but also know how to apply other relevant stuffs to the new scenario, which is our most difficulty during the process that the way to editing, telling story, expressing and coding are all different from the normal camera. I really appreciate my partners who spend tons of effort to figure out all the problems one by one, and working together to make something we expected at the beginning.
  • Course learned
    • The magic of 360 camera
    • How to use final cut pro and Premier
    • How to use shots to narrate a story
    • How to explore something that you know almost nothing
  • Future development: If possible, we would like to improve in these aspects:
    • First we’d like to explore the potential of 360 camera, as this time we are limited by our knowledge with the device, next time, we would try to show more interest result by this excellent devices.
    • We may make the story more abundant, as this time, limited by time and ability, we didn’t expand the story too much so that it may looks too simple, and we may add more content to it next time.

Week4: Project 1 Update (Moon)

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.

Week 6: Response to Theft & Artistry

In the article “Theft & Artistry: Coldplay + Beyonce”, the writer discusses whether Beyonce’s new song has problem in appropriation. In the article, there is an opinion that “When we’re presented with caricatures of other cultures, she says, it’s easier for people to view them as sub-human”, which I totally agree as what really harmful for the people in that culture is the stereotype and sneer behind the projects.

Borrowing from other culture can be a good thing, as the article mentions that it can bring the culture to world stage, while the origin group may not able to do. For example, Coco, the cartoon movie which just won Oscar prize, borrows Mexico culture custom but was made by American company. After showing, the shooting place becomes a popular destination and the customs are known by more people. In this case, the movie shouldn’t be treated as appropriation because it only borrows some general ideas and show the positive aspect.

In another situation, even though it doesn’t has the problem of appropriation, the project should be criticized, because it has stereotypes or makes laugh at the culture, which will definitely hurt the people in that culture. In last century, Chinese characters in Hollywood movies are always silly, knowing nothing except force. These movies doesn’t have the problem of appropriation because what they perform are not Chinese culture, and this phenomenon is what we should pay attention to.

Therefore, In my opinion, what matters are how they borrow, (or say combine ) others’ cultures and their attitude towards that culture. As long as the culture is used respectfully, people in the culture won’t be against because they are benefited from the borrowing as well.

Week 8: Response to Walter Benjamin

In his article “The work of Art in the Age of Mechanical Reproduction”, Benjamin make an argument that the development of technology destroy the traditional art, and give modern art new features and values. He points out that the mechanical reproduction, especially films and photographs, have lost the root of art that he called it “area”. He takes performing as an example, saying that in the past the communication happened between people and people while now happens between people and devices, so the acting loses “Echtheit”, a part of “area”.

Though I agree with him that mechanical reproduction influence traditional art, in the problem of filming, i have some different ideas. In my opinion, the development in technological skills give films more opportunities. First, the development in film shooting doesn’t change the fact that actors are acting with people rather than machines, and actors still try to shape a completed character during their performance.  In the past, they act on stage, with people staring at them, nowadays, they play in settings, with cameras recording them. I don’t think this will make a big difference. Furthermore, modern film gives acting more possibilities that many ideas can be realized by technology. For example, slow motion can extend the time, giving us a conception that time become slower and we can observe actors’ actions more accurate. The other example is 3D technology, which extend the sense of space that audiences can see the acting in different layers. And the 120 frames or 4K technology make it possible to see each part of a scene clearly. Through these examples, we can find that technology giving acting and arts more freedom and extend their boundary.

In a conclusion, technology does have some effects on art and change the form of traditional art, however, only observe the negative part or positive part will cause bias.