Rectangle intersection with a line complete

1 files changed, 76 insertions, 38 deletions

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>