# Pong paddle glitch

**URL:** <https://discourse.processing.org/t/pong-paddle-glitch/13980>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 14, 2019, 3:53am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980 "2019-09-14T03:53:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![XxChaoticStrike](https://avatars.discourse-cdn.com/v4/letter/x/ac91a4/32.png) [@XxChaoticStrike](https://discourse.processing.org/u/XxChaoticStrike)\
**Post date:** [September 14, 2019, 3:53am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/1 "2019-09-14T03:53:20Z")

</div>

Hello all! First post on this forum!

I’ve built a cute little pong game using previous knowledge, however moving collision was not something I wanted to spend a lot of time on (I have made a bouncing ball example). Using code online, I was able to get a (mostly) stable pong experience. However, I am porting it to my phone, and the pong glitch is starting to get on my nerves. Unfortunately, I just started learning Processing two weeks ago (high school class), and I don’t know how I can fix the issue. Can someone please walk me through the steps needed?

Here is my example:

```auto
float paddleRectX = 50;
float paddleRectY = 0;
float paddleRectW = 14;
float paddleRectH = 150;

float bouncingBallX = 500;
float bouncingBallY = 350;
float bouncingBallW = 30;
float bouncingBallH = 30;
float bouncingBallSpeedX = -4;
float bouncingBallSpeedY = 1;

void setup() {
  size(1000, 700);
  bouncingBallX = width/2;
  bouncingBallY = height/2;
}

void draw() {
  background(200);
  paddleRectY = mouseY;
  rectMode(CENTER);
  rect(paddleRectX, paddleRectY, paddleRectW, paddleRectH);

 
  bouncingBallX = bouncingBallX + bouncingBallSpeedX;
  bouncingBallY = bouncingBallY + bouncingBallSpeedY;
  
            if (bouncingBallX + bouncingBallW + bouncingBallSpeedX > paddleRectX && 
      bouncingBallX + bouncingBallSpeedX < paddleRectX + paddleRectW && 
      bouncingBallY + bouncingBallH > paddleRectY && 
      bouncingBallY < paddleRectY + paddleRectH) { // If the ball moves, check to make sure it won't collide with the paddle
               
        bouncingBallSpeedX *= -1;
        
      } if (bouncingBallX + bouncingBallW > paddleRectX && 
      bouncingBallX < paddleRectX + paddleRectW && 
      bouncingBallY + bouncingBallH + bouncingBallSpeedY > paddleRectY && 
      bouncingBallY + bouncingBallSpeedY < paddleRectY + paddleRectH) {
    
        bouncingBallSpeedY *= -1;
      }
      
      if((bouncingBallX > width) || (bouncingBallX < 0)){
        bouncingBallSpeedX *= -1;
      }
      if((bouncingBallY > height) || (bouncingBallY < 0)){
        bouncingBallSpeedY *= -1;
      }
      
  ellipse(bouncingBallX, bouncingBallY, bouncingBallW, bouncingBallH);
      
}

```

Any possible tips are greatly accepted!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 14, 2019, 6:01pm UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/2 "2019-09-14T18:01:58Z")

</div>

