2b: OSC client & server

---

Hieronder de code uit de tweede les van 15 februari:

client

//client

//maak variabelen aan voor client en server
let client, server;

//maak array aan voor objecten
let explosions = [];

function setup() {
  createCanvas(800,600);
  background(255);

  //start de client, verstuur naar poort 9000
  client = new Client();
  client.startClient("127.0.0.1",9000);

  //start de server, luister op poort 9001
  server = new Server();
  server.startServer(9001);

  //als er data binnenkomt, stuur door naar de oscHandler-functie
  //adres (bijv /synth1) en waardes (bijv 40) gescheiden
  server.getMessage(function(addr,val){
    oscHandler(addr,val);
  });
}

function draw() {
  background(0);
  //voer functies uit class uit.
  for (let i = 0; i < explosions.length; i++) {
    explosions[i].explode();
    explosions[i].draw();
  }
}

function mousePressed() {
  //voeg explosie toe na muisklik
  //geef muispositie + indexnummer uit array mee.
  explosions.push(new Explosion(mouseX,mouseY,explosions.length));
}

//functie die binnenkomende osc-data verwerkt
function oscHandler(addr,val) {
  if (addr === "/water") {
    //als er data binnenkomt, voer de blus-functie uit
    //van het object met het indexnummer dat in 
    //val[2] wordt opgeslagen.
    explosions[val[2]].blus();
  }
}

class Explosion {
  constructor(x,y,i) {
    console.log(i);
    this.x = x; //x-positie
    this.y = y; //y-positie
    this.s = 0; //grootte
    this.c = 'orange'; //kleur
    this.sent = false; //bericht verzonden?
    this.explosionSpeed = random(2); //snelheid
    this.exploded = false; //geëxplodeerd?
    this.dontdraw = false; //mag tekenen?
    this.i = i; //indexnummer in array;
  }
  explode() {
    //voeg snelheid toe aan grootte
    this.s+=this.explosionSpeed;

    //als groter dan 100 & nog niet verzonden:
    if (this.s > 100 && this.sent === false) {
      //verzend bericht naar server in andere sketch
      client.sendMessage("/boem",this.x,this.y,this.i);
      //zet variabele om zodat het niet nog eens gebeurt.
      this.sent = true;
    }
    //als groter dan 500 & nog niet gekrompen
    if (this.s > 500 && this.exploded === false) {
      //pas speed aan
      this.explosionSpeed = -10;
      //zet variabele om zodat het niet nog eens gebeurt
      this.exploded = true;
    }

    //als kleiner dan 0 en geexplodeerd is
    if (this.s < 0 && this.exploded === true) {
      //zet teken-variabele (zie draw-method in deze class) om
      this.dontdraw = true;
    }
  }
  draw() {
    //als dontdraw false is, dan mag er getekend worden
    if (this.dontdraw === false) {
      fill(this.c);
      ellipse(this.x,this.y,this.s);  
    }
  }
  blus() {
    //maak de kleur blauw
    this.c = 'blue';
  }
}

---

server

//server

//maak variabelen aan voor server en client
let server, client;

function setup() {
  createCanvas(800,600);
  background(255);

  //start de server luister naar poort 9000
  server = new Server();
  server.startServer(9000);

  //als er data binnenkomt, stuur door naar oscHandler
  //adres (bijv /synth1) en waardes (bijv 40) gescheiden
  server.getMessage(function(addr,val){
    oscHandler(addr,val);
  });

  //start de client, verstuur naar poort 9001
  client = new Client();
  client.startClient("127.0.0.1",9001);

}

function draw() {
  //hier gebeurt niets.  
}

//functie die binnenkomende osc-data verwerkt
function oscHandler(addr,val) {
  //als het adres gelijk is aan /boem
  if (addr === "/boem") {
    //plaats de tekst 'help' op de locatie
    //van de explosie uit de andere sketch
    text("help!",val[0],val[1]);

    //stuur een bericht terug naar de client
    client.sendMessage("/water",val);
  }
}