Learning Processing: Chapter 4: Variables: Exercise 4-5: Width and Height System Variables

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

void draw() {
  background(255);
  stroke(0);
  fill(175);
  line(0,0,width,height);
  line(width,0,0,height);
  rectMode(CENTER);
  ellipse(width/2,height/2,width/2,height/2);
  rect(width/8,height/2,width/8,height/8);
  rect(width-width/8,height/2,width/8,height/8);
}

Comments (8)

LoPan

Hi, I just wanted to ask you a little bit about the math used to determine the right-hand rect’s x-position. My math is pretty weak, and for some reason the width-width/8 operation messes with my head. Is there a book you would recommend for people who want to improve their numerical skills for programming?

Thanks!
(Great book btw)
K

The sum is actually width – (width/8). Its just not immediately obvious from the way the code presents it. I’d be interested in some math books too if anyone has any recommendations.
http://www.learningprocessing.com Daniel Shiffman

Ah, yes, good clarification. I’ll have to add the parentheses in any next rounds of corrections.
zimbrone

I have set the right square position on x axis with “width/8*7″, I think it is more or less the same…
Like splitting the width in eight parts then multiply for seven.
Thanks for your book, in years I have tried to understand something about coding with no results…
Yours is the first programming approach I can understand.
When I am sixty-four…tatatatata tatatata….
I will be sixty-four in eight years from now.
I will be alive and writing code for fun.
Thanks for your effort.
Brian

Daniel,
thanks for one of the easiest to understand programming books I’ve ever come across…I’ve been waiting most of my life to work with sensors and microcontrollers, and now people like you are making this all accessible to people like me.

I was modifying this exercise to see if I could draw the elements with original proportions, but scaled to the window size. I thought I could evaluate the narrowest of width and height, then use that as a basis to dimension the shapes. But my “if” code block seems to be causing trouble (it will run if I remove it, but nothing renders (or prints) if I leave the code block in.) What do I have wrong? And since I can’t seem to get the println() to work either, I can’t diagnose what the program is doing…

int rDim=20;

void setup(){
size (250,200);
background(175);
}

if (width=>height){
rDim=height
} else {
rDim=width
}

void draw(){
stroke(0);
rectMode(CENTER);
rect(125,100,rDim/2,rDim/2);
}

thanks!
http://www.learningprocessing.com Daniel Shiffman
The if statement needs to live somewhere in your code where it will actually be executed, i.e. setup() or draw(). Also, you are missing some semi-colons. Try the following:
```
int rDim=20;

void setup(){
  size (250,200);
  background(175);
  if (width > height){
    rDim=height;
  }  else {
    rDim=width;
  }

}

void draw(){
  stroke(0);
  rectMode(CENTER);
  rect(125,100,rDim/2,rDim/2);
}
```
http://www.mimran.com&patrickmimran.com Patrick Mimran

I made this little code

to combine an automatic decrease in size with a mouse rectangle size \streching \
it works as i wanted , but when the ellipse arrive to the minimum size , from there it grows again ,
it is something i do not understand . Thanks Patrick

int trectx = 50;
int trecty = 50 ;

int trectmx = 50;
int trectmY = 50;

float ellx = 200;
float elly = 200;

void setup () {

size (400, 400 ) ;

}

void draw () {

background (250,0,0);
stroke (0) ;

rect ( width/8 ,height/2 , mouseX , mouseY ) ;
stroke (600,0);
fill ( 250,0);
rect ( width/2 ,height/2 , mouseX+200 ,mouseY+200 ) ;
fill ( 250);
rectMode (CENTER );
rect ( width/8 ,height/2 , mouseX , mouseY ) ;
rect ( 350 ,height/2 , mouseX ,mouseY ) ;
ellipse (width/2,height/2,ellx,elly);
stroke (200);
line (0,0 ,400,400);
stroke (250);
line (400,0 ,0,400);

ellx = ellx -0.2 ;
elly = elly -0.2 ;

}
http://www.learningprocessing.com Daniel Shiffman
When you give something a negative dimension (width or height) in Processing, this is not the same as a zero width or height. With a rectangle, it will draw it to the left or up (rather than to the right or down). With a centered ellipse, it is just the equivalent as a positive width or height.

You’ll want to constrain the values so that ellx or elly stays at zero, i.e.:
```
ellx = constrain(ellx-0.2,0,200);
elly = constrain(elly-0.2,0,200);
```