Indeed, computer is a useful tool for production and it is necessary for everyone to learn to use it, as we are in the age of computer. “Learn to use computer” is similar to “Learn to use mathematics”, since for both case without knowing the reasoning behind they can already help us a lot. Our linear algebra professor always says that he shows us too much proof during class, which we are not asked for the exams and doesn’t necessarily matter if we only consider applying them in finance, economics or other disciplines. But he really thinks learning the reasoning behind will do much good for us. Perhaps that will stimulate a sense of creativity, with which we may convert a tool into art.


“The way to create something beautiful is often to make subtle tweaks to something that already exists, or to combine existing ideas in a slightly new way.” I remember before each project what we first do is watching a lot of examples. In my opinion, creating is based on viewing. Only through taking in enough information (resources) and then understanding/processing with one’s own method can he really create/make something.

“Instead of patiently writing out a complete program and assuring myself it was correct, I tended to just spew out code that was hopelessly broken, and gradually beat it into shape.” This, I think, is the beauty of programming. Just like what I did in javascript, even by just writing several lines I might check if that works. If that works, I will reproduce this “function” and apply it to other situations in that project. If that didn’t work, I might check for spelling errors or checking the internet to figure out some better way.

Response to history net art_Haven_Roopa

Just like Internet Art’s was first born by accident, Internet art itself, its trajectory, is full of possibilities. As it was born when there is a freedom politic climate, people just came out from oppression eagerly express their own sense of freedom onto the web page. The internet art than has been expressed as weird stuffs, as a platform for feminism, or just for “nothing” (nothing is everything, just like everything is nothing).

And it boosts the idea of, if not create, free international communication. No need to worry whether the other person is beside the telephone, neither worry about the speed of postman, just through clicking and typing, one can connect to anywhere he wants, as long as the internet reaches that place. Though we have such a convenient tool to communicate, (I have been using internet since elementary school) (Most of my peer) I haven’t communicated with people speaking different languages until high school. Not sure about others, at least for me, there is a kind of fear that blocks my eyesight. I mean, when there is such a convenient tool (like the internet) in front of us, there is no reason for us to avoid it.




As our final project for this semester, we choose to make a user interactive web piano based mostly on P5.JS. The name of our project is given as QWERTY, which represents the way that user interacts with the web page is by pressing keyboards.

Originally we wanted to provide two choices to the user: Instruction Mode or Free Play Mode. For Instruction Mode, the user will follow the instruction to play a song called “Laputa The Castle In The Sky”, from Miyazaki Hayao’s film Laputa. For Free Play Mode the user can play / create whatever sound / music they want based on the notes we provide.

Coincidentally, when we try to combine a visual effect called “emission of rectangles” WechatIMG98                                             “An pixel “H” shows up. “

we notice that if we set the acceleration of the moving rectangle properly (to make the rectangle stay enough time on the screen), we can draw simple image pixel by pixel on the canvas just by pressing keyboards. With imagination, there are lots of things can be drawn just by pressing keyboards. In this way we actually combine sound with image with special meaning.

Thus we decide to combine the Free Music Play Mode and Free Drawing Mode to be the second Mode that the user can choose to play. User can access it by clicking the “kiss” icon on the homepage.

The keys user can press is Q W E R T Y U I O P [ ], on the third row of the keyboard from Q to ]. For each key we create a small rectangle and add the key name to make make the surface feel more like a real piano. The small rectangles share same parameter number except x coordinate. Function “keyPressed ()” is called and if (keyCode===”) is used to check which key is being pressed. For each key a mp3 file (one single note) is provided and motivated by ‘’ when the right key is pressed. Since we have separate music files, chord is possible to be heard.


The emission of rectangle when each of the keys is pressed is made by first creating a rectangle and then change its y position by adding negative speed per frame. The emission has two parts. The first is the decrease of y position to y = 300 with a relative fast speed which will give user a feeling of something has been pressed and pumped up. After y reaches 300, it will further decrease, with a relatively low speed, to become a pixel element for the free image waiting for the user to create.

WechatIMG101                               “‘y = y + speed’ allows rectangle to move. “

If certain key is pressed that keyCode has been checked, Create Rect (new Ball) function will be called and a rectangle will appear at certain x position and y = 300 with a negative speed = -0.5. Speed [ ] is the first part of the decreasing speed.


