# Collision detection Ball

**URL:** <https://discourse.processing.org/t/collision-detection-ball/25210>\
**Category:** Coding Questions\
**Created:** [November 5, 2020, 5:05pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210 "2020-11-05T17:05:17Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [November 5, 2020, 6:42pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/21 "2020-11-05T18:42:30Z")

</div>

```auto

import static javax.swing.JOptionPane.showMessageDialog;
import java.util.Random;
Random rand = new Random();

float x = 450;
float Ball = 0;
//int RandomSpawnWidth;
float speedBall = 3;
int score = 0;
float speedPlayer = 10;
PFont Font;
float BallX = 25;
//float BallY = 25;

void setup()
{

  size(800, 600);
  //
  BallX = rand.nextInt(600);
  Font = createFont("arial.ttf", 24);
  // textFont(Font);
}

//Background background = new Background(); //first class
//Grass grass = new Grass(); // second class

void draw()
{
  float ellipseRadius = 25;
  float circleRadius = 25;
  background(0);
  if (keyPressed) {
    if (key == 'a' || key == 'A') {
      x = (x-speedPlayer);
    }
  }
  if (keyPressed) {
    if (key == 'd' || key == 'D') {
      x = (x+speedPlayer);
    }
  }
  if (x >= 800) {
    x = 800;
  }

  if (x <= 80) {
    x = 80;
  }
  fill (#00F727);
  ellipse (400, 700, 900, 500); // landscape

  fill (#674700);
  rect(400, 400, 20, 50); // middle tree stump

  fill (#018E02);
  ellipse (410, 400, 50, 50); // middle tree leafs

  fill (#674700);
  rect(500, 450, 21, 51); // right tree stump

  fill (#018E02);
  ellipse (510, 445, 50, 50); // right tree leafs
  fill (#674700);
  rect(50, 500, 150, 400); // left tree stump

  fill (#018E02);
  ellipse (110, 350, 350, 350); // left tree leafs
  fill (#E52525);
  rect(x-60, 545, 30, 50); //body

  fill (#DEACAC);

  ellipse(x-45, 540, 50, 50); // head

  fill (#000000);
  rect(x-60, 532, 13, 10); //left eye sunglasses
  rect(x-50, 532, 11, 3); //middle piece sunglasses
  rect(x-42, 532, 13, 10); //right eye sunglasses

  ellipse(x-45, 551, 10, 5); //mouth
  ellipse(x-55, 595, 13, 5); //left foot
  ellipse(x-35, 595, 13, 5); //right foot

  fill (#FEFF0D);
  ellipse(10, -5, 250, 250); //sun
  if (mousePressed) {
    fill (#E0E0E0);
    ellipse(10, -5, 250, 250); //moon
  }
  //grass.display();
  fill(#FFFFFF);
  text("Score: " + score, 693, 33);

  Ball = Ball + speedBall;
  if (Ball > 600) {
    showMessageDialog(null, "Close One!");
    System.exit(0);
  }

  if (Ball <= 600);
  {
    fill (#FF780F);
    ellipse(BallX, 0+Ball, 50, 50); // RandomSpawnWidth

    if (dist(BallX, Ball, x, 590) < ellipseRadius + circleRadius+44) {

      //if (BallX > x - 30 && BallX < x+30); 

      BallX = random(20, width-20);
      Ball = random(-30, -10);
    }
  }

  fill(255); 
  noStroke(); 
  ellipse( BallX, Ball, 6, 6);
}

```

---

<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:** [November 5, 2020, 6:51pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/22 "2020-11-05T18:51:05Z")

</div>

> [@Chrisir](#):
>
> RandomSpawnWidth

Did you notice, you had this `RandomSpawnWidth` instead of `BallX` AND you had Ball instead of BallY.

- So please, instead of coming up with new variables, have a plan and stick with it. Use the variable names you got.

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 6:57pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/23 "2020-11-05T18:57:57Z")

</div>

Hi, I made a whole new account just to thank you!

I noticed, I feel so dumb. Thnx for the advice!

Kind regards,

Mitch

---

<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:** [November 5, 2020, 6:59pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/24 "2020-11-05T18:59:07Z")

</div>

You are most welcome!

I know it’s so confusing in the beginning…

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 7:14pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/25 "2020-11-05T19:14:35Z")

