Link: http://imanas.shanghai.nyu.edu/~yy2572/internet_art_1/

Concept – Rationale, and reasons that you have chosen this project

During my working on the project, the topic and concept of my project has changed a lot. At the beginning, I want to do a sequential project of my neighborhood with layers of map, made up with many videos and photos and there are many kinds of interaction. It should be like a hot pot, containing many stuffs we have learnt on the class. However, after discussion with my professor, I decide to try something I have not done before. He recommends me to use the Leaflet library, which is a library of javascript focusing on the map. But the theme of my project is still my neighborhood, I then want to focus on the photos and try different methods to show those pictures to the audience. I see this project as a recording of my life in the neighborhood, and I want to other students to know about Pusan.

Development process/methodology – What did you make, and how did you make it?

The first website is a part of the map from Leaflet library, I build many markers on the map and for each marker, there is a gallery of photos, and when you click the makers, you will see those pictures one by one just like the slides. Also, I add some audio of noise to the website. Further, I relate the size of the pictures and the volume of the audio to the distance between the mouse and the markers, for which I think is a creative interaction. In this process, I have learnt a lot about Leaflet, such as creating markers, popups and draw polygons.

The second website is kind of normal, it is the one letting the audience observe those pictures carefully. The basic structure of it is like a picture browser, you click on the pictures and see a larger edition of it. I add comments and titles to some of my pictures to make it more than just viewing those pictures. I do this by using for loops to arrange my pictures in order and then use for loops again to build a transparent button on each picture. And whenever the user click on those buttons, it will bring a preview interface to the top of the screen.

The third website is a p5 one, I create a space where my pictures keep floating. And the user can add new pictures to the canvas or open a random picture with keyboard. I do this with the class and for loops. I build an image class, and I put all my images into it with for loops. I give speed for them to move around. And I add keypress function to track the events and achieve various functions.

Analysis of tools used – Technical analysis, problems encountered, and how where they solved

When I am doing the p5, I once named my class as image, since it is an inner function, it could not operate. And it took me a long time to discover that. And when I worked on the Leaflet, I put a lot of time to achieve a function to compute the distance between those markers and my mouse. And for the second website, it is kind of complicated to figure out the clear relation between each flex box and id, along with the z-index and opacity of them.

Critical Reflection – What do you think about your finalized work? What things would you change now?

If I have time, I want to extend my first and second website. For the Leaflet map one, I want to do a kind of animation. It should be like a marker moving from one site to another site, and over the marker there playing the videos I took when I walked from the first site to the second one. And the marker should keep the same progress with the video. For the second one, it is actually inspired by the website called “whalehunt” . But it is complicated than I expect that I can not modify it in few days. So if I have time, I want to try different arrangement of images, like the line and circle in that website.

Concept:

My project will be a visual description of the neighborhood of Pusan residential hall. The opening of this project is a map, and the users can explore each site deeper one by one. It will use comics, photos and videos. It will contain various kinds of interaction, including clicking, scrolling, keyboards and a small game. 

I want to make a both narrative and real (not imaginary) space for my project. So I choose a very familiar and daily topic — my neighborhood. I think my project is a good way to tell the audience what life in Pusan looks like, it should be a easy but interesting topic for students living in Jinqiao or Jinyang. They will compare their life with mine automatically and unconsciously. Also, for students also living in Pusan, it should also be fun to find some similarity in our life. In each case, this project will be a topic worth exploring for the users. 

Sources:

http://89.lossur.es/

This is one of the websites we learn from the class. I really like its topic which is her neighborhood. And I like the way I explore it each site gradually and then go to the next site. It is the inspiration of my project. I think its content is daily and normal, but the way it narrates is interesting and attractive.  So I want to try to apply this pattern to my own neighborhood. While that project is a complete video project, I want to make mine a various one, which contains comics, photos and videos. 

https://aporee.org/maps/

This is another website we learn from the class. I like its design to put a red spot over each important site. Also, I like the process I become closer and closer to one site and finally see some clear pictures of that site. I also want to make a birds-eye map like this. However, instead of a realistic one in that website, I want to paint a cartoon map. And I will apply its “step by step pattern” in my project. And the final step of each site will be a kind of interaction.