Another important point for this project is the way Instruction is given in the Instruction Mode. In that Mode, we lead the user to press certain key by showing a rectangle larger in height than the basic rectangle on that certain key. As long as the user follow the instruction one by one, he / she will play a piece of beautiful music. The instruction rectangle actually converts the music score into another visible form. To do this, the basic idea is simple: change the x position (rpx) of the rectangle to certain number each time when certain key is pressed. Not only the x positions of the rectangle must belong to certain sequence which can represent the music score, also when the user accidentally press the wrong key, the rectangle won’t shift to the next position.

The first part is simple, just by using ” function keyTyped ( ) ” to say if key “y” is pressed, the x position of the rectangle will shift to where key “u” locates, and so on and so forth. To create the rhythm, setTimeout ( ) function is used to delay the time when the next instruction show up.



For the second part, addition check condition is added by using a variable M. For each music score (rectangle) there is an unique M=m which is accumulated from “zero to m” by pressing previous music scores. This makes sure that unless the previous melody has been accomplished, further melody won’t appear yet.

In addition, to make the canvas fulfill the window even when the window is resized, “function windowResized ( )” is called. To add other HTML elements such as pictures, text and link to the web page, the canvas is set to be the background by “‘z-index’, ‘-1’)”.

//For simplicity’s sake, there are lots of places in the code file where we can use array. Actually some of them have been organized into arrays, while others are written one by one because we want to practice coding.//

Final project proposal (Tommy&Haven) (Vasudevan)

The theme of this final project would be [View Under Microscope]. We intend to create a fancy world which can be accessible only by using special Microscope provided by us. Videos, audios, web based animation, user interaction with keyboards and mouse will be combined. First we will show the audience a video, which will be like when a person is looking at piece of bread, as he keeps zooming in, he will observe from ordinary bread surface, bacteria to even smaller molecular level. Then we will use the webpage as the eyepiece of the Microscope, allowing user to zoom in and adjust the focus to experience what has been shown in the video with depth. At the molecular level, we want to create kind of musical video game, that as the tiny molecules passing through a certain region/point with in the eyepiece horizon, by pressing some keys on the keyboard, they will release beautiful sounds. The main point is to show the audience the unique micro cosmos.

[Video project][Vasudevan][HAVEN]Documentation

Idea and Story Line

Our video project is based on a love story. We invite the user to experience a journey to see if LEO can get MIKI as his girlfriend, through watching videos based on multiple choices. Multiple choices means that different choices will lead to different event, finally get to different endings. There are three times when the user can make a decision, and the choices are made upon real love experiences: [When you see  your love is talking happily with other male, how would you feel and what would you do? When you want to have lunch with the girl at the same table, would you choose to sit a bit closer or farther, if you are aware that you might disturb her? When you send text to the girl, would you be a little flashy?]


We believe girls really cares about how males will behave on these issue. Nevertheless, love is hard to guess. LEO may not get what he wants if he gets too close to MIKI, for instance, if LEO sits too close to MIKI, he will be pushed away by Tommy. Actually, many girls  believe that a certain distance is proper in developing a relationship. Love is cruelty. Eventually, no matter how users choose, LEO will not get MIKI, that MIKI will always choose Tommy to be her “possible boyfriend”. By setting the ending, we not only want to let the users get some hard feelings, but also to enjoy the unfortune of LEO.


We recognize that the light, stability of camera, surrounding noise are really crucial for filming. We used LED light, triple and TASCAM to solve these issues. The shooting was not easy, since for this project we wanted to focus more on filming but not post production other than the film itself.  I realized for the first time that it’s not necessary to film according to time line, because cutting is the way to adjust time line. For the actor and actress, difficult tasks are how to remember the dialogue and how to keep themselves serious, not to laugh out. For us, the proper camera angle and time to zoom in is two main tasks. Basically our method is to keep one camera filming from the front without any zooming, while there is another free camera that can pick free angles and zooming. It’s hard to explain how we choose the free angles, but just as the brain has special recognition for beautiful faces, when we find the right angle after trying for several times, we just find it.


adobe premiere

We used Adobe Premiere to edit time lines for both video and audio, as well as adding some transition between cut and cut. We realized that it’s not necessary to edit following the time sequence, that events happens at totally different time periods can be edited together to make something different, just like the flash back in the end of the video. We payed special attention to the issue that by overlapping one clip to another, the clip on the bottom will disappear, which created several disasters.


We borrowed power of JQuery to control the movie play/pause by event :”click”. (JQuery simplified the way we write Javascript) The way to do this is to create a class=”pause” in the video tag as a state that indicates if this video is currently not playing. We than use “if” to check the state. If the state is “pause” than change it to “play” and also ask the video to play. If the state is at “play” than change it to “pause” and ask the video to pause.


