P5LIVE – p5.js live-coding environment, now with COCODING + tutorial

After beta testing with my students, P5LIVE’s COCODING feature is now live!

Here’s a little teaser for it:

More helpful, a tutorial walking you through the whole interface:

It’s main purpose is for fullscreen live-coding visuals, but it can also be a helpful sketching ground for website interactive backgrounds, as you can quickly export a single page HTML file for building upon.

Enjoy and let me know (ideally via github) if you run into any bugs.

7 Likes

This is amazing! How did you get the frameCount to stay persistent?

Edit: Github Link!

2 Likes

Thanks! The moment it recompiles, I store both the frameCount + mouseX/Y + pmouseX/Y as variables, which are injected into the compiled sketch’s setup to make sure it’s a smooth transition between each change. I like it being a smooth update (especially if using frameCount for animation), but if you ever want it to reset, just put var frameCount = 0; in the setup and it will always refresh from scratch.

2 Likes

Neat. Where did you get the idea for this?

For the persistent frameCount/etc? From just realizing how abrupt it was when recompiling on each live-code edit change. In the first beta version, there was hard/soft compiles (compiled entire sketch or just draw) – then took it away because it kind of confusing… but having just performed this it the other day, realized I need to bring back a ‘soft compile’ that will only replace the draw() function on the fly (hopefully?!) so that if you are tracing out shapes without a background(), then you can still modify the code without it erasing everything each change…

But when did you think to yourself “You know what my students need? Live coding + cocoding”?

Haha, I talk a bit about the how/why in the start of the tutorial linked above… first started out of our local PCD event and wanting to live-code fullscreen visuals for the afterparty… cocoding came out of using lots of shared docs (googledocs, etherpad) this past year for various organizing purposes… and realized it would be great for creative-coding. Also while teaching, I usually introduce material first with everyone’s laptop closed, so there isn’t the struggle of watching/typing/typos… this offers an alternative to introduce the material in front of each persons screen (quickly needed lockdown mode!) – to see it typing out and working… then trying again together. Turned out students used cocoding longer in session than I thought… chatting and trying code in pair programming style.

3 Likes