# Changing the size of a rectangle

I was asked to Write a program which allows the user to change the size of a rectangle with the arrow keys. The ‘R’ key should reset the size of the rectangle to 50 x 50.

this is what i have so far. I believe the program isn’t changing the size of the rectangle

``````int x = 0;
int y = 0;

void setup(){
size(250,250);
background(0,0,255);
noStroke();
}

void draw(){
fill(255,255,0);
rect(100,100,50,50);
if((keyPressed == true)){

if((keyCode == RIGHT)){
rect(100+x,100+y,50,50);
x++;
}else if((keyCode == UP)){
rect(100+x,100+y,50,50);
y--;
}else if((keyCode == DOWN)){
rect(100+x,100+y,50,50);
y++;
}else if((keyCode == LEFT)){
rect(100+x,100+y,50,50);
x--;

}
}
}
``````
1 Like

i think you’re adding the adjusted x and y to the coordinates of the rectangle where you should be applying them to the width and height and possibly also rename them such

2 Likes

First of all you want `background(0);` at start of `draw()` because you only want one rectangle

2nd, when a key gets pressed, don’t draw the rectangle in this code section. It would only show briefly. Instead you draw a rectangle in line 2 throughout (you have this already). Use x and y there as 3rd and 4th parameters. The trick is to store data in the variables x and y and use them throughout.

Before setup(): instead of making x and y 0, make them 50

Rename x and y (denoting position) to w and h (width and height of the rectangle). See also
https://www.processing.org/reference/rect_.html

Chrisir

2 Likes

hmm… thats not the correct way you change the size.

standard rect() expects these paramters
`rect(yPos, xPos, rectWidth, rectHeight);`
place this in draw after `background();`

keep track the size in different variables. just change these variables to resize the rect. when you press ‘r’ change the size to 50 50.

use `rectMode(CENTER)` if you need the rectangle centered

2 Likes

Sorry ,but could you explain more?

No, please read what we wrote and apply it to your own code

then come back and show your new version

1 Like

you will not get what you expect. because, the changes is not on size, but on location. learn how rect() works. try with a simpler one. tweak those parameters and see what happened

1 Like

so here is my new code… my new problem is when a key is pressed the width increases on both sides … same for the height.

``````int h = 50;
int w = 50;

void setup(){
size(250,250);
background(0,0,255);
noStroke();
}

void draw(){
rectMode(CENTER);
fill(255,255,0);
rect(100,100, w,h);
if((keyPressed == true)){

if((keyCode == RIGHT)){
w += 1;
}else if((keyCode == UP)){
h= h-1;
}else if((keyCode == DOWN)){
h = h+1;
}else if((keyCode == LEFT)){
w -= 1 ;
}
}
}
``````

please note how the code is formatted,
in the IDE by [ctrl][t]
in the forum posting using

`</>` code button

``````int h = 50,w = 50;

void setup() {
size(250, 250);
//rectMode(CENTER);   // this makes fix center, disabled have fix startpoint x,y
fill(255, 255, 0);
noStroke();
println("use arrow keys for size adjust");
}

void draw() {
background(0, 0, 255);
rect(100, 100, w, h);
}

void keyPressed() {
//println("key "+key+" keyCode "+keyCode);
if      ((keyCode == RIGHT))   w++;
else if ((keyCode == UP))      h--;
else if ((keyCode == DOWN))    h++;
else if ((keyCode == LEFT))    w--;
}

``````
1 Like

thanks, i now understand what i did wrong.

1 Like

So, what was it that you did wrong?

So basically what i did wrong, is that were i used x++ , x–, y++, and y-- i thought it would change the height and width

1 Like

so if you want change both, and add also colors…
you run out of keys, for that i had a good idea, try:
MouseWheelPlusPlus
http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here13

1 Like

Not exactly. You had this right in your last version already.

The problem was that you used `rectMode(CENTER);`
(this makes fix center, disabled have fix startpoint x,y)

This is an error hard to find so I don’t blame you for not seeing it.

Good luck and congrats!

Regards, Chrisir

1 Like

For this code

``````int x;
int y;
float circleX;
float circleY;
int points = 0;

void setup(){
size (400, 400);
x = width/2;
y = height/2;
circleX = random(0,400);
circleY = random(0,400);
}

void draw(){
background(0,255,0);
fill(255,0,0);
rect(x, y, 20,20);
fill(0);
ellipse(circleX, circleY, 6,6);
fill(0);
text(“Score :” + points, 0,20);
}
void keyPressed() {
if ((keyPressed == true) && (key == CODED)) {
if (keyCode == UP){
y --;
} else if (keyCode == DOWN) {
y ++;
} else if (keyCode == LEFT){
x --;
} else if (keyCode == RIGHT) {
x ++;
}

``````

}

``````
//collision with the coin
if ((x >= circleX) && (y >= circleY)){
ellipse(circleX, circleY, 6,6);
points++;
}
}
``````

Could you help me with the collision or tell me what is wrong with it. Please

1 Like

format your code please

1 Like

Prior to posting hit ctrl-t in processing

you re posted a new topic inside another topic. keep the community tidy right?

1 Like

i have formatted in appropriately

try:

``````
int x, y;
float circleX, circleY;
int points = 0;

void setup() {
size (400, 400);
x = width/2;
y = height/2;
circleX = random(0, 400);
circleY = random(0, 400);
}

void draw() {
background(0, 255, 0);
fill(255, 0, 0);
rect(x, y, 20, 20);
fill(0);
ellipse(circleX, circleY, 6, 6);
fill(0);
text("Score :" + points, 0, 20);

collect() ;
}

void keyPressed() {
if ((keyPressed == true) && (key == CODED)) {
if      (keyCode == UP)    y --;
else if (keyCode == DOWN)  y ++;
else if (keyCode == LEFT)  x --;
else if (keyCode == RIGHT) x ++;
}
}

void collect() {
if ((x <= circleX) && ( x+ 20 >= circleX ) && (y <= circleY) && ( y + 20 >= circleY) ) {
points++;
// new coin
circleX = random(0, 400);
circleY = random(0, 400);
}
}

``````
2 Likes