I am using Processing to generate some technical diagrams.  Currently my related rectangles are connected with a line from the center of each rectangle.  However, for the diagram to be meaningful, I really need that line to be an arrow.  The rectangles can (and do) vary in size and can be dragged around the screen.  

Any thoughts on how to connect them such that the arrow head can move along the outside of the rectangle as it is dragged to a different position?  I've been trying to get my head around the geometry involved (and failing).

Many thanks!

Do the arrow-heads scale or should they be fixed in size? Do they have to rotate freely or just in 90degree steps? If the arrow-heads are fixed size & 90deg only, you might want to define the shape of the arrow head in a function which takes the "center" of the head has input and then simply draws the head. You can then call this "arrow head" function for each "ending" of the line in your code.
If the arrow-heads need to scale/rotate arbitrarily, you migth want to define such a function using PVectors instead.

Many thanks for all the help.  I got something working in a test sketch so now I'll try and integrate it with the larger program.  Here's the final code for those who are interested.  

BTW: The program treats the rectangle more like an ellipse for the purposes of drawing the arrows (it goes inside the rectangle at the corners) but I'll still call this a win (and it works perfectly for circles).  If anyone has any improvements, please let me know.

float x = random(50, 200);
float y = random(50, 300);
float w = random(50, 100);
float h = random(50, 100);

void setup() {
 size(600, 600);
 smooth();
}

void draw() {
 background(255);
 noStroke();
 fill(200, 200);
 rectMode(CORNER);
 rect(x - w/2, y - h/2, w, h);
 rect(mouseX - w/2, mouseY - h/2, w, h);
 float a = atan2(mouseY-y, mouseX-x);
 stroke(1);
 line(x + cos(a) * (w/2), y + sin(a) * (h/2), mouseX - cos(a) * (w/2), mouseY - sin(a) * (h/2));

 translate(mouseX - cos(a) * (w/2), mouseY - sin(a) * (h/2));
 rotate(a-HALF_PI);
 fill(0);
 triangle(-5, -10, 0, 0, 5, -10);
}

Cool sketch, but I don't want the arrow tied to a specific corner.  I need to be able to move around all the edges of the rectangle.  What I came up with does that, but the arrowhead moves into the rectangle on the corners because w/2 and h/2 aren't long enough, but I can't think of a simple way to expand them.

hmm yeah, but couldnt this be simple done, by drawing the rect over the arrow ?
like this ?


Code:

void draw() {
 background(204);
 strokeWeight(2);
 pushMatrix();
 float a = atan2(mouseY-height/2, mouseX-width/2);
 line(width/2,height/2,mouseX,mouseY);
 translate(mouseX,mouseY);
 rotate(a-HALF_PI);
 triangle( -5, -10, 0, 0, +5,-10);
 fill(255);
 popMatrix();
 rectMode(CENTER);
  rect(50,50,30,30);

 }  

@Cedric @TfGuy44
Wow.  Thanks.  That last post looks exactly like what I had in mind.  

Not to impose further, but I have been trying to make the code work for a connection between 2 rectangles (like the code I posted earlier), but I cannot get the rectangles and arrow to line up (it seems to be tied into centering a single rectangle in the screen).  

Do you have any suggestions?  And many thanks for the time and effort you've put in.  

hehe right

@TFGuy44  Interesting.  I'll have to think about that.  Many thanks.