David Bouchard of Ryerson University gave me a great tip: Glitch.com works well for p5.js projects. It’s a nice alternative to the p5.js editor, particularly because it supports sharing of live code. This can be handy when you’re working remotely with others. This means you and your remote partner can both be typing in the same sketch in real-time (well, network real-time).
It even works with p5.serialport library and the p5.serialcontrol app if you want to work on p5.js sketches that require asynchronous serial input. Each person sharing the sketch will be running a local instance of the sketch in their own browser. This means they will be able to connect with their local copy of p5.serialcontrol, to communicate with their own serial ports.
Here are the steps to make a p5.js serialport app work:
- Set up a Glitch account if you don’t already have one.
- Make a new project in Glitch. Use the “Hello Webpage” option
- Replace the default HTML with the following:
<!DOCTYPE html><html lang="en"><head>
<script src="p5.min.js"></script>
<script src="p5.serialport.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body></html>
- Replace the two script tags with the latest CDN links for p5.js and p5.serialport.js. The p5.js CDN can be found at this link. The p5.serialport latest version is 0.0.29, as of this writing:
<script src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.29/lib/p5.serialport.js"></script>
- Replace the script.js file with a file called sketch,js and make it a p5.js sketch. Here’s the minimum:
function setup() {
}
function draw() {
}
- Download the p5.serialcontrol app, connect to a microcontroller over a serial port, and you’re ready to go.
- Once you’ve made your sketch click Share -> Code and share that link with your remote partner. That’s it! You’re ready to go.
To test this, I made a sketch that creates a serialport object, then gets the list of serial ports and makes a select menu so you can choose the serial port. Feel free to use it.