P5LIVE visuals controlled by OSC

Support, Help & Resources
1

Hi everyone,

I have recently been playing around with P5LIVE which is a live coding environment for p5.js.
There is an online version here: P5LIVE

However, you can also install an offline version locally on your own device which has the ability to send and receive OSC messages, so you can control visuals in P5LIVE by sending values through Sonic Pi as well as have corresponding music going along with it.
Here is the github link to install the offline version (You need to do the fancy one to have OSC capabilities.)

I made a tutorial that goes through how to download and install the offline version of P5LIVE and the basics of how to send and receive the OSC messages to change the visuals. Nothing fancy, but you can see the possibilities.

3 Likes
2

Great tutorial! Worked perfectly, although I already had port 5000 running, so I merely selected another port when starting using npm start 5010

Have you tried sending any messages back to Sonic Pi using the sendOsc function in P5LIVE?

3

Yes! I was able to send some messages to Sonic Pi pretty easily with the sendOsc function.

First you need to change the oscPortOut argument in the setupOsc function in setup() to 4560 for the incoming OSC port in Sonic Pi.
Then use the sendOsc function with a message name and value as arguments.
Here is a simple bouncing ball example that sends an OSC message each time the ball hits the edge of the canvas.

let libs = ["includes/js/socket.io.js"];
let socket;

let x = 100
let speed = 10;

function setup() {
	createCanvas(windowWidth, windowHeight)

	setupOsc('127.0.0.1', 12000, 4560); // oscHost, oscPortIn, oscPortOut
}

function draw() {
	background(220);

if(x > width || x < 10){
	speed = -speed
	sendOsc("/test", 60); // sends the value 60 as OSC message called "/test"
}
x = x + speed;
circle(x, 400, 100)
}

On the Sonic Pi side I just modified the Simple OSC Listener code from the docs

live_loop :foo do
  use_real_time
  a = sync "/osc*/test"
  synth :prophet, note: a
end

It will just play the note 60 each time the circle hits the edge of canvas.

One thing I’m trying to figure out is how /where to use the sendOsc function in an effective way. The first thought is to put it in the draw function in the p5 code but the issue is that the draw() function updates approx 60 times a second, so it is constantly sending OSC messages when you put the sendOSC function in draw() which isn’t necessarily effective for trying to trigger sounds in Sonic Pi. So another thought is to put it in some type of conditional statement as I did in the code above.

Gonna keep playing around with it but would be interested to hear any ideas.