pxonbox

Mission

To place a dot on the border of the blue and red box. The dot's position is decided by a line, drawn from the center of the red box to the center of the blue box.

Code

// find out width and height between the two boxes
var width  = boxA.x - boxB.x;
var height = boxA.y - boxB.y;
var ratio  = height / width;

// init position of boxB
var px = boxB.x;
var py = boxB.y;
var dir;

// box A is above or belove box B
if(Math.abs( Math.atan(ratio) ) > boxB.ang) {
    dir = boxA.y > boxB.y ? 1 : -1;
    py += dir * boxB.h;
    px += dir * boxB.h / ratio;
}

// box A is left or right to box B
else {
    dir = boxA.x > boxB.x ? 1 : -1;
    py += dir * boxB.w * ratio;
    px += dir * boxB.w;
}

// place dot
dot.style.left = (px - 2) + "px";
dot.style.top  = (py - 2) + "px";