Re-sizing screen not the expected size

Question

int displayX, displayY;
final int screenX=200, screenY=200; // display size

void setup() {
  background(255);
  displayX=displayWidth;
  displayY=displayHeight;
  size(screenX, screenY);
}

void mouseClicked() {
  if (width==screenX) {
    frame.setSize(displayX, displayY);
    setSize(displayX, displayY);
    println(width +" "+height);
  } else {
    frame.setSize(screenX, screenY);
    setSize(screenX, screenY);
    println(width +" "+height);
  }
}

void draw() {
  fill(33, 33, 33);
  rect(0, 0, screenX, screenY);
  fill(77, 77, 77);
  rect(0, 0, screenX-20, screenY-20);
}

full code
press b to start beta - left mouse click change the size

I want a small size on startup (screenX). After a click it grows to the display size. After another click it gets the small size again.

But after changing the size the sizes aren't correct. I see that on the border. I've everywhere a border around my "star". But this is only on top and left correct.

I also tested it with a lineal.

Processing 2.2.1
Windows 7

Answer 1

Step one is to check out the Processing reference.

From the size() documentation:

The size() function can only be used once inside a sketch, and it cannot be used for resizing.

So, you can't use the size() function the way you're trying to use it. Instead, you can access the frame variable directly:

frame.setSize(200, 200);

You might toggle the frame's size like this:

boolean big = false;

void setup(){
  size(200, 200);
}

void mouseClicked(){
  if(big){
    frame.setSize(200, 200); //set the window size
    big = false;
  }
  else{
    frame.setSize(400, 400); //set the window size
    big = true;
  }
}

void draw(){
  background(0);
  ellipse(mouseX, mouseY, 10, 10);
}

However, if you run that program, you might notice something like this:

The window has increased size, but the actual canvas where things get drawn hasn't. So you get a gray area, and mouse events aren't detected correctly. To fix that problem, you have to set the size of the canvas as well, by calling the setSize() function:

boolean big = false;

void setup(){
  size(200, 200);
}

void mouseClicked(){
  if(big){
    frame.setSize(200, 200); //set the window size
    setSize(200, 200); //set the canvas size
    big = false;
  }
  else{
    frame.setSize(400, 400); //set the window size
    setSize(400, 400); //set the canvas size
    big = true;
  }
}

void draw(){
  background(0);
  ellipse(mouseX, mouseY, 10, 10);
}