Well you have all the basics.
You just need to think about what it means to hit an edge, and what it means to bounce.
First, how would you detect if a ball has hit the edge of the screen?

tfguy44 is right in everything he says but I would modify the bounce code to

1. // Horizontal bounce
2. if(centerX + radius > width)
3.   vx = -abs(vx);
4. else if (centerX - radius < 0)
5.   vx = abs(vx);
6. 
   
7. // Vertical bounce
8. if(centerY + radius > height)
9.   vy = -abs(vy);
10. else if (centerY - radius < 0)
11.   vy = abs(vy);

This is particularly useful technique if you want to create framerate independant animation - see this topic

Thank you this works very well. Just a little curious about understanding the logic behind the abs function. What is it doing actually?

1. float abs( float input ){
2.  if( input < 0 ) return( -input );
3.  return( input );
4. }

A running example using the bouncing's shorten version:

/*
 * Bouncing Balloons (v3.37)
 *
 * forum.processing.org/topic/using-arrays-to-create-and-change-circles
 * http://forum.processing.org/topic/object
 * http://forum.processing.org/topic/balloon-string
 *
 * studio.processingtogether.com/sp/pad/export/ro.9FqnMDLUZqQCV/latest
 *
 */

final static color BG = 0, FG = -1;
final static byte  FPS = 60;

final static byte NUM = 3;
final static myBalloon[] balloons = new myBalloon[NUM];