We used “onmousemove” and “onmouseleave” to make the button shine when hovered.


We made exclusive choice page for each choice section. To call the pages show up, we link the page to the video current time. For instance, if the length of video is 161, we used if (time>=161) to check whether current time is 161 or not. If so, firstly “video.pause” pauses the video and then the choice page is called.


Response to Comic reading assignment (Vasudevan)

After reading this I believe comic is the composition of ideas in the form of picture, with imagination filled in the gap between two or more comic pictures. The idea that comic is composed of various ideas looks a little bit like Fourier Series, where we can represent any function with period 2Pi with composition of infinite number of simple trigonometric functions. Another good analogy could be that any music is composed of many musical notes. Our brain helps the development of comics a lot. In fact, comic is based on our brain. It turns out the brain has an interesting property that it tends to link one object to another, based on personal previous experience. (In this sense the brain is just like a machine that can learn itself from what it has experienced through.) Comic provides people with familiar concepts and representations, while the brain automatically links them to ourselves. Which means, we will find ourselves through comics and that may be one reason why children prefer comic/cartoon better than TV drama at the beginning. Also, when we see some picture, which is possibly one part of something else, the brain will show us the remaining part to form a whole picture in front of the eyes, which makes the famous “horse moving” sequence pictures possible. Anything could be comics, and it’s really a way that everyone can apply to describe the world in his/her eyes.

Week 9: Response to “The Work of Art in the Age of Mechanical Reproduction” by Walter Benjamin (Vasudevan)

By referring “aura”, the word which is used to describe a subtle feeling from a person or an object, Walter Benjamin argues that although mechanical reproduction makes art much easier accessible, art also becomes cheap and lost its uniqueness.

As appears at the top of the article, I want to talk a little on politics and art. Politics is about control, the control of work, of labor. What are capitalism/communism? They are ways to control production. What is Fascism? It’s all about but not restricted to eliminating external inferior races and control domestic industries under the leadership of the politic power. Capitalism, Communism, Fascism are all politics, they are ways to control production, and production is what ordinary people are doing everyday. Thus, politics is a control over people’s create power. Creation is close but not really equal to reproduction. We admit photograph as a form of art, but what an image really is, what a camera really does is to capture and create a reflection of real world objects. It’s reproduction at the same time creation. In this sense we could relate politics to control of people’s creativity, to control of people’s personal art, to control of the way people express themselves. People shouldn’t be told how to feel, to capture the aura of a person or an object, rather people need to do that in their own way, and that’s where art take place. Art represents something “happens”, but to “be happened”.


The idea of our project is to find out by changing background music and tone how the same dialogue can make listener feel different. To do this, we must create some dialogue that is vague enough to suit multiple situations. Accordingly we used “here”, “it”, “this place”. We chose the dialogue between old couple, young couple, master and dog, father and daughter, two good friends, murderer and victim. Originally we tried to record the dialogue for one time and use software to change the voice tone. Fortunately, since I am in the Acting class, my classmates and Professor Mirrione gives us great help on actually acting the dialogue out, more than 10 versions in total. With this, we could kind of be free from worrying about the voice and put more emphasize on music and sound effect. Besides initial setup, the acted dialogue itself also provides solid atmosphere which guides us to the suitable music choices.

Basically our music sources is from youtube, which provides satisfactory sounds we need with comprehensive pictures/videos which helps us to catch the sense/meaning of the music more easily. We used the website to easily convert youtube video into mp3 files only through one click. In addition, some musics from my personal collection are also used, ranging from symphony, film soundtrack, animation and so on.

The software we used was Adobe Audition. We chose this because it has some similar user interaction as Adobe Photoshop , which makes it easier to get used to the software. The technics that were used are just things we learn from previous classes: cut, add effect like echo, change time line, adjust the volume and combine several pieces of music into one.

The goal for the website is to be as simple as possible while at the same time be enough elegant and friendly user interaction. That’s why we put the instruction on how to play the audio file directly as the title of the page. Beneath that we put six pictures as buttons, each of them represents one scene. By click each button, not only will the sound be triggered, the picture itself will change to an activated state (another similar picture), for instance, “woof” appears near the dog’s mouth. Beneath that we listed people who casted as the credit and thanks. The idea of the website was borrowed from the example of music box from the last class.

The project do meet our goal, since when we ask friends to listen on it, they feel like being in totally different stories even could hardly recognize that they are the same dialogue! They also feel some of them are really relaxing while some is super scary, which means the music really creates certain atmosphere, which is exactly what we want the audience to feel.