Setting boundaries of animated balls

Question

I have a simple class that creates a frame with some balls in it that bounce off the sides. For some reason the balls bounce fine off of the north, west, and east sides of the frame but go slightly past the south side before bouncing off of it. I take the size of the ball into account when setting the boundaries and this works fine on the x axis but not the y.

import javax.swing.*;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.event.*;
import java.awt.geom.Ellipse2D;
import java.util.ArrayList;

public class BallBounceFrame
{

public static void main(String[] args)
{
    new BallBounceFrame();
}

JFrame frame;   
static int WIDTH = 500;
static int HEIGHT = 500;

public BallBounceFrame()
{   
    frame = new JFrame("Ball Bounce Frame");
    frame.setSize(WIDTH, HEIGHT);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setLocationRelativeTo(null);
    frame.setResizable(false);
    BallCanvas c = new BallCanvas(5);
    frame.add(c, BorderLayout.CENTER);
    frame.setVisible(true); 
    c.animate();
}

class BallCanvas extends JPanel
{

    private static final long serialVersionUID = 1L;

    ArrayList<Ball> balls = new ArrayList<Ball>();

    public BallCanvas(int ballNum)
    {
        for(int i = 0; i < ballNum; i++)
        {
            balls.add(new Ball(20));
        }
    }

    public void paint(Graphics g)
    {
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setColor(Color.RED);
        for(Ball b : balls)
        {
            b.move();
            g2.fill(b);
        }
    }

    public void animate()
    {
        while(true)
        {
            try
            {
                frame.repaint();
                Thread.sleep(10);
            }
            catch(Exception e)
            {
                System.out.println(e);
            }
        }
    }
}

class Ball extends Ellipse2D.Float
{
    private int xVel, yVel;
    private int size;
    private int WIDTH = BallBounceFrame.WIDTH;
    private int HEIGHT = BallBounceFrame.HEIGHT;

    public Ball(int size)
    {
        super((int) (Math.random() * (BallBounceFrame.WIDTH - 20) + 1), (int) (Math.random() * (BallBounceFrame.HEIGHT - 20) + 1), size, size);
        this.size = size;
        this.xVel = (int) (Math.random() * 5 + 1);
        this.yVel = (int) (Math.random() * 5 + 1);          
    }

    public void move()
    {
        if(super.x < 0 || super.x > WIDTH - size) xVel *= -1;
        if(super.y < 0 || super.y > HEIGHT - size ) yVel *= -1;
        super.x += xVel;
        super.y += yVel;
    }
}
}

Answer 1

I think, the reason is the xVel/yVel adding in move.

When you get near the border, you check if you already passed over the border. If not, you add the velocity.

If the distance to the border is 10 and your velocity is 15, you will move 5 over the boundary frame. On the next move you will reverse velocity and bounce off. The move should possibly be split in this case. move 10, reverse velocity, move 5.

Answer 2

The problem is that WIDTH and HEIGHT are from the JFrame. Especially the window title caption decreases the panel's height. One could pass the panel boundary/size to the ball's move.

@Override
public void paint(Graphics g)
{
    ...
        b.move(getSize());
    ...
}

public void move(Dimension panelSize)
{
    if (x < 0 || x > panelSize.getWidth() - size) xVel *= -1;
    if (y < 0 || y > panelSize.getHeight - size) yVel *= -1;
    x += xVel;
    y += yVel;
}

To keep the ball inside the bounds you might consider:

public void move(Dimension panelSize)
{
    x += xVel;
    y += yVel;
    if (x < 0) {
        x *= -1;
        xVel *= -1;
    } else if (x > panelSize.getWidth() - size) {
        x -= 2 * (x - panelSize.getWidth() - size);
        xVel *= -1;
    }
    if (y < 0) {
        y *= -1;
        yVel *= -1;
    } else if (y > panelSize.getHeight() - size) {
        y -= 2 * (y - panelSize.getHeight() - size);
        yVel *= -1;
    }
}

According to

    \ |         (xVel == 5)
     \|
     /|\
    / | \
   /  |  \

(One normally also calla pack() at the end of the BallBounceFrame to do the layout calculation.)