The focused variable in p5.js is used to check whether the current window or sketch is in focus or not. When the sketch is in focus, the focused variable will have a true value, else it would be false. It is similar to the focus property in CSS. In p5.js, this variable only gives information about the main window or sketch. If the user changes the tab or clicks on an inspection window, it sets the variable to false.
Syntax:
focused
Below programs illustrate the focused variable in p5.js:
Example 1:
Javascript
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); } } |
Output:
-
When the sketch is focused.
-
When the sketch is not focused.
Example 2:
Javascript
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); } |
Output:
-
When the sketch is focused.
-
When the sketch is not focused.
Reference:https://p5js.org/reference/#/p5/focused
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
