# I have a rectangle that will bounce but i want it to change colour whenever it hits a side

**URL:** <https://discourse.processing.org/t/i-have-a-rectangle-that-will-bounce-but-i-want-it-to-change-colour-whenever-it-hits-a-side/25745>\
**Category:** Coding Questions\
**Created:** [November 27, 2020, 1:05am UTC](https://discourse.processing.org/t/i-have-a-rectangle-that-will-bounce-but-i-want-it-to-change-colour-whenever-it-hits-a-side/25745 "2020-11-27T01:05:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![0w3n928](https://avatars.discourse-cdn.com/v4/letter/0/b77776/32.png) [@0w3n928](https://discourse.processing.org/u/0w3n928)\
**Post date:** [November 27, 2020, 1:05am UTC](https://discourse.processing.org/t/i-have-a-rectangle-that-will-bounce-but-i-want-it-to-change-colour-whenever-it-hits-a-side/25745/1 "2020-11-27T01:05:44Z")

</div>

I cant seem to make this work but it changes colour but breaks the thing

float rectx,recty,xspeed=7,yspeed=7;  
color bg = color(random(255),random(255),random(255));  
void setup() {  
fullScreen();  
}  
void draw() {  
background(bg);  
rect(rectx,recty,300,150);  
fill(0,0,0);  
if(rectx\>100 || recty\<100) {

```
xspeed=xspeed*-1;
bg = color(random(255),random(255),random(255)); 

```

}  
if(sideCollision(rectx)) {  
xspeed = xspeed \* -1;  
}  
if(topOrBottomCollision(recty)) {  
yspeed = yspeed\*-1;  
}  
rectx = rectx + xspeed;  
recty = recty + yspeed;  
}

boolean sideCollision(float x) {  
if(x\<0 || x\>width-300) {  
return true;  
} else {  
return false;  
}  
}

boolean topOrBottomCollision(float y) {  
if(y\<0 || y\>height-150) {  
return true;  
} else {  
return false;  
}  
}

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 27, 2020, 4:43am UTC](https://discourse.processing.org/t/i-have-a-rectangle-that-will-bounce-but-i-want-it-to-change-colour-whenever-it-hits-a-side/25745/2 "2020-11-27T04:43:53Z")

</div>

You’re close. You should pick a new (background) color when a collision happens - not just when the rectangle is in a certain area.

```auto
float rectx, recty, xspeed=7, yspeed=7;
color bg;

void setup() {
  fullScreen();
  newColor();
}

void draw() {
  background(bg);
  // If it hits the sides, it bounces and we pick a new color.
  if(sideCollision(rectx)) {
    xspeed *= -1;
    newColor();
  }
  // If it hits the top or bottom, it bounces and we pick a new color.
  if(topOrBottomCollision(recty)) {
    yspeed *= -1;
    newColor();
  }
  // Move the rectangle.
  rectx += xspeed;
  recty += yspeed;
  // Draw the rectangle.
  fill(0,0,0);
  rect(rectx,recty,300,150);
}

void newColor(){
  bg = color(random(255),random(255),random(255));
}

boolean sideCollision(float x) {
  return( x<0 || x>width-300 );
}

boolean topOrBottomCollision(float y) {
  return( y<0 || y>height-150 );
}

```

[UNTESTED CODE - YMMV]

---

<div class="post-metadata">

**Author:** ![0w3n928](https://avatars.discourse-cdn.com/v4/letter/0/b77776/32.png) [@0w3n928](https://discourse.processing.org/u/0w3n928)\
**Post date:** [November 27, 2020, 6:45am UTC](https://discourse.processing.org/t/i-have-a-rectangle-that-will-bounce-but-i-want-it-to-change-colour-whenever-it-hits-a-side/25745/3 "2020-11-27T06:45:31Z")

</div>

Big up to you, you are amazing thanks.