I want to click and drag a corner of a rectangle, and have the rectangle spin around its center.

This is pretty easy to do with a square:

rot = PI * 3 / 4 + atan2( (centerY - mouseY), (centerX - mouseX) ); 

But if I want to rotate a rectangle, I am not sure how to handle the offset to make the rotation smooth as the mouse is moved.

In this jsfiddle example, http://jsfiddle.net/R4QpV/, clicking on the red corner lets you rotate around the center of the square. But what if you click on the green corner, there is a jump. How to make dragging the green corner smooth and follow the mouse as it does when clicking the square's corner?

noStroke( );

beginShape( );

vertex( 10, 10 );

vertex( 90, 10 );

vertex( 90, 90 );

vertex( 10, 90 );

vertex( 10, 10 );

endShape( );

stroke( 0 );

line( 10, 10, 90, 10 );

line( 10, 90, 90, 90 );

void setup( )

{

  noLoop( );

}

void draw( )

{

  println( "redraw" );

  redraw( );

}