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

Processing Coding Questions
1

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
Screen Shot 2021-07-14 at 10.43.56 AM1141×435 42.7 KB

please format code with </> button * homework policy * asking questions

2

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

}

3

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

color col1 = color(255); 
color col2 = color(0,0,255);
4

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

5

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

1 Like