Site outcome: link.
The data was ready and sonified. Our next step was to code the web interface. We achieved this through HTML, CSS and JavaScript - more specifically jQuery. Before we commenced coding, we designed a simple wireframe which depicted the layout for the site that we envisioned.
We decided to focus the interactivity of the site inside the main circle. This is where the user can move around their cursor, witnessing the mash up of sounds between the five locations. In retrospect, Kasia and I realised maybe the whole screen interface could have incorporated this instead of just this specific area. It would have certainly made the coding easier however, this is what we went with in the end. We aim for the five smaller circles to be clickable and display additional information on the area, such as the figure of Nitrogen Dioxide based on where the cursor is, and even additional pollution information such as noise and carbon dioxide levels. This would give our site that additional data depth, which is not required but would make our system more of an investigative system to explore pollution in London.
The coding process was difficult however, we did recieve support from the Creative Technology Lab and Oliver. The most difficult part was getting the JavaScript to function properly. We experienced many issues during the development of our site; because chrome doesn't allow for autoplaing sounds, what we did to bypass this was code this barrier which requires the user to click on ths site. Then the sounds would start playing.
Another issue was the sound playing outside the bounds of the circle. This was actually a really easy fix. Setting the html and body tag to 100% width and height of the screen done the job. The issue stemmed from the fact that the body was not spanning with whole screen so the JavaScript function could need tell where the mouse was and that it was outside the circle so it shouldn't have been playing any sounds.
The screenshot above shows the interface. We went for a simple look with a strong contrasting yellow background colour to evoke those thoughts of toxicity within our environment making it quite overwhelming. We believe this adds deeper emotion in the user. Are main goals for those who would visit this site are to expose them to the different types of pollution, not just nitrogen dioxide but also carbon dioxide, noise pollution, sulphur levels. If we were to add even more places, it would inform people which areas a 'better' than others. Maybe the answers our site provides them with will be the basis of any decisions they make. For example, Marylebone is the most polluted out of the five. After someone visits our site and witnesses the dramatic sound, they may make the decision of using public transport when traveling through Marylebone instead of a taxi which is a way to reduce the nitrogen dioxide levels in the area.
Comments