De laatste stap in ons ontwerpproces is om de data van elk boek apart te laten zien. We geven hierbij de gebruiker de regie. Als er geklikt wordt, wordt er van view gewisseld. Om deze clicks bij te houden zullen we een variabele moeten aanmaken. We noemen deze sceneCounter. Elke keer als er geklikt wordt moet sceneCounter vermeerderen. De ingebouwde functie mousePressed() van P5js wordt geactiveerd telkens wanneer er een muisknop wordt ingedrukt. Binnen deze functie zullen we dan ook het vermeerderen van sceneCounter plaatsen:

 
 function mousePressed(){
   sceneCounter = sceneCounter + 1;
 }

Op deze manier gaat sceneCounter echter alleen maar vermeerderen. Op een bepaald punt zullen we moeten resetten. Aangezien onze boekenarray van 0 tot 9 gaat, is het handig dat de sceneCounter reset als hij boven 9 komt.

 
 function mousePressed(){
   sceneCounter = sceneCounter + 1;
   if(sceneCounter > 9){
    sceneCounter = -1;
   }
 }

De reden dat ik sceneCounter naar -1 reset is omdat ik ook nog een scene wil voor het overzicht. En aangezien we 10 boeken hebben, van 0 tot 9 in een array, is het logisch om -1 voor het eerste overzichtsscherm te hanteren.
We hebben nu 9 hard-coded ingevoerd. Als er straks een nieuw boek uitkomt, zal onze code stuk gaan. Dit lossen we op door 9 te vervangen door de lengte van alle boeken – 1.

 
 function mousePressed(){
   sceneCounter = sceneCounter + 1;
   if(sceneCounter > mijnData.length - 1){
    sceneCounter = -1;
   }
 }

Wanneer je in een desktop editor aan het werken bent, kan je testen of je sceneCounter werkt door in mousePressed() ergens print(sceneCounter); toe te voegen.

Onze sceneCounter werkt, maar we doen er nog niets mee. De eerste stap is om het overzicht te laten zien als de sceneCounter -1 is. Dat doen we door onze bestaande code van het overzicht in een conditie te plaatsen:

if(sceneCounter == -1){
  //bestaande overzichtscode
}
 

let nogmaals op de dubbele == als je een vergelijking wil doen.

Onze code tot nu toe ziet er zo uit:

Let op dat we ook binnen mousePressed() nog even checken of er data in mijnData zit. Anders zou de code daar ook zonder data kunnen worden uitgevoerd. mijnData.lengt geeft dan een fout terug en het programma crasht.
Onze code werkt. We zien het overzicht verschijnen, vervolgens 10 klikken niets, en dan weer het overzicht. Natuurlijk willen we dat in die 9 andere schermen ook wat te zien is.

Als we niet het overzicht laten zien, wil ik in het midden onderaan de titel van het huidig geselecteerde boek, en bovenaan 2 staven, 1 voor de personages en 1 voor de bladzijden. Aangezien sceneCounter mooi van -1 tot 9 gaat, kunnen we van 0 tot 9 gebruik maken van de sceneCounter variabele om het juiste boek op te halen. We starten met het tonen van de titel.

Het eerste wat we doen is checken of sceneCounter groter is dan -1:

 if(sceneCounter > -1){ ... } 

Als dat het geval is, centreer ik mijn tekst, ter grootte van 20 pixels en toon de titel van het boek op plaats “sceneCounter”.

    textAlign(CENTER);
    textSize(20);
    text(mijnData[sceneCounter].name, width / 2, height-20);

Ingevuld in de code kunnen we dit testen:

De laatste stap in het proces is het toevoegen van de staafdiagrammen. Dit doen we aan de hand van rechthoeken. Die starten bovenaan op y-coordinaat 0, en lopen tot mijnData[sceneCounter].charachters.length/5 en mijnData[sceneCounter].numberOfPages/5. Op de x-as positioneren we ze zo, dat ze vlak naast elkaar komen.
De code die we toevoegen om de staafdiagrammen te maken is:

      fill(0);
      rect(width/2-10, 0, 20, mijnData[sceneCounter].characters.length / 5);
      fill(0,255,0);
      rect(width/2+10, 0, 20, mijnData[sceneCounter].numberOfPages / 5);

Dit brengt ons bij het eindresultaat: