OSC – Définition + Exemples pratiques basiques

Interaction Design
tags : OSC • Processing

L’OSC est l’acronyme d’Open Sound Control. C’est un for­mat de mes­sage (ce qui per­met de faire com­mu­ni­quer dif­fé­rents péri­phé­riques) via un réseau infor­ma­tique, qu’il soit filaire ou wifi. Il uti­lise le réseau au tra­vers des pro­to­coles UDP ou TCP et apporte des amé­lio­ra­tions en termes de rapi­dité et flexi­bi­lité par rap­port à l’ancienne norme MIDI.

Il a été mis au point par Mat­thew Wright et Adrian Feed au CNMAT (Cen­ter for New Music and Audio Tech­no­lo­gies), centre de recherche mul­ti­dis­ci­pli­naire au cein du depar­te­ment de musique de l’université de Ber­ke­ley. Il a été ori­gi­nel­le­ment conçu pour par­ta­ger des don­nées de per­for­mances musi­cales (gestes, para­mètres, séquence) entre dif­fé­rents sup­ports mul­ti­me­dia, d’où son nom. Très utile aujourd’hui pour faire com­mu­ni­quer des ter­mi­naux sans connec­tique ou doté de peu de connec­tique (tablettes (iPad, android…), smart­phones…) soit avec un (des) ordinateur(s) ou avec un autre ter­mi­nal mobile.

Exemples

Lemur

Le Lemur est un péri­phé­rique, une srte de tablette dédiée, uti­li­sant l’OSC comme for­mat d’échange de mes­sage. Bien avant l’iPad, il pro­pose une sur­face tac­tile mul­ti­point très uti­lisé en live pour le per­for­mance en temps réél des musi­ciens (les Daft Punk notam­ment). L’avantage du Lemur, par rap­port à des inter­faces phy­sique MIDI plus tra­di­tion­nelles est qu’il pro­pose une inter­face gra­phique tota­le­ment modu­laire et tac­tile. Les uti­li­sa­teurs peuvent choi­sirent et pro­gram­mer les élé­ments de jeu qu’ils sou­haitent uti­li­ser (bou­tons rota­tifs, sli­ders, pad..). Avec le suc­cès de l’iPad, Jazz­mu­tant (les fabri­cants du Lemur) a trans­posé les dif­fé­rentes fonc­tions de leur inter­face phy­sique sous forme d’appli pour la tablette d’Apple.

Touch OSC

Touch OSC est une appli­ca­tion pour iOS (iPad, iPhone) qui reprend les grands prin­cipes d’interfaçages gra­phiques du Lemur. Mêmes prin­cipes modu­laires (direc­te­ment édi­tables sur ordi­na­teurs pour les expor­ter vers les péri­phé­riques mobiles). Cette appli per­met d’envisager les péri­phé­riques mobiles comme des télé­com­mandes de logi­ciels audio (Able­ton Live, MAX MSP, Pure Data) ou de VJing (Resolume).

Plus d’expliactions sur Tou­chOSC et son édi­teur sur ordinateur :

http://www.creativeapplications.net/iphone/touchosc-editor-iphone-mac-windows/

MSA Fluid

MSA FLuid est un exemple d’utilisation de l’OSC. Il montre com­ment uti­li­ser un des­sin réa­lisé sur un smart­phone pour contro­ler la géné­ra­tion d’un sys­tème de par­ti­cules distant.

Uti­li­sa­tion des cap­teurs d’une tablette pour inter­gair sur un modèle 3D

Pra­tique

Outil

OSCu­la­tor est un logi­ciel qui peut s’avérer très utile quand on mani­pule des mes­sages OSC. C’est un outil d’analyse et de rou­tage des mes­sages. Le rou­tage per­met notam­ment de trans­for­mer des mes­sage OSC en mes­sage MIDI.

1 – Faire com­mu­ni­quer 2 applets Pro­ces­sing via OSC

!! S’assurer de la désac­ti­va­tion du pare-feu de vos ordi­na­teurs (Menu Pomme > Sécu­rité > Coupe-Feu)

Pro­ces­sing per­met d’utiliser l’OSC faci­le­ment. Il faut préa­la­ble­ment ins­tal­ler la biblio­thèque externe OSCP5.

Avant de com­men­cer cet exemple, il est néces­saire de connaître les dif­fé­rentes adresses IP des péri­phé­riques que nous sou­hai­tons faire com­mu­ni­quer. En effet, chaque péri­phé­rique infor­ma­tique sur un réseau est iden­ti­fié par une adresse IP. Pour pou­voir envoyer un mes­sage d’un péri­phé­rique vers un autre il est néces­saire d’indiquer la loca­tion (ici sous forme d’une adresse IP) vers laquelle nous sou­hai­tons l’envoyer.

Pour cet exemple pra­tique, nous allons uti­li­ser la posi­tion du cur­seur de la sou­ris dans une applet Pro­ces­sing sur un ordi­na­teur pour dépla­cer un cercle sur une Applet Pro­ces­sing sur un autre ordi­na­teur pré­sents sur un même réseau.

Voici le schéma et les adresses IP, des mes­sages OSC et variables des dif­fé­rents que nous sou­hai­tons faire com­mu­ni­quer dans notre exemple.

Et voici la video mon­trant ce que nous allons par­ve­nir à réa­li­ser :

Sketch à lan­cer sur l’ordinateur 1 (serveur) :

// on importe la bibliothèque OscP5
import oscP5.*;
import netP5.*;

//création d'un objet OscP5 appelé 'oscP5'
OscP5 oscP5;
NetAddress myRemoteLocation;

