# Height / width for a beginner

Hi,

I’m all new to Processing, trying to learn the basics. Right now I’m trying to make a square expand for the center of a window. This works fine except for the first time running the loop. I am defining corner x and y as halves of width and height, which seems to work fine in the draw-function, but not outside. Am I way off?

``````float side = 0.00;
float border = height/2;
float cornerX = width/2;
float cornerY = height/2;

void setup(){
size(800,800);
frameRate(30);
}

void draw(){
background(#FCFAFA);
noStroke();
fill(242,230,238);
if(side<border){
rect(cornerX, cornerY, side, side);
side=side+2;
cornerX--;
cornerY--;
} else if (side >= border){
side = 0.00;
cornerX=width/2;
cornerY=height/2;
border=height;
}
}
``````
1 Like

Hi @harsande, If I’m not wrong, the height and the width are taken after the setup or something similar, if you initiates de variables in the setup() it works fine:

``````float side = 0.00, n1=100,n2=0,n3=1000 ;
float border;
float cornerX;
float cornerY;
int r1=252, g1 = 250, b1 = 250,r2=242,g2=230,b2= 238;

void setup(){
size(800,800);
frameRate(60);
border = height;
cornerX = width/2;
cornerY = height/2;
}

void draw(){
background(r1 % 255,g1 % 255,b1 % 255);
noStroke();
fill(r2 % 255,g2 % 255,b2 % 255);
if(side<border){
rect(cornerX, cornerY, side, side);
side+=2;
cornerX--;
cornerY--;
} else{
n1++;n2++;n3++;
rect(cornerX, cornerY, side, side);
r1=r2;g1=g2;b1=b2;
side = 0.00;
cornerX=width/2;
cornerY=height/2;
border=height;
r2+=noise(n1)*255;
g2 +=noise(n2)*255;
b2+=noise(n3)*255;
}
}
``````

Sorry, last update, now is beautiful

2 Likes

also processing not allows to do

``````void setup() {
size(w,h);
}
``````

there is this feature:

``````int w =500, h = 300;
float cornerX = w/2;
float cornerY = h/2;
float side = 10;

void settings() {
size(w, h);
}

void setup() {}

void draw() {
rect(cornerX, cornerY, side, side);
}

``````
2 Likes

Thank you, this works perfectly! Also thanks for new features to explore:)

3 Likes