Unable to use height/width in a variable?

Lithomancing

I'm having issues using the height and width in my code, but only when it's being used to create a value for a variable. Here's an example of what I'm trying to run:

int x = 200;
int y = 200;

int c1 = width;
int c2 = height/2;

void setup() {
  size(300, 300);
  colorMode(HSB, 360, 100, 100);
  frameRate(1);
  background(36, 26, 98);  
  println(c1);
}


void draw () {
  fill(random(359), random(10, 15), 99);
  ellipse(width/2, c2, x, y);
}

When width is used directly as a value (like with the ellipse), it uses the actual value of 300. But when it's used to calculate a variable like c1 or c2, it defaults to the standard 100 pixels. For the println function, it will print 100 as the value for c1, but it will print 300 for the value of width or height. Am I doing something wrong?

GoToLoop

https://forum.Processing.org/two/discussion/18107/can-t-use-width-or-height-within-an-object

Lithomancing

is there something similar to p5.js's CreateCanvas() that I could use for Processing? Or should I just not use width or height to give value to a variable? (Thank you for the link btw!)

GoToLoop

p5.js' createCanvas() is Processing's size().
But I was expecting you to figure out that both width & height can't be used before size()! 8-X

jeremydouglass

To underscore --

size() sets width and height -- and it should be the first line of setup, as many other things depend on it.

So, this is what happens if you use width or height to initialize a global variable before setup has run:

1. int c1 = width; // width currently = default, 100
2. size(300,300); // now width and height = 300
3. println(c1); // c1 is still 100

To avoid this, assign your global variables in setup() after you have called size() and everything will work.

int c1;
void setup(){
  size(300,300);
  c1=width;
  println(c1); // PRINTS 300
}

Lithomancing

GoToLoop and jeremydouglass, thanks so much for helping me out! I'm almost entirely new to Processing (and code in general), and still learning how to organize everything.

I had figured that width and height aren't given a value other than 100 until size() is called, but my problem was that I figured I should be putting variables outside of the setup() function. It worked fine for x and y, but not for width and height. I'm guessing that's because x and y didn't rely on any information in setup(), but width and height did? Or should I get in the habit of only giving a value to variables when a function like setup() or draw() calls for it or directly relies on information in them?

This would work fine and draw the ellipse off the bottom right corner:

int c1,c2;

void setup() {
  size(300, 300);
  c1 = width;
  c2 = height;
  println(c1 + " c1 value"); // prints "300 c1 value"
  println(width + " width value"); // prints "300 width value"
}

int x = 200;
int y = 200;

void draw () {
  ellipse(c1, c2, x, y);
}

But this would leave c1 and c2 at 100 and draw the ellipse in the top left:

void setup() {
  size(300, 300);
  println(c1 + " c1 value"); // prints "100 c1 value"
  println(width + " width value"); //prints "300 width value"
}

int c1 = width;
int c2 = height;
int x = 200;
int y = 200;

void draw () {
  ellipse(c1, c2, x, y);
}

Again, thanks for all the help!

jeremydouglass

The important concept to understand here is "variable scope". Rather than processing reading your program from top to bottom, it first reads things outside any function, then it reads things inside functions.

So, in your second example, your "int c1 = width;" is a global statement -- it gets read before setup(), even though it occurs on line 7.