1: OSC introductie + client

---

De presentatie uit de les is hier terug te vinden.

De code uit de les staat hieronder.

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

//variabelen voor bal-positie
let x,y;
function setup() {
  createCanvas(800,600);
  background(255);
  //maak een nieuwe client-object aan & start client
  client = new Client();
  client.startClient("127.0.0.1",9010);

  //maak een nieuwe server-object aan & start server
  server = new Server();
  server.startServer(9009);

  //dit is om data naar de functie handleOscMessage te sturen
  server.getMessage((address,message)=> {
    handleOscMessage(address,message);
  });
}

//hier stuur je data uit Max door naar plekken in JS
function handleOscMessage(address,message) {
  console.log(address,message);
  if (address === "/test") {
    x = message[0];
    y = message[1];
  }
}

function draw() {
  background(255);
  ellipse(x,y,20);
}

//stuur OSC-data als de muis beweegt
function mouseMoved() {
  client.sendMessage("/x",mouseX);
  client.sendMessage("/y",mouseY);
}

De bijbehorende maxpatch hieronder:

En compacte code (kopieer en kies in Max File -> new from clipboard)

<pre><code>
----------begin_max5_patcher----------
1080.3ocyY00bahCE8Y6eEZX5ScbcPR.Fuu1e.cmYerSmLxXEWxBBORBuNam
le6Ue.ojZRsBRjoSR.aIAGctm68pqT91xEQ6ZNSEQf+B7YvhEea4hEllzMrn
66KhpImKpHByvhJZpqoLYzJaeR5Yoo8O8OeDbhxExVNkAXDBG72oquWzOPVa
cSqrhJMul3tVORjEesjc3VNsPZmFIIqiWAfo1qw5aH0UvW5djx8F7Z1c+GRy
G71KY8ubntsuubo9xp+TnEBYXDZKzEhsIXDiQ+O0a7Bd8dPVb75wYA7kYAFh
MSeXt9VhkDnAjv9ZjObjZefn6pZHpGdLRlNJIQgijjcBvzIYtkiPu3XxbKjE
OTTQeTQST5jUyM5qabPLEkGXjpwYJdtUSAibT70F4ifIyzTKSS7RRQ+g511k
gIHtsv4O+Sd7z4XPx+jr4syicBAmcT05xl6kbljL2L8orPvIKoFdlg8JIDNO
bDssdGkONaPWOkpU1RcvAMZEHZGgcXbB8jO5QBmTSkT9sTFYWEcX4FyUP5Qx
+pjTOxEA2ZuEuwA6vn7OKXBpJ7P8N98B5cM7ZhgBYWmagRhwuIRbMUHHGnWn
w2HoBI3cPv6PSUkQXiMHKcphLbtSO0t+nfx1CfHklo9AB1FGucx0vmY3KDme
AgGvJz1fsFJ8+2SJd7UOcwY54GN0TtSRZ+0QmrgKwYU4I55CjR1SS3SDNS4X
+B89b5jdM5.2ZL9I4VIHygUJVM7S5+rqTtROaDCVwTQAEnDFiVUzzxjCMuCs
U+1bxvQsicMJHmn6ukHk7xcsR5O+jnyf1YQ01rpVZyc8M229PLU4yN7x10mM
zZkBYxpsNdzdKY5d+fYK.izeyd0uFbvizspBGtzwIRu3LFLsrRoP9f0LlX62
360eKPEkUd3wWcltslb8PjMhB5UQJnrYu35WOA6BtRMgU49sUPzruwdQAohB
h0mggt.E35IJnCuNgEtPiWWcVnqqdppo0cMwuZpQy+F6mRDokhVoy2.RzbGP
xUSGJ3lyfadXbhhuFQyrJpKaqueUtQ4Jb7XSbPq0RM4opkATEYAimnvh8Kx7
5meg4oTqVw90i+1Lkzs+bpKZZ4E8X1uWSvOmW6UkQWxHxxF1fAo24sdPiZdc
EI8QqcUjzGKk+Hk5.R58j5ORItvozPfDxEjBhNAcwiHDVuDmrdvPfzFW7HvA
.I8V8uNRgfSXWhm5mN9gzFWQB5KRt36o2Rp2bB4Bmz6mTyo9j178Ttot+2Hn
iuDZneP6RlQTHhsQtDaiBg2IxkHNCw806DgcEIe4DL8YNdu.RgHaOxk0UP3P
woqhTHV+2kjHvKkIasTjiG0+mx6FsACUAi22Xh9xWY9ZIy9UywqFwomJ6Gu4
fehHbU4fRUsfsb6wIbNytGqH8IPvYskcgxJ1ofzTLp9nGDGIVhXpYc42W9Cv
Nb83L
-----------end_max5_patcher-----------
</code></pre>