diff options
Diffstat (limited to 'frontend/2d/_collisions')
| -rw-r--r-- | frontend/2d/_collisions/pill_line.html | 82 | ||||
| -rw-r--r-- | frontend/2d/_collisions/pill_line.html.content | 82 | ||||
| -rw-r--r-- | frontend/2d/_collisions/pill_pill.html | 80 | ||||
| -rw-r--r-- | frontend/2d/_collisions/pill_pill.html.content | 80 | ||||
| -rw-r--r-- | frontend/2d/_collisions/rectangle_line.html | 114 | ||||
| -rw-r--r-- | frontend/2d/_collisions/rectangle_line.html.content | 114 | ||||
| -rwxr-xr-x | frontend/2d/_collisions/rectangle_line/dist/output.wasm | bin | 43326 -> 50544 bytes | |||
| -rw-r--r-- | frontend/2d/_collisions/rectangle_line/main.cpp | 112 |
8 files changed, 425 insertions, 239 deletions
diff --git a/frontend/2d/_collisions/pill_line.html b/frontend/2d/_collisions/pill_line.html index bd5522e..1ba424d 100644 --- a/frontend/2d/_collisions/pill_line.html +++ b/frontend/2d/_collisions/pill_line.html @@ -47,47 +47,47 @@ </li> </ul> </nav> - <script src="./pill_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>Pill-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> - <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li> - <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li> - <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li> - </ul> - </footer> - </article> - </section> +<script src="./pill_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>Pill-Line</h1> + <section> + <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> + <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li> + <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li> + <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li> + </ul> + </footer> + </section> +</article> </main> </body> </html> diff --git a/frontend/2d/_collisions/pill_line.html.content b/frontend/2d/_collisions/pill_line.html.content index c534d93..ce779d5 100644 --- a/frontend/2d/_collisions/pill_line.html.content +++ b/frontend/2d/_collisions/pill_line.html.content @@ -1,41 +1,41 @@ - <script src="./pill_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>Pill-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> - <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li> - <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li> - <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li> - </ul> - </footer> - </article> - </section> +<script src="./pill_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>Pill-Line</h1> + <section> + <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> + <li><a href="http://csharphelper.com/blog/2017/08/calculate-where-a-line-segment-and-an-ellipse-intersect-in-c/#intersection_code">Line Segment-Ellipse Intersection</a></li> + <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/TransformedEqn.html">Translated Ellipse Equation</a></li> + <li><a href="https://www.maa.org/external_archive/joma/Volume8/Kalman/General.html">General Ellipse Equation</a></li> + </ul> + </footer> + </section> +</article> diff --git a/frontend/2d/_collisions/pill_pill.html b/frontend/2d/_collisions/pill_pill.html index 812c10a..0883bc7 100644 --- a/frontend/2d/_collisions/pill_pill.html +++ b/frontend/2d/_collisions/pill_pill.html @@ -47,46 +47,46 @@ </li> </ul> </nav> - <script src="./pill_pill/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>Pill-Pill</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> - <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li> - <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li> - </ul> - </footer> - </article> - </section> +<script src="./pill_pill/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>Pill-Pill</h1> + <section> + <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> + <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li> + <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li> + </ul> + </footer> + </section> +</<article> </main> </body> </html> diff --git a/frontend/2d/_collisions/pill_pill.html.content b/frontend/2d/_collisions/pill_pill.html.content index bd214b2..385ae3c 100644 --- a/frontend/2d/_collisions/pill_pill.html.content +++ b/frontend/2d/_collisions/pill_pill.html.content @@ -1,40 +1,40 @@ - <script src="./pill_pill/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>Pill-Pill</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> - <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li> - <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li> - </ul> - </footer> - </article> - </section> +<script src="./pill_pill/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>Pill-Pill</h1> + <section> + <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> + <li><a href="https://www.analyzemath.com/EllipseProblems/ellipse_intersection.html">Intersection Basics</a></li> + <li><a href="https://brilliant.org/wiki/factor-polynomials-ax4-bx2-c/">Reminder of factoring compound quadratics</a></li> + </ul> + </footer> + </section> +</<article> 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> diff --git a/frontend/2d/_collisions/rectangle_line.html.content b/frontend/2d/_collisions/rectangle_line.html.content index 9f008a4..310c45a 100644 --- a/frontend/2d/_collisions/rectangle_line.html.content +++ b/frontend/2d/_collisions/rectangle_line.html.content @@ -1,38 +1,76 @@ - <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> diff --git a/frontend/2d/_collisions/rectangle_line/dist/output.wasm b/frontend/2d/_collisions/rectangle_line/dist/output.wasm Binary files differindex 11fa4c5..41e549e 100755 --- a/frontend/2d/_collisions/rectangle_line/dist/output.wasm +++ b/frontend/2d/_collisions/rectangle_line/dist/output.wasm diff --git a/frontend/2d/_collisions/rectangle_line/main.cpp b/frontend/2d/_collisions/rectangle_line/main.cpp index 321e8b5..39cb079 100644 --- a/frontend/2d/_collisions/rectangle_line/main.cpp +++ b/frontend/2d/_collisions/rectangle_line/main.cpp @@ -51,6 +51,14 @@ struct Rigidbody { } }; +struct IntersectionResult { + bool intersect = false; + Vector2 collisionNormal; + Vector2 relativeVelocity; + Vector2 firstPointOfApplication; + Vector2 secondPointOfApplication; +}; + struct Rectangle { OrthographicShape shape; Rigidbody body; @@ -79,6 +87,8 @@ struct Rectangle { } shape.load(vertices, 6, renderer); + body.reset(); + body.momentOfInertia = (1.f / 12.f) * body.mass * (width + height * height * height); } void update(float32 dtSeconds) { @@ -172,15 +182,115 @@ void load() { segmentList[3].load(&renderer, Vector4().fromColor(205, 178, 214, 255.f), Vector2 { 50.f, 150.f }, Vector2 { context.width - 50.f, 50.f }); rectangle.load(&renderer, Vector4 { 230.f, 182.f, 35.f, 255.f }, 64.f, 32.f); - rectangle.body.position = Vector2 { context.width / 2.f, context.height / 2.f }; + rectangle.body.position = Vector2 { context.width / 3.f, context.height / 2.f }; mainLoop.run(update); } +float32 getDistancePointToLine(Vector2 point, LineSegment* segment) { + float32 xLength = segment->end.x - segment->start.x; + float32 yLength = segment->end.y - segment->start.y; + return fabs(xLength * (segment->start.y - point.y) - (segment->start.x - point.x) * yLength) + / sqrtf((xLength * xLength) + (yLength * yLength)); +} + +const float32 EPSILON = 1.f; +IntersectionResult getIntersection(Rectangle* rectangle, LineSegment* segment) { + IntersectionResult ir; + + float32 halfWidth = rectangle->width / 2.f; + float32 halfHeight = rectangle->height / 2.f; + + Vector2 bottomLeft = rectangle->shape.model * Vector2 { -halfWidth, -halfHeight }; + Vector2 topLeft = rectangle->shape.model * Vector2 { -halfWidth, halfHeight }; + Vector2 bottomRight = rectangle->shape.model * Vector2 { halfWidth, -halfHeight }; + Vector2 topRight = rectangle->shape.model * Vector2 { halfWidth, halfHeight }; + + Vector2 collisionPoint; + + if (getDistancePointToLine(bottomLeft, segment) <= EPSILON) { + ir.intersect = true; + collisionPoint = bottomLeft; + } else if (getDistancePointToLine(topLeft, segment) <= EPSILON) { + ir.intersect = true; + collisionPoint = topLeft; + } else if (getDistancePointToLine(bottomRight, segment) <= EPSILON) { + ir.intersect = true; + collisionPoint = bottomRight; + } else if (getDistancePointToLine(topRight, segment) <= EPSILON) { + ir.intersect = true; + collisionPoint = topRight; + } else { + ir.intersect = false; + return ir; + } + + ir.collisionNormal = segment->getNormal(); + ir.relativeVelocity = rectangle->body.velocity - segment->body.velocity; + ir.firstPointOfApplication = (collisionPoint - rectangle->body.position); + ir.secondPointOfApplication = collisionPoint - segment->getPointOnLine(0.5f); + + return ir; +} + +void resolveCollision(Rigidbody* first, Rigidbody* second, IntersectionResult* ir) { + Vector2 relativeVelocity = ir->relativeVelocity; + Vector2 collisionNormal = ir->collisionNormal; + Vector2 firstPerp = ir->firstPointOfApplication.getPerp(); + Vector2 secondPerp = ir->secondPointOfApplication.getPerp(); + float32 firstPerpNorm = firstPerp.dot(collisionNormal); + float32 sndPerpNorm = secondPerp.dot(collisionNormal); + + float32 cofOfRestition = (first->cofOfRestition + second->cofOfRestition) / 2.f; + float32 numerator = (relativeVelocity * (-1 * (1.f + cofOfRestition))).dot(collisionNormal); + float32 linearDenomPart = collisionNormal.dot(collisionNormal * (1.f / first->mass + 1.f / second->mass)); + float32 rotationalDenomPart = (firstPerpNorm * firstPerpNorm) / first->momentOfInertia + (sndPerpNorm * sndPerpNorm) / second->momentOfInertia; + + float32 impulseMagnitude = numerator / (linearDenomPart);// + rotationalDenomPart); + first->velocity = first->velocity + (collisionNormal * (impulseMagnitude / first->mass)); + second->velocity = second->velocity - (collisionNormal * (impulseMagnitude / second->mass)); + first->rotationalVelocity = first->rotationalVelocity + firstPerp.dot(collisionNormal * impulseMagnitude) / first->momentOfInertia; + second->rotationalVelocity = second->rotationalVelocity - secondPerp.dot(collisionNormal * impulseMagnitude) / second->momentOfInertia; +} void update(float32 deltaTimeSeconds, void* userData) { // Update + Rectangle rectCopy = rectangle; rectangle.update(deltaTimeSeconds); + + for (int32 segmentIndex = 0; segmentIndex < 4; segmentIndex++) { + IntersectionResult ir = getIntersection(&rectangle, &segmentList[segmentIndex]); + if (!ir.intersect) { + continue; + } + + // Handle collison here + IntersectionResult irCopy = ir; + float32 copyDt = deltaTimeSeconds; + + do { + ir = irCopy; + rectangle = rectCopy; + copyDt = copyDt /= 2.f; + + rectangle.update(copyDt); + irCopy = getIntersection(&rectangle, &segmentList[segmentIndex]); + + if (copyDt <= 0.f) { + printf("Error: Should not be happening.\n"); + break; + } + + } while (irCopy.intersect); + + printf("Found intersection at timestamp: %f\n", copyDt); + + resolveCollision(&rectangle.body, &segmentList[segmentIndex].body, &ir); + float32 frameTimeRemaining = deltaTimeSeconds - copyDt; + + update(frameTimeRemaining, userData); + return; + } // Renderer renderer.render(); |