So basically what I want is when the user presses and holds
down the mouse button, a black circle of diameter 30 pixels centered on
the mouse position should be drawn. The circle should follow the mouse while the mouse button remains
pressed.
When the user lets go of the mouse button, the circle should continue moving in the
direction that the mouse is moving. Also, the speed at which the circle moves should be
determined by how fast the mouse was moving when the user let go of the button. When
flying of its own accord, the circle should bounce in a realistic way off all four sides of the
window.

PApplet app = this;

Ball ball;
PImage bg;

void setup()
{
  size(800, 600);
  smooth();
  //bg = loadImage("Tennis_Court_adf.jpg");
  ball = new Ball(300, 0, .25);
} 

void draw()
{
  ball.move();
  if (!ball.isAtRest())
  {
    //background(bg);
    background(255);
    ball.display();
  }
}

public class Ball
{    
  float x;
  float y;
  float xspeed;
  float yspeed;
  float phi;
  float phispeed;
  float gravity;
  float friction;
  float ballsize;
  float invSize;
  boolean rest;
  boolean mousedown;
  int ball_width;
  int ball_height;

  PImage ballshape;

  float xmin;
  float ymin;
  float xmax;
  float ymax;

  float phiscale;


  Ball(float tempX, float tempY, float tempSize)
  {
    rest = false;
    x = tempX;
    y = tempY;
    ballsize = tempSize;
    invSize=1;
    xspeed = 0;
    yspeed = 0;
    phi = 0;
    phispeed = 0;
    gravity = 1;
    friction = 0.99;
    /*
    ballshape = loadImage("Tennis_ball_adf.png");
     ballshape.resize(round(ballshape.width*ballsize), round(ballshape.height*ba
llsize));
     ball_width=ballshape.width;
     ball_height=ballshape.height;
     */
    ball_width=round(136*ballsize);
    ball_height=round(136*ballsize);
    xmin = 0;
    ymin = 0;
    xmax = width-ball_width;
    ymax = height-ball_height;
    phiscale =2.0/(ball_height);

    app.registerMouseEvent(this);

  }

  boolean isAtRest()
  {
    return rest;
  }

  void reset(float newX, float newY, float newXspeed, float newYspeed)
  {
    x=newX;
    y=newY;  
    xspeed=newXspeed;
    yspeed=newYspeed;  
  }

  void move()
  {
    float reverseSpeed = -0.83;
    float slowSpeed = 0.985;
    float bounce = 0;

    if (!rest)
    {
      if (mousedown) {
        this.reset(mouseX,mouseY,(mouseX-pmouseX),(mouseY-pmouseY));
      }
      yspeed=friction*yspeed+gravity;
      phispeed=friction*phispeed;
      y=y+yspeed;
      x=x+xspeed;
      phi=phi+phispeed;

      if (y > ymax)
      {
        yspeed = yspeed * reverseSpeed;
        xspeed = xspeed * slowSpeed;
        y = ymax-bounce;

        phispeed=xspeed*phiscale;

        // Set speed here =======================================================
        if( (abs(yspeed) < 2) && (abs(xspeed) < 0.1) )
        {
          rest=true;
        }
      }

      if (y < ymin)
      {
        yspeed = yspeed * reverseSpeed;
        xspeed = xspeed * slowSpeed;

        y = ymin+bounce;
      }
      if (x > xmax)
      {
        xspeed = xspeed * reverseSpeed;
        yspeed = yspeed * slowSpeed;
        x = xmax-bounce;
      }
      if (x < xmin)
      {
        xspeed = xspeed * reverseSpeed;
        yspeed = yspeed * slowSpeed;
        x = xmin+bounce;
      }
    }
  }

  void mouseEvent(MouseEvent event)
  {
    switch (event.getID())
    {
    case MouseEvent.MOUSE_PRESSED:
    case MouseEvent.MOUSE_DRAGGED:
      rest = false;
      mousedown = true;  
      break;
    case MouseEvent.MOUSE_RELEASED:
      mousedown = false;  
      break;
    }
  }

  void display()
  {    
    float offsetX=invSize*(x)+ball_width/2;
    float offsetY=invSize*(y)+ball_height/2;
    translate(offsetX, offsetY);
    rotate(phi);
    translate(-offsetX, -offsetY);
    //image(ballshape, x, y);    
    ellipse(x+ball_width/2,y+ball_height/2,ball_width,ball_height);
    line(x+ball_width/2,y+ball_height/2,x+0.8*ball_width,y+0.8*ball_height);
  }
}

int width = 500;
int height = 300;

int buttonx = 400;
int buttony = 270;
int buttonwidth = 150;
int buttonheight = 30;


int count = 0;
int num = 0;
int sqrsize = 20;
int posx = 0;

float ballX, ballY, xVel, yVel, gravity = 0.1, friction = 0.99, ballDiam = 30;

PImage ballImage;

void setup(){
 size(width, height);
 textFont (createFont ("Georgia", 24));
 strokeWeight(2);
 ballImage = loadImage ("soccer-ball-1.png");
 ballImage.resize (50,0);
 ballX = width - ballImage.width;
 ballY = height - ballImage.height;
}

void draw(){
 background(255);
 rect (buttonx, buttony, buttonwidth, buttonheight);
 fill (0);
 text (count, 450, 30);
 if (mousePressed){
   // if the mouse is held down, the ball location
   // should be the same as the mouse location.
   ballX = mouseX - ballImage.width / 2;
   ballY = mouseY - ballImage.height / 2;
 }
 else{
   // otherwise it should be traveling
   // according to its velocity.
   ballX += xVel;
   ballY += yVel;
   
 }
 // draw the ball:
 fill (0);
 image (ballImage, ballX, ballY);
 // here is the bounce part:  if the ball gets close to
 // any edge of the window, reverse its X or Y velocity.
 // in this case, "too close" is "past the ball's radius."
 if ((ballX < ballDiam / 2) || (ballX > width - ballDiam / 2)) xVel = -xVel;
 if ((ballY < ballDiam / 2) || (ballY > height - ballDiam / 2)) yVel = -yVel;
 else {
  yVel += gravity;
  xVel *= friction;
  yVel *= friction;
  if ((ballX >= buttonx) && (ballX < buttonx + buttonwidth) &&
  (ballY >= buttony) && (ballY < buttony + buttonheight)) {
    count = count + 1;
  } else {
    num = 0;
    while (num < count) {
      rect (posx, sqrsize * num, sqrsize, sqrsize);
      num = num + 1;
    }
    posx = posx + sqrsize;
  }
 }
}
void mouseReleased(){
 // when the mouse is released, "throw" the ball
 // by setting its x and y velocities.
 xVel = mouseX - pmouseX;
 yVel = mouseY - pmouseY;
 
 }