OSC library for p5.js

edited March 2018 in Summer of Code 2017

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.




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


  • 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?).

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

  • edited March 2017

    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!

  • @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.

  • 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) {
            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!

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

Sign In or Register to comment.