Changing the size of a rectangle

Processing Coding Questions
1

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
2

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
3

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
4

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
5

Sorry ,but could you explain more?

6

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

then come back and show your new version

1 Like
7

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
8

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

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
10

thanks, i now understand what i did wrong.

1 Like
11

So, what was it that you did wrong?

12

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
13

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
14

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
15

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
16

format your code please

1 Like
17

Prior to posting hit ctrl-t in processing

18

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

1 Like
19

i have formatted in appropriately

20

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