diff options
| author | Matthew Kosarek <mattkae@protonmail.com> | 2021-04-22 20:11:32 -0400 |
|---|---|---|
| committer | Matthew Kosarek <mattkae@protonmail.com> | 2021-04-22 20:11:32 -0400 |
| commit | 25e346070eed819f5d08864a3fe37b7a0189d0ba (patch) | |
| tree | 68b8f77ef0da3d2562c45be3f9b5fc53dae53ac9 /frontend/2d/_collisions/rectangle_line.html | |
| parent | 6d1f2aa2c3dd5db7a6435fe16e03d8df5e016775 (diff) | |
Realized ellipse interactions were not easy, going to try and at least finish rectangle and circles before end of month
Diffstat (limited to 'frontend/2d/_collisions/rectangle_line.html')
| -rw-r--r-- | frontend/2d/_collisions/rectangle_line.html | 138 |
1 files changed, 88 insertions, 50 deletions
diff --git a/frontend/2d/_collisions/rectangle_line.html b/frontend/2d/_collisions/rectangle_line.html index b37f47c..17d95da 100644 --- a/frontend/2d/_collisions/rectangle_line.html +++ b/frontend/2d/_collisions/rectangle_line.html @@ -1,52 +1,90 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="utf-8"> - <script src="/scripts/jquery-3.5.1.min.js"></script> - <script src="/index.js"></script> - <link rel="stylesheet" href="/index.css"> - <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> - - <title>Physics for Games</title> - - <script src="/_shared/math/vec2.js"></script> - <script src="/_shared/math/mat4.js"></script> - <script src="/_shared/math/rectangle.js"></script> - <script src="/_shared/math/line2.js"></script> - <script src="/_shared/math/point2.js"></script> - <script src="/_shared/math/collision.js"></script> - <script src="/_shared/math/rigidbody2.js"></script> - <script src="/_shared/2d/shader.js"></script> - <script src="/_shared/2d/program_common.js"></script> - <script src="rectangle_line.js"></script> - </head> - <body> - <header> - <h1>Physics for Games</h1> - </header> - <main> - <nav> - </nav> - <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 id="rectangle_line_collision" class="opengl_canvas_container"> - <canvas width="640" height="480"></canvas> - <div class="opengl_canvas_sidebar"> - - </div> - <button class="play_button"> - Play - </button> - <button class="stop_button"> - Stop - </button> - </div> - </article> - </section> - </main> - </body> -</html>
\ No newline at end of file + <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/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_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> + </main> + </body> +</html> |