noLoop() if !focused

phoebus

Hi

I noticed that having a p5.js sketch running in my browser is taxing CPU load, even if the sketch in a tab that is not showing.

how would you do to have the sketch going noLoop() when not in focused and resume loop() when focused is back ?

is there a resumeFocus() event function in p5.js ?

would it be a good id to catch the last frame into an image and display it while out of focuse ?

TfGuy44

I would add your own isPaused variable. That way you have a way to grab a frame to use, and an easy way to resume when focused again:

var isPaused = false;

function draw(){
  if( !isPaused ){
    /// Draw things here.
  }
  if( !focused ){
    if( !isPaused ){
      // Save this frame.
      savedImage = get();
      isPaused = true;
    }
  } else {
    isPaused = false;
  }
  if( isPaused ){
    image(savedImage,0,0);
  }
}

Untested code, YMMV.

GoToLoop

https://Forum.Processing.org/two/discussions/tagged?Tag=onblur()

GoToLoop

1. https://Developer.Mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur
2. https://Developer.Mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus

1. https://p5js.org/reference/#/p5.Element/elt
2. https://p5js.org/reference/#/p5/noLoop
3. https://p5js.org/reference/#/p5/loop

phoebus

it works like a charm @TfGuy44, thank you

var posx = 0;
var posy = 0;
var speedx = 2;
var speedy = 2;

var isPaused = false;

function setup() {
  createCanvas(windowWidth, windowHeight);

}

function draw() {
  if (!isPaused) {
    background(95, 35, 235);

    textAlign(CENTER);
    textSize(40);
    fill(255);
    text("hello", posx, posy);

    posx += speedx;
    posy += speedy;

    if (posx >= width || posx <= 0) {
      speedx = speedx * -1;
    }


    if (posy >= height || posy <= 0) {
      speedy = speedy * -1;
    }
  }

  if (!focused) {
    if (!isPaused) {
      // Save this frame.
      savedImage = get();
      savedImage.filter(BLUR, 3);
      isPaused = true;
    }
  } else {
    isPaused = false;
  }
  if (isPaused) {
    image(savedImage, 0, 0);
  }
} 

even added a blur to make it nicer ^^

and thank you @GoToLoop for being willing to help ... even though you answers are getting closer and closer to a "why don't you google it ?" kind of answer ;)