osc


Open Sound Control

Open Sound Control (OSC) is een protocol om berichten te versturen over een netwerk. Dit gaat om zogenoemde controller-data. Je kunt dus beter geen audio via OSC versturen. OSC wordt ondersteund door een groot aantal softwarepaketten waaronder Max, Pure Data, Supercollider, Reaper, Live (via Max for Live), Logic e.a. Ook zijn er verschillende apps voor op je telefoon of tablet die OSC ondersteunen, zo kan je makkelijk een draadloze controller maken voor jouw software.


Hoe werkt OSC?

OSC maakt gebruik van het User Datagram Protocol (UDP), een internetprotocol waarmee data verstuurt kan worden. Via dit protocol worden de berichten van de ene naar de andere computer, of binnen een systeem van het ene naar het andere programma gestuurd.
Berichten die via UDP worden verstuurd worden naar een bepaalde vooraf gekozen poort verstuurd.

ip-adressen en poorten

Elke computer in een netwerk heeft een IP-adres. En op deze computer zijn een aantal poorten beschikbaar om data naar te versturen. Je kunt een IP-adres / poort-structuur alsvolgt zien:
Het IP-adres is vergelijkbaar met een huis-adres in de echte wereld. Dus waarbij een IP-adres er als volgt uit kan zien: 172.217.168.196, ziet een echt adres er zo uit: Ina Boudier-Bakkerlaan 50 Utrecht.

In het gebouw van de HKU aan de Ina Boudier-Bakkerlaan heb je een groot aantal lokalen. Je kunt deze lokalen vergelijken met poorten in een netwerkstructuur. Waarbij de poorten in een netwerk maar een service tegelijkertijd kan leveren. Net zoals er in de leslokalen maar een les tegelijk mogelijk is. Als een poort dus de functie heeft om websites te tonen, dan kan deze niet ook nog e-mail ontvangen. Daar moet dan een aparte poort voor worden gebruikt.

Naast je publieke IP-adres heb je ook nog een IP-adres op je lokale netwerk. Dit is meestal iets als 192.168.x.x. Als je twee computers in een lokaal netwerk berichten wil versturen kan je dit IP-adres gebruiken.

Een speciaal IP-adres is 127.0.0.1, dit is voor iedere computer de verwijzing naar zichzelf. Als je dus een bericht wil sturen naar een applicatie op je eigen computer kan je dat ip-adres gebruiken. Net zoals je, als je naar een ander lokaal in de HKU wil verwijzen, je niet het adres hoeft te noemen, maar kan verwijzen naar de IBB.

Als je een bericht wil versturen naar een computer heb je dus zowel het ip-adres als het poortnummer nodig. Als je berichten wil ontvangen hoef je alleen maar aan te geven welk poortnummer je open zet. Vanaf elke computer in dat netwerk is het dan mogelijk om berichten te sturen.

controleren wat je IP-adres is

publieke IP-adres:

Typ in de terminal: curl ifconfig.co

lokale IP-adres:

Typ in de terminal: ipconfig getifaddr en0 als je WiFi gebruikt
Typ in de terminal: ipconfig getifaddr en1 als je bedraad internet gebruikt


OSC en P5js

Om van OSC gebruik te maken binnen P5js moet je gebruik maken van de oscServer die je in semester 1 ook hebt gebruikt. Op: https://github.com/csdhku/csdosc staat een bijgwerkte versie met een tweetal voorbeelden.

belangrijk: wil je een nieuwe sketch makan waarin OSC goed werkt? Maak dan een nieuwe sketch aan vanuit example_client in plaats vanuit empty_example het zou kunnen dat de html-pagina in empty_example niet helemaal up to date is.

een complete html-file ziet er als volgt uit:

