Intersecting Rectangles

index.html

<div class="container">
  <div id="elem1" class="inner"></div>
  <div id="elem2" class="inner"></div>
  <div class="stats">
    <span>r1: </span><span id="r1"></span><br>
    <span>r2: </span><span id="r2"></span><br>
    <span>iArea: </span><span id="iArea"></span><br>
    <span>uArea: </span><span id="uArea"></span><br>
    <span>iPercent: </span><span id="iPercent"></span><br>
  </div>
</div>

Intersecting Rectangles.markdown

Intersecting Rectangles

Pen for working through the math of this. Turned out to be really simple.

A Pen by adelegard on CodePen.

License.

script.js

var getArea = function(obj) {
    return (obj.right - obj.left) * (obj.bottom - obj.top);
};
var getRectangleObj = function($elem) {
  var offset = $elem.offset();
  var w = $elem.width();
  var h = $elem.height();

  var obj = {
    left: offset.left,
    right: offset.left + w,
    bottom: offset.top + h,
    top: offset.top
  };
  obj.width = obj.right - obj.left;
  obj.height = obj.bottom - obj.top;
  obj.area = getArea(obj);
  console.log(JSON.stringify(obj));
  return obj;
};
var r1 = getRectangleObj($("#elem1"));
$("#r1").text(JSON.stringify(r1));
var $moveable = $("#elem2");
$(".container").on("mousemove", function(e) {
  console.log("moved");
  $moveable.css({
    left: e.pageX,
    top: e.pageY
  });

  var r2 = getRectangleObj($moveable);
  $("#r2").text(JSON.stringify(r2));
  var intersection = {
    left    : Math.max(r1.left, r2.left),
    right   : Math.min(r1.right, r2.right),
    bottom  : Math.max(r1.bottom, r2.bottom),
    top     : Math.min(r1.top, r2.top)
  };
  intersection.area = getArea(intersection);

  // if intersection is not empty
  var unionArea;
  var doesIntersect = intersection.left < intersection.right && intersection.top < intersection.bottom;
  if (doesIntersect) {
    unionArea = r1.area + r2.area - intersection.area;
  }
  $("#iArea").text(doesIntersect ? intersection.area : "");
  $("#uArea").text(doesIntersect ? unionArea : "");
  $("#iPercent").text(doesIntersect ? (intersection.area / unionArea) : "");

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  
  .inner {
    height: 50px;
    width: 50px;
    border: 2px solid #888;
    position: absolute;
    
    &#elem1 {
      left: 50%;
      top: 100px;
    }
  }
}