# Show different text depending upon condition

**URL:** <https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447>\
**Category:** Coding Questions\
**Created:** [September 27, 2021, 5:09pm UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447 "2021-09-27T17:09:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 27, 2021, 5:09pm UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447/1 "2021-09-27T17:09:24Z")

</div>

hello all,

how can I write p5 code that shows different text depending upon if condition? here is an example code that I wrote but the text just shows momentarily and disappears once the mouse click is done…

```auto
let state;

function setup() {
  createCanvas(400, 400);
  b = createButton('click me');
  b.mouseClicked(showText);
}

function draw() {
  background(220);
}

function showText(){
  state = ~state;
  if(state){
       text('Hi',80,60);
     }
  else{
    text('bye',80,60);
  }
}

```

thank you

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [September 27, 2021, 7:45pm UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447/2 "2021-09-27T19:45:51Z")

</div>

The problem here is that `draw()` is being called repeatedly and each time it is called in fills the entire canvas with light gray. The `showText()` function only runs once when the button is clicked, so the text will flash for a single frame and then vanish. One option you have is to disable looping and only manually trigger a draw when the button is clicked:

```auto
let state;

function setup() {
  createCanvas(400, 400);
  b = createButton("click me");
  b.mouseClicked(showText);
  // Disable automatic execution of draw()
  noLoop();
}

function draw() {
  // This will happen once when setup() completes and then only when redraw() is called after that
  background(220);
}

function showText() {
  state = ~state;
  // Clear the canvas
  redraw();
  if (state) {
    text("Hi", 80, 60);
  } else {
    text("bye", 80, 60);
  }
}

```

If you want to preserve the looping calls to `draw()`, which would be necessary if you wanted to have other animated elements, then you could move the text drawing into the draw function:

```auto
let state;

function setup() {
  createCanvas(400, 400);
  b = createButton("click me");
  b.mouseClicked(showText);
}

function draw() {
  background(220);

  // Wait until the button is clicked for the first time before we draw any text
  if (state !== undefined) {
    if (state) {
      text("Hi", 80, 60);
    } else {
      text("bye", 80, 60);
    }
  }
}

function showText() {
  state = ~state;
}

```

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 28, 2021, 6:04am UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447/3 "2021-09-28T06:04:25Z")

</div>

Thanks  
tested and good to go  
👍