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?
…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).
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 – https://github.com/SpencerPark/IJava – 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.)
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://firstname.lastname@example.org/lib/p5.js"></script>
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:
use a desktop editor plugin that enables code collaboration, allowing you to run / compile on the desktop.
use online Java-kernel notebooks like Jupyter Callypso, and write Java code that uses Processing as a library
use a Java collaborative coding platform, possibly? see below:
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’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.
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…!).