summaryrefslogtreecommitdiff
path: root/frontend/2d/_collisions/rectangle_rectangle.html
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/2d/_collisions/rectangle_rectangle.html')
-rw-r--r--frontend/2d/_collisions/rectangle_rectangle.html131
1 files changed, 0 insertions, 131 deletions
diff --git a/frontend/2d/_collisions/rectangle_rectangle.html b/frontend/2d/_collisions/rectangle_rectangle.html
deleted file mode 100644
index ed73e6a..0000000
--- a/frontend/2d/_collisions/rectangle_rectangle.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!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_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>
- <li><a href="https://dyn4j.org/2010/01/sat/">Great SAT Explanation</a></li>
- <li><a href="https://www.gamedev.net/forums/topic/588070-seperating-axis-theorem---how-to-resolve-contact-points/">SAT Finding Collision Points</a></li>
- </ul>
- </footer>
- </section>
-</article>
- </main>
- </body>
-</html>