Hi all,
I teach a course in p5.js and my students are currently remote because of the pandemic. I’m looking for an editor/IDE that would allow students to all code in the same document at the same time. Essentially I’m looking for something that would function like Google Docs does, where when one person makes a change, everyone else can see that change taking place in real time.
Does such a thing exist for p5? And if it doesn’t exist for p5, does it exist for Processing, perhaps?
Thanks!
Try the co-coding feature of p5LIVE!
The co-coding panel is on the right side, and it gives you a URL that you can share. For example, I just created a sketch that you can join now:
…when you join, you will create a name. Code will be synced between all the editors and constantly recompiled on changes. This is a livecoding tool, and it displays sketches in the background behind the code (rather than in a split pane like the p5js web editor).
There are instructions for managing collab features in the help menu, and on the repo readme: https://github.com/ffd8/P5LIVE
Hope that is helpful.
That is a great question!
I think you might want to have a look at Glitch: they have a template of a server serving a p5js project: https://glitch.com/edit/#!/p5js?path=views%2Fsketch.js%3A1%3A0
I find the interface a bit confusing, but you can remix any project and the “owner” can share a link that allows simultaneous edition.
This is fantastic; thank you so much Jeremy! This is precisely what i was looking for.
I’ll also be teaching Processing remotely in the winter semester. Do you happen to know if Processing has a similar platform?
While it doesn’t have robust sync like Google docs, one option is to use Jupyter notebooks with Calysto Processing. That isn’t actually running Java Processing on the web, unfortunately – it is running Processing.js, which uses the Java syntax but then transpiles it to JavaScript so that it will run in browser. So your students can learn the Java syntax in a web environment, but they won’t be able to use the robust Java library ecosystem (opencv, minim, etc.) that they would while using PDE on the desktop.
The project homepage has some links to examples of pedagogical use.
If you haven’t worked with hosted Jupyter notebooks before you should be aware that you can get simultaneous edit access, but those are potentially destructive overwrite edits, and you can’t see what the other person is doing – it isn’t live co-editing. So you need to coordinate really carefully when you open a notebook that someone else is editing, and then have them load your changes. But it is doable.
(I should also note that it is possible to host a straight Java kernel in online Jupyter notebooks – GitHub - SpencerPark/IJava: A Jupyter kernel for executing Java code. – but then your students would need to import processing as a library and program Processing in straight Java syntax, with public, private, et cetera. That could be really challenging for beginners.)
Another Processing sketch hosting site (both p5.js & Pjs) w/ co-editing capability: 
@GoToLoop – how does co-editing work on sketchpad? Is it live like in Google Docs, and can you invite people et cetera?
Never did co-editing before.
AFAIK, n1 w/ an ‘edit’ link can modify the sketch at the same time.
Each account will have its own highlight color edit on the shared sketch.
CodePen has a collab mode (if you sign up for a pro account). You could load-in p5 from the CDN, set up your project using the ‘hosted’ approach. You can test this out in free (non-collab) mode; you write your p5 code in the JS pane of the CodePen editor.
There are free alternatives to CodePen (other front-end development playgrounds) although I haven’t researched/experimented with those.
EDIT: https://liveweave.com looks like a decent free alternative. You can test the Team Up feature, using the invite link across multiple incognito/private browser windows to simulate a group session. The nice thing is you don’t have to create an account to host or join.
EDIT: For some reason, Liveweave didn’t work properly with the latest p5; it wouldn’t run after the first change I made to my JS/p5 code. I used v1.0.0 as a workaround for now: <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
Maybe https://repl.it/ + p5.js is an option too. Needs sign up.
(example https://repl.it/@villares/basic-p5js#index.html)
I have tried to simulate co-edit with a “join link” and it seemed to work.
Thanks for all of these great suggestions everyone!!
To clarify, it sounds like there is no online collaborative coding platform for Processing. Am I right on that?
For (Java-dialect) Processing, another option might be to have your students use a programming text editor with a document co-editing feature. For example, Atom has a co-editing plugin called Teletype, and it also has a Processing plugin. (untested)
…and Atom has Processing (Java) support with the Script plugin.
That is correct – to the best of my knowledge, there is no collaborative online coding platform for Processing. Some options are:
There are a very very few options for collaborative editing and compiling of Java / JVM on the web – for example, collabedit, CodeBunk, or CodeCollab. https://codecollab.io/ But these tend to be for-profit proprietary platforms, and they only support full Java, they don’t have dedicated Processing language modes – you would have to use Processing as a library in Java, and there might not be a method for display. In general, Java is harder to compile / run through a web interface than JS or Python – there aren’t as many options.
I am definitely interested in this 
Hey Villares, just wanted to give a shout out to your comment. I’ve looked into it, and I think that Glitch is going to work really well for my needs. Thanks for sharing
Update:
I’m now looking into repl.it instead of Glitch. After playing more extensively with Glitch I’ve found that it takes about 15 to 30 seconds to load a page (feels like the dial-up days), and then fairly frequently, will say that it can’t be loaded at all. I’ve asked around and others have experienced this too. That’s a big strike against when I’ll be opening dozens of sketches per class, and working with as many student projects.
This is amazing! I’ve always felt a huge drawback of repl.it is not having a whiteboard to draw on, whereas this solves it. What was your inspiration to start this project?
FYI – for using Processing collaboratively online, at the latest CCFest 21, Coding Rooms was presented as a viable option. It’s not exactly a simple GUI – but lets one run a virtual machine to run Processing sketches.
Update on P5LIVE, you’ll find a video series here walking through the tool (COCODING pending…!).