"Real" Live Coding / Dumb Live Reloading / Accessing Editor State from user scripts

[TiborUdvari]

Increasing Access

Hello,

I'm currently working on p5.xr, and I would like to share examples with the web editor. Because of how WebXR works, the user has to press a button to give access to an immersive session. Entering this mode takes a few seconds and it's quite cumbersome to have to go in and out of the mode to change simple parameters.

I would like to have a "real live coding" experience, as with p5.live, as you can see below. I don't want to use p5.live, because the sharing functionality is not working as well as with the web editor for now.

316921226-535cf140-93d1-40bc-909b-3ac5043359ff.mp4

Feature request details

As mentioned in #3 currently the page reloads completely on changes. Having a live mode would entail only reloading parts of the sketch.

For my use case at least, a quick and imperfect way to prototype is all I need. I know that having this work "properly" would involve handling a lot of edge cases and could be quite tricky.

I made a simple script today that works fine locally: https://github.com/TiborUdvari/p5.dumbLiveReload/blob/main/src/index.js. I'm using a polling approach, which works fine on my localhost, but I think that could be problematic with the web editor.

I've quickly checked the networking in the editor, and on save there seems to be a PUT request that sends all the data to the server.

My questions, to be able to make this work properly with the editor would be:

• How can a script being loaded with the editor (in the preview iframe) know when there was a save event or a change event
• How can a script access the global state of the editor to be able to get the script and execute it

Thanks a lot!

[welcome]

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.

[Faizan-Alam-1]

Not everyone has a VR headset. Only a few people are able to take advantage of this feature.

[TiborUdvari]

I don't completely agree. This can be useful for any feature that requires an expensive initial setup:

• Loading an ml5 model
• Making generative music, having a beat playing and adding on top of it
• Loading non-cachable real time data, like 3d models etc.
• Anything with the webcam
• Tweaking values real time once the sketch has started

This is the whole raison d'être of p5.live. I think a minimal MVP version in the editor could be a nice feature a lot of folks with different use cases can benefit from.

[PimTournaye]

I submitted a wildcard proposal in the same vein for pr05. Existing live coding environments like Strudel, Hydra, Sema and P5Live provide great examples of reactive code updating paired with dynamic output. There's even a VSCode extension called live-p5 that also allows for this kind of rapid prototyping.
@TiborUdvari also hits the nail on head with some great use cases. When toying around or prototyping with ML models, or sounds, or just a good amount of data, a hefty amount of time is lost on just waiting for things to preload. In that sense, Jupyter Notebooks do a great job.

Strudel has a nice outline of how their REPL works. Work on the new Processing editor is also likely taking a look at how these things could maybe be implemented (but seems out of scope at the moment).

The web editor's auto-refresh allows for some tweaking, sure, but having to rebuild the state of your sketch to the point where you want to tweak or debug could really benefit from more reactive code parsing.