# Reset background() outside draw and setup to clear display

**URL:** <https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515>\
**Category:** Libraries\
**Created:** [December 11, 2018, 6:18pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515 "2018-12-11T18:18:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![polispace](https://avatars.discourse-cdn.com/v4/letter/p/df788c/32.png) [@polispace](https://discourse.processing.org/u/polispace)\
**Post date:** [December 11, 2018, 6:18pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/1 "2018-12-11T18:18:25Z")

</div>

Hi there.

I’m writing a code to make a wordcloud using a couple of libraries. I need to redraw the (updated) cloud after I receive a vocal input. I’m doing that by calling the function `Background();` that should draw a background over the old one. I’m placing the background outside the draw function because there doesn’t work properly.

I would appreciate a suggestion on how to solve the problem or a potential workaround.  
Thanks all for the help!!!

Here my code

```auto
void setup() {
  size(1200, 800);
  smooth();
  background(226, 35, 26);
  makeWordCram();
}

void makeWordCram() {
  cloud = new WordCram(this)
    .fromTextFile(wordFile)
    .lowerCase()a
    .withColor(#ededed)
    .sizedByWeight(12, 60)
    .withWordPadding(5);
}

void draw() {
  if (cloud.hasMore()) {
    cloud.drawNext();
  } else {
    noLoop();
  }
}

void webSocketServerEvent(String data) {
  println(data);
  String[] lines = loadStrings(wordFile);
  String[] newWord = splitTokens(data, " ");
  saveStrings(wordFile, concat(lines, newWord));

  background(226, 35, 26);
  makeWordCram();
  loop();
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 11, 2018, 6:36pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/2 "2018-12-11T18:36:29Z")

</div>

Hi,

If the websocket listener is running on its own thread then I think you shouldn’t draw anything inside `webSocketServerEvent`, but instead set variables that are later used inside the `draw()` function, which runs in the graphics thread. I believe there are similar issues in other libraries that receive external events out of the main graphics thread.

As an example, you could have a global `boolean dataReceived = false;` which you toggle when you receive data, and the draw function checks this boolean to know if something should be updated.

---

<div class="post-metadata">

**Author:** ![polispace](https://avatars.discourse-cdn.com/v4/letter/p/df788c/32.png) [@polispace](https://discourse.processing.org/u/polispace)\
**Post date:** [December 12, 2018, 5:37pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/3 "2018-12-12T17:37:25Z")

</div>

> [@hamoid](#):
>
> dataReceived = false;

Thanks for the answer, but I don’t know where to call the draw

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 12, 2018, 5:40pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/4 "2018-12-12T17:40:01Z")

</div>

```auto
void draw() {
  if (dataReceived) {
    background(226, 35, 26);
  }
  ...
}

```

---

<div class="post-metadata">

**Author:** ![polispace](https://avatars.discourse-cdn.com/v4/letter/p/df788c/32.png) [@polispace](https://discourse.processing.org/u/polispace)\
**Post date:** [December 12, 2018, 6:28pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/5 "2018-12-12T18:28:26Z")

</div>

> [@jb4x](#):
>
> if (dataReceived) { background(226, 35, 26); }

thanks for the help. I meant I don’t know where to call the `dataReceived`.  
If i redraw the cloud like this:

```auto
void draw() {
  if (dataReceived == true) {
    background(226, 35, 26);
  }
  if (cloud.hasMore()) {
    cloud.drawNext();
  } else {
    noLoop();
  }
}

```

It draw a new background for each word he write meaning i don’t see anything. I cant understand where i should make a new `background()` so that:  
Program start: draw background \> draw the cloud \> new Vocal input\> draw (new) background \> draw cloud

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [December 12, 2018, 7:27pm UTC](https://discourse.processing.org/t/reset-background-outside-draw-and-setup-to-clear-display/6515/6 "2018-12-12T19:27:35Z")

</div>

Well, you should turn back off the `dataReceived` variable:

```auto
if (dataReceived == true) {
  background(226, 35, 26);
  dataReceived = false;
}

```