Hi:

I wish to create a sketch, where user can click anywhere on the canvas to add a draggable button, so the ball (circle) can bounce between the buttons sequentially. Say I have three buttons, the ball will go from first, to second to third, then back to button number 1.

It's simple in my mind... but with my limited coding skills, this has become quiet a challenge. To add more buttons I should try using a Arreylist??  

Below is what I have so far, there are only two buttons on stage, the ball (circle) is bouncing between the two buttons but not very perfect.

wish list:
1 - a ball that will bounce between two or more draggable buttons
2 - click on stage to add more buttons

Any help is greatly appreciated.  


float button1x,button2x;
float button1y, button2y;
int buttonSize = 10;
boolean b1over = false;
boolean b1locked = false;
boolean b2over = false;
boolean b2locked = false;
boolean reBounce = false;
float b1difx = 0.0;
float b1dify = 0.0;
float b2difx = 0.0;
float b2dify = 0.0;

int size = 60;       // Width of the shape
float xpos, ypos;    // Starting position of shape
float speed = 1;
float xspeed = 1;  // Speed of the shape
float yspeed = 1;  // Speed of the shape
float xdirection = 1;  // Left or Right
float ydirection = 1;  // Top to Bottom

float startX,startY,nextX,nextY;


void setup()
{
 size(600, 600);
 button1x = width/4.0;
 button1y = height/4.0;
 button2x = width/2.0;
 button2y = height/3.0;
 rectMode(CENTER);  
 ellipseMode(CENTER);

 xpos = button1x;
 ypos = button1y;
 
 startX = button1x;
 startY = button1y;

 nextX = button2x;
 nextY = button2y;
}

void draw()
{ background(0);

 
if ((startX - nextX) <0) {
   xspeed = speed;}
   else {xspeed = -speed;}
if ((startY - nextY) <0) {
   yspeed = abs((startY - nextY)/(startX - nextX));}
   else {yspeed = -1 * abs(startY - nextY)/abs(startX - nextX);}
 
//  xpos += ( speed * xdirection );
//  ypos += ( yspeed * ydirection );
 xpos += xspeed;
 ypos += yspeed;
 
//  if (reBounce)
//  {  xdirection = -1;
//  speed = -1;}
//  else {  speed = 1;
//  speed = 1;}

 if (xpos > abs(nextX)) {
 //print("yes");
 startX = button2x;
 startY = button2y;
 nextX = button1x;
 nextY = button1y;
 reBounce = true;
 }
 else if (xpos < abs(startX)) {
 //print("no");
 startX = button1x;
 startY = button1y;
 nextX = button2x;
 nextY = button2y;
 reBounce = false;
 }

 // Draw the shape
 ellipse(xpos+size/2, ypos+size/2, size, size);

 
 // Test if the cursor is over the box
 if (mouseX > button1x-buttonSize && mouseX < button1x+buttonSize &&
     mouseY > button1y-buttonSize && mouseY < button1y+buttonSize) {
   b1over = true;  
   if(!b1locked) {
     stroke(255);
     fill(153);
   }
 } else {
   stroke(153);
   fill(153);
   b1over = false;
 }
 
 if (mouseX > button2x-buttonSize && mouseX < button2x+buttonSize &&
     mouseY > button2y-buttonSize && mouseY < button2y+buttonSize) {
   b2over = true;  
   if(!b2locked) {
     stroke(255);
     fill(153);
   }
 } else {
   stroke(153);
   fill(153);
   b2over = false;
 }
 
 // Draw the box
 rect(button1x, button1y, buttonSize, buttonSize);
 rect(button2x, button2y, buttonSize, buttonSize);
}

void mousePressed() {
 if(!b1over) {
   print("over");
   b1locked = true;
   fill(255, 255, 255);
 } else {
   b1locked = false;
 }
 
 if(!b2over) {
   b2locked = true;
   fill(255, 255, 255);
 } else {
   b2locked = false;
 }
 b1difx = mouseX-button1x;
 b1dify = mouseY-button1y;
 
 b2difx = mouseX-button2x;
 b2dify = mouseY-button2y;

}

void mouseDragged() {
 if(!b1locked) {
   button1x = mouseX-b1difx;
   button1y = mouseY-b1dify;
 }
 if(!b2locked) {
   button2x = mouseX-b2difx;
   button2y = mouseY-b2dify;
 }
 startX = xpos;
 startY = ypos;
}

void mouseReleased() {
 b1locked = false;
 b2locked = false;

}