Height / width for a beginner

Processing Coding Questions
1

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
2

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 :heart_eyes::heart_eyes::heart_eyes:

2 Likes
3

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
4

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

3 Likes