6. OSC communicatie

---

* Uitgedeeld op 20 november 2025.
* Deadline: aftekenen in de les, uiterlijk 18 december 2025.
* Met deze opdracht denken we dat je zo'n 1 - 3 uur bezig bent tot deel e. Voor verdere stappen ben je waarschijnlijk wat meer tijd kwijt.
* Bronnen bij deze opdracht: Syllabus | P5.js Sound reference
* Schrijf commentaar bij de code die je maakt, zodat duidelijk wordt wat je doet.

Je gaat in deze opdracht een instrument met je telefoon maken. Op je telefoon meet je meerdere aanrakingen op het scherm die je naar je computer stuurt met OSC. Vervolgens maakt de computer polyfoon geluid bij de aanrakingen.

---

a. OSC documentatie & test

• Lees de documentatie over OSC goed door. Deze kan je vinden in de Syllabus.
• Installeer eduVPN op je computer én telefoon.
• Zorg dat je verbonden bent via eduVPN op zowel je computer als telefoon terwijl je aan deze opdracht werkt. Je kan thuis ook verbinding maken met eduVPN.
• Bij het installeren van csdosc aan het begin van dit jaar zijn er naast empty_example nog twee andere voorbeelden meegekomen: example_client en example_server
  • Start csdosc op
  • Ga naar localhost:8001 op je computer en open example_server.
  • Zoek in eduVPN op je computer het IP adres van je computer op. Typ dit IP-adres gevolgd door :8001 in je browser op je telefoon en open example_client.
  • In example_client kan je een cirkel bewegen door je telefoon aan te raken. Kijk of de cirkel meebeweegt in de example_server op je computer.
  • Werkt dit? Ga door naar het volgende deel, zo niet ga naar een docent of student-assistent

---

b. Controller

• Maak een nieuwe sketch aan met de naam opdracht_6_controller. In deze sketch gaan we aanrakingen van het scherm meten en doorsturen met OSC.
• Open de index.html en vervang alles tussen <style> en </style> met de volgende code. Dit voorkomt dat de pagina ververst als je van boven naar beneden over het scherm beweegt.

html, body {
    overscroll-behavior: none;
    user-select: none;
    touch-action: none; 
    padding: 0; 
    margin: 0; 
    background-color: #DDDDDD;
}

• Sluit index.html in je editor, deze heb je verder niet meer nodig.
• Ga verder in de sketch.js en zorg dat het canvas van je sketch het hele scherm vult.
• Visualiseer de aanrakingen op het scherm:
  • De touches variabele bevat een array met daarin de coördinaten van aanrakingen. De coördinaten van een aanraking kan je vinden met:

touches[i].x
touches[i].y

• Gebruik een for-loop om een cirkel te tekenen voor elke aanraking in touches:

for (let i = 0; i < touches.length; i++) { 
    // de positie van aanraking i 
    // kan je vinden in touches[i].x en touches[i].y 
}

---

c. OSC berichten versturen

• Voeg een OSC-client toe aan opdracht_6_controller, gebruik de example_client als voorbeeld.
• Stuur alle aanrakingen door via OSC naar de computer:
  • In de for loop die je hebt gemaakt in b stuur je een OSC bericht naar "/touch" met daarin het nummer van de aanraking (i) en de coördinaten (touches[i].x en touches[i].y). Bekijk de syllabus voor een voorbeeld hoe je OSC berichten kan sturen.

---

d. Synth

• Maak een tweede (nieuwe) sketch aan met de naam opdracht_6_synth. In deze sketch gaan we aanrakingen die we binnen krijgen met OSC ontvangen en omzetten naar polyfoon geluid.
• Maak arrays van tenminste 5 units lang aan voor:
  • x en y coördinaten
  • sinus oscillators
• Gebruik een for-loop om op alle coördinaten een cirkel te tekenen ter visualisatie van de aanrakingen.

---

e. Aansturen met OSC

• Voeg een OSC-server toe aan opdracht_6_synth, gebruik de example_server als voorbeeld.
• Verwerk de binnenkomende OSC berichten met het adres "/touch". Bekijk de syllabus voor een voorbeeld hoe je OSC berichten kan ontvangen.
  • Sla het x en y coördinaat van de aanraking op in de arrays die je hebt gemaakt in d.
  • Gebruik het x coördinaat om de frequentie de bijhorende oscillator aan te passen.
• Om te zorgen dat je het geluid van de oscillatoren ook kan horen op je computer moet je ergens userStartAudio() aan roepen. Bijvoorbeeld als je op het scherm klikt met je muis:

function mousePressed() {
  userStartAudio();
}

(beoordeling: voldoende)

---

f. Verfijning

• Nu hoor je altijd alle 5 oscillatoren en zie je altijd 5 cirkels. Zorg dat je alleen de oscillatoren hoort en cirkels ziet die horen bij aanrakingen op de telefoon. Tip: als weet hoeveel vingers het scherm aanraken, weet je dan hoeveel oscillators en cirkels er actief moeten zijn?
• Zorg dat de oscillatoren alleen semitonen spelen.

(beoordeling: goed)

---

h. Uitdaging

Kies een of meer van onderstaande opdrachten voor een zeer goed:

• Zorg dat er een toonsoort kan worden ingesteld.
• Voeg een effecten of LFO's toe die indirect aangestuurd worden door aanrakingen: bijvoorbeeld door de snelheid van beweging (delta coördinaat), de afstand tussen verschillende aanrakingen of de oppervlakte tussen de verschillende aanrakingen.
• Maak het mogelijk om zowel glides, vibrato en/of pitch bends te kunnen spelen maar ook noten uit een toonsoort.

(beoordeling: zeer goed)