<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="800" height="600"></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>