Set reference p5 examples to noLoop() on window.blur()

[ffd8]

Nature of issue?

• [ ] Found a bug
• [x] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [x] Other (website documentation)

Which platform were you using when you encountered this?

• [x] Desktop/Laptop

Feature enhancement details:

I regularly notice that students like to have multiple p5.js reference tabs open (also p5 editor) while researching how things work. While great, one big problem is that each of these p5 instances are constantly running (loop()) in the background..! With just 1 or 2 tabs that quickly eats up a lot of browser resources, sometimes there's 5+ tabs all running p5 instances.

In P5LIVE Eco Mode is set active by default, so p5 changes to noLoop() on window.blur() and back to loop() on window.focus(). I propose enabling this especially for the references and ideal (but more discussion needed) if also applied to the web editor.

A proposed snippet for the website (Q: what's the array variable for storing each p5 instance??):

window.onblur = function () { 
  for (let i = 0; i < p5Instances.length; i++) {
    p5Instances[i].noLoop();
  }
}

window.onfocus = function () { 
  for (let i = 0; i < p5Instances.length; i++) {
    p5Instances[i].loop();
  }
}

If this gets a green light (especially for the reference pages), then perhaps someone from the website-team knows how/where to implement this quickly.. otherwise if pointed in the right direction (which src file and the name of p5 instances array) I'd be happy to give it a go.

[limzykenneth]

p5's animation loop is using requestAnimation and in most browsers when the tab is not active it should have stopped the animation loop without need to explicitly stop it. You can read about it here.

[ffd8]

Thanks for the info + link. While this stops it if the tab isn't active, it keeps running if on an active tab in a minimized or background window (in Firefox/Chrome/Safari)– potentially eating resources if the person has multiple windows/browsers/etc open while learning from the references.

No problem if this should be closed – but it would be helpful to implement the window.blur()/window.focus() to just the references website, since they probably never need to run in the background.

[limzykenneth]

We can explore potentially implementing this on the website. I'll move this issue over there. You can open one for web editor if you wish to proposed something similar there.

[ffd8]

Ahh - totally missed that this was definitely an issue for the website repo and not p5.js repo! Thanks for moving it.

[limzykenneth]

If you are interested in investigating the possibilities (or anyone else), the code for rendering reference example is here and the code for rendering example on examples page is here. Almost all the js files the website use can be found here if that's useful.