Size() Bug in Processing 3.5.4

Processing Coding Questions
1

I’m trying to position rectangles for the UI of a basic painting program in relation to the Width and Height of the window. I’ve looked elsewhere and found I should introduce ‘size()’ in ‘settings()’ as opposed to ‘setup()’. The window size appears appropriately, though later in the code Processing thinks that the size is the default (100, 100). Introducing in ‘setup()’ does the same as in ‘settings()’.

I put in some ‘println’ functions at the top of draw which are giving me contradictory information. For example I made a ‘testHeight’ variable which equals ‘height’. I printed the value of ‘height’ and it gives me 800, I printed the value of ‘testHeight’ and it gives me 50. Is there something I’m missing?
(I know my code is a mess, I’m new to this.)

void settings() {
  size(1000, 800);
}

void setup() {
  background(255);
}

int x = 320;
int y = 180;

// Brush object
void Brush() {
  this.x = mouseX;
  this.y = mouseY;
  this.brushSize = brushSize;
  this.brushColor = brushColor;
  this.brushStatus = brushStatus;
}

int sliderX = 10;

int brushSize;
color brushColor = color(0);
String[] brushStatus = {"Draw", "Erase"};

void mouseDragged() { // Adjusts size of brush by moving slider along X axis with mouse.
  if (mousePressed == true && mouseX > 35 && mouseX < 274 && mouseX >= (sliderX - 4) 
    && mouseX <= (sliderX + 4) && sliderX >= 32 && sliderX <= 278 && mouseY >= 342 && mouseY <= 353) {
    sliderX = mouseX;
    brushSize = floor((sliderX - 35) / 2.5);
  }
}

int testHeight = height;


// Slider box Dimension
int sliderBoxX = width*1/20; 
int sliderBoxY = height/2; // boxY Position = windowHeight/2

void draw() {
  // The values given by println seems contradictory.
  println("height/2 = ", height/2); // returns value of 400
  println("sliderBoxY = ", sliderBoxY); // returns value of 50
  println("testHeight = ", testHeight);
  println("height = ", height);
  println("width*1/20 = ", width*1/20);
  println("sliderBoxX = ", sliderBoxX);
  
  
  // Drawing Area Centre
  noFill();
  stroke(0);
  strokeWeight(1);
  rectMode(CENTER);
  rect(width/2, height/2, width*4/5, height);

  // Brush Size Slider
  fill(255);
  stroke(0);
  strokeWeight(1);
  rectMode(CENTER);
  rect(sliderBoxX, sliderBoxY, width*9/100, 15); // outer box
  fill(200);
  rectMode(CENTER);
  rect(sliderX, 348, 8, 11); // draggable slider

  /*
  println("mouseX= ", mouseX);
   println("sliderX= ", sliderX);
   println("brushSize= ", brushSize);
   */

  // Increase / Decrease brush size
  fill(255);
  stroke(0);
  strokeWeight(1);
  rectMode(CORNER);
  rect(15, 10, 50, 15);
  fill(0);
  text(brushSize, 20, 22);
  /*
  if (brushSize > 0 && brushSize < 250) {
   if (keyPressed == true && keyCode == UP) {
   brushSize++;
   } else if (keyPressed == true && keyCode == DOWN) {
   brushSize--;
   }
   } else if (brushSize == 0) {
   if (keyPressed == true && keyCode == UP) {
   brushSize++;
   }
   } else if (brushSize == 250) {
   if (keyPressed == true && keyCode == DOWN) {
   brushSize--;
   }
   }
   */
  // erase tool
  int brushSelection = 0;
  if (keyPressed == true && (key == 'E' || key == 'e')) {
    brushColor = color(255);
    brushSelection = 1;
  } else if (keyPressed == true && (key == 'B' || key == 'b')) {
    brushColor = color(0);
    brushSelection = 0;
  }
  fill(255);
  rect(15, 35, 50, 15);
  fill(0);
  text(brushStatus[brushSelection], 20, 47);

  // Brush
  stroke(brushColor);
  strokeWeight(this.brushSize);
  if (mousePressed == true && mouseX > width*1/10 && mouseX < width*9/10) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }



  // Clear All Button
  fill(255);
  stroke(0);
  strokeWeight(1);
  rect(15, 60, 60, 15);
  fill(0);
  text("Clear All", 20, 72);
  if (mousePressed == true && mouseX >= 15 && mouseX <= 75 && mouseY >= 55 && mouseY <= 70) {
    background(255);
  }

  // Color Buttons
  fill(255);
  rect(567, 10, 70, 15);
  fill(0);
  text("Pick Colour", 570, 22);
  // Red Button
  stroke(0);
  strokeWeight(1);
  fill(255, 0, 0);
  rect(570, 30, 50, 15);
  // Green Button
  fill(0, 255, 0);
  rect(570, 50, 50, 15);
  // Blue Button
  fill(0, 0, 255);
  rect(570, 70, 50, 15);
  if (mousePressed == true && mouseX >= 575 && mouseX <= 625 && mouseY >= 30 && mouseY <= 45) {
    brushColor = color(255, 0, 0);
  } else if (mousePressed == true && mouseX >= 575 && mouseX <= 625 && mouseY >= 50 && mouseY <= 65) {
    brushColor = color(0, 255, 0);
  } else if (mousePressed == true && mouseX >= 575 && mouseX <= 625 && mouseY >= 70 && mouseY <= 85) {
    brushColor = color(0, 0, 255);
  }
}
1 Like
2

Hello,

Hope this helps:

image
image386×667 23.5 KB

Global variables outside of setup(), settings(), draw() are all declared first regardless of where they are placed in your code between those methods.

Read this to understand size():
https://processing.org/reference/size_.html

:)

2 Likes
3

Thank you for the quick response! I think this helps, I just have one question. Should I declare all global variables before setup()/settings(), then assign their values within setup()/settings()? Or at least any variables that use width/height?

1 Like
4

You can declare and initialize global variables anywhere outside of setup(), settings() and draw() and then you can change them later in code with some constraints (see references to understand order of execution).

Go to the Processing page and do some research. :)

To get you started:

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate them.

This is a very short list:

Resources < Click here to expand !

I encourage you to review the resources available here:

:)

2 Likes
5

Thanks for your help! It’s working now.

2 Likes
6

One further point. You can put global declarations anywhere, in any order, and they will always be evaluated before settings, setup, draw. Important to know.

However, by convention, global declarations should be placed at the top, after any import statements and before settings/setup. This helps make code easy to read. If you flip through the reference, tutorials, and examples, you will notice that they always do this without exception–it is a good habit to learn.

1 Like