Variable enfocada p5.js

La variable enfocada en p5.js se usa para verificar si la ventana o el boceto actual están enfocados o no. Cuando el boceto está enfocado, la variable enfocada tendrá un valor verdadero, de lo contrario sería falso. Es similar a la propiedad de foco en CSS. En p5.js, esta variable solo brinda información sobre la ventana principal o el boceto. Si el usuario cambia la pestaña o hace clic en una ventana de inspección, establece la variable en falso.

Sintaxis :

focused

Los siguientes programas ilustran la variable enfocada en p5.js:

Ejemplo 1:

let img;
  
function preload(){
  img = loadImage("gfg.png");
}
  
function setup() {
  createCanvas(400, 400);
}
  
function draw() {
  background('green');
  
  image(img, width/2 - img.width/2,
        height/2 - img.height/2);
  
  // Check if the sketch is currently
  // not focused
  if (!focused) {
    
      // Draw lines if the sketch 
    // is not focused
    stroke(200, 0, 0);
    line(0, 0, height, height);
    line(height, 0, 0, height);
  }
}

Producción:

• Cuando el boceto está enfocado.

  

• Cuando el boceto no está enfocado.

  

Ejemplo 2:

let cylinder;
function preload() {
  
  // Load the model
  cylinder = loadModel('/cylinder.stl', true);
}
  
function setup() {
  
  createCanvas(400, 400, WEBGL);
}
  
function draw() {
  background('green');
  
  // Rotate the model
  rotateX(90);
    
  // Check if the sketch is
  // not focused
  if (!focused) {
      
    // Use stroke of red color
    stroke(200, 0, 0);
  } else {
    // Else use stroke of black color
    stroke(0);
  }
  
  // Display the model
  model(cylinder);
}

Producción:

• Cuando el boceto está enfocado.

  

• Cuando el boceto no está enfocado.

  

Referencia: https://p5js.org/reference/#/p5/focused