</div>

If you have time over, do you know how to generate a random color every time it collides, that would be very cool (it needs to be in an array). 🙂

---

<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:** [November 5, 2020, 7:18pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/26 "2020-11-05T19:18:30Z")

</div>

seriously?

before setup()

```auto
color[] cols = new color[5];   

```

in setup

```auto
  cols [0] = color(random(256), random(256), random(256) );
  cols [1] = ..;
  cols [2] = ..;
  cols [3] = ..;
  cols [4] = ..;

```

> [@MitchMitch2](#):
>
> generate a random color every time it collides

make a random number that you use as an index for cols:

this is it:

```auto

int index=int(random(5)); 

fill(cols[index]);

```

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 7:39pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/27 "2020-11-05T19:39:41Z")

</div>

Okay so now I have  
Before setup:

color[] cols = new color[5];

In setup:  
cols [0] = color(random(256), random(256), random(256) );  
cols [1] = color(random(256), random(256), random(256) );  
cols [2] = color(random(256), random(256), random(256) );  
cols [3] = color(random(256), random(256), random(256) );  
cols [4] = color(random(256), random(256), random(256) );

But where do I need to fill in this?  
int index=int(random(5));  
fill(cols[index]);

And how exactly do you mean “make a random number that you use as an index for cols”.  
I am pretty new to programming so my processing knowledge is not great.

---

<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:** [November 5, 2020, 7:42pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/28 "2020-11-05T19:42:58Z")

</div>

> [@MitchMitch2](#):
>
> But where do I need to fill in this?

this int index=int(random(5)); comes every time it collides

this fill(cols[index]); right before ellipse() command

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 7:53pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/29 "2020-11-05T19:53:10Z")

</div>

You know what, heres my code! Now you can look what I did wrong

float x = 450;  
float Ball = 0;  
//int RandomSpawnWidth;  
float speedBall = 3;  
int score = 0;  
float speedPlayer = 10;  
PFont Font;  
float BallX = 25;  
color[] cols = new color[5];  
//float BallY = 25;

void setup()  
{

size(800, 600);  
BallX = rand.nextInt(600);  
Font = createFont(“arial.ttf”, 24);  
textFont(Font);  
cols [0] = color(random(256), random(256), random(256) );  
cols [1] = color(random(256), random(256), random(256) );  
cols [2] = color(random(256), random(256), random(256) );  
cols [3] = color(random(256), random(256), random(256) );  
cols [4] = color(random(256), random(256), random(256) );  
}

//Background background = new Background(); //first class  
//Grass grass = new Grass(); // second class

