We weten nu dat een JSON file informatie bevat. Deze file kan op onze hard drive staan, of ergens op een server. Als deze op een server staat met heel veel data, zullen we eerst via een query gericht informatie moeten opvragen die we nodig hebben. Als we onze JSON file eenmaal hebben, moeten we gaan inladen in P5js. Dit kan op 2 manieren: Synchronous (synchroon) of Asynchronous (asynchroon). Het verschil wordt hier uitgelegd:
Synchronous
Als we synchronous of synchroon data willen inladen. Wil dat zeggen dat we de volgorde van uitvoeren van het programma volgen. Deze volgorde, of flow, is dat eerst setup wordt uitgevoerd, en daarna draw. Echter willen we niet dat ons programma al begint te lopen voordat we onze data hebben ingeladen. Dit zou namelijk tot een crash leiden. Hiervoor bestaat een apart codeblok, dat nog voor setup() komt te staan. Het heet preload()! . In preload() gebruiken we voor het inladen van de data de loadJSON() functie die in P5js is ingebouwd.
de data die we in dit script gebruiken komt van open notify een website die constant bijhoudt hoeveel mensen zich er op dit moment in de ruimte bevinden.
In deze code gebeuren heel wat nieuwe dingen:
1. de preload() functie
De preload() functie zorgt er in P5js voor dat alles wat hier in plaatsen eerst geladen wordt, vooraleer setup() en vervolgens draw() wordt uitgevoerd. Handig om fonts, afbeeldingen of externe scripts in te laden. In dit geval laden we hier de json file in, die wordt geleverd door “open notify”. Hier wordt live bijgehouden hoeveel mensen er op dit moment in de ruimte zijn!
In de preload functie zien we dat de data die door loadJSON wordt opgevraagd, wordt overgezet naar de globale variabele mijnData. Hierdoor wordt de data in heel het programma toegankelijk.
2. https://crossorigin.me/
Als je heel oplettend bent, zie je dat voor de URL van notify me, https://crossorigin.me/ staat. Hier gaan we technisch niet verder op in, maar dit staat er voor omdat sommige websites hun JSON files beveiligen tegen overbevraging. Door deze url voor de url van de server waar we opvragen te plaatsen, worden we als een “veilige” aanvrager gezien. Dit is niet waterdicht. Voor meer info over cross origin: wikipedia artikel.
3. Informatie tonen
Alhoewel we pas in het volgend hoofdstuk dieper ingaan op het tonen van informatie, kan je in de draw loop zien hoe we uit de ingeladen informatie het aantal mensen in de ruimte destilleren en tonen.
Samenvatting:
Synchroon inladen is handig voor files die lokaal zijn bewaard, of bestanden die onveranderlijk blijven op een server. Bijvoorbeeld de winnaars van afgelopen presidentsverkiezingen. Synchroon inladen is niet geschikt voor informatie die steeds veranderd (bv. het weer, of aandelen).
Dit omdat de informatie slechts 1 keer wordt ingeladen en daarna onveranderd blijft.