<!DOCTYPE html>
<html>
  <head>
    <script src="../Library/p5.js"></script>
    <script src="../Library/addons/p5.sound.js"></script>
    <script src="../Library/socket_io.js"></script>
    <script src="../oscLib.js"></script>
    <script src="sketch.js"></script>
  <style> body {padding: 0; margin: 0; background-color:#DDDDDD;} </style>
  </head>
  <body>
  </body>
</html>

Je start als eerste de node.js webserver. node oscServer.js. Bij het opstarten geeft deze aan via welke poort hij webpagina's kan openen. In je browser kun je naar die poort verwijzen op de volgende manier: localhost:8001/example_client wat dan ook meteen de p5js-sketch uit example_client uitvoert.

In dit plaatje zie je dat de browser meerdere windows kan openen, bijvoorbeeld een server en een client, die allebei verbinding zoeken met poort 8001 van node.js. Vervolgens kunnen ze via node.js een OSC-verbinding maken met elkaar of zoals in het plaatje met Max op een andere poort. In het plaatje en in de voorbeelden is poort 9000 gekozen.

Let op dat je niet twee servers naar dezelfde poort laat luisteren. Als je de example_server in de browser ook naar poort 9000 laat luisteren zitten de server en Max elkaar in de weg.

OSC Server in P5js

In de onderstaande code staat een voorbeeld van en OSC-server in P5js. De server ontvangt berichten. Daarbij hoef je dus alleen maar aan te geven naar welke poort de server moet luisteren. Je hoeft geen IP-adres op te geven aangezien de server van elke computer berichten kan ontvangen.

/* Voorbeeld-sketch voor het gebruik van Open Sound Control in P5js - server
 * Deze sketch luistert naar berichten die worden gestuurd naar poort 9000.
 */

//aanmaken van de benodigde variabelen.
let server;
let connect
let x, y;

function setup() {
  createCanvas(640,480);

  //maak een connect-object aan dat zorgt voor de 
  //communicatie met oscServer.js
  connect = new Connect();

  //maak verbinding met oscServer.js, en voor code 
  //tussen {} uit zodra deze verbinding tot stand is gekomen.
  connect.connectToServer(function() {
    //maak een nieuw server-object aan.
    server = new Server();

    //start de server en zorg dat deze gaat luisteren 
    //naar poort 9000
    server.startServer(9000);

    //als de server een bericht ontvangt voert deze de 
    //functie oscReceiver uit en geeft deze twee 
    //argumenten mee: address en msg.
    server.getMessage(function(address,msg) {
      oscReceiver(address,msg);
    });
  });
  x = 100;
  y = 100;
}

function draw() {
  background(50,0,220);
  ellipse(x,y,25);
}

//de functie die aangeroepen wordt als 
//er OSC-data binnenkomt
function oscReceiver(address,value) {
  //als de variabele address gelijk is aan /y 
  //wordt de code tussen de {} uitegevoerd
  if (address === "/y") {
    y = value;
  }
  //als de variabele address gelijk is aan /x 
  //wordt de code tussen de {} uitegevoerd
  else if (address == "/x") {
    x = value;
  }
}

OSC-client in P5js

In onderstaande code staat uitgelegd hoe je vanuit P5js OSC-berichten kan versturen. Bij het aanmaken van een client moet je zowel IP-adres als poortnummer invoeren, je moet weten naar welke computer je iets moet versturen en naar welke poort de server op die computer staat luistert.

/* voorbeeld-sketch voor het gebruik van Open Sound Control in P5js - client
 * Deze sketch stuurt berichten naar het IP-adres 127.0.0.1 en poort 9000
 */

//aanmaken van de benodigde variabelen.
let client;
let connect;
let x, y;

function setup() {
  createCanvas(640,480);
  //maak een connect-object aan dat zorgt voor de 
  //communicatie met oscServer.js
  connect = new Connect();

  //maak verbinding met oscServer.js, en voer code tussen 
  //{} uit zodra deze verbinding tot stand is gekomen.
  connect.connectToServer(function() {
    //maak een nieuwe client-object aan.
    client = new Client();

    //start de client en laat deze berichten sturen 
    //naar het ip-adres 127.0.0.1 en poort 9000
    client.startClient("127.0.0.1",9000); 
  });

  x = 100;
  y = 100;
}

function draw() {
  background(220,0,50);

  //laat een ellipse zien op de positie van de muiscursor.
  ellipse(mouseX,mouseY,25);
}

function mouseMoved() {
  if (client) {
    //stuur een bericht naar het adres /x 
    //met als waarde de x-positie van de muis
    client.sendMessage("/x",mouseX);

    //stuur een bericht naar het adres /y 
    //met als waarde de y-positie van de muis.
    client.sendMessage("/y",mouseY);
  }
}

Opbouw van een bericht

Een OSC-bericht bestaat uit twee delen: een adres en een waarde.
De waarde is altijd een of meerdere getal(len) of woord(en).
Het adres begint met een / en bestaat uit één of meer woorden die aan elkaar worden gekoppeld met een /.

Een voorbeeld van een bericht met één woord als adres is:
/x 15

Het adres is hierbij /x en de waarde is 15.

een voorbeeld met meerdere adres-regels is:
/synth/oscillator1/pitch 440
/synth/oscillator1/amplitude 0.5
op deze manier kun je berichten sturen naar verschillende onderdelen van een synthesizer.