Building an OSC connection between Supercollider and P5JS

Questions
1

I’m currently researching OSC in Supercollider and P5JS. The documentation for the former seems better than the latter. Does anyone have any experience with this. I don’t want to reinvent the wheel. Is an intermediary program required or can it be done with just these programs?

2

I haven’t used P5Js, but maybe this library could be helpful.

In SuperCollider you can check the OSC Communication help file. You can send and receive OSC messages fairly straightforwardly.

3

SuperCollider can only send and receive OSC messages which are normally transported via UDP, but the browser does not allow for UDP connections because of security restrictions.

Therefore it is necessary to setup an “OSC bridge” which will convert the UDP OSC messages to “UDP-via-TCP”-websockets (or vanilla TCP) which the browser can consume and vice versa - there are multiple implementations of such a transformation-service or it can also be coded easily via NodeJS or Python etc.

I think GitHub - colinbdclark/osc.js: An Open Sound Control (OSC) library for JavaScript that works in both the browser and Node.js is a commonly used implementation.

4

Hi,
Adding a suggestion here. I made P5 and SC work with internal MIDI. I used this P5 sketch from user cdaein.
Not as flexible as OSC, but quite easy to set up.

(* When on Linux: I had to use a manually installed version of Firefox to get WebMidi to work).

2 Likes
5

This is just a helpful note for Linux users: JACK MIDI runs on the audio scheduler and just connects applications; it doesn’t connect to the hardware. so its latency is even lower than OSC’s. It can be an option when that’s important.

6

Thanks everyone for such helpful replies. For some reason I thought this would be slightly more straightforward.

@dscheiba this is very helpful to know. Both the bridge and the P5JS side I’m trying to currently work out. I will take a closer look at the GitHub link you sent.

One thing I’m questioning, is if this is not being done regularly am I using the right graphics tool (P5JS)? If anyone reading this is sending OSC messages from Supercollider for the purpose of visualising in another software it would be great to hear about your experience and what software you are using to visualise. I like the idea of it all being open source, but I’m open to everything.

If it’s of help to anyone now or in the future Eli has a great video on OSC and Supercollider… https://www.youtube.com/watch?v=HzaS5kcAXiE&t=1282s

Also there is an interesting book about visualisation in Supercollider, but I don’t think that it covers OSC… Mapping and Visualization with SuperCollider | Business & Other | eBook

Thanks, Dom

7

I have used a osc bridge in two projects to send messages between the browser and SC.

Here is a bridge that forwards messages it receives from SuperCollider to a WebSocket:

In the browser this is the code that connects to the WebSocket and responds to messages:

On the SC side I woul just create a NetAddr and then send messages with sendMsg in a Livecoding manner.

In a different project I send messages in the other way, but it is a bit more complex because it was a bigger project, an installation which had to be reliable.
This file sends messages when user drags an item:

This file sets up the connection:

This is the bridge:

This is the SuperCollider code that recieves messages and does stuff:

I hope you can find these examples useful.

2 Likes
8

I’m using openFrameworks with SC for a couple of years now. It’s a great combo.

2 Likes
9

Thanks Jildert, though I’m totally out of my depth with C++.