Open Sound Control (OSC)?


#1

Has anyone built OSC communication into Noodl?


#2

This is an interesting request. I haven’t found a javascript library that can communicate directly to OSC devices. Rather you currently need to run a Node.js interface program. At least those are the solutions I found.

It would be very interesting to hear what you want to do with OSC! There is a web standard for midi that seems easier to implement. https://www.smashingmagazine.com/2018/03/web-midi-api/ This can be built as a Noodl module for easy usage.


#3

Are there any examples of Node.js interface programs? I was trying to hack that in last night but I definitely felt I was working against the grain.

OSC and MIDI would both be great additions! I’m hoping to use OSC interfaces for wizard of oz controls for Noodl. Separately, OSC could also be used for hi-res realtime sensing inputs via WiFi: accelerometer connected to a visual element as one example. This could be 100Hz or more.

MIDI would be ideal for realizing the same kind of hi-res responsiveness locally. Rotary encoders etc. Additionally, this could remove the need for running a local server, as in the Arduino-noodl example code that connects via Serial. With a Teensy, for example, you can make a class compliant MIDI device that just works: no serial, no server.

I’m trying to simplify connectivity for a class I’m teaching but these communication approaches should unlock a lot of nice options generally. It would be fun to collaborate to realize these two options!


#4

The OSC libraries I found that looked promising was https://github.com/colinbdclark/osc.js and https://github.com/adzialocha/osc-js.
In both libraries there are example node.js programs to receive the events from Noodl and translate them into OSC messages. Noodl could then use websockets to send events to that node.js program.

Though, personally I think midi is a good starting point. It should be fairly simple to write a module for Noodl using the standard web api. And as you say, should remove the need for a node.js server! I’m gonna see if we have any midi controllers here in the office and if I got some time this weekend might look into some simple midi implementation!

What class are you teaching? Yeah I agree it really allows for a lot of new (and quick!) use of existing hardware controllers and ways of using them. Let’s try to make that happen! :slight_smile:


#5

Great to hear! I’ll also be working on this over the weekend so definitely feel free to drop me a line if there’s any way I can help. Our class is around designing tangible user interfaces at California College of the Arts, btw. Talk soon!


#6

Hey! So got some time today to work on MIDI. So far I’ve only done a very simple implementation of the Receive MIDI node. It seems to work well here, any feedback on more advanced use cases is much appreciated. I need some more time to work on the Send MIDI node though.

I wrote it as a Noodl module. If you haven’t used modules before just look at the file structure in the example project here:
Midi example v1.zip (266.1 KB)

You can copy the noodl_modules folder and place it in every project you need it in. The Receive MIDI will then show up (after a project refresh) as any other built in nodes.

Also wanted to link to a small library of utility components that I am working on. Small, simple nodes for designers/students that might not come from a technical background and feel hesitant to use javascript nodes. Currently it contains basic math and string manipulations nodes. It also has some additional color manipulation nodes which are very fun to use! You can check it out here: Utility Modules Project


#7

So amazing!!! Thank you Jesper!

Everything is working for me. I’ve been making progress on the OSC side too.


#8

I’m getting closer to OSC working using this as a starting point: https://github.com/colinbdclark/osc.js-examples/tree/master/udp-browser

It’s a node server that bridges UDP <-> WebSockets bidirectionally and has a web interface communicating to the server via WebSockets. The good news is that I appear to have the server working. The bad news is that there seems to be an additional layer of translation required within Noodl. Specifically, sending data out from Noodl via WebSockets, crashes the server, because the format is not OSC (I believe the output format from Noodl is flat JSON). Conversely, Sending data in to Noodl via WebSockets seems to register a new event. However, the data seems to be improperly formatted and therefore I can’t do anything with it. From what I’ve read on the Noodl forum, this is likely a problem of the input data to Noodl not being a flat JSON object.

This implies that the WebSocket component in Noodl won’t do the job, given OSC throughput. Rather, within Noodl, there will need to be js(+html) component(s) that emulates the osc.js project’s web interface. In theory, this is the missing link of properly translating the server in both directions.

So, I tried to implement this in Noodl. To start, I found the three.js example Noodl + 3d libraries and this Html content, DOM and JS question which appear to prove javascript and html should work. This is what my implementation is based on.

Unfortunately, I’m still experiencing strange reference problems loading the OSC modules within Noodl. The JavaScript Component “Cannot find module ‘slip’” The slip references appear present in the project directory structure and I even tried including the slip module explicitly as another JavaScript Object. This is getting pretty hacky and my hunch is that I’m not understanding something about the inner workings of Noodl. Do you have any advice? Please let me know if you have any questions. Thank you!

Here is my project that should give the same “Cannot find module ‘slip’” error:
Noodl-OSC-2.zip (2.3 MB)

Additional notes on the test system and server setup:
My workflow is TouchOSC on iPad/iPhone <-> Node.js UDP to WS bridge server <-> Noodl

The setup of the server is easiest from https://github.com/colinbdclark/osc.js-examples/tree/master/udp-browser. Instead of using TouchOSC, it would be faster and less complex to just use the Python scripts the repo provides for testing I/O.

If you do eventually opt for TouchOSC (which will be awesome!), you’ll simply need to change IP addresses and port numbers for your server configuration.


#9

This is quite sketchy, but I think I’ve got something close to a working node.

Basically you need a ‘server’ to subscribe to (I’m using Node.js for that) and then I’m running a simple python osc message over udp. I’m not sure how ‘portable’ this is yet.

Will post more tomorrow/monday. And will try to do some clean-up.


#10

Current version only receives messages.

ToDo:

  • Message parsing
  • Sending messages from Noodl.

  1. Follow instructions here first:
  1. Create a new Noodl project, open project folder in finder.

  2. Download project: https://drive.google.com/open?id=1p15PkeINNT26qHcdh_2gP-LtS-J90zP6

  3. Download OSCjs master https://github.com/colinbdclark/osc.js/ into noodl_modules/OSCnoodl, rename to ‘oscMaster’

You should now have noodl_modules/OSCnoodl/oscMaster folder structure inside your Noodl project.

  1. Open project in Noodl, open the debug console.

Open touchOSC (e.g. on iPhone), enter local IP of laptop, outgoing port: 7400, incoming port: 8081

Choose a pre-set in touchOSC an d start playing around, messages should appear in debug console.

Much inspiration for noodl_module from the @Jesper’s midi module.

Let me know if something’s off!

Supplementary video :slight_smile:


#11

Working! Thank you so much @Regi and @Jesper!!!