Pong paddle glitch

Processing Coding Questions
1

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:

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!

2

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

1 Like
3

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.

4

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.

2 Likes
5

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:

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

would be


// 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

4 Likes
6

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!

2 Likes
7

With some modifications to the code…

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! :smile:

2 Likes
8

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.

10

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

1 Like