CSDOSC

---

CSDOSC + 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.

Installatie

MacOS

• Download of clone via de groene knop Clone or download alle bestanden van github naar je harde schijf en zet deze in de HKU/Jaar1/SysBas/Javascript-map die je hebt aangemaakt in Opdracht 2.
• Als je de bestanden gedownload hebt: pak de .zip-file uit en hernoem csdosc-master naar csdosc.
• Download node.js via https://nodejs.org/en/download/ en installeer dit.
• Ga in de terminal naar de map waarin je de csdosc-bestanden hebt gezet (bijvoorbeeld cd ~/HKU/Jaar1/SysBas/javascript/csdosc) en typ hier: npm install
• Typ nu npm start.
• Je kunt de webserver nu gebruiken!

Windows, met gebruik van Ubuntu

• Ga naar de Sysbas-folder via het commando: cd /mnt/c/Users/Jouwnaam/HKU/jaar1/SysBas/Javascript (De map die je hebt aangemaakt in opdracht 2)
• Clone de bestanden van github naar je schijf met het volgende commando: git clone https://github.com/csdhku/csdosc.git
• Ga vervolgens naar de map die binnengehaald is: cd csdosc
• Installeer node-js door de volgende commando's in te typen:
  sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
• Vervolgens moet je de osc-server app configureren voor jouw systeem:
• Voer daarvoor de volgende commando's in:
  npm install
• Typ nu npm start
• Je kunt de webserver nu gebruiken!

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.

• Zodra je in de terminal npm start intypt start de node-js server en verschijnt er de volgende mededeling: De server staat aan! Je kunt deze via localhost:8001 bereiken.
• Dit betekent dat er nu een lokale webserver draait die luistert naar de poort 8001.
• Je kunt nu in jouw favoriete webbrowser naar localhost:8001 gaan en er zal een tijdelijke website verschijnen.
• Je kunt vervolgens een nieuwe project starten: maak in de csdosc map een nieuwe map genaamd opdracht_1 en kopieer de twee bestanden index.html en sketch.js uit empty-example naartoe.
• Ga nu in de browser naar localhost:8001/opdracht_1 en je zult hier een lege p5js sketch zien.
• Je kunt deze sketch vervolgens aanpassen naar jouw wensen.
• Maak voor elk nieuw project een nieuwe map en gebruik de voorbeelden uit empty-example als basis.