P5.js application with backend

p5.js
1

Hi,

I’ve been using Java Processing for some while, now tried the p5.js examples on Windows and RPi.

I’d like to be able to make a p5.js application on the RPi that auto-runs separately from the IDE, has a static url (not random :8xxx port), and comms to a backend. For the comms to backend I keep finding mention of websockets and node.js, but no simple get-going guide.

Thanks in advance,

Richard.

2

Here is a good get going guide!

2 Likes
3

Yes, I’ve given it a glance and it looks good. I’ll go slowly though it. Thanks.

4

It also looks like @lmccart just updated this a few hours ago, so it should be current and up to date!

good luck & happy coding!

5

I’ve always had a lot of luck following the @shiffman tutorials, and there are a few on this sort of thing. Here is a node/sockets one:
https://youtu.be/bjULmG8fqc8

1 Like
6

Thanks @bmoren and @matthewjohnjamieson. I’ve copied the video and web examples, then a few of my own. It’s all good stuff.

One issue I have, is that the sketch examples refer to the host as localhost or 127.0.0.1 which is all good while everything is on one PC. Now I have server on RPi and web-page on PC or phone I put the server’s current IP address in the code. Is there a way for the web-page to get the server’s IP address?

7

If this is only on your local network (LAN), then you can make your rPI have a static IP on that network, that way it shouldn’t change and you can just memorise the IP on all the other machines :slight_smile:

8

Yes, simply having static address works fine at home, but we also go to e.g. code-clubs. Anyway, at one of these events I met someone who knew the answer: socket = io.connect(location.host);

9

You should be able to just leave the connect() argument empty and it’ll by default try to connect to the same location it was served from. https://socket.io/docs/client-api/#io-url-options

the connect/io argument is a 'url' *(String)* (defaults to 'window.location' )

let socket = io.connect(); should get you connected to window.location which should work flawlessly if you’re serving out your express and socket setup on the same port and url/ip

see here for an example:
server: https://github.com/bmoren/realtimewebapp/blob/master/app.js
client: https://github.com/bmoren/realtimewebapp/blob/master/public/frontend.js