by Salomon Ruiz Hernandez
Instructors: Leon and Nimrah
Partners: Adriano Albarosa and Zain Majid.
Date: May 9 2018
Project name: Shanghai 360
The goal of our project consists in showing the mixture between the traditional and the modern in Shanghai. With Shanghai’s economic prosperity not only the landscape has changed but also the culture of the city itself. Since more and more people adopting Western brands while at the same time conserving traditions in the middle of this urban jungle to foreigners adapting to this new culture, Shanghai has become a cosmopolitan city that transforms at a fast pace. As a result the culture of the city is also in perpetual definition. As the Travel China Guide states “In addition to its modernization, the city’s multicultural flair endows it with a unique glamour. Here, one finds the perfect blend of cultures, the modern and the traditional, and the western and the oriental. New skyscrapers and old Shikumen together draw the skyline of the city. Western customs and Chinese traditions intertwined and formed the city’s culture, making a visitor’s stay memorable” (https://www.travelchinaguide.com/cityguides/shanghai.html)
For this purpose our project presents small clips and audios that expose some aspects of this mixture through food, music, language, customs, etc. Moreover, these videos live in a 360 image that shows two sides of the city of Shanghai: Puxi –often referred as the old side of town- and Pudong –often conceived as the modern side of the city. However, both traditional and modern elements coexist in these sides of the city, sometimes easily noticeable by us and sometimes not so easy. Therefore, our project also works as an eye-opener for the user by highlighting how small quotidian actions are a result of this blend the city is witnessing.
Given the workload of our project we decided to split the multiple tasks, so we all worked on the filming of the videos and I also worked mostly on the code for the website. First of all, I edited the 360 image by changing contrast, brightness, saturation and warmth. Then, in order to work with the 360 image, Jiwon advised us to work with the library A-frame and so we did. We used some basic properties of A-frame in order to paste the 360 image into the website as well as the location tags that we used. This library also allowed us to change the position of the tags in the x, y and z axis and also to increase a little bit the size of these icon when hovering over them.
After receiving feedback on the User Interaction Testing that we had in class, we decided to do some changes. We decided to keep the same font along the website in order to have consistency. We also decided to put a border in the info div. Moreover, after we let the users play with our website, we realized that when closing the videos the audio kept playing, as we were just hiding the div where the video was pasted, so we modified the code in order to also stop the video when clicking in the “close” icon. Another feature that we added was making the background of the website go dark when playing a video so that the user can focus on the video without being distracted by the 360 image on the background. We also changed the color of the closing button as it was not visible in the parts where our videos were black. Additionally, we changed the color of the location icons to black and made them turn red when hovering over them. Finally we made the videos look bigger.
For the filming part we filmed 6 different videos and we recorded two audios. The audios correspond to a conversation between a taxi driver and a foreigner in Chinese, and a Chinese kid speaking English. For the videos we picked six different locations: Lujiazui, Jingan Temple, a park, The Bund, Tianzifang, and burger king. For the Lujiazui scene we have two business men eating traditional Chinese food in their office. In Jingan Temple we filmed a tourist being impressed by this gem of Shanghai. In the park we filmed a foreigner flirting with a Chinese girl. In Tianzifang we filmed a foreigner bargaining in Chinese with a local vendor. For the Bund scene, we have Chinese people asking to take a picture with a foreigner and finally, in burger king we filmed a Chinese guy listening to English songs while enjoying a burger. I filmed the Lujiazui scene, the park scene and the Bund scene. Also I acted for the Jingan temple scene. Here are some of the scenes:
Learnings and challenges
This project has been without doubt the most challenging project I have worked on. First of all, taking the 360 picture was not an easy-task. As 360 images are difficult to edit, we had to find the right spot in order to have an image that works well for the project. After being kicked out of some buildings, we finally found a rooftop where we could take the 360 picture with the help of the tripod and the app Theta V. Then we did some basic edition to change the brightness, the color, the contrast and the warmth. In order to overcome this challenge, my team and I learned how to make use of the 360 camera and we also kept trying in different buildings until we got a decent view.
The second big challenge was putting this 360 image into our website. For this we used a library called “A-frame”, which allows to work on WebVR. We could then paste this image and exploit its 360 characteristics. So we had to learn some basic functions of this library in order to place our location tags in different places.
Another challenge was filming the videos as sometimes our logistics were not well planned beforehand resulting in having to film some scenes multiple times. Also matching the audio and the video was complicated for some of our scenes. And adding the subtitles for the conversations in Chinese also took us a lot of time.
What I would change
Something that I would change first of all would be the 360 image as I feel the current image does not show a lot of the traditional, old side, of the city. Moreover, there is a big part of our image that shows a wall, therefore the 360 view is limited, which limited us to only place th location tags on one side of the image. So we could maybe find a better location and take a new picture.
Secondly, I would make a small animation for the logo so it can rotate every certain seconds.
Also I would not only change the color of the location icons when hovering over them but rather change the color when clicking them and keep that new color in order to remind the user they already clicked on that icon. In addition I would try to see if there is way to rotate these location tags in A-frame as the icons that are far on the x-axis look very tiny.
Overall, our project met most of the objectives we initially had, which was an interactive website using a 360 image and show our content when clicking in different locations of this image. The content I also think met our expectations. Nonetheless, improvements can still be done, but all the work we did is reflected in the final product.