• Kasia Szczęsna

Data noise - website & coding

Aktualizacja: 10 kwi 2019

Link to final website: here

Having the data ready, it was time to start coding the website. It was obvious from the beginning we would have to use HTML, CSS and JavaScript (jQuery) in which I had no experience whatsoever. We managed to do everything with a little bit of help from Creative Lab and Oliver. The most challenging part was coding the sounds and making different transitions between them. At first, we were so focused on our Arduino project that we were overcomplicating the way we could do this: we selected the area where the audio files would be allocated and then using JavaScript converted it into coordinate grid so we could know exact coordinates of the cursor. The idea was that depends on the distance from the central point, we could hear the song transition, but we couldn't figure out the way how we can connect sounds only to one point.

Finally after few unsuccessful attempts, Oliver suggested us different and, in my opinion, easier idea where we would allocate sounds to separate circles which would be overlaying on top of each other. At first, we wanted to make only 4 sounds because we thought it might be easier, when in reality we would only have problems with empty spaces (no sound) or with no clear middle sound (illustrated below).

We ended up coding our website having below sketch in mind.

It took us few hours to do everything and of course it was not without any troubles. The main issues we had with the circle in the middle because the idea was that the sounds stop playing when you go outside the border. It worked for both Marylebone and Vauxhall location, but for City of London and Greenwich it was playing constantly on the whole right side of the website. As we found out later, it was a problem with the way Google Chrome understands code - we had to edit the 'body' and 'html' elements in CSS giving them exact width and height attributes (1920px x 1080px). Of course it made our website unresponsive, but it was the only way we knew and it could fix our problem quickly. Next issue we encountered was that Google Chrome didn't play the sounds until the user clicked somewhere on the website, and this is why we had to create a welcoming page forcing users to click first before they could use the interface.

We had short conversation about the color palette for our website but we went with a bright yellow and blue color so it would be associated with toxic environment and something dangerous.


12 wyświetlenia