processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.32k stars 1.27k forks source link

Two tabs. One for GUI controls, and other for rendering. #3179

Open patricio1979 opened 3 weeks ago

patricio1979 commented 3 weeks ago

Increasing Access

This will allow having a nice rendering allowing for realTime modifications

Feature request details

Perhaps a two tab system with OSC communication between them (opening the same project in two tabs?)

The possibility of making this with a local server could be great. Having two canvases or something like that.

welcome[bot] commented 3 weeks ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

raclim commented 3 weeks ago

Thanks for raising this! Do you have a more detailed idea of what this might look like, or examples on other platforms?

patricio1979 commented 3 weeks ago

Hello,

Perhaps like MaxMSP. In there you can have as many windows as you like, and they communicate each other with 'send' and 'receive' objects. I'm guessing OSC connection may be possible. The goal of this is having real time processing of visual data while rendering images for viewers. Also I'm thinking of working with MIDI (as in WebMidi.js), and could be ported to my cellphone with OSC.

patricio1979 commented 1 week ago

Ok, so I came with a solution. Perhaps it could be implemented in another version.

I found a broadcastChannel function that sends messages or almost anything to another child tab. https://editor.p5js.org/patricioTics/sketches/NRBuOT6xH

I also found another implementation in the Coding Train's Showcase but it is too advanced for me. https://github.com/jnafolayan/sandfall/blob/main/js/containers.js

Which is best? If it is the second one, I'll need some sort of tutorial please.

Thanks