Rectangle intersection with a line complete

13 files changed, 551 insertions, 427 deletions

diff --git a/frontend/2d/_collisions/pill_line.html b/frontend/2d/_collisions/pill_line.html
index bd5522e..1ba424d 100644
--- a/frontend/2d/_collisions/pill_line.html
+++ b/frontend/2d/_collisions/pill_line.html
@@ -47,47 +47,47 @@
 			</li>
 		</ul>
 		</nav>
-        <script src="./pill_line/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>
-        <section>
-            <h1>Pill-Line</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-                        <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li>
-                        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li>
-                        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li>
-                    </ul>
-                </footer>
-            </article>
-        </section>
+<script src="./pill_line/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>Pill-Line</h1>
+  <section>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <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>
+        <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li>
+        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li>
+        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li>
+      </ul>
+    </footer>
+  </section>
+</article>
 		</main>
 	</body>
 </html>
diff --git a/frontend/2d/_collisions/pill_line.html.content b/frontend/2d/_collisions/pill_line.html.content
index c534d93..ce779d5 100644
--- a/frontend/2d/_collisions/pill_line.html.content
+++ b/frontend/2d/_collisions/pill_line.html.content
@@ -1,41 +1,41 @@
-        <script src="./pill_line/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>
-        <section>
-            <h1>Pill-Line</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-                        <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li>
-                        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li>
-                        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li>
-                    </ul>
-                </footer>
-            </article>
-        </section>
+<script src="./pill_line/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>Pill-Line</h1>
+  <section>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <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>
+        <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li>
+        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li>
+        <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li>
+      </ul>
+    </footer>
+  </section>
+</article>
diff --git a/frontend/2d/_collisions/pill_pill.html b/frontend/2d/_collisions/pill_pill.html
index 812c10a..0883bc7 100644
--- a/frontend/2d/_collisions/pill_pill.html
+++ b/frontend/2d/_collisions/pill_pill.html
@@ -47,46 +47,46 @@
 			</li>
 		</ul>
 		</nav>
-        <script src="./pill_pill/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>
-        <section>
-            <h1>Pill-Pill</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-                      <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li>
-					  <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li>
-                    </ul>
-                </footer>
-            </article>
-        </section>
+<script src="./pill_pill/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>Pill-Pill</h1>
+  <section>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <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>
+        <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li>
+		<li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li>
+      </ul>
+    </footer>
+  </section>
+</<article>
 		</main>
 	</body>
 </html>
diff --git a/frontend/2d/_collisions/pill_pill.html.content b/frontend/2d/_collisions/pill_pill.html.content
index bd214b2..385ae3c 100644
--- a/frontend/2d/_collisions/pill_pill.html.content
+++ b/frontend/2d/_collisions/pill_pill.html.content
@@ -1,40 +1,40 @@
-        <script src="./pill_pill/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>
-        <section>
-            <h1>Pill-Pill</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-                      <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li>
-					  <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li>
-                    </ul>
-                </footer>
-            </article>
-        </section>
+<script src="./pill_pill/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>Pill-Pill</h1>
+  <section>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <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>
+        <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li>
+		<li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li>
+      </ul>
+    </footer>
+  </section>
+</<article>
diff --git a/frontend/2d/_collisions/rectangle_line.html b/frontend/2d/_collisions/rectangle_line.html
index 17d95da..e0cd67e 100644
--- a/frontend/2d/_collisions/rectangle_line.html
+++ b/frontend/2d/_collisions/rectangle_line.html
@@ -47,44 +47,82 @@
 			</li>
 		</ul>
 		</nav>
-        <script src="./rectangle_line/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>
-        <section>
-            <h1>Rectangle-Line</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-            </article>
-        </section>
+<script src="./rectangle_line/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 Line Segment</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>
+		<li><a href="https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line">Distance from Point to Line</a></li>
+      </ul>
+    </footer>
+  </section>
+</article>
 		</main>
 	</body>
 </html>