Production:

The opening of my project should be a drawn birds-eye map. And there should be 4 blocks in that page. 

1. Chang Li East Road 

     I will include two restaurants in this block, where I frequently have my midnight snack.

          1. A spicy hot pot restaurant: A picture and a video of it.

          2. A barbecue restaurant: A picture and a video of it.

2. Pusan Residential Hall

     This is the main part of my project.

     Outside the building:

          A delivery locker: A picture of it. (Maybe add a small interaction game)

     Inside the building:

          A billiards desk: A small billiards game.

          (A vending machine: A small interaction game)

          Go to my room:

               1. Take the elevator: Few interactive steps and videos

               2. Climb stairs: A interactive video imitating the one on http://89.lossur.es/

          In my room: An ending short video.

3. Convenience Store

     A video of it.

4. Shopping Mall

     1. A cinema: Some photos and interactive steps.

     2. A bakery: A short video and some photos.

Concept —— Rationale and reasons that you have chosen this project

The word we got is “enhancement”, and we firstly discussed about which kinds of thing can be enhanced in our film. We first want to show the enhancement of a person’s ability, but we think it is too monotonous. Then we discussed about the enhancement of some artificial things. I think it is a nice try, but we cannot find a good insight and position when filming an object. Finally, we thought maybe concentrate on some imaginary and abstract concept. And then we got the topic “the enhancement of luck”. Even we want to describe abstract concept like luck, we decide to relate it to a specific, physical object. Then we choose the coin as the symbol of luck. We want to let the side of the coin decide people’s luck, for example, the head represents good luck while the tail represents bad luck. The name of our project is “Sudden Enhancement”, I do not think it is good and accurate title, but it at least fits our project since once the character pick up the coin, it luck has been changed suddenly.

Development process/ methodology —— What did you make, and how did you make it?

Generally, we have four parts of videos, the intro and the experience of three different people. We combine the videos we have taken together with some transition. Because the videos we shot for the first is not completely satisfactory, so we have to make a second try. And we change the color and the light in the editing process program to make those videos look like they are shot at the same place and the same time. We want to show the users the intro first, letting them know the story happens on the bridge. And then it will lead the users to a new page, expecting them to make the choice of coin’s side. And different choices will cause different sequences of the videos. Once the users make the choice, it will lead them to the major part of the project, showing the three main videos in a certain sequence.

Analysis of tools used —— Technical analysis, problems encountered, and how where they solved

I do most of the coding part of this project. The constraint of our interaction is the controller. In addition to the basic play/pause and stop button. I make a switch of light, you can change the background color to black by clicking it. And I think this can give users a better experience when watching the videos. I also make the volume controller with the mute button and the draggable block. The users can activate and cancel the mute mode, they can also drag the volume block to adjust the volume. Similarly, I also make a draggable block to adjust the current time. The block automatically move along with the current time of the video. Also, the users can drag it to control the progress of the video. The logic here is not very complicated, but it took me a lot of time to debug this part since it is very easy to ignore some details. 

I also make left and right arrow buttons after the videos end. Once the user click them, it will automatically lead the user to the next or the last videos. I use this by basic judgement statement and the  the recursion of a scroll function.

Critical Reflection —— What do you think about your finalized work? What things would you change now?

I think our videos are not so satisfactory, it does not emphasize luck well. And we also can focus more on the coin. Since we are not skilled at tracking shot, and there is kind of crowded, some details in our videos is hard to discover.

For the website, I can choose some better images if I have more time since the images I use now does not fit with each other and the videos. And I can also separate each video into different parts and put them into different blocks. If so, I think it can be much easier for the users to understand the plot. Moreover, I can make the value of volume and current time visible. 

Here is the address of our project:

http://imanas.shanghai.nyu.edu/~yy2572/video_project/1

The disciplines of the second obstruction are:

1. shot in a miserable place
2. don’t show where it is
3. Leth is the man in the film
4.  Leave out the woman in the film but retain the meal

