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

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Other (website documentation)

Which platform were you using when you encountered this?

• 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]

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.

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