Inspiration
For our final project, I and Grace decided that we wanted to do something fun that would also serve us as a place where we could store some of our memories of this city that has become our home. So we decided that we wanted to document our favourite places in Shanghai. This was really fun as we got to go and film around our favourite places around the city and make videos for our project.
Concept
To make this project more fun, we decided that rather just having a website incorporating our favourite places, which was our original plan. We thought that in order to make it more interactive and user-friendly we would the site be bit more of a game. To make it a game we ended up using the p5 js we learned to recreate the images from the videos we recorded in order for the user to have to guess where that site could be as the image got built up. For that reason, we also decided that it would be to record audio of the places we went to, in order to create a kind of soundscape of the area so which would serve as an extra clue to the person guessing what site this could be.
Process
For the process, we first started out by creating the basic design of the website using the HTML, CSS and Javascript techniques we’ve learned over the semester. Then I and Grace both went to collect the video for the website and the audio, this was a really fun day! After we collected the video and auditory aspects we worked on editing them using Premier, to crop, brighten, stabilize and increase the saturation on the videos. We also then used Audacity to edit the audio. The audio of all the sites sounded a bit similar so in order to increase the users understanding of the sites we decided to edit the audios by adding subtle sounds that would maybe be more associated with one site over another. For example for our Xintiandi audio, we added the sound of clinking glasses and plates to simulate the many outdoor restaurants that there are in that area, or we added the sound of the wind on the Bund audio to make it sound more like you were walking next to the river. All of these sounds were sounds from freesounds.org which has an amazing extensive library of sounds to use. Once all of these were edited we started to put them into the website, and this is when things started to get a bit complicated. The audio was not playing in the background like we wanted it to, instead a music bar would appear which then messed up the whole layout. We also were having problems with how slow the pointillism was being generated. In order to not bore our users, we needed the dots to appear faster as they were appearing very slowly at first. After trying for several hours to fix these problems we decided to go seek help from the IMA Lab, where Dave helped me to realize that in order to make it go faster I had to add more code that would take another point and generate it at the same time it was generate the first point (x,x1,x2,x3, etc…). writing this was time-consuming but eventually made the experience much better. He didn’t really help with the audio but after much more trial and error we finally got the audio to play in the background which was a huge relief. Another aspect we had problems on was the background, originally we were going to have a video background from a video we took, when we tried this out on its own it worked perfectly but after trying to incorporate the flexbox on top of it wasn’t working anymore. We tried several different things to try and get it to work but in the end, we decided that having a gif as the background would work just as well.
Reflection
Overall I am very proud of this project, I and Grace put in a lot of hard work into it and we ended up doing things and using code that we never thought we would be able to. Having never in my life used code or anything related to, this final project was very scary as previously for our other projects we had other people who would take the lead as they were more experienced. This time, however, it was just me and Grace and we are both very new and inexperienced, considering this however I was amazed at our final project and that we were, in the end, able to create such a stunning website. Although there are some aspects I would like to improve, such as the comments sections and the layout of the front page such as the font size, colour scheme, and maybe adding some instructions. I am very pleased how this turned out and I think that me and Grace made a great team together. I am excited to apply these skills I learned to all of my future endeavours!