CSDOSC

Introductie
Voorbereiding
Installatie
- Mac
- Windows
Gebruik

Introductie

Tijdens Sysbas gaan we gebruik maken van de programmeertaal Javascript om te leren programmeren. Daarvoor maken we gebruik van de library P5.js, waarmee je makkelijk audio/ visuele programma's kan maken. Dit doen we omdat Javascript redelijk eenvoudig te begrijpen is en je met P5.js snel een zichtbaar en hoorbaar resultaat bereikt.

P5.js is al redelijk makkelijk in gebruik, maar een aantal dingen werken alleen als je je computer op een bepaalde manier configureert en als we uiteindelijk Max en P5.js met elkaar willen laten communiceren, zullen we daar extra software voor nodig hebben. Om hier meteen een goede start mee te maken zodat we de rest van het jaar aan de slag kunnen hebben we software ontwikkeld waarmee dit gemakkelijk kan. Dit is csdosc.
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. Als je csdosc installeert wordt P5.js automatisch meegeïnstalleerd. Dat hoef je dus niet apart te doen.

Voorbereiding

Mappenstructuur

Om goed gebruik te kunnen maken van jouw computer is het noodzakelijk om een heldere mappenstructuur te hebben op je computer. Of je nou met sessies uit je DAW werkt, een grote collectie audio-samples hebt of programma's ontwikkelt. Als je ze niet kan terugvinden, dan heb je er niets aan. Daarom ga je voordat je het programma installeert een mappenstructuur aanmaken waar je de rest van het eerste jaar (en de rest van de opleiding) wat aan hebt. Dit kan in de Finder (MacOs) of Verkenner (Windows).

Begin met een hoofdmap, plaats deze in je documenten-folder, of op een andere logisch terug te vinden locatie. Noem deze map HKU.
Plaats vervolgens in deze map een nieuwe map en noem deze jaar1 (gebruik geen spaties, als we later gebruik gaan maken van de Terminal om door onze computer te navigeren, dan zijn spaties onhandig).
Vervolgens maak je voor de verschillende vakken mappen aan: sysbas, klaba, muzbas etc.
In de map sysbas maak je twee mappen aan: max en javascript.

Terminal

We gaan in deze Sysbas-lessen gebruik maken van de terminal. Een commando-gebaseerde manier om je computer aan te sturen. Lees om hier goed mee aan de slag te gaan het volgende hoofdstuk uit de syllabus goed door: Terminal

Installatie

Kies hieronder de installatie-handleiding voor het besturingssysteem dat jij gebruikt.

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 bovenstaande voorbereiding.
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/prebuilt-installer en installeer dit.
Zorg dat je het hoofdstuk over de terminal goed gelezen hebt en dat de terminal juist geconfigureerd is.
Open de Terminal (CMD + spatie, type terminal, type enter)
Sleep install.sh uit de csdosc-map naar de terminal en druk op enter..
Vervolgens zullen alle benodigde bestanden worden geïnstalleerd.
Als dat allemaal gelukt is krijg je in het terminal-scherm te zien: De server staat aan! Je kunt deze via localhost:8001 bereiken. Je kunt dit programma afsluiten door stop+enter te typen Dit betekent dat het gelukt is.
Als het niet lukt, vraag het dan in de les aan een van de docenten/ assistenten.

Windows, met gebruik van WSL - Ubuntu

Als je windows gebruikt moet je eerst Windows Subsystem for Linux - Ubuntu installeren. Klik op deze link voor instructies.

Zorg dat je het hoofdstuk over de terminal goed gelezen hebt en dat de terminal juist geconfigureerd is.
Open WSL, je krijgt nu een terminal-command prompt te zien.
Ga vervolgens naar de Sysbas-folder via het commando: cd /mnt/c/Users/<Jouwnaam>/Documents/HKU/jaar1/sysbas/javascript (De map die je hebt aangemaakt in de voorbereidingen - vul bij de gebruikersnaam van jouw computer in, zonder de haakjes)
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
```
volg je dit stappenplan om node-js opnieuw te installeren.
csdosc is nu klaar voor gebruik. - typ npm start om te kijken of het werkt.
Als het niet lukt, vraag het dan in de les aan een van de docenten/ assistenten.

⬆️

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

⬆️