Hoofdstuk 3 p5.js

In deze lessen gaan we gebruik maken van csdosc, een in node.js geschreven applicatie waarbij het mogelijk wordt om met p5js te werken, ook in combinatie met Open Sound Control en een Arduino of Teensy.
csdosc is een lokale webserver waarmee je webpagina's die je op je computer hebt opgeslagen kan laten zien in de browser. Je kunt csdosc vinden op https://www.github.com/csdhku/csdosc. Hier zitten ook alle bestanden bij die je nodig hebt om met p5js te werken.

3.1 Installatie

3.1.1 MacOS

3.1.2 Windows, met gebruik van Ubuntu

3.2 Gebruik

We gebruiken deze node-js server in eerste instantie als lokale webserver voor het weergeven van html-bestanden in de browser. Hiermee kunnen we p5js projecten bekijken. Overige functies als OSC-communicatie en Arduino-integratie komen later aan bod.

3.2.1 Mappenstructuur

Om csdosc goed als webserver te laten werken en een duidelijk overzicht te hebben van waar je bestanden zich bevinden is het noodzakelijk onderstaande mappenstructuur aan te houden:

Je ziet hierbij dat de mappen empty-example en opdracht_1 allebei twee bestanden bevatten: index.html en sketch.js. Omdat de csdosc-webserver autmatisch naar bestanden met de naam index.html zoekt is het voldoende om naar localhost:8001/empty-example te gaan om het index.html-bestand uit die map te laten zien. Als je de html-pagina anders noemt, zal je een foutmelding krijgen als het bovenstaande adres invoert in je browser. In de index.html pagina uit het empty-example staan ook de juiste verwijzingen naar de javascriptbestanden die je nodig hebt voor p5js. Als je deze dus kopieert voor je nieuwe project hoef je geen aandacht te besteden aan de inhoud van de html-pagina: het zal altijd goed werken.

Mocht je niet meer helemaal weten hoe de mappenstructuur op elke Unix-computer (MacOS en Linux) in elkaar zit, kijk dan nog eens op deze pagina: UNIX filesystem in pictures.
Daar heb je niet alleen bij de SYSBAS-lessen iets aan maar bij zo'n beetje alles wat je met een computer doet.

3.3 P5js

Zoals je hierboven al gezien hebt bestaat een p5js-project uit twee bestanden: een index.html bestand en een sketch.js bestand. Een html-bestand is een bestand met daarin de html-code die er voor zorgt dat de pagina zichtbaar is in de browser. In het .js (Javascript) bestand schrijf je de scripts om de interactieve, visuele en auditieve elementen toe te voegen aan jouw project.

3.3.1 opbouw

Een P5js-sketch bestaat altijd uit twee basisfuncties: setup() en draw(). De setup()-functie wordt bij het opstarten van het script éénmaal uitgevoerd. Hierin plaats je dus code die van belang is voor het opbouwen van je sketch: hoe groot is het canvas waarin je kan tekenen, hoe snel draait de sketch etc.
De draw()-functie is een loop. Deze wordt nadat de setup()-functie is uitgevoerd continue achter elkaar uitgevoerd op een bepaalde snelheid. Hierdoor ontstaat de mogelijkheid om beelden te laten bewegen. De snelheid waarmee deze draw()-loop herhaald wordt kan je bepalen in door de frameRate() aan te passen in de setup()-functie. Bij een frameRate van 30 zal de loop 30 keer per seconde uitgevoerd worden. Voor meer informatie over de basis van P5js ga je naar p5js.org.

3.4 Console en foutmeldingen

Een belangrijk hulpmiddel bij het schrijven van code is de Javascript-console die standaard bij de browser zit inbegrepen. In deze console kun je foutmeldingen lezen, maar je kunt ook berichten sturen naar de console zodat je weet wat de code precies doet. Zorg dat je tijdens het ontwikkelen van jouw software de console altijd open hebt staan, zo zie je direct of er iets fout gaat of niet.

3.4.1 De console openen

3.4.1.1 Chrome

In Chrome (en Chromium) kun je de console tevoorschijn halen met behulp van de volgende toetsencombinatie:

3.4.1.2 Firefox

In Firefox kun je de console tevoorschijn halen met behulp van de volgende toetsencombinatie:

3.4.1.3 Safari

In Safari is de console standaard verborgen. Je moet eerst zorgen dat je deze te zien krijgt:

3.4.2 Berichten sturen naar de console

Als je de waarde van bepaalde variabelen naar de console wilt sturen om te kijken of de code ook echt doet wat jij denkt dat de code moet doen gebruik je de volgende code:

var x = 50; 
var y = 100; 
Console.log("variabele x is: " + x + ", variabele y is: " + y);

De console zal nu het volgende weergeven

variabele x is: 40, variabele y is: 100

Denk er bij het gebruik van console.log() aan dat als je dit in de draw()-loop gebruikt er bij een frameRate van 30, 30 keer per seconde een bericht naar de console gestuurd wordt. Dit kan de browser soms slecht hebben, waardoor deze vast kan lopen.