diff options
| author | Matthew Kosarek <mattkae@protonmail.com> | 2021-04-26 20:51:09 -0400 |
|---|---|---|
| committer | Matthew Kosarek <mattkae@protonmail.com> | 2021-04-26 20:51:09 -0400 |
| commit | a32157049d860c4c9c6ffb0df6c3cdbf53e4ef1d (patch) | |
| tree | fcdf2a06b07ef143f6615f71a6e26f3a1587b80d /frontend/2d/_collisions/rectangle_rectangle.html | |
| parent | cdf770d6950befd25779a18ea3972deeb9f143bb (diff) | |
Getting started on rectangle collisions
Diffstat (limited to 'frontend/2d/_collisions/rectangle_rectangle.html')
| -rw-r--r-- | frontend/2d/_collisions/rectangle_rectangle.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/frontend/2d/_collisions/rectangle_rectangle.html b/frontend/2d/_collisions/rectangle_rectangle.html new file mode 100644 index 0000000..03829ce --- /dev/null +++ b/frontend/2d/_collisions/rectangle_rectangle.html @@ -0,0 +1,128 @@ +<!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>🏀<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> + </ul> + </li> + <li> + <span>🌠<span>3D</span></span> + <ul class="inner-tree"> + </ul> + </li> + <li> + <span>🔧<span>WebAssembly</span></span> + <ul class="inner-tree"> + <li><a href="/intro/intro.html">Introduction</a></li> + </ul> + </li> + <li> + <span>🛈<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> + </ul> + </footer> + </section> +</article> + </main> + </body> +</html> |