diff --git a/frontend/2d/_collisions/rectangle_line.html.content b/frontend/2d/_collisions/rectangle_line.html.content
index 9f008a4..310c45a 100644
--- a/frontend/2d/_collisions/rectangle_line.html.content
+++ b/frontend/2d/_collisions/rectangle_line.html.content
@@ -1,38 +1,76 @@
-        <script src="./rectangle_line/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>
-        <section>
-            <h1>Rectangle-Line</h1>
-            <article>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-                <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>
-            </article>
-        </section>
+<script src="./rectangle_line/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 Line Segment</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>
+		<li><a href="https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line">Distance from Point to Line</a></li>
+      </ul>
+    </footer>
+  </section>
+</article>
diff --git a/frontend/2d/_collisions/rectangle_line/dist/output.wasm b/frontend/2d/_collisions/rectangle_line/dist/output.wasm
index 11fa4c5..41e549e 100755
--- a/frontend/2d/_collisions/rectangle_line/dist/output.wasm
+++ b/frontend/2d/_collisions/rectangle_line/dist/output.wasm
diff --git a/frontend/2d/_collisions/rectangle_line/main.cpp b/frontend/2d/_collisions/rectangle_line/main.cpp
index 321e8b5..39cb079 100644
--- a/frontend/2d/_collisions/rectangle_line/main.cpp
+++ b/frontend/2d/_collisions/rectangle_line/main.cpp
@@ -51,6 +51,14 @@ struct Rigidbody {
     }
 };
 
