Question

I’m struggling with a math problem and could use your help. I want to know the following:

• Is the inner box primarily on the left or right side?
• Is the inner box primarily positioned to the top or bottom of the outer box?

To figure this out I know the following:

• The height & width of the outer box, this is static at 200px
• The width of the inner box (var X)
• The inner box distance from the left of the outer box (var x2)
• the inner box distance from the top, (var y)

Any ideas oh how to determine if the inner box is primarily to the left or right.. top or bottom?

Thank you!

Answer 1

You can figure out the center of the inner box by averaging its left and right edges. Then compare that to the outer box center to figure out its primary direction.

In the code below, I’m calling

The height & width of the outer box, this is static at 200px

outerH and outerW

The width of the inner box (var X)

innerW

(I’m assuming you know the height of the innerBox too and I’m calling that innerH)

The inner box distance from the left of the outer box (var x2)

leftPadding

the inner box distance from the top, (var y)

topPadding

function isPrimarilyLeft(outerW, innerW, leftPadding) {
  var outerCentroidX = outerW / 2;
  // center = (leftedge + right edge) / 2
  // leftedge = leftPadding
  // rightedge = leftpadding + innerWidth
  // center = (leftPadding + leftPadding + width) / 2
  //        = 2*leftPadding / 2 + width / 2 =
  var innerCentroidX = leftPadding + innerW / 2;
  return innerCentroidX < outerCentroidX;
}

function isPrimarilyTop(outerH, innerH, topPadding) {
  var outerCentroidY = outerH / 2;
  var innerCentroidY = topPadding + innerH / 2;
  return innerCentroidY < outerCentroidY;
}