Hi, I'm a Processing newbie who is currently working on little assignments for class purposes.  Within my program screen (200px by 200px) I have a rectangle that is located at x=50, y=50.  The width and height of the so-called rectangle changes according to the mouse.  I was wondering how I could get the ball to bounce off the sides of the rectangle as it changes size.  I know it has something to do with my changePosition() method but I can't seem to figure it out.
Can anyone help me? It would be greatly appreciated. Thanks.

/**
* Bounce.
*
* When the shape hits the edge of the window, it reverses its direction.
* The ball and background flashes psychedelically!  Don't get a SEIZURE!!!
* Credit to Original Bounce maker in processing.
*
* Updated 1 September 2002
*/

int ballSize = 10;       // Width of the shape, S to meet java conventions
float xpos, ypos;    // Starting position of shape    

float xspeed = 2.8;  // Speed of the shape
float yspeed = 2.2;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom


void setup()
{
 size(200, 200);
 //noStroke();
 frameRate(30);
 smooth();
 // Set the starting position of the shape
 xpos = width/2;
 ypos = height/2;
 
 drawRect();
}

void draw()
{
 background(0);
 drawRect();
 changePosition();
 
  //don't need parameters as we didn't create parameters
}
// drawRect() draws a rectangle in the window.  It takes no parameters, has a pink fill and a stroke.

void drawRect()  {
 //fill(getRandomColour(), getRandomColour(), getRandomColour());
 //noFill();
 stroke(getRandomColour(), getRandomColour(), getRandomColour());
 rect(50, 50, mouseX, mouseY); //1st 2 are margins, last 2 are width and height
}

void changePosition()  {
   
 // Update the position of the shape
 xpos = xpos + ( xspeed * xdirection ); // result replaces xpos
 ypos = ypos + ( yspeed * ydirection );
 
 // Test to see if the shape exceeds the boundaries of the screen
 // If it does, reverse its direction by multiplying by -1
 if (xpos > 150-ballSize || xpos < 50) {
   xdirection *= -1;
 }
 if (ypos > 150-ballSize || ypos < 50) {
   ydirection *= -1;
 }
 
 //if the ball is moving left to right
 //fill is red
 
 //if the ball is moving right to left // -1
 //fill is green
 
 //if the ball is moving down
 //stroke is yellow
 
 //if the ball is moving up
 //stroke is blue
 
 if (xdirection == 1) { // == tests for equality (comparison), = assigns a value (assignment operator)
   fill(255, 0, 0);
 } else {
   fill(0, 255, 0);
 }
 
 println("xdirection = " + xdirection); // building a string
 
 if (ydirection == 1) { // up and down, == tests for equality (comparison), = assigns a value (assignment operator)
   stroke(255, 255, 0);
 } else {
   stroke(0, 0, 255);
 }
 
 println("ydirection = " + ydirection);
 println(" "); //space is a character, skips a line
 
//stroke(255, 255, 0); //sets the outline color of ball
//fill(255, 0, 0); //sets the color of ball
 // Draw the shape
 ellipse(xpos+ballSize/2, ypos+ballSize/2, ballSize, ballSize); //diameter of 1st section, and diameter of 2nd section
}  

float getRandomColour()  {
return random(255); //cuts below 3 lines down to this one
 //float colour;
//colour = random(255); // random(1,6) for a dice [number between 1 and 6)
//return colour;
}  

Ball and rectangle collisions are intermediate level tasks. You might want to try something a little less ambitious.

I got around the problem one way by having a rectangle bounce off another rectangle instead. It's a lot easier to get your head around.

If you're determined to learn how to do proper collision math then here's a few of links which go into the subject (Mostly Flash programs though - sorry):

How collision was achievd in the game N

Polygon collision explained (covers theory involved)

Introduction to Vector math (albeit in Flash)