void setup() {
  size(600,600);
  frameRate(25);
  //paramétrage de l'objet oscP5 qui recevra les données 
  // sur le port 9000
  oscP5 = new OscP5(this, 9000);

 //on créée une adresse IP '192.168.1.12' (adresse IP ordinateur 2) et un port (7000)
 // où envoyer les données
  myRemoteLocation = new NetAddress("192.168.1.12", 7000);
}

void draw() {
  background(127); 
    //on créee un message osc avec l'adress pattern '/positionsCurseur'
  OscMessage myMessage = new OscMessage("/positionsCurseur");
  //et on ajoute la valeur de la poisition X et position Y du curseur de la souris sur la scene du sketch au message
  myMessage.add(mouseX); 
  myMessage.add(mouseY); 

  //on envoie le message
  oscP5.send(myMessage, myRemoteLocation); 
}

Télé­char­ger le sketch

Sketch à lan­cer sur l’ordinateur 2 (Client) :

// on importe la bibliothèque OscP5
import oscP5.*;
import netP5.*;

//création d'un objet OscP5 appelé 'oscP5'
OscP5 oscP5;

//on créée 2 variables qui vont nous
//permettre d'assigner les valeurs des fader de touchOSC
//aux coordonnées de notre cercle
float positionX, positionY;

void setup() {
  size(600, 600);
  //paramétrage de l'objet oscP5 qui recevra les données 
  // sur le port 7000
  oscP5 = new OscP5(this, 7000);
  //au départ, on place notre cercle au centre
  positionX = width/2;
  positionY = height/2;
  //on desactive les dessin des contours
  noStroke();
}

void draw() {
  //arriere plan blanc
  background(255);
  //on lisse notre affichage
  smooth();
  //on donne la couleur rouge à notre cercle
  fill(255, 0, 0);
  //on assigne les coordonnées variables à notre cercle
  ellipse(positionX, positionY, 20, 20);
}

/* methode oscevent permettant d'ecouter les evenements OSC */
void oscEvent(OscMessage theOscMessage) {
  // si l'applet reçoit un messag OSC avec l'address pattern "/positionsCurseur"
  if (theOscMessage.checkAddrPattern("/positionsCurseur")==true) {
    //on assigne les valeurs de l'index 0, de type integer (.intValue)  du message OSC 
    //à la variable positionX que l'on assignera à la coordonnée x de notre cercle
    positionX = theOscMessage.get(0).intValue();
    //on assigne les valeurs de l'index 1, de type integer (.intValue)  du message OSC 
    //à la variable positionY que l'on assignera à la coordonnée y de notre cercle
    positionY = theOscMessage.get(1).intValue();
  }
}

Télé­char­ger le sketch

2 – Faire com­mu­ni­quer Tou­chOSC et une applet Pro­ces­sing via OSC

Nous allons créer une applet Pro­ces­sing qui va rece­voir les don­nées de l’appli Tou­chOSC lan­cée sur un smartphone.

Nous allons réa­li­ser ce sketch (dépla­ce­ment d’un cercle rouge : fader 5 fait dépla­cer le cercle selon l’axe X, et fader1 fait dépla­cer le cercle selon l’axe Y) :

Voici le schéma de com­mu­ni­ca­tion entre les périphériques :

Réglages de l’appli Tou­chOSC sur le smartphone :

Une fois réglé, nous allons pou­voir choi­sir le layout Simple. Voici ce que nous aurons à l’écran et les cor­res­pon­dances de l’interface gra­phique avec les fader 1 et fader 5 :

Et voici le code de l’applet qui rece­vra les don­nées de tou­chOSC sur l’ordinateur :

// on importe la bibliothèque OscP5
import oscP5.*;
import netP5.*;

//création d'un objet OscP5 appelé 'oscP5'
OscP5 oscP5;

//création d'un objet permettant l'échange d'information
//à partir d'une adresse IP
// et d'un port
NetAddress myRemoteLocation;

//on créée 2 variables qui vont nous
//permettre d'assigner les valeurs des fader de touchOSC
//aux coordonnées de notre cercle
float positionX, positionY;

void setup() {
  size(600, 600);
  frameRate(25);
  //paramétrage de l'objet oscP5 qui recevra les données 
  // sur le port 7000 (paramétrer ToucOsc - menu options : 'outgoing port : 7000')
  oscP5 = new OscP5(this, 7000);
  //au départ, on place notre cercle au centre
  positionX = width/2;
  positionY = height/2;
  //on desactive les dessin des contours
  noStroke();
}

void draw() {
  //arriere plan blanc
  background(255);
  //on lisse notre affichage
  smooth();
  //on donne la couleur rouge à notre cercle
  fill(255, 0, 0);
  //on assigne les coordonnées variables à notre cercle
  ellipse(positionX, positionY, 20, 20);
}

/* methode oscevent permettant d'ecouter les evenements OSC */
void oscEvent(OscMessage theOscMessage) {
  if (theOscMessage.checkAddrPattern("/1/fader5")==true) {
    //on assigne les valeurs du fader5 de touchOSC à la positionX de notre cercle
    // la fonction 'map' nous permet de transformer l'echelle des valeurs du fader 5 (de 0 à 1)
    // à la largeur de notre scene (de 0 à width)
    positionX = map(theOscMessage.get(0).floatValue(), 0, 1, 0, width);
  }
  if (theOscMessage.checkAddrPattern("/1/fader1")==true) {
     //on assigne les valeurs du fader1 de touchOSC à la positionY de notre cercle
    // la fonction 'map' nous permet de transformer l'echelle des valeurs du fader1 (de 1 à 0)
    // à la hauteur de notre scene (de 0 à hauteur)
    positionY = map(theOscMessage.get(0).floatValue(), 1, 0, 0, height);
  }
}

Télé­char­ger le sketch