+struct IntersectionResult {
+    bool intersect = false;
+    Vector2 collisionNormal;
+    Vector2 relativeVelocity;
+    Vector2 firstPointOfApplication;
+    Vector2 secondPointOfApplication;
+};
+
 struct Rectangle {
 	OrthographicShape shape;
 	Rigidbody body;
@@ -79,6 +87,8 @@ struct Rectangle {
 		}
 
 		shape.load(vertices, 6, renderer);
+		body.reset();
+		body.momentOfInertia = (1.f / 12.f) * body.mass * (width + height * height * height);
 	}
 
 	void update(float32 dtSeconds) {
@@ -172,15 +182,115 @@ void load() {
     segmentList[3].load(&renderer, Vector4().fromColor(205, 178, 214, 255.f), Vector2 { 50.f, 150.f }, Vector2 { context.width - 50.f, 50.f });
 
 	rectangle.load(&renderer, Vector4 { 230.f, 182.f, 35.f, 255.f }, 64.f, 32.f);
-	rectangle.body.position = Vector2 { context.width / 2.f, context.height / 2.f };
+	rectangle.body.position = Vector2 { context.width / 3.f, context.height / 2.f };
 
     mainLoop.run(update);
 }
 
+float32 getDistancePointToLine(Vector2 point, LineSegment* segment) {
+	float32 xLength = segment->end.x - segment->start.x;
+	float32 yLength = segment->end.y - segment->start.y;
+	return fabs(xLength * (segment->start.y - point.y) - (segment->start.x - point.x) * yLength)
+		/ sqrtf((xLength * xLength) + (yLength * yLength));
+}
+
+const float32 EPSILON = 1.f;
+IntersectionResult getIntersection(Rectangle* rectangle, LineSegment* segment) {
+	IntersectionResult ir;
+	
+	float32 halfWidth = rectangle->width / 2.f;
+	float32 halfHeight = rectangle->height / 2.f;
+	
+	Vector2 bottomLeft = rectangle->shape.model * Vector2 { -halfWidth, -halfHeight };
+	Vector2 topLeft = rectangle->shape.model * Vector2 { -halfWidth, halfHeight };
+	Vector2 bottomRight = rectangle->shape.model * Vector2 { halfWidth, -halfHeight };
+	Vector2 topRight = rectangle->shape.model * Vector2 { halfWidth, halfHeight };
+
+	Vector2 collisionPoint;
+
+	if (getDistancePointToLine(bottomLeft, segment) <= EPSILON) {
+		ir.intersect = true;
+		collisionPoint = bottomLeft;
+	} else if (getDistancePointToLine(topLeft, segment) <= EPSILON) {
+		ir.intersect = true;
+		collisionPoint = topLeft;
+	} else if (getDistancePointToLine(bottomRight, segment) <= EPSILON) {
+		ir.intersect = true;
+		collisionPoint = bottomRight;
+	} else if (getDistancePointToLine(topRight, segment) <= EPSILON) {
+		ir.intersect = true;
+		collisionPoint = topRight;
+	} else {
+		ir.intersect = false;
+		return ir;
+	}
+
+	ir.collisionNormal = segment->getNormal();
+	ir.relativeVelocity = rectangle->body.velocity - segment->body.velocity;
+	ir.firstPointOfApplication = (collisionPoint - rectangle->body.position);
+	ir.secondPointOfApplication = collisionPoint - segment->getPointOnLine(0.5f);
+
+	return ir;
+}
+
+void resolveCollision(Rigidbody* first, Rigidbody* second, IntersectionResult* ir) {
+    Vector2 relativeVelocity = ir->relativeVelocity;
+    Vector2 collisionNormal  = ir->collisionNormal;
+    Vector2 firstPerp        = ir->firstPointOfApplication.getPerp();
+    Vector2 secondPerp       = ir->secondPointOfApplication.getPerp();
+	float32 firstPerpNorm    = firstPerp.dot(collisionNormal);
+	float32 sndPerpNorm      = secondPerp.dot(collisionNormal);
+
+    float32 cofOfRestition = (first->cofOfRestition + second->cofOfRestition) / 2.f;
+    float32 numerator = (relativeVelocity * (-1 * (1.f + cofOfRestition))).dot(collisionNormal);
+    float32 linearDenomPart = collisionNormal.dot(collisionNormal * (1.f / first->mass + 1.f / second->mass));
+	float32 rotationalDenomPart = (firstPerpNorm * firstPerpNorm) / first->momentOfInertia + (sndPerpNorm * sndPerpNorm) / second->momentOfInertia;
+
+    float32 impulseMagnitude = numerator / (linearDenomPart);// + rotationalDenomPart);
+    first->velocity = first->velocity + (collisionNormal * (impulseMagnitude / first->mass));
+	second->velocity = second->velocity - (collisionNormal * (impulseMagnitude / second->mass));
+    first->rotationalVelocity = first->rotationalVelocity + firstPerp.dot(collisionNormal * impulseMagnitude) / first->momentOfInertia;
+    second->rotationalVelocity = second->rotationalVelocity - secondPerp.dot(collisionNormal * impulseMagnitude) / second->momentOfInertia;
+}
 
 void update(float32 deltaTimeSeconds, void* userData) {
 	// Update
+	Rectangle rectCopy = rectangle;
 	rectangle.update(deltaTimeSeconds);
+
+	for (int32 segmentIndex = 0; segmentIndex < 4; segmentIndex++) {
+		IntersectionResult ir = getIntersection(&rectangle, &segmentList[segmentIndex]);
+		if (!ir.intersect) {
+		    continue;
+		}
+
+		// Handle collison here
+		IntersectionResult irCopy = ir;
+		float32 copyDt = deltaTimeSeconds;
+		
+		do {
+			ir = irCopy;
+			rectangle = rectCopy;
+			copyDt = copyDt /= 2.f;
+
+			rectangle.update(copyDt);
+			irCopy = getIntersection(&rectangle, &segmentList[segmentIndex]);
+
+			if (copyDt <= 0.f) {
+				printf("Error: Should not be happening.\n");
+				break;
+			}
+
+		} while (irCopy.intersect);
+
+		printf("Found intersection at timestamp: %f\n", copyDt);
+
+		resolveCollision(&rectangle.body, &segmentList[segmentIndex].body, &ir);
+		float32 frameTimeRemaining = deltaTimeSeconds - copyDt;
+		
+		update(frameTimeRemaining, userData);
+		return;
+    }
 	
 	// Renderer
 	renderer.render();
diff --git a/frontend/index.css b/frontend/index.css
index dbe4128..bc87160 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,3 +1,6 @@
+/***********************************
+Top level styling
+************************************/
 html {
 	background: #2f3032;
 	background: -webkit-radial-gradient(top, #383A56, #303133);
@@ -11,7 +14,7 @@ body {
 	
     font-size: 16px;
     font-family: "Helvetica", sans-serif;
-    line-height: 1.75rem;
+    line-height: 1.5rem;
 	width: 960px;
 	margin: auto;
     overflow-x: auto;
@@ -46,15 +49,9 @@ main {
     overflow-y: hidden;
 }
 
-section {
-    min-width: 74%;
-    width: 74%;
-    overflow-y: hidden;
-}
-
-/*
-    Navigation bar
-*/
+/***********************************
+Navbar stylings
+************************************/
 nav {
     padding-top: 1rem;
     position: sticky;
@@ -134,64 +131,72 @@ nav a:hover {
 	color: #ede68a;
 }
 
-.spin-loader {
-    border: 5px solid #f3f3f3;
-    border-top: 5px solid #555;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    animation: spin 2s linear infinite;
+/***********************************
+Content styling
+************************************/
+article {
+    min-width: 74%;
+    width: 74%;
+    overflow-y: hidden;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+article > h1 {
+	width: 100%;
+	border-bottom: 1px solid #EDE68A;
+	padding-bottom: 0.25rem;
 }
 
-article > p {
-    padding-left: 2rem;
-    padding-right: 2rem;
+section > p {
+    padding-left: 1rem;
 }
 
-/*
-    Helpful widgets
-*/
-.vec2_input_group {
-    position: relative;
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-evenly;
-    padding: 0.25rem;
+section > h2 {
+	padding-left: 0.25rem;
+	font-size: 18px;
 }
 
-.vec2_input_group > label {
-    position: absolute;
-    top: -1rem;
-    left: 0rem;
-    font-size: 0.8rem;
+section pre {
+    overflow-x: auto;
+    padding-left: 0.5rem;
+    font-size: 0.9rem;
+	line-height: 1.1rem;
+}
+
+#references a,
+#references a:visited {
+    color: #EDE68A;
+    opacity: 0.8;
+}
+
+#references a:hover {
+    opacity: 1.0;
+}
+
+
+/***********************************
+Code stylings
+************************************/
+.code_keyword {
+    color: blue;
     font-weight: bold;
-    text-align: left;
 }
 
-.vec2_input_group > input {
-    width: 45%;
+.code_constant {
+    font-weight: bold;
 }
 
-.slider_container {
-    display: flex;
-    flex-direction: column;
+.code_str {
+    color: orange;
 }
 
-.slider_container > label {
-    font-weight: 500;
+.code_comment {
+    color: green;
 }
 
-/*
-    WebGL container styling from here on.
-*/
-article .opengl_canvas_container {
+/***********************************
+WebGL container
+************************************/
+.opengl_canvas_container {
     position: relative;
     width: 100%;
     text-align: center;
@@ -201,7 +206,7 @@ article .opengl_canvas_container {
     border-radius: 3px;
 }
 
-article .opengl_canvas_container .play_button {
+.opengl_canvas_container .play_button {
     all: unset;
     font-size: 2rem;
     width: 128px;
@@ -217,6 +222,7 @@ article .opengl_canvas_container .play_button {
     flex-direction: row;
     align-items: center;
     justify-content: center;
+	cursor: pointer;
 }
 
 .opengl_canvas_container canvas {
@@ -224,11 +230,7 @@ article .opengl_canvas_container .play_button {
     border: 1px solid #b0a565;
 }
 
-article .opengl_canvas_container .play_button:hover {
-    cursor: pointer;
-}
-
-article .opengl_canvas_container .stop_button {
+.opengl_canvas_container .stop_button {
     all: unset;
     font-size: 1rem;
     background-color: red;
@@ -240,72 +242,7 @@ article .opengl_canvas_container .stop_button {
     top: 0.5rem;
     left: 496px;
     display: none;
+	cursor: pointer;
 }
 
-article .opengl_canvas_container .stop_button:hover {
-    cursor: pointer;
-}
-
-article pre {
-    width: 90%;
-    overflow-x: auto;
-    padding-left: 2rem;
-    font-size: 0.9rem;
-}
-
-.opengl_canvas_sidebar {
-    border: 1px solid #b0a565;
-	border-radius: 0px 0px 3px 3px;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker {
-	grid-column: 1 span /4;
-    font-size: 14px;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li {
-    padding-bottom: 0.5rem;
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li > b {
-    display: inline-block;
-    width: 128px;
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li > span {
-    display: inline-block;
-}
-
-#references a,
-#references a:visited {
-    color: #EDE68A;
-    opacity: 0.8;
-}
-
-#references a:hover {
-    opacity: 1.0;
-}
-
-/*
-    Code styles
-*/
-.code_keyword {
-    color: blue;
-    font-weight: bold;
-}
 
-.code_constant {
-    font-weight: bold;
-}
-
-.code_str {
-    color: orange;
-}
-
-.code_comment {
-    color: green;
-}
diff --git a/frontend/index.html b/frontend/index.html
index 1a85eb8..004b8ab 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -47,36 +47,37 @@
 			</li>
 		</ul>
 		</nav>
-            <section>
-                <h1>Introduction: Rigid Body Physics</h1>
-                <article>
-                    <p>
-                        You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan, 
-                        and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk
-                        you through the entirety of a 2D rigid body physics system entirely in the web. All of this information will be extendable to other languages, but we will use
-                        JavaScript and WebGL in these blog posts. Additionally, much of the information presented here can be extended to 3 dimensions, but 3D carries some complications
-                        with it, that we will discuss in future blog posts.
-                    </p>
-                    <p>
-                        In implementing a rigidy body physics system, we're primarily interested in two sub-fields of physics, namely <b>dynamics</b> and <b>kinematics</b>. Although I'm
-                        far as can be from being an expert in either of these fields, I will explain - from a programmer's persepctive - what they mean to me:
-                        <ul>
-                            <li>
-                                <b>Kinematics</b> is the study of how an object's movement changes over time. These are the classic position, velocity, and acceleration equations
-                                that you're most likely familiar with from high school or college physics.
-                            </li>
-                            <li>
-                                <b>Dynamics</b> is the study of whats <i>causes</i> kinematic movement. These are the classic force and momentum equations that you may already be familiar
-                                with as well.
-                            </li>
-                        </ul>
-                    </p>
-                    <p>
-                        Finally, I must provide a disclaimer that all of rigid body systems are very math-y. You will need to know a decent amount of vector calculus and linear algebra to really understand
-                        what's going on here. I am going to assume that you have this knowledge. If you don't already have this knowledge, I will try and provide some resources on the Books
-                        n' References page of the website.
-                    </p>
-                </article>
-            </section>		</main>
+<article>
+  <h1>Introduction: Rigid Body Physics</h1>
+  <section>
+    <p>
+      You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan, 
+      and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk
+      you through the entirety of a 2D rigid body physics system entirely in the web. All of this information will be extendable to other languages, but we will use
+      JavaScript and WebGL in these blog posts. Additionally, much of the information presented here can be extended to 3 dimensions, but 3D carries some complications
+      with it, that we will discuss in future blog posts.
+    </p>
+    <p>
+      In implementing a rigidy body physics system, we're primarily interested in two sub-fields of physics, namely <b>dynamics</b> and <b>kinematics</b>. Although I'm
+      far as can be from being an expert in either of these fields, I will explain - from a programmer's persepctive - what they mean to me:
+      <ul>
+        <li>
+          <b>Kinematics</b> is the study of how an object's movement changes over time. These are the classic position, velocity, and acceleration equations
+          that you're most likely familiar with from high school or college physics.
+        </li>
+        <li>
+          <b>Dynamics</b> is the study of whats <i>causes</i> kinematic movement. These are the classic force and momentum equations that you may already be familiar
+          with as well.
+        </li>
+      </ul>
+    </p>
+    <p>
+      Finally, I must provide a disclaimer that all of rigid body systems are very math-y. You will need to know a decent amount of vector calculus and linear algebra to really understand
+      what's going on here. I am going to assume that you have this knowledge. If you don't already have this knowledge, I will try and provide some resources on the Books
+      n' References page of the website.
+    </p>
+  </section>
+</article>
+		</main>
 	</body>
 </html>
diff --git a/frontend/index.html.content b/frontend/index.html.content
index fa393b4..dab9097 100644
--- a/frontend/index.html.content
+++ b/frontend/index.html.content
@@ -1,31 +1,31 @@
-            <section>
-                <h1>Introduction: Rigid Body Physics</h1>
-                <article>
-                    <p>
-                        You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan, 
-                        and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk
-                        you through the entirety of a 2D rigid body physics system entirely in the web. All of this information will be extendable to other languages, but we will use
-                        JavaScript and WebGL in these blog posts. Additionally, much of the information presented here can be extended to 3 dimensions, but 3D carries some complications
-                        with it, that we will discuss in future blog posts.
-                    </p>
-                    <p>
-                        In implementing a rigidy body physics system, we're primarily interested in two sub-fields of physics, namely <b>dynamics</b> and <b>kinematics</b>. Although I'm
-                        far as can be from being an expert in either of these fields, I will explain - from a programmer's persepctive - what they mean to me:
-                        <ul>
-                            <li>
-                                <b>Kinematics</b> is the study of how an object's movement changes over time. These are the classic position, velocity, and acceleration equations
-                                that you're most likely familiar with from high school or college physics.
-                            </li>
-                            <li>
-                                <b>Dynamics</b> is the study of whats <i>causes</i> kinematic movement. These are the classic force and momentum equations that you may already be familiar
-                                with as well.
-                            </li>
-                        </ul>
-                    </p>
-                    <p>
-                        Finally, I must provide a disclaimer that all of rigid body systems are very math-y. You will need to know a decent amount of vector calculus and linear algebra to really understand
-                        what's going on here. I am going to assume that you have this knowledge. If you don't already have this knowledge, I will try and provide some resources on the Books
-                        n' References page of the website.
-                    </p>
-                </article>
-            </section>
\ No newline at end of file
+<article>
+  <h1>Introduction: Rigid Body Physics</h1>
+  <section>
+    <p>
+      You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan, 
+      and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk
+      you through the entirety of a 2D rigid body physics system entirely in the web. All of this information will be extendable to other languages, but we will use
+      JavaScript and WebGL in these blog posts. Additionally, much of the information presented here can be extended to 3 dimensions, but 3D carries some complications
+      with it, that we will discuss in future blog posts.
+    </p>
+    <p>
+      In implementing a rigidy body physics system, we're primarily interested in two sub-fields of physics, namely <b>dynamics</b> and <b>kinematics</b>. Although I'm
+      far as can be from being an expert in either of these fields, I will explain - from a programmer's persepctive - what they mean to me:
+      <ul>
+        <li>
+          <b>Kinematics</b> is the study of how an object's movement changes over time. These are the classic position, velocity, and acceleration equations
+          that you're most likely familiar with from high school or college physics.
+        </li>
+        <li>
+          <b>Dynamics</b> is the study of whats <i>causes</i> kinematic movement. These are the classic force and momentum equations that you may already be familiar
+          with as well.
+        </li>
+      </ul>
+    </p>
+    <p>
+      Finally, I must provide a disclaimer that all of rigid body systems are very math-y. You will need to know a decent amount of vector calculus and linear algebra to really understand
+      what's going on here. I am going to assume that you have this knowledge. If you don't already have this knowledge, I will try and provide some resources on the Books
+      n' References page of the website.
+    </p>
+  </section>
+</article>
diff --git a/frontend/roadmap.html b/frontend/roadmap.html
index b12c2a2..260af5e 100644
--- a/frontend/roadmap.html
+++ b/frontend/roadmap.html
@@ -67,9 +67,9 @@
 			<li>Pill-Pill Collisions</li>
 			<li>Pill-Circle Collisions</li>
 			<li>Pill-Square Collisions</li>
-			<li>Square-Line Collisions (Redo)</li>
+			<li class="done">Rectangle-Line Collisions</li>
 			<li>Circle-Line Collisions (Redo)</li>
-			<li>Square-Circle Collision</li>
+			<li>Rectangle-Circle Collision</li>
 		  </ul>
 		  <hr />
 		  <h1>Brief Wasm Series</h1>
diff --git a/frontend/shared_cpp/mathlib.h b/frontend/shared_cpp/mathlib.h
index b9f3fee..a08ec39 100644
--- a/frontend/shared_cpp/mathlib.h
+++ b/frontend/shared_cpp/mathlib.h
@@ -54,7 +54,7 @@ struct Vector2 {
     }
 
     Vector2 getPerp() {
-        return { -y, x };
+        return { y, -x };
     }
 
     Vector2 rotate(float angle) {