void draw()  
{  
float ellipseRadius = 25;  
float circleRadius = 25;  
[//background.display](https://background.display)();  
if (keyPressed) {  
if (key == ‘a’ || key == ‘A’) {  
x = (x-speedPlayer);  
}  
}  
if (keyPressed) {  
if (key == ‘d’ || key == ‘D’) {  
x = (x+speedPlayer);  
}  
}  
if (x \>= 800) {  
x = 800;  
}

if (x \<= 80) {  
x = 80;  
}  
fill (#00F727);  
ellipse (400, 700, 900, 500); // landscape

fill (#674700);  
rect(400, 400, 20, 50); // middle tree stump

fill (#018E02);  
ellipse (410, 400, 50, 50); // middle tree leafs

fill (#674700);  
rect(500, 450, 21, 51); // right tree stump

fill (#018E02);  
ellipse (510, 445, 50, 50); // right tree leafs  
fill (#674700);  
rect(50, 500, 150, 400); // left tree stump

fill (#018E02);  
ellipse (110, 350, 350, 350); // left tree leafs  
fill (#E52525);  
rect(x-60, 545, 30, 50); //body

fill (#DEACAC);

ellipse(x-45, 540, 50, 50); // head

fill (#000000);  
rect(x-60, 532, 13, 10); //left eye sunglasses  
rect(x-50, 532, 11, 3); //middle piece sunglasses  
rect(x-42, 532, 13, 10); //right eye sunglasses

ellipse(x-45, 551, 10, 5); //mouth  
ellipse(x-55, 595, 13, 5); //left foot  
ellipse(x-35, 595, 13, 5); //right foot

fill (#FEFF0D);  
ellipse(10, -5, 250, 250); //sun  
if (mousePressed) {  
fill (#E0E0E0);  
ellipse(10, -5, 250, 250); //moon  
}  
[//grass.display](https://grass.display)();  
fill(#FFFFFF);  
text("Score: " + score, 693, 33);

Ball = Ball + speedBall;  
if (Ball \> 600) {  
showMessageDialog(null, “Close One!”);  
System.exit(0);  
}

if (Ball \< 600);  
{  
fill (#FF780F);  
ellipse(BallX, 0+Ball, 50, 50);  
int index=int(random(5));  
fill(cols[index]);  
if (dist(BallX, Ball, x, 590) \< ellipseRadius + circleRadius+25) {

```
    BallX = random(20, width-20);
    Ball = random(-30, -10);
    
    speedBall = speedBall + 0.3; 
    Ball = Ball + speedBall;
     score++; 
    speedPlayer = speedPlayer + 0.25;

```

}  
}  
}

---

<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:** [November 5, 2020, 7:54pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/30 "2020-11-05T19:54:00Z")

</div>

I am spoon feeding you…

Please, you solve this

---

<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:** [November 5, 2020, 7:56pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/31 "2020-11-05T19:56:05Z")

</div>

> [@MitchMitch2](#):
>
> fill (#FF780F);  
> ellipse(BallX, 0+Ball, 50, 50);

Maybe here is where you can use your new color fill?

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 8:06pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/32 "2020-11-05T20:06:18Z")

</div>

Okay, sorry I meant the background. I put int index=int(random(5));  
background(cols[index]); at the the top under the draw so all the other things are drawn on top of it, it is flashing 5 colors in lightspeed, my eyes hurt 🙂 Is there a way that I prevent it so it only changes when it collides. Sorry that I need your help this much, but otherwise it will never work.

---

<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:** [November 5, 2020, 8:08pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/33 "2020-11-05T20:08:02Z")

</div>

> [@MitchMitch2](#):
>
> index=int(random(5));

Obviously call this only when our player has catched the ball!

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 8:11pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/34 "2020-11-05T20:11:19Z")

</div>

Yeah that works but now the ball and the characters are drawn many times so the ball looks like a snake

---

<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:** [November 5, 2020, 8:13pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/35 "2020-11-05T20:13:09Z")

</div>

Do you still have background working?

Sounds like it doesn’t work anymore

But without seeing your code, guess work

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 8:16pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/36 "2020-11-05T20:16:05Z")

</div>

it does work but: it draws the ball and the characters multiple times.

import static javax.swing.JOptionPane.showMessageDialog;  
import java.util.Random;  
Random rand = new Random();

float x = 450;  
float Ball = 0;  
//int RandomSpawnWidth;  
float speedBall = 3;  
int score = 0;  
float speedPlayer = 10;  
PFont Font;  
float BallX = 25;  
color[] cols = new color[10];  
//float BallY = 25;

void setup()  
{

size(800, 600);  
BallX = rand.nextInt(600);  
Font = createFont(“arial.ttf”, 24);  
textFont(Font);  
cols [0] = color(random(256), random(256), random(256) );  
cols [1] = color(random(256), random(256), random(256) );  
cols [2] = color(random(256), random(256), random(256) );  
cols [3] = color(random(256), random(256), random(256) );  
cols [4] = color(random(256), random(256), random(256) );  
cols [5] = color(random(256), random(256), random(256) );  
cols [6] = color(random(256), random(256), random(256) );  
cols [7] = color(random(256), random(256), random(256) );  
cols [8] = color(random(256), random(256), random(256) );  
cols [9] = color(random(256), random(256), random(256) );  
}

//Background background = new Background(); //first class  
Grass grass = new Grass(); // second class

void draw()  
{  
float ellipseRadius = 25;  
float circleRadius = 25;  
[//background.display](https://background.display)();  
if (keyPressed) {  
if (key == ‘a’ || key == ‘A’) {  
x = (x-speedPlayer);  
}  
}  
if (keyPressed) {  
if (key == ‘d’ || key == ‘D’) {  
x = (x+speedPlayer);  
}  
}  
if (x \>= 800) {  
x = 800;  
}

if (x \<= 80) {  
x = 80;  
}  
fill (#00F727);  
ellipse (400, 700, 900, 500); // landscape

fill (#674700);  
rect(400, 400, 20, 50); // middle tree stump

fill (#018E02);  
ellipse (410, 400, 50, 50); // middle tree leafs

fill (#674700);  
rect(500, 450, 21, 51); // right tree stump

fill (#018E02);  
ellipse (510, 445, 50, 50); // right tree leafs  
fill (#674700);  
rect(50, 500, 150, 400); // left tree stump

fill (#018E02);  
ellipse (110, 350, 350, 350); // left tree leafs  
fill (#E52525);  
rect(x-60, 545, 30, 50); //body

fill (#DEACAC);

ellipse(x-45, 540, 50, 50); // head

fill (#000000);  
rect(x-60, 532, 13, 10); //left eye sunglasses  
rect(x-50, 532, 11, 3); //middle piece sunglasses  
rect(x-42, 532, 13, 10); //right eye sunglasses

ellipse(x-45, 551, 10, 5); //mouth  
ellipse(x-55, 595, 13, 5); //left foot  
ellipse(x-35, 595, 13, 5); //right foot

fill (#FEFF0D);  
ellipse(10, -5, 250, 250); //sun  
if (mousePressed) {  
fill (#E0E0E0);  
ellipse(10, -5, 250, 250); //moon  
}  
grass.display();  
fill(#FFFFFF);  
text("Score: " + score, 693, 33);

Ball = Ball + speedBall;  
if (Ball \> 600) {  
showMessageDialog(null, “Close One!”);  
System.exit(0);  
}

if (Ball \< 600);  
{  
fill (#FF780F);  
ellipse(BallX, 0+Ball, 50, 50);  
if (dist(BallX, Ball, x, 590) \< ellipseRadius + circleRadius+35) {

```
  BallX = random(20, width-20);
  Ball = random(-30, -10);

  speedBall = speedBall + 0.3; 
  Ball = Ball + speedBall;
  score++; 
  speedPlayer = speedPlayer + 0.25;
  int index=int(random(10));
  background(cols[index]);
}

```

}  
}

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 8:18pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/37 "2020-11-05T20:18:56Z")

</div>

But I appreciate the fact that you are already helping me for 3 hours long of your time. Couldn’t make it witouth you man! I really mean that. Didn’t expect to get a reply at first!

---

<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:** [November 5, 2020, 8:25pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/38 "2020-11-05T20:25:48Z")

</div>

> [@MitchMitch2](#):
>
> [//background.display](https://background.display)();

You need this line at start of draw () function

---

<div class="post-metadata">

**Author:** ![MitchMitch2](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@MitchMitch2](https://discourse.processing.org/u/MitchMitch2)\
**Post date:** [November 5, 2020, 8:30pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/39 "2020-11-05T20:30:51Z")

</div>

But that is a class, which is nothing at the moment so I did //. But I did put there a background (#FFFFFF); for testing, it doesn’t draw it multiple times but the background stays white then.

---

<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:** [November 5, 2020, 8:33pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/40 "2020-11-05T20:33:48Z")

</div>

> [@MitchMitch2](#):
>
> background (#FFFFFF);

??

Didn’t we agree on

background (cols[index]);

YOU NEED some kind of background() at start of draw() because otherwise, you see falling ball like a snake

[Previous page](https://discourse.processing.org/t/collision-detection-ball/25210.md?page=1)

[Next page](https://discourse.processing.org/t/collision-detection-ball/25210.md?page=3)