This is a quick system test of how p5js, MQTT and shiftr work together to create a simple bidirectional network connection. You may think of it as a network ‘hello world’. Specifically, the example uses an HTML slider to change the fill of a canvas rectangle element.
Because this system loops back — you can test it with one computer.
Once the shiftr connection is made, the color (grey scale) changes you see are not direct, but rather pass to the shiftr broken and then back to the original sketch.
00:00 intro
00:45 demo
02:20 PUBLIC shiftr
03:25 PUBLIC token and related code
05:28 mqtt TOPIC – pub/sub to configure loopback
08:20 custom instance (you will need to make one)
09:50 custom token and code
12:15 demo to custom instance
15:01 code walk through
15:54 connection code
18:40 onConnect function
19:20 messageArrived fxn ( console logging)
20:25 publishMessage fxn
21:50 canvas and HTML (DOM) elements