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.