Editor - set noLoop() on window.blur() ?

[ffd8]

Nature of issue?

• Existing feature enhancement

Feature enhancement details:

Referencing this issue for consideration: whether sketches running in the p5.js editor should set themselves to noLoop()/loop() based on window.blur()/window.focus(). It's a bigger issue for the p5.js references website – since there are cases when one might want to keep an editor sketch running continuously in the background.

Bringing this up as it's common to see students with multiple windows (+ browsers) open, occasionally having a few instances of the Editor in active tabs (in background or minimized) while they research sketches.

[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.

[catarak]

Thanks for the feature suggestion! I think it would be cool to add this. The part that seems harder is how to make it obvious that this feature is on/what it looks like to override it.

[catarak]

I think that the sketch should be slowed down/paused by requestAnimationFrame, right? Like if the window is in the background it gets paused.

[ffd8]

To my understanding (and quick tests) requestAnimationFrame only pauses if the tab is in the background of the window.. but if the window itself is still on that tab and in the background, it continues running. Had run into this with students having multiple windows/browsers open in the background running example scripts while researching how to do something.

[catarak]

Ah, got it! So if the tab is open but it's on a window in the background, it will still be running. I'll reopen this and think about it some more...

[ffd8]

Yeeah exactly – it's too bad requestAnimationFrame doesn't seem to care if the window lost focus - only about tab position and iframe visibility. This loop()/noLoop() on window focus()/blur() can act as a backup. I could imagine it being active by default (to save resources), but having option to disable it in settings for special use cases?

[catarak]

I wonder if other online code editors have had this issue and thought of this? Could be another useful data point.

[ffd8]

Yeah – would be great if there's a more generic way to stop the animation engine for any canvas activity besides p5.js' specific loop()/noLoop(). I call this 'eco-mode' in P5LIVE and embed the following snippet into exported HTML files:

window.onblur = function () {
	noLoop()
}
window.onfocus = function () {
	loop();
}

(on P5LIVE adding an instance reference to p5 sitting within an iFrame- like the webeditor does)