WiFi WeMos OSC Processing

WiFi WeMos OSC Processing conclude la serie di articoli dedicati alla trasmissione i2c e Osc da WeMos.

Se hai letto i precedenti articoli:

• Attiny85 IIC WeMos
• WiFi Wemos IIC Attiny85

sai che abbiamo acquisito i segnali analogici e digitali di un joystick mediante attiny85 e trasferito tali informazioni alla WeMos via I2C perchè potesse codificarla e rimandarla sulla rete WiFi con il protocollo OSC.

In questo articolo leggerai come realizzare u programma in Processing per la ricezione di tali informazioni ed il render grafico della posizione del joystick.

Lo schema dei collegamenti non è presente in questo articolo in quanto lavorerai solo sul computer e non sulle componenti hardware.

Lo sketch WiFi WeMos OSC Processing

WiFi WeMos OSC Processing sketch deve essere eseguito in Processing e NON nell’IDE arduino in quanto, sebbene graficamente simili, non sono identici.

import oscP5.*;
import netP5.*;
  
OscP5 oscP5;

void setup() {
  size(300,300);
  frameRate(30);
  //set this to the receiving port
  oscP5 = new OscP5(this,9001);
}


void draw() {
  background(0); 
  
  textSize(12);
  text("digital:", 50, 260);
  text(digitalValue1, 150, 260);
  text("analog0:", 50, 270);
  text(mouseStepX, 150, 270);
  text("analog1:", 50, 280);
  text(mouseStepY, 150, 280);
  //make a box where it should go
  noFill();
  stroke(255);
  rect(50, 20, 200, 200);
  //and a square where the mouse is
  if (digitalValue1 == 0) fill(255,0,0);
  else                    fill(255);
  float mouseXPos = map(mouseStepX, 1024, 0, 50, 230);
  float mouseYPos = map(mouseStepY, 0, 1024, 20, 200);
  rect(mouseXPos, mouseYPos, 20, 20);
  fill(255);
}

int digitalValue1 = 0;

int mouseStepX = 0;
int mouseStepY = 0;

// incoming osc message are forwarded to the oscEvent method. 
void oscEvent(OscMessage theOscMessage) {
  //println(theOscMessage.addrPattern());
  if (theOscMessage.addrPattern().equals("/analog/0")){
    mouseStepX = theOscMessage.get(0).intValue();
  } else if(theOscMessage.addrPattern().equals("/analog/1")){
    mouseStepY = theOscMessage.get(0).intValue();
  } else if(theOscMessage.addrPattern().equals("/digital/1")){
    digitalValue1 = theOscMessage.get(0).intValue();
  }
}

Descrizione dello sketch

le prime due linee 01 e 02: importano le librerie osc e net necessarie alla comunicazione di rete ed al protocollo OSC;

linea 04: inizializza la classe OscP5 definendo l’oggetto oscP5;

linea 07: definisci la dimensione della finestra in pixel;

linea 08: stabilisci il framerate di refresh dell’immaine a 30fps;

linea 10: usa l’istanza oscP5 come nuovo oggetto in ascolto sulla porta 9001;

linea 15: imposta lo sfondo nero;

linee 17-23: imposta la dimensione del font e scrivi i testi delle linee 18,20,22 seguite dai valori 19,21,23 che saranno popolati dai dati ricevuti via network;

linea 25: imposta che la prossima figura disegnata sia vuota;

linea 26: imposta il bordo bianco;

linea 27: disegna un quadrato, ache se definito come rettangolo, di 200×200 pixel partendo dalla coordinata 50x 20y;

linee 29-30: se il valore digitale presente sullo switch è 0 imposta il riempimento della figura, che disegnerai alla linea 33, come “rosso”, altrimenti bianco;

linee 31-32: calcola la posizione di X e Y rimappando i valori letti dal Joystick per ogni canale da 0 a 1023 in luogo delle coordinate del quadrato disegnato 50,230;

linea 33: disegna un rettangolo 20×20 in posizione X ed Y come calcolate alle lilnee precedenti;

linea 34: riporta il riempimento a bianco per essere certo che indifferentemente dal valore dello switch i successivi disegni abbiano riempimento bianco;

Il video 

Il video è la dimostrazione del WiFi WeMos OSC Processing partedo dal processo di acquisizione dei dati dal Joystick, la trasmissione WiFi OSC fino a Processing per la visualizzazione:

ho cercato di ottenere la migliore sincronia possibile tra le due componenti del video.