1 files changed, 75 insertions, 0 deletions
diff --git a/frontend/2d/_collisions/rectangle_rectangle.html.content b/frontend/2d/_collisions/rectangle_rectangle.html.content
new file mode 100644
index 0000000..30e34d8
--- /dev/null
+++ b/frontend/2d/_collisions/rectangle_rectangle.html.content
@@ -0,0 +1,75 @@
+<script src="./rectangle_rectangle/dist/output.js"></script>
+<script>
+  window.onload = function() {
+      var lPlayElement = document.getElementById('gl_canvas_play'),
+          lStopElement = document.getElementById('gl_canvas_stop');
+      lPlayElement.addEventListener('click', function() {
+          lPlayElement.style.display = 'none';
+          lStopElement.style.display = 'block';
+      });
+      lStopElement.addEventListener('click', function() {
+          lStopElement.style.display = 'none';
+          lPlayElement.style.display = 'block';
+      });
+  }
+  
+</script>
+<article>
+  <h1>Rectangle intersection with a Rectangle</h1>
+  <section>
+	<h2>Algorithm</h2>
+	<p>
+	  For each line segment that your rectangle could be intersecting with,
+	  do the following:
+	  <ol>
+		<li>
+		  For each corner of your rectangle, check if the distance from that point to the line is less than some <i>epsilon</i>, where <i>epsilon</i> is a reasonable small number (usually a 1 or 2 units, depending on the size of your lines).
+		</li>
+		<li>
+		  To check each point, use the "distance from point to line segment" formula, which can be found <a href="https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line">here</a> (I will not derive it just yet)
+		</li>
+		<li>
+		  If a collision is found, we have all of the information required to solve the collision:
+		  <ul>
+			<li>
+			  <b>Collision Normal</b>: This is the perpendicular to the line segment, which can be found by:
+			  <code>
+				<pre>
+Vector2 getNormalToLineSegment(LineSegment* segment) {
+    Vector2 direction = segment->end - segment->start;
+    return *Vector2 { -direction.y, direction.x }).normalize();
+}
+				</pre>
+			  </code>
+			</li>
+			<li>
+			  <b>First Point of Application</b>: Get the vector from the center of the rectangle (most like your position) to the corner which intersected.
+			</li>
+			<li>
+			  <b>Second Point of Application</b>: Get vector from center of line to the corner which intersected.
+			</li>
+		  </ul>
+		</li>
+	  </ol>
+	</p>
+  </section>
+  <section>
+	<h2>
+	  Live Example
+	</h2>
+    <div class="opengl_canvas_container">
+      <canvas id="gl_canvas" width="640" height="480"></canvas>
+      <button id="gl_canvas_play" class="play_button">
+        Play
+      </button>
+      <button id="gl_canvas_stop" class="stop_button">
+        Stop
+      </button>
+    </div>
+    <footer id="references">
+      <h2>References</h2>
+      <ul>
+      </ul>
+    </footer>
+  </section>
+</article>