Buttons not resetting canvas to original state JS p5

Question

Hi I am new to JS p5 and I'm trying to have my code start off with a queue button. Once this button is pressed the text "Searching..." will appear followed by a cancel button. I want it so that if the user clicks the cancel button or waits a certain amount of time, the code will reset to a blank slate with just the queue button again. here is my code below:

var queueButton;
var cancelButton = null;
var queuing = false;

function setup() {
  
  createCanvas(400, 400);
  queue();
}


function draw() {
    
    background(255, 255, 255);
  
    if(queuing == true){
      
        fill(0, 0, 0);
        textSize(40);
         
    }
    else{
      
      fill(255, 255, 0);  //CHANGE TO WHITE 
    }
  
    text("Searching...", 140, 115);
}

function queue(){
    
  queueButton = createButton("Queue");
  queueButton.mousePressed(cancel);
  
}

function cancel(){
  
  queuing = !queuing;
  
  if(cancelButton == null){
      
    cancelButton = createButton("Cancel");
  }
  
  setTimeout(resetQueue, 120000);
  cancelButton.mousePressed(resetQueue);

}

function resetQueue(){
  
  queueing = !queuing;
  
  if(cancelButton != null){
    
      cancelButton.remove();
      cancelButton = null;
  }

}

As of right now, I can't seem to reset my code to where it's just a blank white canvas and the queue button when the time runs out or if the user clicks cancel. The code I have now changes the color if I reclick the queue button but ideally my code would reset the canvas to its original state rather than me having the code color the "Searching..." text to white. As of now I am using the p5 web editor. Any help is appreciated!

Answer 1

Scene management can be a bit tricky in p5. Here's one possible approach.

The idea is a function for each state. Each state function is responsible for tearing down any remnants of the previous state and setting their state up. Click handlers and timeouts are set to trigger the next state function. The draw loop can determine which state is active based on the queuing variable.

Note that part of the queuing state cleanup entails keeping track of the timeout and canceling it.

 let cancelButton; let queueButton; let queuing; let queuingTimeout; function setup() { createCanvas(400, 400); textSize(40); idleState(); } function draw() { background(255, 255, 255); if (queuing) { text("Searching...", 50, 50); } } function idleState() { // clean up queuing state cancelButton?.remove(); clearTimeout(queuingTimeout); // initialize idle state queuing = false; queueButton = createButton("Queue"); queueButton.position(5, 5); queueButton.mousePressed(queuingState); } function queuingState() { // clean up idle state queueButton?.remove(); // initialize queuing state queuing = true; queuingTimeout = setTimeout(idleState, 10000); // 10 seconds cancelButton = createButton("Cancel"); cancelButton.position(5, 5); cancelButton.mousePressed(idleState); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

If you want the queue button to be visible at all times, move the cancel button somewhere else, remove queueButton?.remove() and move the 3 button initialization lines starting with queueButton = createButton("queue"); to setup .

With a permanent queue button, things get a bit tricky. If it is hammered multiple times, many cancelButton and setTimeout s will be created. Protect the queuingState function with an if (queuing) return to prevent this and/or disable the queuing button once the queuing state is active.

This design works fine for your simple requirements, but isn't super extensible. If you have more states than two or need to handle complex state set up and tear down actions, refer to these in-depth posts:

• Transitioning from one scene to the next with p5.js
• Trying to allow the user to step through a for loop for an algorithm using JS and P5 via a button press