CODEWITHSUNDEEP
javascriptfunctionbuttonp5.js
Sara
Sara

Reputation: 29

How do I remove a button from being displayed on the canvas after a function is called in p5js?

I'm a beginner in p5js and I'm trying to figure out how to remove the button I added to function setup from being displayed on the canvas when function drawInstructions is called, but I can't figure out how. It's supposed to be that when you click on the playButton, it takes you to function drawInstructions (where instructions will be displayed), but I can't figure out how to remove the playButton from being displayed on the canvas when function drawInstructions is called. It just stays on the canvas.

When I tried to put the remove syntax in function setup, the button disappears from the screen before it can even call on function drawInstructions. If I put it the remove syntax in function drawInstructions it says that playButton hasn't been defined.

function preload() {
 title = loadImage("title.png");
  optimaFont = loadFont("Optima-ExtraBlack.otf"); // downloaded font from online
}

function setup() {
  createCanvas(512, 384);
  background(title);

  let red1 = color(237, 39, 36);
  var playButton = createButton("PLAY");
  playButton.mousePressed(drawInstructions);
  playButton.position(212, 299);
  playButton.style("font-family", "Optima bold");
  playButton.style("font-size", "30px");
  playButton.style("background-color", red1);
}

function drawInstructions() {
  background(0);
}

Upvotes: 1

Views: 600

Answers (1)

George Profenza
George Profenza

Reputation: 51837

The confusion might stem from variable scope:

  • if your code var playButton is declared and initialised with a value (= createButton...)) in setup(): this means you can only "see" the playButton inside the setup() function, but not outside.
  • You want to remove() (or hide()) the button at a later stage, in a different scope (e.g. from drawInstructions() function, when the button mouse pressed event handler was triggered)

You can declare var playButton outside setup(), thefore making it a global variable, visible from the any other function within your p5 sketch but don't initialise with a value. (playButton will be undefined until you assign a value at a later stage).

You can assign the value, in setup() where you can call createButton()

Finally, you can access playButton (since now it is a global variable) from drawInstructions() for so it can be removed).

Here's a tweaked version of your code to illustrate the above:

var playButton;

function preload() {
  //title = loadImage("title.png");
  //optimaFont = loadFont("Optima-ExtraBlack.otf"); // downloaded font from online
}

function setup() {
  createCanvas(512, 384);
  //background(title);

  let red1 = color(237, 39, 36);
  playButton = createButton("PLAY");
  playButton.mousePressed(drawInstructions);
  playButton.position(212, 299);
  playButton.style("font-family", "Optima bold");
  playButton.style("font-size", "30px");
  playButton.style("background-color", red1);
}

function drawInstructions() {
  background(0);
  playButton.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

Note that I've commented out the asset loading so it's easy to run the snippet.(You should see the button and a white background instead of your image, then the black background (and no button since it's removed)).

(Slightly off-topic, if you're familiar with using p5 libraries, you might find p5.SceneManager useful)

Upvotes: 1

Related Questions