summaryrefslogtreecommitdiff
path: root/2d/_collisions/rectangle_line.html
diff options
context:
space:
mode:
authorMatthew Kosarek <mattkae@protonmail.com>2021-05-16 19:50:15 -0400
committerMatthew Kosarek <mattkae@protonmail.com>2021-05-16 19:50:15 -0400
commita00c0aab1eb5a7a55bef8ca08115bdd722ab5699 (patch)
tree45b5c4cc8c380d0630a8e0185af7229f26dc754a /2d/_collisions/rectangle_line.html
parent4941a1874b6ca9d142d94df70b2aec5e0b35b94e (diff)
Moved the frontend directory up so that it no longer exists
Diffstat (limited to '2d/_collisions/rectangle_line.html')
-rw-r--r--2d/_collisions/rectangle_line.html130
1 files changed, 130 insertions, 0 deletions
diff --git a/2d/_collisions/rectangle_line.html b/2d/_collisions/rectangle_line.html
new file mode 100644
index 0000000..148e7da
--- /dev/null
+++ b/2d/_collisions/rectangle_line.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/index.css">
+ <title>Physics for Games</title>
+ <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
+ </head>
+ <body>
+ <header>
+ <h1>Physics for Games</h1>
+ </header>
+ <main>
+ <nav>
+ <ul class="outer-tree">
+ <li><a href="/">Introduction</a></li>
+ <li>
+ <span>&#127936;<span>2D</span></span>
+ <ul class="inner-tree">
+ <li><label>Rigidbody</label></li>
+ <li><a href="/2d/_rigidbody/part_1.html">Linear Forces</a></li>
+ <li><a href="/2d/_rigidbody/part_2.html">Rotational Forces</a></li>
+ <li><a href="/2d/_rigidbody/part_3.html">Collision Forces</a></li>
+ <li><label>Collisions</label></li>
+ <li><a href="/2d/_collisions/circle_line.html">Circle-Line</a></li>
+ <li><a href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
+ <li><a href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
+ <li><a href="/2d/_collisions/pill_line.html">Pill-Line</a></li>
+ <li><a href="/2d/_collisions/pill_pill.html">Pill-Pill</a></li>
+ <li><a href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+ </ul>
+ </li>
+ <li>
+ <span>&#127776;<span>3D</span></span>
+ <ul class="inner-tree">
+ </ul>
+ </li>
+ <li>
+ <span>&#128295;<span>WebAssembly</span></span>
+ <ul class="inner-tree">
+ <li><a href="/intro/intro.html">Introduction</a></li>
+ </ul>
+ </li>
+ <li>
+ <span>&#128712;<span>About</span></span>
+ <ul class="inner-tree">
+ <li><a href="/roadmap.html">Roadmap</a></li>
+ </ul>
+ </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>
+<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>