Animation Week 14: Final Project Documentation (Szetela)


City Life






Link to Youtube


The final project City Life describes a world where organs become normal parts of the city. The main character walks through the city and interacts with those organs in a peaceful way.


All the sound effects come from

The background music in the scene of claw machine is <오락실> by V.A..

Link to Moodboard


My original story was about an illustrator whose drawings became alive. Later I found that my classmate had a similar idea, so I planned to make it weirder. In my moodboard I mentioned that I was so impressed by the scene of eyes appearing on the wall in the Japanese cartoon Hell Girl that it became the primary concept of my project. Based on this setting, I added more organs to my story, and distributed them into the city. So generally my animated film was made up of several independent scenes and each one had an organ. However, later when I tried to combine those pieces, I had trouble in transitions. In the end, I decided to set up a main character and let her connect the story line. Also, in course of arranging the scenes, I adjusted some organs depending on my inspirations. I replaced mouth with brain because I felt that a story of brain might be more interesting and meaningful.

Materials /  Technology

Basically, I drew everything with the digital tablet in Adobe Photoshop, put frames together in Adobe Animate, and finally combined them in Adobe After Effects. For example, in the scene of the girl walking past eyes, I had five separated elements: the walking girl, three eyes, and the background. In terms of the walk cycle, I drew each frame of the movement in Photoshop, and imported these pieces of work to Animate so that they could become a video. Then I put the loop of the walking girl into After Effects, and created the feeling of walking by adjusting the xyz position and scale. Another typical example was about the claw in the claw machine. I divided the claw into four components: top, middle, left half claw, and right half. They were drawn as different layers in Photoshop, and I used After Effects to control each layer’s movement.


The most important lesson that I have learned from the project is choosing an appropriate method. Given a second chance, I would use rotoscope instead of creating everything by myself. Rotoscope is efficient as well as practical. The way in which I created my project is quite inefficient, and even restricts the development of the story. Once if I want to make any changes, I have to repeat the changes in three software, and cannot see the outcome directly. Moreover, I have learned that a good idea is worth more. Compared to my classmates’ works, I feel that good animated films always have obsessing stories or strong emotions. It encourages me to consider the balance between “what I want to convey” and “what audience want to see”. Such kind of profound thinking will probably help my future work.

CL-Week 14: Internet Art Project Documentation (Vasudevan)

Partner: Joseph

My partner and I had had a lot of discussions before we finally decided what kind of Internet Art we would like to work on. We reached an agreement that Internet Art was more than merely applying various artistic media, such as video and audio. The Internet itself could be an art work based on its inherent functions. With this very ambiguous idea, we started to explore the unique features of the Internet. We found a small webpage game called “Powder Game” where users could use a mouse to draw on a canvas after choosing different objects. The program tried to imitate the nature with code.


Inspired by this game and impressed with how powerful the webpage codes could be, we came up with the idea of creating a competition between a plant and a computer, and later named it “Nature v.s. Technology”. The original conception was quite simple: water could make plants grow vines while electricity could let computers “grow” wires.

We designed a welcome page containing the title and a “START” button that would direct users to our main stage. There I drew a table above which there were a plant and a computer. On the right side there were two buttons, a drop and an icon of electricity. Users could click on the icons to choose which tool they were going to use.



If users clicked on the water drop, they could create falling waters every time they pressed the mouse on the screen. As long as the blue circles touched the plant, green vines would grow from that point. In addition, the vines grown from the plant could also detect the falling water and grew new vines as well.


If users clicked on the electricity icon, the mouse could create floating yellow squares. Similarly, if the “electricity” touched the computer or the wires grown from it, new wires would appear.


Joseph and I divided our work in this way: he was mainly responsible for the growing part, and I did the rest. For the growing part, Joseph will introduce more in his post, and here I am going to talk about my work for this project.

I wrote several small prototypes before we finally combined all the functions together. The first one was how the objects could detect the falling squares and circles, and reacted to them. Based on the sample taught in class, I added an “if” condition in “function Water()” so that circles created by mouse click could change the color of the square once they touched it.


007 008

As for the electricity, I just changed the increment of x and y position, and set random numbers for their directions. The primary principle is the same.



Professor Roopa encouraged us to explore more innovative method of interaction, so I tried using webcam to make control. In my prototype, the webcam could detect the color in each pixels and responses to color change. I set the webcam to detect dark color (smaller r, g, b values), and every time I covered the camera lens, the computer would make responses. It imitated the condition where plant grew more slowly without light.


(The left one was taken with normal light. The right one was taken when the webcam was covered.)

012 013

However, when we added this part to our project, it did not work somehow. We have not figured out where the problem might be, so in the end we returned to mouse click rather than light control.

When Joseph was working on the vines and wires, I made the structure of the website. Everything went smoothly except the button on the right side. I wanted to change opacity when the mouse hovered on them, and after clicked on them they would become larger. But I had trouble keeping opacity fixed so as to show either of them was chosen. Later we found a very useful code that could solve this problem. “!important” can easily change the priority of different events.

014 015

