# How do I change the size of the display window?

**URL:** <https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384>\
**Category:** Coding Questions\
**Created:** [November 13, 2020, 3:03am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384 "2020-11-13T03:03:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 13, 2020, 3:03am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/1 "2020-11-13T03:03:41Z")

</div>

So, I was tampering around with the “setResizable” feature in Processing. I was pretty satisfied with the results, when combined with the “scale” function and the “PMatrix” class, I can basically resize the entire sketch while it’s running without changing anything.

The problem is, at least within the code, I can’t seem to change the window size. I can still move my mouse to the edge of the window, and once my cursor becomes an arrow, click and drag to change the dimensions of the window. But, I need to be able to change it within the code!

I tried using “setSize(”, but it didn’t really seem to do anything. It changed the size of the PGraphics that gets projected onto the window, but didn’t change the size of the window itself. The minimize, maximize, and close buttons were still in the same place, the thin gray rectangle surrounding the sketch was still the same size. Other than cutting off the sketch display at a certain point and having everything after that point be the same color as the background, I don’t really see what was accomplished.

If anyone could give me a hand on this one, I’d greatly appreciate it. Thanks!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 14, 2020, 7:36am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/2 "2020-11-14T07:36:29Z")

</div>

```auto
int w, h;
boolean change;

void setup() {
  size(500, 500);
  w = width;
  h = height;
  background(255);
  surface.setResizable(true);
}

void draw() {
  surface.setSize(w, h);
  if (w > 500) change = true;
  if (!change) w++; 
  else w--;
  if (w < 400) change = false;
}

```

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 14, 2020, 7:40pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/3 "2020-11-14T19:40:11Z")

</div>

But that doesn’t change the size of the window itself. Just the canvas it draws on 😕

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 14, 2020, 7:44pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/4 "2020-11-14T19:44:47Z")

</div>

Then you didn’t run the code. It changes the window with borders;

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 14, 2020, 7:58pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/5 "2020-11-14T19:58:39Z")

</div>

That doesn’t really change anything, though. It changes what it says the dimensions are, but not the actual dimensions themselves. 😕

So, I set the canvas’s dimensions to 545,675 in the settings function, and setResizable(true) in the setup function. I also made it so it prints the width & the height every frame, just for demonstration.

Here’s what happens if I call setSize(600,700) within the void draw():

 ![Screenshot (21)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6e6981e8c7612fa5ca2c91376a3d467d194f1845.png)

And here’s what happens if I don’t:

 ![Screenshot (20)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c5d54992f03458b8dce614a2391673a77621a051.png)

I apologize for the text not being easily readable on the upload quality, but the first one says “width=500, height=700” and the second says “width=545, height=675”. The system thinks that the canvas has changed size, but as we can see, the window is the exact same size.

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 14, 2020, 8:38pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/6 "2020-11-14T20:38:46Z")

</div>

Okay, I feel really, really, really dumb. For some reason, I didn’t notice that your code says “surface.setSize(”, as opposed to just “setSize(”. I apologize for not listening, and thank you for the help so far.

With that said, this problem isn’t completely fixed just yet. There is a bug in the setSize function that seems to, on occasion, set dimensions that are completely different than what I asked for in the code. It’s hard to explain what’s going on, and I actually don’t have time at the moment to perform tests to make sure I didn’t just set the numbers wrong. However, when I get the time, if I determine that it’s just something on my end, I’ll be sure to mark your answer as the solution. If not, I’ll be sure to clarify what happened in a followup comment and see if we (or someone else, you don’t necessarily have to help if you don’t want) can figure out what’s going on.

Thanks!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 14, 2020, 8:40pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/7 "2020-11-14T20:40:42Z")

</div>

Well, I made a video and now I will upload it anyway.

![ezgif.com-gif-maker](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/af0fab01e256654a1efb27243d436cbda28d6d27.gif)

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 14, 2020, 8:47pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/8 "2020-11-14T20:47:16Z")

</div>

Yup, that’s the same results I got when I copied over your code. I was so confused why your code worked and mine didn’t. 😊 Also, out of curiosity, what object was the setSize acting on when I _didn’t_ put the “surface .” before it? Just for curiosity’s sake.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 14, 2020, 9:20pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/9 "2020-11-14T21:20:18Z")

</div>

> [@Math\_Machine](#):
>
> Also, out of curiosity, what object was the setSize acting on when I _didn’t_ put the “surface .” before it?

Not sure, maybe on the canvas frame. see line 489 [here](https://github.com/processing/processing/blob/master/core/src/processing/awt/PSurfaceAWT.java).

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 15, 2020, 11:57am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/10 "2020-11-15T11:57:22Z")

</div>

## The difference between `setSize()` and `surface.setSize()`

The following discussion applies to Processing sketches using Java mode only.

There are two parts to the sketch

1. **The window** - this is a java.awt.JFrame which as the name suggest is a simple window frame with a title bar and close icon which can hold content. This is referenced by the variable `surface`
2. **The canvas** - this is the drawing surface and its starting size is fixed with the `size(w, h)` statement found in the `setup()` or `settings()` method. It is an object of type java.awt.Canvas

When a processing sketch is executed it creates the canvas using the values from `size(w, h)` and a JFrame whose size is just big enough to surround the canvas.

Now in Java awt/Swing you can change the size of either the window or the canvas _without_ changing the size of the other component. In Processing this is not the case, if you modify the frame size with `surface.setSize()` then the canvas is resized but not the the other way round,

Now back to the final problem - although `setSize()` _does not change_ the window size it _does change_ the variables `width` and `height`

So in this sketch you would expect the green rectangle to fill the display it doesn’t. I suspect that this is a side-effect caused by software updates and although not desirable behaviour is easily avoided.

```auto
void setup() {
  size(600, 600);
  surface.setResizable(true);
  setSize(500, 400); // Does not resize window
}

void draw() {
  background(255, 200, 0);
  fill(0, 192, 0);
  // expect this next line to fill display with green rectangle
  rect(0, 0, width, height);
  // but it doesn't
}

```

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 15, 2020, 5:00pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/11 "2020-11-15T17:00:53Z")

