OSC-les2

---

Hieronder de code uit de les van 17 februari 2022

client-sketch

deze sketch stuurt de positie van de ballen naar de server-sketch. De sketch ontvangt ook data en heeft dus eigenlijk twee functies. Maar de hoofdfunctie is client.

//maak een lijst met ballen
let ballen = [];

//maak een variabele voor de client
//en server.
let client, server;

function setup() {
  createCanvas(800,600);
  background(255);
  //maak een nieuw client-object:
  client = new Client();

  //start de client, voer ip-adres 
  //en poort in
  client.startClient("127.0.0.1",9001);

  //maak een nieuw server-object
  server = new Server();
  //start de server, voer poort in
  //dit moet het poortnummer zijn dat je
  //in de andere sketch bij client hebt
  //ingevuld
  server.startServer(9000);

  //maak een functie die aangeroepen wordt als
  //de server berichten ontvangt.  
  server.getMessage(function(addr,msg) {
    //stuur deze data door naar een aparte functie.
    handleMessage(addr,msg);
  })
}

function draw() {
  background(255);

  //loop door de lijst met ballen
  //voer voor elke bal de draw(), move()
  //en bounce()-functie aan.
  for (let i = 0; i< ballen.length; i++) {
    ballen[i].draw();
    ballen[i].move();
    ballen[i].bounce();
  }
}

//als er data binnenkomt via osc
//wordt deze functie uitgevoerd.
function handleMessage(addr,msg) {
  //als het adres `/addBall` is:
  if (addr === "/addBall") {
    //voeg een nieuwe bal aan de lijst toe
    //de waarden worden aan de constructor 
    //meegegeven
    ballen.push(new Ball(msg[0],msg[1]));
  }
}

//functie die alle posities van alle ballen
//doorstuurt.
function sendPositions() {
  for (let i = 0; i< ballen.length; i++) {
    //roep de `sendPosition()`-functie aan.
    ballen[i].sendPosition();
  }
}

//classbeschrijving voor een bal
class Ball {
  //bepaal in de constructor x, y, s
  //een x- en y-speed variabelen
  constructor(x,y) {
    this.x = x;
    this.y = y;
    this.s = random(10,20);
    this.xSpeed = random(-4,4);
    this.ySpeed = random(-4,4);
  }

  //method om de bal te tekenen
  draw() {
    ellipse(this.x,this.y,this.s);
  }

  //method om de bal te laten stuiteren
  bounce() {
    if(this.x > width - this.s/2 || this.x < this.s/2) {
      this.xSpeed *= -1;
      //bij elke stuiter wordt de `sendpositions()`-
      //functie aangeroepen
      sendPositions();
    }
    if(this.y > height - this.s/2 || this.y < this.s/2) {
      this.ySpeed *= -1;
      sendPositions();
    }
  }
  //method om de bal te laten bewegen
  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }
  //method om de data door te sturen 
  //naar de andere sketch
  sendPosition(){
    //sendMessage stuurt naar het adres `/position`
    //de andere waarden erachter worden als array
    //doorgestuurd.
    client.sendMessage("/position",this.x,this.y,this.s);
  }
}

server-sketch

deze sketch ontvangt de data die vanuit de client verstuurd is. Door te klikken kan je wel via de client-functie in deze sketch data doorsturen naar de andere sketch.

//maak twee variabelen aan: 
//1 voor de server
//1 voor de client
let server, client;

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

  //maak een nieuw client-object:
  client = new Client();

  //start de client, voer ip-adres 
  //en poort in
  client.startClient("127.0.0.1",9000);

  //maak een nieuw server-object:
  server = new Server();
  //start de server, voer poortnummer in
  //dit moet het poortnummer zijn dat je
  //in de andere sketch bij client hebt
  //ingevuld
  server.startServer(9001);

  //maak een functie die aangeroepen wordt als
  //de server berichten ontvangt.
  server.getMessage(function(addr,msg) {
    //als het adres `/position` is 
    //teken dan een ellipse met de data uit 
    //de andere sketch.
    if (addr === "/position") {
      ellipse(msg[0],msg[1],msg[2]);
    }
  });
}

function draw() {

}

function mousePressed() {
  //als je op de muis drukt stuur je een bericht
  //aan de andere sketch.
  client.sendMessage("/addBall",mouseX,mouseY);
}