> [@XxChaoticStrike](#):
>
> the pong glitch is starting to get on my nerves

What, specifically, is happening that is wrong? What do you want to happen instead?

---

<div class="post-metadata">

**Author:** ![XxChaoticStrike](https://avatars.discourse-cdn.com/v4/letter/x/ac91a4/32.png) [@XxChaoticStrike](https://discourse.processing.org/u/XxChaoticStrike)\
**Post date:** [September 15, 2019, 12:35am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/3 "2019-09-15T00:35:50Z")

</div>

The paddle’s “hit box” is shifted down by (x) amount of pixels. What should connect at the top doesn’t connect, and what should go below the paddle bounces off as if the paddle was there.

I want to correct this, so that the ball actually bounces off the paddle correctly.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 15, 2019, 2:53am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/4 "2019-09-15T02:53:59Z")

</div>

Without double-checking, my guess is that the culprit is probably `rectMode(CENTER);` – you are interpreting your paddle coordinates in some places as CORNER, and in other places as CENTER. Pick one.

---

<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:** [September 15, 2019, 8:00am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/5 "2019-09-15T08:00:35Z")

</div>

That’s true.

you have to change the if clauses depending on your rectMode

with CENTER it’s different than with CORNER.

Basically with center you give the center position to the rect command and with corner the upper left corner.

- Hence, in the first case you want to check if the ball is \> position - size/2 && ball is \< position + size/2.

- In the 2nd case you just check if ball is \> Position && ball is \< Position + size.

That’s pseudo code of course just to show the principle.

**The other thing**

The other thing is that you check left and right border of the screen with the **same** if clause and just say `* -1` here. It’s how it’s done in the examples so I can’t blame you for this.

This can lead to stuttering in the screen border area though (making `bouncingBallX` positive and negative back and forth). Better check the borders separately and use `abs()` instead. The function abs() gives you the absolute value which is always positive.

For example this:

```auto
      if((bouncingBallX > width) || (bouncingBallX < 0)){
        bouncingBallSpeedX *= -1; // can stutter
      }

```

would be

```auto

// left 
if (bouncingBallX <= 0) {
  bouncingBallSpeedX = abs(bouncingBallSpeedX); // abs makes this always positive
}      

// right 
if (bouncingBallX >= width) {
  bouncingBallSpeedX = abs(bouncingBallSpeedX) * -1; // this is always negative
}

```

Chrisir

---

<div class="post-metadata">

**Author:** ![XxChaoticStrike](https://avatars.discourse-cdn.com/v4/letter/x/ac91a4/32.png) [@XxChaoticStrike](https://discourse.processing.org/u/XxChaoticStrike)\
**Post date:** [September 16, 2019, 12:27pm UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/6 "2019-09-16T12:27:45Z")

</div>

Alright, I’ll try to implement a fix into my pong game and see if that fixes the issue. Thank you all for your suggestions!

---

<div class="post-metadata">

**Author:** ![XxChaoticStrike](https://avatars.discourse-cdn.com/v4/letter/x/ac91a4/32.png) [@XxChaoticStrike](https://discourse.processing.org/u/XxChaoticStrike)\
**Post date:** [September 16, 2019, 1:53pm UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/7 "2019-09-16T13:53:17Z")

</div>

With some modifications to the code…

```auto
float paddleRectX = 50;
float paddleRectY = 0;
float paddleRectW = 14;
float paddleRectH = 150;

float bouncingBallX = 500;
float bouncingBallY = 350;
float bouncingBallW = 30;
float bouncingBallH = 30;
float bouncingBallSpeedX = -25;
float bouncingBallSpeedY = 1;

void setup() {
  size(1000, 700);
  bouncingBallX = width/2;
  bouncingBallY = height/2;
}

void draw() {
  background(200);
  paddleRectY = mouseY;
  rectMode(CENTER);
  rect(paddleRectX, paddleRectY, paddleRectW, paddleRectH);

 
  bouncingBallX = bouncingBallX + bouncingBallSpeedX;
  bouncingBallY = bouncingBallY + bouncingBallSpeedY;
  
            if (bouncingBallX > paddleRectX - paddleRectW/2 &&
            bouncingBallX < paddleRectX + paddleRectW/2 && 
            bouncingBallY > paddleRectY - paddleRectH/2 &&
            bouncingBallY < paddleRectY + paddleRectH/2) { // If the ball moves, check to make sure it won't collide with the paddle
               
        bouncingBallSpeedX *= -1;
            }  
            
                        if (bouncingBallX + bouncingBallSpeedX > paddleRectX - paddleRectW/2 &&
            bouncingBallX + bouncingBallSpeedX < paddleRectX + paddleRectW/2 && 
            bouncingBallY + bouncingBallSpeedY > paddleRectY - paddleRectH/2 &&
            bouncingBallY + bouncingBallSpeedY < paddleRectY + paddleRectH/2) { // If the ball moves, check to make sure it won't collide with the paddle
               
        bouncingBallSpeedX *= -1;
            }  
      
      if((bouncingBallX > width) || (bouncingBallX < 0)){
        bouncingBallSpeedX *= -1; // I understand ABS, but I wanted to fix the paddle ASAP
      }
      if((bouncingBallY > height) || (bouncingBallY < 0)){
        bouncingBallSpeedY *= -1 ;
      }
      
  ellipse(bouncingBallX, bouncingBallY, bouncingBallW, bouncingBallH);
      
}

```

I have been able to fix the paddle, thanks to your support.

Thank you both for lending your help, I am grateful for your support! 😄

---

<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:** [September 16, 2019, 1:56pm UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/8 "2019-09-16T13:56:55Z")

</div>

Nicely done.

Remember to use ctrl-t in processing to get auto format. Prior to posting.

Similar to \*= you can also use += to add a value.

Eg here:

bouncingBallX = bouncingBallX + bouncingBallSpeedX;

When you read the tutorial about objects you could make a class Paddle and a class Ball and work from there. Just to learn object oriented programming.

---

<div class="post-metadata">

**Author:** ![Hat](https://avatars.discourse-cdn.com/v4/letter/h/f08c70/32.png) [@Hat](https://discourse.processing.org/u/Hat)\
**Post date:** [November 9, 2024, 3:55am UTC](https://discourse.processing.org/t/pong-paddle-glitch/13980/10 "2024-11-09T03:55:11Z")

</div>

I haven’t done the code for checking collisions for the top and bottom of the paddle yet, sry if that bothers you.