Using OSC messages in Processing in p5.js mode

p5.js Libraries
1

Hello there,

I have started discovering Processing only yesterday, but I am already trying out connecting a few things with OSC. Right now I am stuck at figuring out connecting OSC to p5.js scripts run from Processing 4.3 in p5.js mode.
I have found these promising repositories:

However, I did not have any luck in running them. I spent the most time trying out to run the first one, but whenever I add the setupOsc(SomePortNo, SomeOtherPortNo); function, the whole setup just won’t load.

I can receive OSC packets in Java mode, but I really want to do that with p5.js mode. Maybe there is someone who recently figured out how to do this? Or maybe I am missing some obvious library placement, function declaration, something like that?

2

Well, apparently it wasn’t too difficult, but somewhat confusing - especially when I tried running my own project and adding the OSC functionality to it. The provided demos for the p5js-osc library work well, but they are a bit ambiguous to run at first. So, I thought I’ll describe running them in detail as a reply to my recent question.

First of all, Processing IDE needs to be installed with Java and p5.js modes; Java is default, so only p5.js is required:

Then, in Java mode, the oscP5 library is needed:

Then, for the correct installation of the p5js-osc library, git (https://git-scm.com/) and Node.js (https://nodejs.org/) are necessary (or at least in my case it worked only when downloaded with git). For that, I needed to add the Large File Support (LFS) and longpaths in the git environment with the following commands:

git lfs install
git config --system core.longpaths true
git config --global core.protectNTFS false

Then cloning the repository and installing it with Node.js, as described in the repository’s guide:

git clone https://github.com/genekogan/p5js-osc
cd p5js-osc/
npm install

Now an important detail which caused a lot of confusion for me: Processing IDE for p5.js automatically writes the necessary libraries and scripts in the index.html file. It also deletes the unused libraries (or the ones not present in the working directory…) That means, the OSC socket needs to be added manually! It won’t appear by itself. Also, whenever another JS file would be added to the project, this line would disappear! It is important to add it back to the index.html. It got me confused so much, as I thought this socket line was just there as I was adding some more scripts to my code.
The socket line:

<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>

Finally, with all the pieces in place, the node should be opened, from the p5js-osc installation directory:

node .\bridge.js

Then, the two scripts - p5.js and Java ones - can be run from Processing:

image
image2560Ă—1381 200 KB

Regarding IP addresses and ports – 127.0.0.1 means “this machine”/“itself”, so it is PC’s self-address. The port used in the example connecting the Java and p5 script is 12000, which can be changed as required. The port used by the node socket - 8081 - probably can also be changed, but I would leave it as is; the way I understand it, it kind of exposes the ports between the Java/p5 scripts via the node and via the 8081 port.

If everything was installed correctly, and the IP ports were assigned properly, the bridge.js node should report “connection” on loading the p5.js webpage. Also, the green circle should be controlled by the white one in the Java sketch via the OSC messages :slight_smile:

I hope this detailed guide would be of help to someone as confused as I was! Enjoy :wink:

2 Likes