# Changing the size of a rectangle

**URL:** <https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 3:29am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592 "2019-04-24T03:29:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 24, 2019, 3:29am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/1 "2019-04-24T03:29:56Z")

</div>

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

```auto
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--;
    
  }
  }
  }

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 24, 2019, 4:31am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/2 "2019-04-24T04:31:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 4:38am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/3 "2019-04-24T04:38:27Z")

</div>

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](https://www.processing.org/reference/rect_.html)

Chrisir

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 24, 2019, 6:01am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/4 "2019-04-24T06:01:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 24, 2019, 4:17pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/5 "2019-04-24T16:17:29Z")

</div>

Sorry ,but could you explain more?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 4:30pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/6 "2019-04-24T16:30:04Z")

</div>

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

then come back and show your new version

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 24, 2019, 4:34pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/7 "2019-04-24T16:34:33Z")

</div>

> [@S.L.C.S](#):
>
> 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–;

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

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 25, 2019, 12:03am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/8 "2019-04-25T00:03:18Z")

</div>

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.

```auto
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 ;
}
}
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 25, 2019, 1:05am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/9 "2019-04-25T01:05:37Z")

</div>

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

`</>` code button

```auto
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--;
}

```

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 25, 2019, 1:08am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/10 "2019-04-25T01:08:10Z")

</div>

thanks, i now understand what i did wrong.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2019, 8:11am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/11 "2019-04-25T08:11:57Z")

</div>

So, what was it that you did wrong?

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 25, 2019, 11:01am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/12 "2019-04-25T11:01:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 25, 2019, 11:13am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/13 "2019-04-25T11:13:01Z")

</div>

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](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here13)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2019, 11:30am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/14 "2019-04-25T11:30:54Z")

</div>

> [@S.L.C.S](#):
>
> what i did wrong, is that were i used x++ , x–, y++, and y-- i thought it would change the height and width

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

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 30, 2019, 11:25am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/15 "2019-04-30T11:25:21Z")

</div>

For this code

```auto
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 ++;
}

```

}

```auto

//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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 30, 2019, 11:29am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/16 "2019-04-30T11:29:03Z")

</div>

format your code please

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 30, 2019, 11:40am UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/17 "2019-04-30T11:40:05Z")

</div>

Prior to posting hit ctrl-t in processing

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 30, 2019, 1:40pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/18 "2019-04-30T13:40:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![S.L.C.S](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@S.L.C.S](https://discourse.processing.org/u/S.L.C.S)\
**Post date:** [April 30, 2019, 2:22pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/19 "2019-04-30T14:22:06Z")

</div>

i have formatted in appropriately

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 30, 2019, 4:01pm UTC](https://discourse.processing.org/t/changing-the-size-of-a-rectangle/10592/20 "2019-04-30T16:01:33Z")

</div>

try:

```auto

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);
  }
}

```