void setup() {
  size (500, 500);
  smooth();
  frameRate(FPS);

  balloons[0] = new myBalloon(
  120, 70, // initX, initY
  50, 40, // sizeX, sizeY
  7, 1, // moveX, moveY
  #0000FF); // colour

  balloons[1] = new myBalloon(
  320, 400, // initX, initY
  40, 50, // sizeX, sizeY
  2, -9, // moveX, moveY
  #00A000); // colour

  balloons[2] = new myBalloon(
  250, 250, // initX, initY
  30, 30, // sizeX, sizeY
  -7, 4, // moveX, moveY
  #D00000); // colour
}

void draw() {
  background(BG);
  for (myBalloon ball: balloons)   ball.all();
}

final class myBalloon {
  int x, y;
  final int szX, szY, hfX, hfY;
  int mvX, mvY;
  final color cor;

  myBalloon (
  int initX, int initY, 
  int sizeX, int sizeY, 
  int moveX, int moveY, 
  color colour ) {

    x   = initX;
    y   = initY;
    szX = sizeX;
    szY = sizeY;
    mvX = moveX;
    mvY = moveY;
    cor = colour;

    hfX = sizeX >> 1;
    hfY = sizeY >> 1;
  }

  void all() {
    updateBalloon();
    displayBalloon();
    displayBalloonString();
  }

  void updateBalloon() {
    if (x < hfX | x > width  - hfX)   mvX *= -1;
    if (y < hfY | y > height - hfY)   mvY *= -1;

    x += mvX;
    y += mvY;
  }

  void displayBalloon() {
    fill(cor);
    ellipse(x, y, szX, szY);
  }

  void displayBalloonString() {
    stroke(FG);
    line( x, y + hfY, x - mvX, y + szY );
    noStroke();
  }
}

The absolute method simply converts any number to its equivalent positive value so

abd(-3 ) = 3
abs(4) = 4  (no change because it is already positive)

Assume that you create a sketch that you want to distribute to your friends. Since they are will have different computers the sketch is likely to run at different frame rates so the animation speed will vary. In some cases this might not matter but even so it would be nice if the animation speed is the same for everyone.

Fortunately it is very easy to implement framerate independant animation.

Assume that you want a ball to bounce around the screen at 120 pixels per second.
Since a Processing sketch runs at approximately 60fps this is equivalent to 2 pixels per frame but if we only achive 50fps the speed drops to 100 pixels per second - not good.

So the trick is to calculate the distance to move by multiplying the velocity by elapsed time since the last frame. I have modified your original code above to implement framerate independant animation with acceleration/decleration. This means the ball travels at the same speed on ALL machines.
Note: the faster the framerate the smaller the movement per frame so smoother the animation.

One approach to bouncing off the sides is simply to reverse the velocity by multiplying by -1. Although this will work perfectly with your original code because you are moving the circle a fixed distance per frame. The problem is that it is not guarenteed to work perfectly when using the framerate independant code below. The reason for this is best explained by example.

A circle has a positive horizontal velocity (vx) so is moving to the right. The circle moves off the right hand side so the code multiplies the velocity by -1 so that the next update will move the circle to the left. BUT, then the elapsed time to the next frame is smaller, so when the circle moves left it doesn't move far enough to get back onto the screen. So the next update will multiply vx by -1 making it positive so will then move to the right...
It results in the circle 'shivering' on the edge of the screen.

The original code presented by tfGuy44 solves this problem by moving the circle back onto the screen, as well as multiplying the velocity by -1 but then at high velocities it can give a jerky bounce.

HTH

1. //Circle creation clicker Array//
2. //allow the user to place a circle of radius R at a location on the canvas
3. //with a mouse click.
4. float R;
5. ArrayList<Circle> circles;
6. long ctime, ltime;
7. 
   
8. void setup(){
9.     size (500,500);
10.     //maxNumCircles = 10;
11.     r = 15;
12.     // circleCounter = 0;
13.     circles = new ArrayList<Circle>();
14.     // Remember the starting time
15.     ctime = ltime = millis();
16. }
17. 
    
18. void draw() {
19.     // Get the current time
20.     ctime = millis();
21.     // Calculate elapsed time in seconds
22.     float etime = (ctime - ltime)/1000.0f;
23.     // Remember the current time
24.     ltime = ctime;
25.     background(255);
26.     fill(random(255),random(255),random(255));
27.     noStroke();
28.     for(int i=0; i<circles.size(); i++) {
29.         circles.get(i).render();
30.         circles.get(i).move(etime);
31.     }
32. }
33. 
    
34. void mouseClicked() {
35.     circles.add(new Circle(mouseX, mouseY, r));
36.     println("Number of circles; " + circles.size());
37. }
38. 
    
39. //define the circle class
40. class Circle {
41.     //class data variables
42.     float centerX, centerY;
43.     float vx, vy, ax, ay;
44.     float radius;
45. 
    
46.     //constructor - builds the object when it is declared.
47.     Circle(float x, float y, float r) {
48.         centerX = x;
49.         centerY = y;
50.         // Calculate random direction
51.         float ang = random(TWO_PI);
52.         println("Angle " + ang);
53.         // Move in random direction at 40 pixels per second
54.         vx = 40 * cos(ang);
55.         vy = 40 * sin(ang);
56.         // Accelerate in direction of movement by
57.         // 80 pixels per second per second
58.         // positive values - acceleration
59.         // negative values - deceleration
60.         ax = 80.0f * abs(cos(ang));
61.         ay = 80.0f * abs(sin(ang));
62.         radius = r;
63.     }
64. 
    
65.     //render the circle object
66.     void render() {
67.         noStroke();
68.         for(int i=(int)radius; i>=0; i--){
69.             fill(0,255,0);
70.             ellipse(centerX, centerY, 2*i, 2*i);
71.             fill(255,255,255,25);
72.             ellipse(centerX,centerY,2*radius,2*radius);
73.         }
74.     }
75. 
    
76.     // update position according to Newtonian motion
77.     void move(float elapsedTime) {
78.         // Calculate change in velocity
79.         float dvx = ax * elapsedTime;
80.         float dvy = ay * elapsedTime;
81.         // Apply this change to the velocity taking into account
82.         // the direction the ball is going
83.         vx += (vx < 0) ? -dvx : dvx;
84.         vy += (vy < 0) ? -dvy : dvy;;
85.         // Change the position of the ball based on velocity
86.         // and elapsed time
87.         centerX += vx * elapsedTime; //equivalent to x = x+vx
88.         centerY += vy * elapsedTime;
89.         // Horizontal bounce
90.         if(centerX + radius > width)
91.           vx = -abs(vx);
92.         else if (centerX - radius < 0)
93.           vx = abs(vx);
94.         // Vertical bounce
95.         if(centerY + radius > height)
96.           vy = -abs(vy);
97.         else if (centerY - radius < 0)
98.           vy = abs(vy);
99.     }
100. }