Marcel Wierckx

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

"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}`);
});

number

bpatcher

n4m.monitor

message

node.script

<!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">

        <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>

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. 

function anypost(str) {
	if (Max) {
 Max.post(str);
	} else {
		console.log(str);
	}
}

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">

		<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>

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.scr

how-to-use-node-script-to-send-messages-to-p5js

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.

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.

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.

Max.post(`Received 'iPad1' message with ${args}`);

and in my sketch.js file I used the following code:

console.log('opacity: ', parseInt(args[1]));

Solved! I started from scratch with a new project and adapted some code from znibble~'s tutorial video. 

Max.addHandler("iPad1", (...args) => {
 Max.post(`Received 'iPad1' message with ${args}`);
   io.emit('iPad1', args[0], args[1]);
});

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)

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

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

how to use node.script to send messages to p5js