# Hi Guys! I just need help figuring out how to change the color of the bouncing ball every time the player circle collides with it

**URL:** <https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250>\
**Category:** Coding Questions\
**Created:** [July 14, 2021, 2:51pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250 "2021-07-14T14:51:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bopStu77](https://avatars.discourse-cdn.com/v4/letter/b/6f9a4e/32.png) [@bopStu77](https://discourse.processing.org/u/bopStu77)\
**Post date:** [July 14, 2021, 2:51pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250/1 "2021-07-14T14:51:45Z")

</div>

This is the code I was given to start with;

int rad = 60; // Width of the shape  
float xpos, ypos; // Starting position of shape

float xspeed = 2.8; // Speed of the shape  
float yspeed = 2.2; // Speed of the shape

int xdirection = 1; // Left or Right  
int ydirection = 1; // Top to Bottom

void setup()  
{  
size(640, 360);  
noStroke();  
frameRate(30);  
ellipseMode(RADIUS);  
// Set the starting position of the shape  
xpos = width/2;  
ypos = height/2;  
}

void draw()  
{  
background(102);

// Update the position of the shape  
xpos = xpos + ( xspeed \* xdirection );  
ypos = ypos + ( yspeed \* ydirection );

// Test to see if the shape exceeds the boundaries of the screen  
// If it does, reverse its direction by multiplying by -1  
if (xpos \> width-rad || xpos \< rad) {  
xdirection \*= -1;  
}  
if (ypos \> height-rad || ypos \< rad) {  
ydirection \*= -1;  
}

// Draw the shape  
ellipse(xpos, ypos, rad, rad);  
}

This what I need to achieve;

 ![Screen Shot 2021-07-14 at 10.43.56 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4074b60c88f3783120863e568df74445bb68ce63.png)

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<div class="post-metadata">

**Author:** ![bopStu77](https://avatars.discourse-cdn.com/v4/letter/b/6f9a4e/32.png) [@bopStu77](https://discourse.processing.org/u/bopStu77)\
**Post date:** [July 14, 2021, 3:08pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250/2 "2021-07-14T15:08:07Z")

</div>

Alright I updated a bit, I just don’t understand how I’m suppose to get the smaller circle to stick with the original colour.

Heres the new code;

int rad = 60; // Width of the shape  
float xpos, ypos; // Starting position of shape

float xspeed = 2.8; // Speed of the shape  
float yspeed = 2.2; // Speed of the shape

int xdirection = 1; // Left or Right  
int ydirection = 1; // Top to Bottom

void setup()  
{  
size(640, 360);  
noStroke();  
frameRate(30);  
ellipseMode(RADIUS);  
// Set the starting position of the shape  
xpos = width/2;  
ypos = height/2;  
}

void draw()  
{  
background(102);

// Update the position of the shape  
xpos = xpos + ( xspeed \* xdirection );  
ypos = ypos + ( yspeed \* ydirection );

// Test to see if the shape exceeds the boundaries of the screen  
// If it does, reverse its direction by multiplying by -1  
if (xpos \> width-rad || xpos \< rad) {  
xdirection \*= -1;  
}  
if (ypos \> height-rad || ypos \< rad) {  
ydirection \*= -1;  
}

// Draw the shape  
ellipse(xpos, ypos, rad, rad);  
ellipse (mouseX,mouseY,30,30);

//Allowing the bouncing ball to change color when they collide  
if(dist(mouseX, mouseY,xpos,ypos) \< 100){  
fill(0, 0, 255);  
}  
else{  
fill(255);  
}

}

---

<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:** [July 14, 2021, 3:13pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250/3 "2021-07-14T15:13:14Z")

</div>

You can let have both balls different colors

Just use two variables (col1 and col2) and say

- fill(col1); before ball 1 and
- fill(col2); before ball 2

Now upon a color change don’t use `fill()`! Instead change the variable that holds the color for the ball you want to change. Like `col1 = color(random(255));`

Before setup() say

```auto
color col1 = color(255); 
color col2 = color(0,0,255);

```

---

<div class="post-metadata">

**Author:** ![bopStu77](https://avatars.discourse-cdn.com/v4/letter/b/6f9a4e/32.png) [@bopStu77](https://discourse.processing.org/u/bopStu77)\
**Post date:** [July 14, 2021, 3:24pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250/4 "2021-07-14T15:24:14Z")

</div>

yea thanks, I just figured it out, it wasn’t your way do you think it’s acceptable.

final code (I think);

int rad = 60; // Width of the shape  
float xpos, ypos; // Starting position of shape

float xspeed = 2.8; // Speed of the shape  
float yspeed = 2.2; // Speed of the shape

int xdirection = 1; // Left or Right  
int ydirection = 1; // Top to Bottom

void setup()  
{  
size(640, 360);  
noStroke();  
frameRate(30);  
ellipseMode(RADIUS);  
// Set the starting position of the shape  
xpos = width/2;  
ypos = height/2;  
}

void draw()  
{  
background(102);

// Update the position of the shape  
xpos = xpos + ( xspeed \* xdirection );  
ypos = ypos + ( yspeed \* ydirection );

// Test to see if the shape exceeds the boundaries of the screen  
// If it does, reverse its direction by multiplying by -1  
if (xpos \> width-rad || xpos \< rad) {  
xdirection \*= -1;  
}  
if (ypos \> height-rad || ypos \< rad) {  
ydirection \*= -1;  
}

// Draw the bouncing ball  
ellipse(xpos, ypos, rad, rad);

//change color if circles are coliding  
if(dist(xpos,ypos,rad,rad) \< 100){  
fill(0, 0, 255);  
}  
else{  
fill(255);  
}  
//draw the player circle  
ellipse (mouseX,mouseY,20,20);

//Keeping the Player circle white when colliding with bouncing ball  
if (dist(mouseX, mouseY,xpos,ypos) \< 100){  
fill(0,0,255);  
}  
else{  
fill(255);  
}  
}

---

<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:** [July 14, 2021, 3:41pm UTC](https://discourse.processing.org/t/hi-guys-i-just-need-help-figuring-out-how-to-change-the-color-of-the-bouncing-ball-every-time-the-player-circle-collides-with-it/31250/5 "2021-07-14T15:41:26Z")

</div>

it definitely okay when it’s working!

Congrats!

But mind you,

- the ellipse at the start of draw (the bouncing ball)
- gets its color from the fill at the end of draw (pretty far away)

So my comment, but not a criticism:

- Not very clear to read and
- when you add another item with another color at the end of draw(), the 1st ellipse will loose its color. That’s an error that would be difficult to find.

Chrisir