how to use node.script to send messages to p5js
Hi all,
I'm trying to send messages from a Max patch to a p5js sketch running in a browser. I assumed this would be easy to do with node.script but I haven't been able to get it working. My patch, js and html files are attached.
I assume that I need to add some code in Max.addHandler that emits the messages via socket.io. I've gone through the n4m-examples on github but couldn't find a clear example in there of what I'm trying to do.
Hopefully someone here has the silver bullet for me :-D
save as "serverMax.js"
"use strict";
const express = require("express");
const app = express();
const Max = require("max-api");
var server = app.listen(3000);
app.use(express.static('public'));
var socket = require('socket.io');
var io = socket(server);
io.sockets.on('connection', newConnection);function newConnection(socket) {
Max.post(socket.id);
}function anypost(str) {
if (Max) {
Max.post(str);
} else {
console.log(str);
}
}Max.addHandler("mouse", (data) => {
Max.post(`Received 'mouse' message with ${data}`);
});the Max patch:
my p5js sketch looks like this:
var socket;
function setup() {
createCanvas(1024, 768);
background(50);
socket = io.connect('localhost:3000');
socket.on('mouse', newDrawing);
}
function newDrawing(data) {
noStroke();
fill(255, 0, 100);
ellipse(data.x, data.y, 20, 20);
}
function mouseDragged() {
console.log(mouseX + ',' + mouseY);
var data = {
x: mouseX,
y: mouseY
}
socket.emit('mouse', data);
noStroke();
fill(255);
ellipse(mouseX, mouseY, 20, 20);
}
function draw() {
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <script src="p5.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="sketch.js" type="text/javascript"></script> <title>p5js receiver</title>
<style type="text/css">
html, body {
background-color:#fff; margin:0; padding:0; width:100%; height:100%; overflow:invisible;
}
</style>
</head>
</html>
Glancing at your code briefly, I don't see an handlers in your server code for incoming socket messages, or anywhere you are sending messages via socket.
Hi Andrew, thanks for the reply.
I guess this is the crux of my question - in the past I used node-osc for this (using io.emit) but was hoping for a simpler way to do this with node.script so that I don't have to run terminal. I studied the max_sockets.js example but it was not clear to me how to deal with deal with socket messages. I tried adapting code as below but couldn't get it working. Sorry if this is a noob question, but I was surprised not to find anything in the forum archive about using node.script with p5js or an example of this on github.
let server = http.createServer(app);
const wss = new WebSocket.Server({ port: 3000 });
wss.on("connection", function connection(ws, req) {
const sender = function (a, b) {
ws.send(JSON.stringify({
"value_1": a,
"value_2": b,
}));
};Max.addHandler("mouse", (data) => {
Max.post(`Received 'mouse' message with ${data}`);
if (data.length === 2) {
sender(data[0], data[1]);
}
});Solved! I started from scratch with a new project and adapted some code from znibble~'s tutorial video.
in the node script I used this handler:
Max.addHandler("iPad1", (...args) => {
Max.post(`Received 'iPad1' message with ${args}`);io.emit('iPad1', args[0], args[1]);
});
and in my sketch.js file I used the following code:
socket.on('iPad1', (...args) => {
console.log('received: ', args);
B01_alpha = parseInt(args[1]);
console.log('opacity: ', parseInt(args[1]));
});
Hey Marcel! don't suppose you could share which znibble~ tutorial you adapted? been trying to figure out this myself! (with the exception that i would like to send messages from p5 to max)
it was a while ago, I can't really remember but I think it was this one:
https://www.youtube.com/watch?v=GVCBTL8Ys7U
Andrew Benson's node recipes were very helpful too:
https://cycling74.com/search/page/1?sortBy=old&tags%5B0%5D=node%20recipe%20series