The Processing Collaborative Editor is a desktop application designed to make collaborative coding with Processing accessible and engaging for students, educators, and beginners in creative coding. This project emerged from the goal of bridging creative practice with technical education, allowing users to create and experiment with code in real time. Processing, known for its versatility in visual arts and coding education, provided the perfect foundation for this tool.

The Processing Collaborative Editor was born out of a vision to create an accessible, community-driven tool for learning and creating with Processing. This project aimed to:

• Make Code Editor Development Accessible: By using modern web technologies, we wanted developers to easily contribute and expand the editor's features, similar to how VSCode supports extension development.
• Simplify the Interface for Beginners: We designed the editor specifically for students and beginners, with a streamlined user interface that removes complexities like filesystem management, allowing students to jump straight into coding.
• Enable Real-time Collaboration: In a world where virtual collaboration is key, we sought to enable users to co-create sketches in real time, similar to tools like Google Docs or Figma.

The end result was the Processing Collaborative Editor—a desktop app for Mac and Windows that enables real-time, collaborative coding with Processing. After installation, users can jump into sketch creation immediately. Here’s a quick demo of how it works:

• Launching a Sketch: Open the app, click “play,” and start coding. As an example, let’s create a sketch that draws a circle at the mouse’s location.
• Testing and Iterating: Test the sketch by pressing the play button or using the shortcut (CMD-R on Mac).
• Collaborative Editing: When it’s time to collaborate, click “Collaborate” next to the sketch’s name. Share the Room ID with collaborators, and they can join by entering their name and ID. You’ll then see their cursors in the editor as you work together.
• Real-time Experimentation: Each collaborator can run or save the sketch independently, allowing real-time experimentation without interfering with others.

Building the Processing Collaborative Editor relied on several technologies that made development fast, modular, and collaborative:

• Electron: Using web technologies (HTML, CSS, JavaScript) to build a desktop app enabled us to reach a broad community of developers, inviting contributions to improve and expand the editor.
• React: Inside Electron, I built the UI as a React app for modularity and easy future customization.
• CodeMirror: For the code editor component, we used CodeMirror 6, which offers a rich, adaptable editing experience.
• Y.js: The backbone of our real-time collaboration, Y.js enabled seamless multi-user editing by handling complex merge logic, with connections managed by a WebSocket server on Render.

Looking ahead, the Processing Collaborative Editor has endless potential. Some features I’d love to add include:

• Library Imports: An easy way to import the wealth of existing Processing libraries.
• Peer-to-peer Collaboration with WebRTC: Reduced latency and enhanced data privacy for a more connected experience.
• Classroom Integration: Bringing the editor into classrooms to gather feedback from students and educators.

I’m excited to see where this tool could go and hope others will contribute their ideas—please feel free to submit feature requests on GitHub!