adelegard · September 18, 2015 22:03 · Sep 18, 2015
diff --git a/Intersecting Rectangles.markdown b/Intersecting Rectangles.markdown
@@ -0,0 +1,7 @@
+Intersecting Rectangles
+-----------------------
+Pen for working through the math of this. Turned out to be really simple.
+
+A [Pen](http://codepen.io/adelegard/pen/EVKMew) by [adelegard](http://codepen.io/adelegard) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/adelegard/pen/EVKMew/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<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>
diff --git a/script.js b/script.js
@@ -0,0 +1,51 @@
+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) : "");
+
+});
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,17 @@
+.container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  .inner {
+    height: 50px;
+    width: 50px;
+    border: 2px solid #888;
+    position: absolute;
+
+    &#elem1 {
+      left: 50%;
+      top: 100px;
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>