After we prepared all of the elements (click and drop, growing lines, basic webpage, etc), we combined them and it became our final project. Here is the demo.

Reflecting on our work in final project, I feel that we have realized the main part of our idea within the limited time. We really learned a lot during our struggle with p5. However, given more time, we could have made more improvements and thus made it more engaging and interesting. During the presentation we received a lot of useful comments and suggestions, which also motivates me to think about other methods to better show our idea to users. We probably have focused too much on the technical building, and as a result neglected innovation and interaction.

All in all, I really enjoy working with my partner in this project, and I will definitely miss my time and efforts in Communications Lab.

Animation Week 13: Rough Cut (Szetela)

So far everything goes smoothly… and slowly…

Compared to my plan, I still have two more scenes to work on: the ear and the mouth. However, since I have not come up with how to interact with ears, and due to limited time as well, I probably will give up the scene of ears.

For what I have got, I almost finished the heart, the eyes, and the gut. I combined frame-by-frame drawing with pre-set effects, and it turns out that the former is pretty rough and simple, while the latter looks more mechanical.

What I still need to do is collecting sound. I am going to add basic sound of movement to my animated film. I prefer no background music because I feel that music will make the film too emotional. Right now I want to create a silent atmosphere, but I will consider if there is any better idea of dealing with sound.

Here is the link to my moodboard:

CL-Week 12: Response to “A History of Internet Art” (Vasudevan)

I had never considered Internet art as a style of art until recently we started to work on our final project. Internet art is like digital art, but it focuses more on interaction on webpages. At first I thought that Internet art projects should cover audio or video according to other projects we accomplished this semester. However, after discussing with my partner, we reached an agreement that what we did in video and audio projects was putting art onto Internet, and this was an elementary level of Internet art. More advanced, the Internet itself could be art, and this is probably the main idea conveyed by Greene.

