javascript - How calculate a 1/4 circle arc to move along (bezier curve)? -

i'm using jquery.path move object along bezier curve. when item clicked, can determine start , end points. how calculate angle , length make element move point point b on arc that's 1/4 of circle intersecting start , end point?

i want move along curve never dips lower starting y position , never left of end x position.

    var path = {         start: {             x: currentleft,             y: currenttop,             angle: ????, //don't know how calculate             length: ???? //don't know how calculate         },         end: {             x: endleft,             y: endtop,             angle: ????, //don't know how calculate             length: ???? //don't know how calculate         }     };      jquery(myelement).animate(         {             path: new jquery.path.bezier(path)         }     ); 

approx. want:

approx i'm getting (they're dipping low):

a generalised solution tricky because must handle diagonal movements in each of 4 diagonal directions, , horizontal, , vertical.

first, need couple of utility functions :

function r2d(x) {     /* radians degrees */     return x * 180 / math.pi; } function smaller(x, y) {     /* returns closer of x|y 0 */     var x_ = math.abs(x);     var y_ = math.abs(y);     return (math.min(x_, y_) === x_) ? x : y; } 

now main function, anim, accepts jquery object (containing element of interest) , end object (with properties .left , .top ).

function anim($el, end) {     var current = $el.position();      var slope1 = (end.top - current.top) / (end.left - current.left);     var slope2 = 1 / slope1;     var endangle = r2d(math.atan(smaller(slope1, slope2)));     var startangle = -endangle;     var length = 1/3; //vary between 0 , 1 affect path's curvature. also, try >1 interesting effect.      //for debugging     $("#endangle").text(endangle);     $("#startangle").text(startangle);     $("#length").text(length);      var path = {         start: {             x: current.left,             y: current.top,             angle: startangle,             length: length         },         end: {             x: end.left,             y: end.top,             angle: endangle,             length: length         }     };      $el.animate({ path: new jquery.path.bezier(path) }); } 

the calculation of endangle pretty simple each individual case (the 4 diagonals, horizontal , vertical) tricky generalised solution. took me while develop worked in cases.

demo