# Background turns black when resizing

**URL:** https://discourse.processing.org/t/background-turns-black-when-resizing/39359
**Category:** Coding Questions
**Created:** [October 19, 2022, 3:12pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359 "2022-10-19T15:12:31Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Katsucchi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katsucchi/32/17391_2.png) [@Katsucchi](https://discourse.processing.org/u/Katsucchi)
#### Post date: [October 19, 2022, 3:12pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/1 "2022-10-19T15:12:31Z")

</div>

I have homework where i was supposed to make recreate a drawing from a famous painter. The assignment now is to make the window resizable. I came up with this solution:

```auto
void setup() {
  background(255, 255, 255);
  size(600, 600, P2D);
  surface.setResizable(true);
}

void draw() {
  stroke(0, 0, 0);
  strokeWeight(3);
  u = min(height/600.0, width/600.0);
  
  for (int i=0; i<5; i=i+1) {
    for (int j=0; j<1; j+=1) {
      x = int(random(0, 300*u));
      y = int(random(0, 300*u));
      w = int(random(2.0*u, 5.0*u));
      h = int(random(2.0*u, 5.0*u));
    }
    pushMatrix();
    translate(x, y);
    scale(w, h);
    fill(random(100, 255), 0, 0);
    rect(0, 0, 100, 100);
    popMatrix();
    
    for (int j=0; j<1; j+=1) {
      x = int(random(0, 300*u));
      y = int(random(0, 300*u));
      w = int(random(2.0*u, 5.0*u));
      h = int(random(2.0*u, 5.0*u));
    }
    pushMatrix();
    translate(x, y);
    scale(w, h);
    fill(0, 0, random(100, 255));
    rect(0, 0, 100, 100);
    popMatrix();
    
  }
  noLoop();
}

```

Problem, when i resize the window, the whole window turns black. Do i just not see the problem right now?

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2022, 3:35pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/2 "2022-10-19T15:35:39Z")

</div>

Do you have to use P2D renderer? Try it without it.

---

<div class="post-metadata">

### Author: ![Katsucchi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katsucchi/32/17391_2.png) [@Katsucchi](https://discourse.processing.org/u/Katsucchi)
#### Post date: [October 19, 2022, 3:56pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/3 "2022-10-19T15:56:08Z")

</div>

Kinda worked? but not really, now the part of the window i make bigger goes black.

 ![Screenshot_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/4/8494cf0d44ef71f9b671355065bdadc6ccb15dc9.png)

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [October 19, 2022, 4:06pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/4 "2022-10-19T16:06:38Z")

</div>

Hi @Katsucchi,

> [@Katsucchi](#):
>
> but not really, now the part of the window i make bigger goes black.

This is because you only drew the background once in `setup()`. Since the `draw()` function is being executed multiple times per second, you need to draw your background at each iteration in order to clear the screen.

Outside of the initial region, it’s black by default… unless the background is drawn again 😉

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [October 19, 2022, 4:16pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/5 "2022-10-19T16:16:43Z")

</div>

Hi @Katsucchi ,  
You also need to remove the…

> [@Katsucchi](#):
>
> `noLoop();`

… otherwise it will stop to call the draw loop.

> **[noLoop() / Reference](https://processing.org/reference/noLoop_.html)**
>
> Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begin to run continuously again. If using noLoop() in setup(…

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![Katsucchi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katsucchi/32/17391_2.png) [@Katsucchi](https://discourse.processing.org/u/Katsucchi)
#### Post date: [October 19, 2022, 4:43pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/6 "2022-10-19T16:43:12Z")

</div>

After removing the noLoop(); it works, but i only want the first for loop to be run once, i dont want to be contantly bombarded with new shapes, only the 10 that get created in the inital “run”(idk if thats the right way to call it xd).

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2022, 5:32pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/7 "2022-10-19T17:32:23Z")

</div>

Looks just fine on a Mac. What operating system are you using? Was that an exported app that you posted with the black border? Are you trying to make resizable rectangles?

 ![Screen Shot 2022-10-19 at 12.29.41 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/7/273d0283595f60d60f77f7826b3b62790c74cc44.png)

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2022, 6:06pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/8 "2022-10-19T18:06:02Z")

</div>

What happens if you put noLoop() as the last line in setup()? What happens on your system if you run this simple demo:

```auto
void drawRect() {
  stroke(0);
  strokeWeight(4);
  fill(255, 0, 0);
  rect(60, 60, width - 200, height - 200);
}

void setup() {
  size(600, 600);
  surface.setResizable(true);
  noLoop(); // Last line of setup()
}

void draw() {
  background(209);
  drawRect();
}

```

---

<div class="post-metadata">

### Author: ![Katsucchi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katsucchi/32/17391_2.png) [@Katsucchi](https://discourse.processing.org/u/Katsucchi)
#### Post date: [October 19, 2022, 6:15pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/9 "2022-10-19T18:15:35Z")

</div>

Still shows the Black Borders like in the first screenshot 😕  
I am also using Windows 10.

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2022, 6:18pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/10 "2022-10-19T18:18:48Z")

</div>

Sounds like an operating system problem. There are several Windows users in this forum and hopefully one of them can help you figure it out.

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2022, 10:27pm UTC](https://discourse.processing.org/t/background-turns-black-when-resizing/39359/11 "2022-10-19T22:27:49Z")

</div>

I just tested the short demo above on an old Windows PC (8.1?) using Processing 3.5.4 and the demo ran as expected:

 ![wnd](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/c/0c754e08b41a4ec014bfbadd6a6a900f1ea4a7c1.png)

Original posted code without P2D also ran ok:

 ![win2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/c/8c073d9be3e48a3a74ca8cc19e1c686da743c530.png)