In this article, Greene explains the history of Internet art, and provides some typical works for reference. I tried a few sites and found they were quite interesting as well as inspiring. For example, 404 Jodi ( can hack users’ IP addresses once they type words in the input box. The article interprets that in this way computers are communicating with us in their special language. Another site that impresses me very much is Desktop Is ( As we all know, the desktop is what we first and last see every day if we use a computer, and it is interesting to share our desktops with others through this site.

From my perspective, Internet art does not necessarily require complicated codes or fancy designs, as you can see, the ideas and operations of the two sites mentioned above are quite explicit and simple. One of the reasons of making them successful Internet art might be that they are peculiar to Internet. Internet contains many unique features, and Internet art must be something that makes great use of them. Besides, I feel that Internet art should be something that shows strong enthusiasm from artists and hackers. And this can be a common condition for all the art works.

CL-Week 11: Response to “Hackers and Painters” (Vasudevan)

Having studied painting for five years and programming for almost one year, I kind of experience similar feeling as the author did. Painting and hacking look quite different, as the former belongs to art and the latter is in the scientific field. However, with the author’s analysis, it turns out that these two subjects share some common features. To be more specific, I would like to summarize the common points mentioned in the article.

Primarily, painting and hacking are about making beautiful things. Secondly, they require similar learning process. Both painters and hackers copy abundant examples, and they “start from original and get good” with gradual refinement throughout the progress (Graham 6-7). Besides, whether or not it is user-friendly differs masterpieces from normal works, since it is significant for painters and hackers to keep empathetic in their works. What’s more, as creative activities, painters and hackers often experience highs and lows in their inspiration, and they also need to divide the project and collaborate with colleagues.

What impresses me most here is not how painting and hacking specifically associate. Instead the interdisciplinary thinking provokes my reflection. I remember that after I decided to pursue double major, some of my friends and previous teachers could not understand why I was trying to make myself so exhausted, because they thought finance and interactive media were far from each other. That is true, but at present I still believe that I can find their inner connection. Also, an interdisciplinary study can help me comprehensively perceive individual subjects. This article shows me possibilities and directions.

CL-Week 11: Response to “Computers, Pencils, and Brushes” (Vasudevan)

The development of computers has gradually changed our impression on design. In contemporary time, when we talk about design, most of us are imaging 3D modeling, digital drawing, typesetting and so on. As those technologies are more frequently applied and exposed to public, they seem to become representatives of design.

This article encourages us to reconsider the association between design and computers. It directly points out that a computer does not equal to design: the former is a tool, a device, a machine, while the latter is a curriculum, an art, a mode of thinking and practice. I agree with the author’s idea that computers can never replace design. Computers can be put into the same category of tools as pencils and brushes (see the title of the article), though they are much more advanced and powerful. Pencils can draw rough drafts in black and white; brushes can bring color to pictures and create more details; computers can deal with digital items and produce unique visual effects such as blur and filter. If we compare the three tools in this way, it will be easier to understand that computers are actually a technology. Meanwhile, design is general and abstract, requiring both basic hand-design skills and special thinking modes. The most valuable parts are our ideas in mind, and next we must realize when and how to use different tools. Good use of different tools can maximize their unique features, and thus make our ideas come true.

CL-Week 11: Video Project Documentation (Vasudevan)

Partner: John & Sabina

Our video project is basically about multi-perspectives in a certain time and space. After a few brainstorms, we chose the Century Avenue as the main stage of our videos. We set up four characters: a normal person, a dog, a mobike, and God. (At the beginning we also had a kid’s perspective but later we discarded it.) And we tried to shoot their perspectives one by one. However, the camera Canon 6D seemed not a good choice for our shooting because it was too big and heavy to hold. The next day Prof. Roopa suggested that we could try using GoPro, which turned out extremely helpful.

We first finished the dog’s perspective. John was so talented that he mimicked the movement of a dog by holding the camera close to the ground and shifting directions quickly. He also created the scenes of dog’s pee as well as jumping up stairs, which were really vivid. In the editing part, he changed the video into black and white, and downloaded dogs’ sound from the Internet.

We also used the camera to shoot the perspective of God. We went to the 15th floor of the academic building and planned to shoot vertically above the Century Avenue. But the large windows and reflections brought us some restrictions and influenced the outcome. In order to avoid religious discrimination and stereotype, we decided not to speak in God’s perspective, and wrote the scripts as vaguely as possible.

For the normal person and the mobike, we used GoPro to complete the shooting, which became much easier. However, one of the disadvantages of using GoPro was that we could not see the footage until we connected it to the laptop. As a result, I repeated shooting the movement of watching the phone a lot of times since it was difficult to locate the focus.

As for editing the videos, I was in charge of the mobike’s perspective. My friend Ziyu Chen helped us record the voiceover in Shanghainese because we wanted to show it as a local bike. I translated Shanghainese into English subtitles in Premiere.


Sabina did the voiceover for the normal person, and she also edited the footage pretty well. After she finished the clip, I added a simple animation of popping up chatting boxes with After Effects to make the Wechat messages more readable.


Meanwhile, John worked on building the website. Users would first watch a short introduction video of the Century Avenue, and they would come to a page where they could choose whose perspective they wanted to follow. We designed the interface very simple because we thought perspectives should be natural as well as consecutive, so we did not allow users to pause during the play of the videos.

In terms of the codes, we put each video to an individual webpage, and set intervals according to the duration of the videos so as to return to the main page. The structure was quite simple and explicit.



I feel that our video project is very successful, as we have achieved most of our ideas. Perhaps given more time, we could improve our interaction further. I am considering replacing the introduction video with a 360 panoramic video, and embedding buttons in it. I suppose that in this way users may experience a more real feeling standing in the Century Avenue.

Animation Week 10: Mood Board Animatic 2 (Szetela)

This week I roughly finished the first part —— heart and city. It is composed of two elements: the heart and the cardiogram. For the heart, I drew the picture in Photoshop and made it zoom in and out with After Effects. In terms of the cardiogram, I used the effect of vegas so that the line could “flash”.


I also started to work on the walking cycle in the part of eyes. I drew six frames of the character and put them into Animate, but the walking was not natural enough right now. I need to add some in-betweens later to make it walk more smoothly.

document of walk

Here is the link to my moodboard:

Animation Week 9: Mood Board Animatic (Szetela)

All right, so I have completely changed my idea of final project, and now it has somehow become more abstract. In my animated film, I would like to combine various organs with city life (because I was so obsessed with the idea of eyes appearing in the street). I have decided seven scenes, and each of them implies negative features of modern life.

Originally I planned to make the animated film look dark and freak, but my drawing style is kind of “cute”, which might be hard to establish the atmosphere.

I have also updated my proposal in my moodboard. However, there are only six scenes so far, and I am going to add one more in a few days.

Here is the link to my moodboard:

CL-Week 8: Response to “The Work of Art in the Age of Mechanical Reproduction” (Vasudevan)

In this article, Benjamin mentions various types of mechanical reproduction: painting, photography, film and stage performance. And throughout the discussion, he tries to show that the mechanical reproduction of art is controversial. On the one hand, mechanical reproduction can free arts from rituals. As he says: “for the first time in world history, mechanical reproduction emancipates the work of art from its parasitical dependence on ritual” (6). The work of art obtains more freedom and development, and it gradually becomes accessible and popular to the masses. General people can be writers or creators, and they can express their emotions and ideas with art. However, on the other hand, the mechanical reproduction overshadows the authenticity. When the work of art can be reproduced over and over again, the original existence lacks its value. It would be easy to understand this change if we think about the masterpiece in famous museums. They are priceless, unique, and unable to be reproduced.

Sometimes I consider whether the work of art will lose its essence after mechanical reproduction. According to Benjamin, “the stage actor identifies himself with the character of his role. The film actor very often is denied this opportunity. His creation is by no means all of a piece; it is composed of many separate performances” (9-10). That is, stage performance has less technical reproduction, and thus it is closer to natural state. Meanwhile films are viewed as more artificial due to so many post-operations. As far as I am concerned, though different works of art may have different features, they still belong to the general category of art, and will never lose their essence. Art is a tolerant area, where artists can always find a place regardless of themes, genres, or values. Films do have more artificial operations, but this should not reduce their authenticity.