# 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:** 1

<div class="post-metadata">

**Author:** ![MitchMitch](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@MitchMitch](https://discourse.processing.org/u/MitchMitch)\
**Post date:** [November 5, 2020, 5:05pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/1 "2020-11-05T17:05:17Z")

</div>

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);  
RandomSpawnWidth = 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.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(RandomSpawnWidth, 0+Ball, 50, 50);

if (dist(BallX, BallY, 50 ,50) \< ellipseRadius + circleRadius) {  
BallY = 0;

```
    speedBall = speedBall + 0.5; 
    Ball = Ball + speedBall; 
    score++; 
    speedPlayer = speedPlayer + 0.25; 
  }
}

```

}  
**Background class**  
class Background {

void display() {

```
int[] colors = {123, 151, 212, 201, 52, 102, 190, 87, 145, 78, 220, 40, 15, 129, 248, 123, 124, 125, 20, 52, 62, 73, 81, 21, 215};
background (rand.nextInt(colors[20]));

```

}  
}  
**Grass class**  
class Grass {

void display(){  
for (int x = 0; x \<= 805; x = x+10) {  
fill(#1CFF34);  
triangle( x-15, 620, x+15, 620, x, 570 ); //I used the grass of the practice examn as an example for my grass.  
}  
}  
}  
Hey! I’m making a catching ball game with collison detection. But the collision detection won’t work. Can somebody help me ASAP. Thanks in advance! Hope someone can help me quick!

---

<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, 5:22pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/2 "2020-11-05T17:22:52Z")

</div>

> [@MitchMitch](#):
>
> if (dist(BallX, BallY, 50 ,50) \< ellipseRadius + circleRadius) {

I assume this is your issue

why not

if (dist(BallX, BallY, x,y) \< ellipseRadius + circleRadius) {

when x,y is your player?

---

<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, 5:23pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/3 "2020-11-05T17:23:08Z")

</div>

Hey and welcome to the forum!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![MitchMitch](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@MitchMitch](https://discourse.processing.org/u/MitchMitch)\
**Post date:** [November 5, 2020, 5:26pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/4 "2020-11-05T17:26:44Z")

</div>

Hi thank you! But if I fill in the x and the y it gives an error that y hasn’t got a variable if I make a y-variable of zero, it works but the ball is still not colliding with the character. Do you know how to fix that? It does the same thing when I change the x and the y of every characters part.

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, 5:29pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/5 "2020-11-05T17:29:47Z")

</div>

you don’t use BallY, only Ball

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

---

<div class="post-metadata">

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

</div>

Okay so I did what you said and I removed the y variable so I filled 590 instead of y (and ofc the circleRadius+44). But unfortunately it still doesn’t collide. WAIT update: it works now! Only problem is that I need the ball perfectly alligned with both middles

---

<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, 5:40pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/7 "2020-11-05T17:40:06Z")

</div>

> [@Chrisir](#):
>
> ellipseRadius + circleRadius+44

I added 44 here also

---

<div class="post-metadata">

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

</div>

Yes I know but I seems that only catching with centre works, another problem is that the ball spawns at the same X point if you do manage to catch it. Still thanks tho! Taking little steps till it works

---

<div class="post-metadata">

**Author:** ![MitchMitch](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@MitchMitch](https://discourse.processing.org/u/MitchMitch)\
**Post date:** [November 5, 2020, 5:45pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/9 "2020-11-05T17:45:05Z")

</div>

Okay another update, it now spawns at different positions if you manage to catch it, but the hitbox is still a little weird, maybe you know how to increase the margins of where the 2 “ellipses” collide

---

<div class="post-metadata">

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

</div>

Now I added  
float TopSideBall = Ball - 25;  
float BottomSideBall = Ball + 25;  
float LeftSideHead = x - 50;  
float RightSideHead = x + 50;  
but it still doesn’t increase the hitbox margin

---

<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, 5:47pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/11 "2020-11-05T17:47:21Z")

</div>

other than dist you can test if ballX \> left side player && ballY \< right side player

> [@MitchMitch](#):
>
> that the ball spawns at the same X point

you can change BallX : BallX = random(20,width-20);

---

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

</div>

> [@Chrisir](#):
>
> other than dist you can test if ballX \> left side player && ballY \< right side player

if ballX right side \> left side player && ballY left side \< right side player

---

<div class="post-metadata">

**Author:** ![MitchMitch](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@MitchMitch](https://discourse.processing.org/u/MitchMitch)\
**Post date:** [November 5, 2020, 5:58pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/13 "2020-11-05T17:58:56Z")

</div>

And do I need the make variables ballX right side, left side player, ballY left side and right side player? Sorry I don’t get it

---

<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:01pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/14 "2020-11-05T18:01:10Z")

</div>

> [@MitchMitch](#):
>
> make variables ballX right side, left side player, ballY left side and right side player?

No, you have ballX and ball already

just check either with dist()

OR with `if(ballX> x -30 && ballX < x+30....`

---

<div class="post-metadata">

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

</div>

Okay now I have this: if (BallX \> x - 30 && BallX \< x+30);

```
    BallX = random(20, width-20);

```

But it still doesn’t 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, 6:13pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/16 "2020-11-05T18:13:51Z")

</div>

`if(ballX> x -30 && ballX < x+30....`

I had some … at the end, to show you that you have to write more, you have to check Ball value too

anyway, post your entire code then

> [@MitchMitch](#):
>
> But it still doesn’t work ☹

not a clear description…

---

<div class="post-metadata">

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

</div>

Hmmm, the ball value is 0 right because I made it float Ball = 0; in the beginning. But what do I need to write more? What I had was that the ball and the head of the character didn’t collide. It worked with the if(dis) but then you had need to collide the ball and the head perfectly centered otherwise it won’t register it as that they collided.

---

<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:32pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/18 "2020-11-05T18:32:10Z")

</div>

> [@MitchMitch](#):
>
> It worked with the if(dis) but then you had need to collide the ball and the head perfectly centered

that’s true. Then you can increase the value by +44 or whatever:

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

post your entire code as I said

---

<div class="post-metadata">

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

</div>

Okay, now I made it again with if dis btw.

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);  
RandomSpawnWidth = 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.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(RandomSpawnWidth, 0+Ball, 50, 50);

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

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

    BallX = random(20, width-20);

```

}  
}  
}

---

<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:40pm UTC](https://discourse.processing.org/t/collision-detection-ball/25210/20 "2020-11-05T18:40:56Z")

</div>

you had RandomSpawnWidth here !!!

```
 ellipse(BallX, 0+Ball, 50, 50); // RandomSpawnWidth
```

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