</div>

Okay, so I’ve done some further experimentation, and yeah…it’s not just my code that’s flopping up here.

```auto
void setup() {
  size(300,400);
  surface.setResizable(true);
}

void draw() {
  background(0);
  surface.setSize(300,400);
}

```

If I run this sketch, the code will make a perpetual effort to keep the size at 300,400, no matter how much I resize things. Unfortunately, this effort appears to be in vain. Observe:

 ![Screenshot (22)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bfc71a2e3aca31a8ef97a24388264adca93e694a.png)

Keep in mind, I did nothing special here. I simply clicked and dragged to expand the window. Every time I do this, the moment I release the mouse button, it fails to rescale back to 300,400.

I should also note that, when I tried having it println the dimensions, it was still convinced the width and height was 300,400. So that’s great…

(It’s also worth noting that my end goal is to create a program that I can resize, but who’s width to height ratio is always constant.)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 15, 2020, 5:42pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/12 "2020-11-15T17:42:32Z")

</div>

I tried your code and when I used the mouse to resize the window it always went back to 300x400 whenever I stopped dragging or released the mouse button. (I was running it on a iMac)

I do suggest you modify the program to avoid changing the window size while its trying to render the frame. Try this

```auto
int w, h;

void setup() {
  size(300, 400);
  w = width;
  h = height;
  surface.setResizable(true);
  registerMethod("pre", this);
}

void pre() {
  if (w != width || h != height) {
    surface.setSize(w, h);
  }
}

void draw() {
  background(255, 200, 0);
  fill(0, 200, 0);
  rect(0.25 * width, 0.25 * height, 0.5* width, 0.5 * height);
}

```

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 15, 2020, 5:53pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/13 "2020-11-15T17:53:15Z")

</div>

![Screenshot (23)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f6b378a6b81f583f606931e5867e22a11cf7585.png)

No luck 😞

I should note, I’m doing this on Windows 10.

Also worth noting, when I change the window size with my mouse, the window bugs out graphically until I stop resizing it. This happens regardless of if I call the setSize() function.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 15, 2020, 6:00pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/14 "2020-11-15T18:00:11Z")

</div>

Perhaps someone else can try in o Windows 10 and see if they get the same result.

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 15, 2020, 6:28pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/15 "2020-11-15T18:28:19Z")

</div>

I could send a video if you want?

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 15, 2020, 7:03pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/16 "2020-11-15T19:03:40Z")

</div>

Okay, so as it turns out, what was tripping me up was the “snap windows” feature in Windows 10.

 ![Screenshot (24)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d675895ce3cab867288d70f4543bce4e6bce9b6c.png)

Once I disabled this feature, the program worked exactly as you said it would. Granted, it still had those graphical glitches I described, but still.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 16, 2020, 12:43pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/17 "2020-11-16T12:43:12Z")

</div>

> [@Math\_Machine](#):
>
> it still had those graphical glitches I described, but still.

> [@Math\_Machine](#):
>
> the window bugs out graphically until I stop resizing it.

I assume you mean that the windows ‘flickers’ If that is the case then try this code - on my machine gave good results unless you resized the window quickly.

```auto
int w, h;

void setup() {
  size(300, 400);
  w = width;
  h = height;
  surface.setResizable(true);
}

void mouseEntered() {
  if (w != width || h != height) {
    surface.setSize(w, h);
  }
}

void mouseExited() {
  if (w != width || h != height) {
    surface.setSize(w, h);
  }
}

void draw() {
  background(255, 200, 0);
  fill(0, 200, 0);
  rect(0.25 * width, 0.25 * height, 0.5* width, 0.5 * height);
}

```

The above code is not perfect - sometimes the window does not resize after releasing the mouse but that is fixable but requires more sophisticated code.

Maintaining the aspect ratio is significantly harder to do well. I might have a go at producing a more complete example this afternoon. Watch this space.

---

<div class="post-metadata">

**Author:** ![Math\_Machine](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Math\_Machine](https://discourse.processing.org/u/Math_Machine)\
**Post date:** [November 16, 2020, 9:16pm UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/18 "2020-11-16T21:16:30Z")

</div>

Cool! I didn’t know there was a mouseEntered or mouseExited function.

By any chance, is there any way the console can figure out if the mouse is being held down when it’s outside the PApplet console?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 17, 2020, 2:34am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/19 "2020-11-17T02:34:15Z")

</div>

> [@Math\_Machine](#):
>
> I didn’t know there was a mouseEntered or mouseExited function.

Neither I. I wonder why the request on taking it into the reference [was denied.](https://github.com/processing/processing-docs/issues/720)  
It seems really useful.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 17, 2020, 10:25am UTC](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384/20 "2020-11-17T10:25:29Z")

</div>

> [@Math\_Machine](#):
>
> By any chance, is there any way the console can figure out if the mouse is being held down when it’s outside the PApplet console?

Plain Java seems not capable of doing this. You can find some tricks using overlays etc, but the correct way I think to do this is using [JNA](https://riptutorial.com/java/example/18621/introduction-to-jna) Here is also a [Java lib](https://github.com/kwhat/jnativehook).  
Personally, I use [AHK](https://www.autohotkey.com/docs/commands/) for Windows objects and dll access by launching it, as an in the background running app.

[Next page](https://discourse.processing.org/t/how-do-i-change-the-size-of-the-display-window/25384.md?page=2)