# Resize event for sketch without draw() loop

**URL:** <https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462>\
**Category:** Coding Questions\
**Created:** [April 17, 2021, 11:26pm UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462 "2021-04-17T23:26:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![TechnicJelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/technicjelle/32/15033_2.png) [@TechnicJelle](https://discourse.processing.org/u/TechnicJelle)\
**Post date:** [April 17, 2021, 11:26pm UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/1 "2021-04-17T23:26:32Z")

</div>

Hi there!

A few friends and me have been working on a small spreadsheet-like software program lately and of course, we made it resizeable by using `surface.setResizable(true)`.  
The thing of this software is that, because it’s basically just a spreadsheet, we’re not refreshing the screen 60 times a second like usual, because there is absolutely no need to.  
We do this by putting a `noLoop()` at the end of the `draw()` function and calling `loop()` whenever the screen needs to be redrawn, like in `onMousePressed`.

The big problem here is that is doesn’t redraw the screen when the window is resized and there is no `onWindowResized()` event or something similar either that we could use.  
I’ve googled for stuff like this, but I kept on finding things using a `pre()` function, but as that runs before the `draw()` function, that doesn’t work in our case, as the `draw()` function is hardly called at all.

Does anyone know if there is a (simple) way of going about solving this problem?

---

<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:** [April 18, 2021, 5:43am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/2 "2021-04-18T05:43:01Z")

</div>

> The big problem here is that is doesn’t redraw the screen when the window is resized

The following demo refreshes the window when it is resized on my system (Mac). Could you post code which fails and demonstrates the problem?

```auto
void setup(){
 size (320, 240);
 surface.setResizable(true); 
 noLoop();
}

void draw(){
 background(255);
 rect(10, 10, 100, 100);
}

```

---

<div class="post-metadata">

**Author:** ![TimeLex](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/timelex/32/12869_2.png) [@TimeLex](https://discourse.processing.org/u/TimeLex)\
**Post date:** [April 18, 2021, 7:47am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/3 "2021-04-18T07:47:27Z")

</div>

I would make a boolean (for example “update”) that always on the end of draw is set on false. If any funktion will update the display, it must set update on true. The whole Part that update your display is in an if:

```auto
if(update) {
  background(255);
  //...
  
  update = false;
}

```

Also you make two variables pWidth and pHeight that are set to width and height on the end of draw.  
At the start of draw you make another if:

```auto
if(pWidth != width || pHeight != height)
update = true;

```

whole code:

```auto
boolean update = true;

int pWidth, pHeight;

void setup() {
  surface.setSize(500, 500);
  surface.setResizeable(true);
  pWidth= width;
  pHeight = height;
  //...
}

void update() {
  if(pWidth != width || pHeight != height)
  update = true;
  
  if(update) {
    //Code for Display
    
    update = true;
  }
  
  pWidth = width;
  pHeight = height;
}

```

---

<div class="post-metadata">

**Author:** ![TechnicJelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/technicjelle/32/15033_2.png) [@TechnicJelle](https://discourse.processing.org/u/TechnicJelle)\
**Post date:** [April 18, 2021, 9:26am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/4 "2021-04-18T09:26:18Z")

</div>

This is how we do it:

```auto

void setup() {
  size (320, 240);
  surface.setResizable(true);
}

void draw() {
  //every frame the background changes, so you can see when the screen refreshes
  background(random(255));
  grid();
  noLoop();
}

void mousePressed() {
  loop();
}

void grid() {
  stroke(0);
  for (int i = 0; i < width; i+=20) {
    line(i, 0, i, height);
  }
  for (int i = 0; i < height; i+=20) {
    line(0, i, width, i);
  }
}

```

This works like we want it to, but we need a kind of `onScreenResized()` function that, like `mousePressed()`, gets fired even if the `draw()` loop isn’t running.  
Right now we have to click inside the sketch to make it update the screen, which isn’t that much of a hassle, and we can deal with this minor annoyance if there is no solution.

---

<div class="post-metadata">

**Author:** ![TechnicJelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/technicjelle/32/15033_2.png) [@TechnicJelle](https://discourse.processing.org/u/TechnicJelle)\
**Post date:** [April 18, 2021, 9:29am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/5 "2021-04-18T09:29:02Z")

</div>

We’ve thought about doing this too, but ultimately decided against it, because of the fact that the `draw()` still runs every frame. We want absolutely nothing happening at all when the sketch is not being interacted with and a loop running 60 times a second is not nothing at all.  
Maybe we could set the `frameRate` to 60 is the mouse is inside the sketch and to a really low number if it’s not, but that also kind of defeats the purpose.

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [April 18, 2021, 10:00am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/6 "2021-04-18T10:00:26Z")

</div>

What you’re looking to do is add a (renderer-dependent) stage/window resize **callback listener** , which should call Processing’s `redraw()` when prompted. See [Resizable window with constrained proportions](https://discourse.processing.org/t/resizable-window-with-constrained-proportions/7536) for FX2D and P2D examples.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 18, 2021, 10:11am UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/7 "2021-04-18T10:11:15Z")

</div>

I was just doing that but it seems micycle already gave an answer 🙂

```auto
import com.jogamp.newt.opengl.*;
import com.jogamp.newt.event.*;
class ResizeWindowListener implements WindowListener {
  public ResizeWindowListener() {
    super();
  }
  @Override
    public void windowGainedFocus(WindowEvent arg0) {
  }

  @Override
    public void windowLostFocus(WindowEvent arg0) {
  }

  @Override
    public void windowDestroyNotify(WindowEvent arg0) {
  }

  @Override
    public void windowDestroyed(WindowEvent arg0) {
  }

  @Override
    public void windowMoved(WindowEvent arg0) {
  }

  @Override
    public void windowRepaint(WindowUpdateEvent arg0) {
  }

  @Override
    public void windowResized(WindowEvent arg0) {
    println("resized!");
    loop();
  }
}
void setup() {
  size (320, 240, P2D);
  surface.setResizable(true);
  GLWindow f = (GLWindow)surface.getNative();
  ResizeWindowListener wl = new ResizeWindowListener();
  f.addWindowListener(wl);
}

void draw() {
  //every frame the background changes, so you can see when the screen refreshes
  grid();
  println("drawn!");
  noLoop();
}

int b = 0;
void grid() {
  background(b = (b+10)%255);
  stroke(0);
  for (int i = 0; i < width; i+=20) {
    line(i, 0, i, height);
  }
  for (int i = 0; i < height; i+=20) {
    line(0, i, width, i);
  }
}

```

---

<div class="post-metadata">

**Author:** ![TechnicJelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/technicjelle/32/15033_2.png) [@TechnicJelle](https://discourse.processing.org/u/TechnicJelle)\
**Post date:** [April 18, 2021, 10:05pm UTC](https://discourse.processing.org/t/resize-event-for-sketch-without-draw-loop/29462/8 "2021-04-18T22:05:19Z")

</div>

That’s it! Thank you very much!!  
There’s just a small problem now where the cursor doesn’t change into the expected different resize icon when hovering over the edge of the window. This seems to be a P2D problem related to `surface.setResizable(true);` (We’re on Windows, by the way)  
I can find a few other posts related to this problem, but not a solution. Does that mean there isn’t one?