OSC library for p5.js

cdeepak

Hey everyone, I'm Deepak, a Music Tech grad. I'm interested in the interfacing of browser based Processing sketches with musical programming environments like Pure Data.

I'm currently looking at ways of reading/writing OSC packets using Javascript and I was wondering what are the thoughts of the Processing community on implementing such a library. Also, any suggestions regarding working with OSC in JS would be greatly helpful.

Thanks!

shiffman

I agree this would be very useful for p5.js. Take a look at this repo as a reference:

https://github.com/genekogan/p5js-osc

cdeepak

Thanks for the reply, Daniel.

What would an OSC library consist of? Since p5.js involves client-side programming, it would contain functions to encode and decode OSC messages. The actual creation of connections couldn't possibly be included in such a library(or could it?).

shiffman

@cdeepak, yes that sounds right to me. Another good reference for functionality is the Processing OSC library: http://www.sojamo.de/libraries/oscP5/

cdeepak

I'd actually earlier gone through the oscP5 library and am currently working on a proof of concept using that as a reference. I'm planning on posting a draft proposal along with the POC in 2-3 days to have it reviewed from the community.

Thanks for the help so far!

shiffman

Great!

danieldaniel

@cdeepak Did you make much headway on this? I'm trying to send OSC from p5-js to SuperCollider and I'm in way over my head. Trying to use the p5js-osc but I don't understand how to include it in my own sketches.

gilFuser

Hi there. @danieldaniel This is an example of how you do it. In the sketch.js, in p5js-osc/examples/p5-basic change the sendOsc function for something like this one:

function mySendOsc( value) {
    var value = {
        x: mouseX,
        y: mouseY
    };
    if (mouseIsPressed) {
        ellipse(mouseX, mouseY, 50, 50);
        socket.emit('message', [value.x, value.y]);
    }
}

for some reason if it is called sendOsc, like it is in the example, it won't work.

In the bridge.js file, in the main folder, change this:

    socket.on("message", function (obj) {
        oscClient.send.apply(oscClient, obj);
    });

to this:

    socket.on("message", function (value) {
        console.log(value);
        oscClient.send('/toSuperColliderOrWhatEver', value);
    });

I don't know what exactly the .apply(oscClient, obj) do. I hope I'm not loosing something important here.

Well, have fun using P5 together with SuperCollider!

gilFuser

Ah, I forgot to say to you to change setupOsc in the setup function to this: setupOsc(3333, 57120);