CSDOSC

Installatie
- Mac
- Windows
Gebruik

In deze lessen gaan we gebruik maken van csdosc, een speciaal voor deze lessen geschreven applicatie waarbij het mogelijk wordt om met p5.js te werken, ook in combinatie met Open Sound Control.
csdosc is een lokale webserver waarmee je webpagina's die je op je computer hebt opgeslagen kan laten zien in de browser. Hieronder vind je een installatie-handleiding. Als je deze stap voor stap doorneemt kan je met csdosc aan de slag.

Installatie

MacOS

Download als .zip via de groene knop Code alle bestanden van github naar je harde schijf en zet deze in de HKU/Jaar1/SysBas/Javascript-map die je hebt aangemaakt in Opdracht 1.
Als je de bestanden gedownload hebt: pak de .zip-file uit en hernoem de map 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
```
csdosc is nu klaar voor gebruik.

Windows, met gebruik van Ubuntu

Ga naar de Sysbas-folder via het commando: cd /mnt/c/Users/<Jouwnaam>/Documents/HKU/jaar1/sysbas/javascript (De map die je hebt aangemaakt in opdracht 1)
Download de bestanden van github met het volgende commando:
```
git clone https://github.com/csdhku/csdosc.git
```
Ga vervolgens met de terminal naar de map die net gedownload is, gebruik hiervoor het commando cd csdosc
Installeer node-js door de volgende commando's na elkaar in te typen:
```
sudo apt update  
sudo apt install nodejs npm
```
Vervolgens moet je de osc-server app configureren voor jouw systeem, voer daarvoor het volgende commando in:
```
npm install
```
Als je bij deze stap de volgende error krijgt:
```
/usr/bin/node: 1: ELF: not found
```
kan je dit stappenplan volgen node-js opnieuw te installeren.
csdosc is nu klaar voor gebruik.

⬆️

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 zoals OSC-communicatie komen later aan bod.

Opstarten

Open de terminal (Mac) of een nieuw WSL-window (Windows)
Navigeer naar de map waar csdosc staat, wat je precies moet intypen is afhankelijk van hoe jij je computer hebt ingericht.
- Windows:
```
cd /mnt/c/Users/*jouwnaam*/Documents/HKU/Jaar1/sysbas/javascript/csdosc
```
- Mac:
```
cd ~/Documents/HKU/Jaar1/sysbas/javascript/csdosc
```
Typ het volgende commando om de server te starten:
```
npm start
```

De webserver start en de volgende mededeling verschijnt:

De server staat aan! Je kunt deze via localhost:8001 bereiken

Dit betekent dat er nu een lokale webserver draait die open staat op de poort 8001.
Om deze server te bereiken ga je in een webbrowser naar localhost:8001.
Er verschijnt een pagina met een overzicht van alle projecten die in de csdosc-folder staan.
Door op een van deze projecten te klikken ga je naar het desbetreffende project.

Een nieuw project maken

Ga in een nieuw Terminal/WSL-window naar de map waar csdosc staat, zie hierboven bij opstarten hoe je dat doet.
Gebruik altijd empty-example als basis voor een nieuw project.
Kopieer de hele map empty example naar een nieuwe map. Je doet dit met het volgende commando:
```
cp -rn empty-example/ nieuwproject
```
Ververs de pagina https://localhost:8001. Het nieuwe project zal tussen de overige verschijnen.

Een sketch bewerken

Een P5.js-project bestaat uit twee bestanden,

index.html
sketch.js

Het html-bestand hoeft nooit aangepast te worden, dat is nodig om in de webbrowser zichtbaar te maken.

sketch.js is het bestand waarin je de code typt en je project zich vormt.

Als je Visual Studio Code hebt geïnstalleerd volgens de handleiding op deze pagina kan je met het volgende commando de sketch openen:

code nieuwproject/sketch.js

⬆️