Achtergrond bij “Aardbevingen Groningen” animatie

Achtergrond bij de visualisatie van de gasbevingen in het gaswinningsgebied in Groningen.

Begin update

Update 8 november 2016: zie ook deze blogpost voor informatie over Versie 2.

Einde update

Ik heb een animatie [de animatie] gebouwd die het verloop van de gasbevingen in Groningen van eind jaren 80 tot heden weergeeft.

Het is een poging om plaats- en tijdsgebonden informatie visueel (voor goedzienden) en, voor zover mogelijk, via geluid (voor slechtzienden) toegankelijk te maken.

Ik heb mij altijd veel met de Webrichtlijnen (toegankelijkheid) van de overheid beziggehouden, en omdat ik een geluiden-persoon ben, probeer ik hier een brug te slaan tussen geluid en informatie. Via de screenreader is als het goed is (ik kan het niet testen) informatie te horen in de animatie die een toelichting geeft op het gebruik van het geluid. Ik heb geprobeerd de intensiteit van een beving te vangen in de toonhoogte en het volume van het geluid. Waar ik geen oplossing voor weet is hoe de lokatie over te brengen via geluid. Een stem die de lengte- en breedtegraad voorleest, lijkt me niet de oplossing. Ik weet dat screenreaders vaak voorlezen op voor mij absurde snelheden, maar de animatie is zo snel dat dit hier geen soelaas biedt. Het woord explanimation vind ik trouwens ook wel toepasselijk voor deze animatie.

JavaScript

Hoe is een en ander gebouwd? JavaScript speelt toch wel een hoofdrol. Ik heb een eigen frameworkje gebouwd, dat ik in de toekomst generieker wil maken.  Verder gebruik ik:

• Fastclick (om de 300ms vertraging op touch devices te elimineren en alles veel sneller aanvoelt)
• createJS (een veel te onbekend maar zeer krachtig framework, voor de ticker / loop, en, heel belangrijk, om geluid toe te voegen, een van de lastigste dingen)
• dateJS (om het manipuleren met datums wat werkbaarder te maken)
• google maps API (voor de kaart)
• alertifyJS (voor de pop ups)
• jQuery (voor de interactie met de DOM)

Canvas

Hoewel JavaScript een grote rol speelt, was deze animatie niet mogelijk geweest zonder het Canvas-element. Canvas is een relatief nieuwe techniek die nog niet door alle browsers ondersteund wordt, maar dat verandert snel.

Geo-Locatie

Ook heb ik gebruik gemaakt van een nieuwe API, de geo-locatie, waarmee de locatie van de kijker/luisteraar bepaald word, en van daaruit de afstand tot de gasbevingen.

Data

De data komen van live feed van de Groninger Bodem Beweging, en dat komt weer van het KNMI.

Geluid

De diverse geluiden betrek ik van Freesound. Een prachtige site met veel geluiden. Zie de animatie voor de precieze credits.

Nadere toelichting

Geluid

Een van de lastigere dingen binnen de HTML(5) omgeving is het toevoegen van geluid. Het is verstandig om een library als createJS hiervoor te gebruiken. CreateJS is een vrij onbekend library. Erg jammer. Eerst heb ik SoundManager2 geprobeerd, maar die is hiervoor te traag, dat kun je beter gebruiken als je muziek wilt afspelen, waarbij het niet zozeer gaat om heel veel geluiden vlak na elkaar te initiëren.

Canvas

Canvas komt het best tot zijn recht in situaties waarin dingen heel snel moeten bewegen en veranderen op een scherm. Het canvas-element onttrekt zich geheel aan de normale web-omgeving, html, dat door de browser omgezet wordt in de DOM (Document Object Model). Hierin verschilt canvas van een andere grafische techniek, SVG, waar je wel toegang hebt tot alle elementen, zoals lijnen, circels binnen een SVG. Ik heb eerst nog geprobeerd te werken met gewone images die ik in de DOM toevoeg ( ‘DOM manipulatie’) maar dat gaat niet, dat is te traag, veel trager dan het manipuleren van een canvas.

Daarna maakte ik voor elk circeltje een eigen canvasje. Maar ook dat was te traag. Nu wordt er één grote canvas gemaakt die schermvullend is. Maar op sommige apparaten werkt deze animatie ook te traag, zoals op mijn iPhone, en op de iPad gaat het ook niet echt lekker. Ik zal daarom moeten optimaliseren. Misschien dat er te veel bewerkingen in de loop plaatsvinden, of misschien gebruik ik canvas technieken die veel sneller kunnen. Ik weet zeker dat als een game developer mijn code ziet, zijn tenen kromtrekken. Jammer dan. Link: [de animatie]