It may be one of the most obstructions among all five ones, both techniques and emotions. Leth needs not only to convey a sorrowful feeling which he tries to get away from, but also has to show that feeling with his own acting. Moreover, since he is not allowed to show the place or people there, he has to interpret the atmosphere there and tries to bring it to the audience on himself. 

However, Leth plays a trick, he did block the people and place, but he did this with a transparent curtain. Thus even it  provides a feeling of isolation, audience can see the people around and the street there. Though Trier doesn’t think this film satisfy his request, he admits it is a good work.

In this film, Leth acts as a traditional European just as Claus Nissen does in the original one. He deletes the woman part and largely reduces the man part. He only uses a little time to do the movements part and the meal takes most of its time. 

I think by doing this, Leth was trying to point out why that place is miserable, why the people behind the curtain is not perfect. It is not because they don’t have eyes or ears or mouse, and it is not because they do not how to act as a human. It is because they don’t have material insurance. Also, considering the isolated empty white space in the original film, the transparent curtain is a intermediate state between isolated and not isolated. It shows the secret place outside that perfect white world, with blocking the imperfect people out of the place. And this ingenious set also makes Leth and the local people contrast with each other.

Here is the link for our project: http://imanas.shanghai.nyu.edu/~yh3245/chemlab/

A description of the project:

We both like the combination of different sounds, so we begins with think up things can be combined with each other. Then we find out that chemical material is a good choice. And this is also inspired by Professor Didakis’s suggestion of micro-world. So we want to build a simulate chemical lab with different kinds of materials. They have their own sounds, you can play them by click the button around them and pause them by click again.  You can also drag them in the equation, and then click the equal sign to make the reaction happen. And the products of the reaction will appear, and the sound of that reaction will be played.

A discussion of your process and how the project works:

This is not our original idea, the previous one is to narrate the experience of a man who works alone on the street from night to dawn. And we want to create an unique atmosphere by playing the sounds he gonna hear during his journey. We have already recorded the audio materials we need and the basic structure of the website. But it seems kind of boring and the audio is not the major part of this project, then we change our topic to our current project. So we are a little bit more about t left behind.

In this project, we do the recording work together, most of the audio materials we use are from our dorm, and others are from the streets and academic building. During that process, we found that though the preview of the records is good (when you click record only once and it is actually not recording), but the actual records is not satisfying. So we change the record set to a higher recording quality. After, that we discovers our records become much better. We have recorded the sound of the crash of the metals, sound of water, and sound by shaking a bag of rice or sugar. We also record the sound of the air (similar to the sound you can hear when you have a tinnitus), we think it is interesting and gives the listener a feeling of silence.

Then we separate our works, I do most of the coding part and she processes with the most audio materials we got and draws the image we use for our project. My partner writes the html and css of the images, putting them in right position and give the code to me. Then I work on the javascript part to fulfill the functions. I give every object a drag function and they will only be dropped to a constant position when you drag it close enough to that position. And once it is dropped to the equation, the variable of its will change in javascript. And when you click the equal sign, it will get the variable of all the chemical materials and know which reaction should be processed. And by running the reaction function, the images of the products will appear with the sound of it. And then I gave my code back to her. She add the processed audio materials into the file and do the coding part of the sounds. 

I also work with some audio materials, I change the frequency of the sounds, and cut them to make them have proper starting point. I give the echo special effects to an audio. And I once put nearly all the sounds we got in order to make it sounds like a band with strange instruments. Though we did not directly use that, it is close to the situation when you click all the buttons in our website. 

A post-mortem on whether or not the project met your goals:

It mostly meet our goals, but I think the elements in our project in not enough, so we cannot put more audio materials into the website. 

And there are some ways we can improve:

1. When you drag the images, there will be a block to show that the position you are wanted to drag the images to.
2. When you click the buttons to play music, all the sounds should be played at the same rhythm. We can do this by make all the audio materials played at the same time with 0 volume before you can click those buttons, like making a introduction pre-page.
3. When you try to drag the image, you may click the button over it, we may solve this by turning the image to the button.