Sending value from maxmsp to p5js through socket.io

p5.js Libraries
1

Goal: send radius value from maxmsp to p5js through socket.io
Current State: testing with index.html works well, but when changed to p5js client, I can’t see the result or reaction.

socket.io server part

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
//below use to solve the loading problem
app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
    console.log('new connection >> '+ socket.id);
    socket.on('disconnect',function(){
        console.log('disconnected >> '+socket.id);
    })
    socket.on('message', (msg) => {
        io.emit('message', msg);
    })
    socket.on('radius', (data) => {
        io.emit('radius',data);
    })
})

http.listen(3000, () => {
    console.log('listening on *:3000');
})

maxmsp client part

const maxApi = require('max-api');
const io = require('socket.io-client');

let socket;
maxApi.addHandler('connect', (url) => {
    socket = io(url);
});

maxApi.addHandler('disconnect', () => {
    socket.close();
});

maxApi.addHandler('message', (msg) => {
    socket.emit('message', msg);
});

index.html (works well and successfully console.log the value)

<html>
  <head>
    <script src="/p5js/demo.js" type="text/javascript"></script>
    <script src="/p5.js" type="text/javascript"></script>
    <link href="/styles.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
        const socket = io();
        socket.on('message', function(msg){
        console.log(msg);
    });
    </script>
</body>
</html>

p5js client

let socket
let r = 50

function setup(){
    c = createCanvas(1280,720)
    background(0)
    socket = io.connnect('http://localhost:3000')
    console.log(socket.id)
    socket.on('message', drawCircle)
}
function drawCircle(msg){
    radius = int(msg)
    fill(255)
    ellipse(width/2,height/2,msg)
}
function setup(){
    background(10)
    noStroke()
    fill(255)
    ellipse(width/2,height/2,r)
}
2

Looking at the code, there is no need for r and you shouldn’t have two set up functions, you should delete the second function setup.

This function should be like this;

function drawCircle(msg){
fill(255)
ellipse(width/2,height/2, msg)
}

3

To Chigoz
Thank you for conquering the blind spots.
I’ve edited the code and it is working normally.
Many thanks to you. This problem bothered me few days.

1 Like
4

You’re very welcome, good to know it worked for you.

1 Like