1. Installatie en verkenning

---

Uitgedeeld op 19 september 2024
Deadline: 10 oktober - dit is echter een opdracht die nodig is om goed op te starten volgende week, dus zorg dat je er de opdracht vandaag afrondt
Benodigde tijd ± 90 minuten (2 practicumuren)

In deze opdracht verkennen we het werken met de terminal, installeren we nog wat laatste software en passen we wat P5.js-voorbeelden aan. Als je deze opdracht hebt gedaan ben je klaar voor het programmeren in JavaScript met P5.js.

Stap 1 - code-editor installeren

Installeer een code-editor. Lees hier welke je het best kan gebruiken en wat de voordelen van een code-editor is. Zorg dat, als je een MacOs-gebruiker bent, je ook de terminal integratie configureert. Als je al gewend bent om een code-editor te gebruiken dan ben je natuurlijk vrij dit te blijven doen.

---

Stap 2: - De terminal

Lees nogmaals de Syllabus-pagina over de Terminal. Als het goed is, heb je afgelopen week de terminal geconfigureerd. Ben je hier nog niet helemaal uitgekomen, volg dan de stappen op de pagina over de Terminal. Ga daarna door naar de volgende stap.

---

Stap 3: - De terminal gebruiken

• Open de Terminal / Ubuntu

  • tip: gebruik cmd+spatie (Mac) en type Terminal om snel de terminal te openen,
    of gebruik ⊞ (Windows) en type ubuntu.

• In de terminal kan je navigeren door de mappen-structuur van jouw computer, hoe dit systeem is opgebouwd lees je hier.
  Standaard opent de Terminal in je home-folder. Je kan zien in welke folder je bent doordat de naam vooraan elke regel staat

  • bijvoorbeeld: gebruiker@computernaam:~ $ de ~ staat voor de home-folder
  • ander voorbeeld: gebruiker@computernaam:Documents $ als je dit ziet staan ben je in de Documents map
  • het dollar-teken $ is altijd zichtbaar als je een commando mag intypen

• Typ nu pwd en druk vervolgens op enter. Je krijgt nu het volledige pad te zien van de map waarin je bent. (pwd = Path of current Working Directory)

• Met het commando ls (LiSt) kan je zien wat er in de map aanwezig is. Bekijk welke bestanden en mappen er zich in de huidige folder bevinden.

  • Als je het commando ls -lah uitvoert krijg je niet alleen de bestanden te zien, maar ook verborgen bestanden en extra informatie over de bestanden.
  • twee 'bestanden' die in elke map staan zijn . en ...
    . staat voor de huidige map, .. voor de bovenliggende map.

• Met het commando cd (Change Directory) gevolgd door de naam van een map kan je naar die map navigeren

  • stel dat je in de map hku bent met daarin de mappen sysbas, muzbas, klaba en pt:
  • door cd sysbas te typen ga je naar de map sysbas
  • als je daar de mappen max en javascript hebt staan kan je met cd max vervolgens naar de max-map
  • met cd .. kan je één stapje omhoog, dus als je in de max-map bent ga je met cd .. weer terug naar sysbas
  • tip: met de tab-toets kan je automatisch aanvullen. Dus als je in de hku-map bent en de m typt, en daarna tab klikt zal automatisch muzbas worden ingevuld omdat dat de enige map is die met een m begint
  • tip: als je sneller wil navigeren kan je ook door meerdere mappen tegelijk gaan: cd hku/sysbas/javascript/csdosc leidt je in een keer naar de map csdosc
  • als je dit met behulp van tab wil doen is dit wat je op je toetsenbord invult:
    cd h+tab, s+tab, j+tab, c+tab (dit werkt alleen in het geval er geen andere mappen zijn die beginnen met dezelfde letters)

• Kies nu een willekeurige map op je computer (bijvoorbeeld de map waar je jouw vst-plugins in hebt staan) en probeer naar die map te navigeren in de terminal.

• Voer het commando open . uit, daarmee open je de map in Finder (MacOS) of Verkenner (Windows)

  • werkt dit niet op Windows? Voer dan eerst het volgende commando uit: echo "alias open='explorer.exe'" >> ~/.bashrc en start ubuntu opnieuw op

• Ga nu in de Terminal naar de javascript map die je vorige week hebt aangemaakt.
• Maak met het commando mkdir terminal-opdracht (MaKe DIRectory) een nieuwe map met de naam terminal-opdracht en navigeer daar in de Terminal naartoe.
• Voer vervolgens onderstaande commando's uit en beschrijf per commando wat het commando doet/ wat er gebeurt: (gebruik ls en open . om te zien wat er gebeurt)
  1. touch index.html test.txt geluid.wav.
  2. mkdir newFolder
  3. mv index.html newFolder/
  4. mv test.txt bestand.txt
  5. rm geluid.wav
  6. man man
     • bij dit commando zal je zien dat je niet meer verder kan, gebruik q om dit scherm te verlaten
  7. rm newFolder/index.html
  8. rmdir newFolder/
  9. history > geschiedenis.txt
  10. grep "rm" geschiedenis.txt

---

Stap 4:

Neem jouw favoriete stuk software op het gebied van muziek eens onder de loep, beschrijf:

• Wat doet het?
• Waarom vind jij het fijne software?
• Wat is de input -> transformatie -> output?
• Met welke functie zou de software nog beter worden?
• Bedenk eens hoe je die functie zou kunnen implementeren.

---

Stap 5:

Ga naar p5js.org en verken de site. Kijk naar de voorbeelden, probeer wat van de code in de voorbeelden aan te passen en kijk wat er verandert. Scan alvast kort de Reference door en bekijk de verschillende functies van P5js. Bezoek ook de P5js Showcase om je te laten inspireren tot wat er mogelijk is.

Je hoeft P5js niet te downloaden, dit zit inbegrepen in csdosc, dat je al eerder hebt geïnstalleerd.

---

Stap 6:

• navigeer in de terminal naar de map waar csdosc staat (gebruik cd, pwd, ls om te kijken waar je bent en waar je naartoe moet)
• kopieer de map empty-example en geef het de naam p5-experiment, gebruik hiervoor het commando

  cp -rn empty-example p5-experiment

  • cp staat voor copy
  • -rn staat voor recursive, dus hij kopieert niet alleen de map, maar alles wat in die map staat en 'do not overwrite an existing file', zodat als er al een map met die naam bestaat, deze niet wordt overschreven.
  • empty-example is de naam van de map die je wil kopiëren
  • p5-experiment is de naam van de nieuwe map
• open sketch.js uit de nieuwe map met de tekst-editor die je in stap 1 hebt gedownload (gebruik code p5-experiment/sketch.js)
• kopieer de code uit een voorbeeld dat je bij stap 5 hebt gevonden in sketch.js
• sla de code op (cmd+s (macOs), ctrl+s (Windows))
• start de csdosc server via de Terminal (zorg dat je nog steeds in de map csdosc zit en gebruik npm start)
• ga in de browser naar het volgende adres: localhost:8001/p5-experiment
• kijk of de code werkt en pas in sketch.js het een en ander aan en kijk wat er gebeurt
  • _als er niets meer zichtbaar is, is er waarschijnlijk een fout opgetreden, maak dan de wijzigingen ongedaan (cmd/ctrl + z) en begin opnieuw