Hi @itsmetamike,
I have had success working with using OSC between p5 and Sonic Pi. Here are a couple examples of sketches I made to visualize some function of Sonic Pi.
Onset option: Sonic Pi - Onset parameter visualization using p5.js - YouTube
Spread Function: Sonic Pi - Spread function visualization w/ p5.js - YouTube
There are several steps to get started but its pretty easy once you get things up and running.
I recommend using Gene Kogan’s p5js-osc library: GitHub - genekogan/p5js-osc: OSC for p5.js with examples
You will need to have node.js installed: Download | Node.js
After installing node, you should clone the p5js-osc repo as instructed on the github page (you will need to have some basic knowledge of getting around in the terminal to do this):
$ git clone https://github.com/genekogan/p5js-osc
$ cd p5js-osc/
$ npm install
Once these things have been installed, here is how you can proceed each time you want to have Sonic Pi and P5 communicate.
You will need to open a terminal window and start a local server.
Here are some different possibilities for how you can do this: Local server · processing/p5.js Wiki · GitHub
If you have a mac, I think the python simple server is one of the easier ways to go.
Just write this in the terminal:
python -m SimpleHTTPServer
Once you have this up and running, you need to open another terminal window and navigate to the p5js-osc directory using the ‘cd’ command in your terminal (‘cd’ stands for ‘change directory’)
Once you are in the p5js-osc directory, you need to run the following command:
node bridge.js
Then open your web browser and go to: http://localhost:8000
This will bring up the directories of all the folders on your computer.
Navigate your way to the p5js-osc folder. Then open the file you want to use.
If you are trying to send messages from Sonic Pi to p5js-osc, I would recommend starting with the p5-basic example provided in the repository. I made some modifications below to fit what you had mentioned. This example will look for two OSC messages called “/cutoff” and “/amp” and when it receives those messages, the cutoff message value will affect the alpha of the ellipse and the amp message will affect the size (although I would not recommend using amp if you plan on using values higher than double digits, the sound will get really loud!)
var ellipseAlpha = 100 // initialized variable for alpha
var ellipseSize = 50; // initialized variable for size
function setup() {
createCanvas(500, 500);
setupOsc(3333, 4560); // OSC ports. you'll need 3333 in your Sonic Pi code
}
function draw() {
background(0, 0, 255);
fill(0, 255, 0, ellipseAlpha); // fill using alpha variable
ellipse(200, 200, ellipseSize, ellipseSize); // ellipses function using size variable
}
// this function controls the incoming OSC messages
function receiveOsc(address, value) {
console.log("received OSC: " + address + ", " + value);
// This conditional statement looks for "cutoff" message and assigns its value to alpha variable
if (address == '/cutoff') {
ellipseAlpha= value[0];
}
// This conditional statement looks for "amp" message and assigns its value to size variable
if (address == '/amp') {
ellipseSize = value[0];
}
}
// This function is for sending OSC messages
// This is not relevant for receiving OSC messages
function sendOsc(address, value) {
socket.emit('message', [address].concat(value));
}
function setupOsc(oscPortIn, oscPortOut) {
var socket = io.connect('http://127.0.0.1:8081', { port: 8081, rememberTransport: false });
socket.on('connect', function() {
socket.emit('config', {
server: { port: oscPortIn, host: '127.0.0.1'},
client: { port: oscPortOut, host: '127.0.0.1'}
});
});
socket.on('message', function(msg) {
if (msg[0] == '#bundle') {
for (var i=2; i<msg.length; i++) {
receiveOsc(msg[i][0], msg[i].splice(1));
}
} else {
receiveOsc(msg[0], msg.splice(1));
}
});
}
On the Sonic Pi side, you can just run this code to send osc messages using those message names that p5 is looking for:
use_osc "localhost", 3333 # This value matches the port value in the setupOsc function in the p5 sketch
live_loop :oscTest do
osc "/cutoff" , rrand(1, 100) # modify this value however you want
osc "/amp", rrand(1, 200) # modify this value however you want
sleep 1
end
This code doesn’t include anything music related but you can add that easy enough. However, if you are going to use random values, I would recommend storing those values in variables so they will be consistent when used for both OSC messages and Sonic Pi parameters.
Example:
use_osc "localhost", 3333
live_loop :oscTest do
n1 = rrand(1, 100)
osc "/cutoff" , n1
play 60, cutoff: n1
sleep 1
end
I hope this is useful for you. I know it is a lot to work through but once you understand it, it is pretty easy to work with. I am going to try to put together a video tutorial to go over this process sometime in the near future, but hopefully this gets you to where you want to go. Let me know if you have any questions.
Good Luck!