P5.js with ESP8266 WiFi

Processing for Pi
5

After a while the the browser console started pouring out messages about insufficient resources. (And the browser was laggy on reload.) I moved

var source;

to above setup, and

  source = new EventSource('/events');
    source.addEventListener('newVal', function(e) {
      const obj = JSON.parse(e.data);
      arduVal1 = obj.v0.toFixed(2);
      arduVal2 = obj.v1;
  });

from draw to setup.

Working on Javascript buried in ESP code, in the Arduino IDE is not best. Compiling and loading into the ESP takes 62 seconds. That’s much too difficult and slow. So I moved the Javascript code to a file on a Raspberry Pi. It’s in directory where a node.js server is running. It can be edited with a Javascript editor. Save and reload takes a couple of seconds. This might not be what you want finally, but it’s better for development. The html for this is:

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
  <script src="http://192.168.1.11:8082/sketch_e.js"></script>
</html>)rawliteral";

If you want to try the game of life sketch.js from @jafal’s link it’s very quick to swap the sketch.js for a different one.

1 Like