diff options
Diffstat (limited to 'frontend/rigidbody.html')
| -rw-r--r-- | frontend/rigidbody.html | 162 |
1 files changed, 0 insertions, 162 deletions
diff --git a/frontend/rigidbody.html b/frontend/rigidbody.html deleted file mode 100644 index f3616b5..0000000 --- a/frontend/rigidbody.html +++ /dev/null @@ -1,162 +0,0 @@ -<!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 href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css"> - <title>Physics for Games</title> - - <script src="_rigidbody/vec2.js"></script> - <script src="_rigidbody/mat4.js"></script> - <script src="_rigidbody/shader.js"></script> - <script src="_rigidbody/circle.js"></script> - <script src="_rigidbody/program_common.js"></script> - <script src="_rigidbody/rigidbody_1.js"></script> - <script src="_rigidbody/rigidbody_2.js"></script> - <script src="_rigidbody/rigidbody_3a.js"></script> - </head> - <body> - <header> - <h1>Physics for Games</h1> - </header> - <nav> - <a href="/">Home</a> - <a href="rigidbody.html">Rigid Body</a> - <a href="references.html">Books n' References</a> - </nav> - <main> - <section> - <p> - <ul> - <li><a href="#introduction">Introduction</a></li> - <li><a href="#linear-forces">Part 1: Linear Forces</a></li> - <li><a href="#rotational-forces">Part 2: Rotational Forces</a></li> - <li><a href="#collisions">Part 3: Collisions</a></li> - </ul> - </p> - </section> - <hr /> - <section id="linear-forces"> - <h2>Part 1: Linear Forces</h2> - <p> - The first - and perhaps easiest - part of implementing any rigid body physics system is getting the entities in your scene to move in response to linear forces. - With this implementation alone, you can achieve an interesting level of realism in your 2D (and even 3D) scene. - </p> - <p> - Let's begin by recalling the relationships between acceleration, velocity, and position. - </p> - <p> - Knowing all this, you should be able to understand the following source code fairly easily; - <pre> - <code> -<span class="code_keyword">function</span> update(dtSeconds) { - <span class="code_comment">// Add up the forces acting on the circle</span> - <span class="code_keyword">const</span> GRAVITY = 9.8; - <span class="code_keyword">const</span> lGravityForce = vec2(0, -1.0 * (lCircle.mass * <span class="code_constant">GRAVITY</span>)); - lCircle.force = addVec2(lCircle.force, lGravityForce); - - <span class="code_comment">// Figure out acceleration (a = F / m)</span> - <span class="code_keyword">const</span> lCurrentAcceleration = scaleVec2(lCircle.force, 1.0 / lCircle.mass); - - <span class="code_comment">// Calculate the new velocity: v = v0 + a * t</span> - lCircle.velocity = addVec2(lCircle.velocity, scaleVec2(lCurrentAcceleration, dtSeconds)); - - <span class="code_comment">// Update the position based on velocity: x = x0 + v * t</span> - lCircle.position = addVec2(lCircle.position, scaleVec2(lCircle.velocity, dtSeconds)); - - <span class="code_comment">// Update the model matrix accordingly</span> - lCircle.model = translateMatrix(mat4(), lCircle.position.x, lCircle.position.y, 0); - - <span class="code_comment">// Reset the force vector for the next update</span> - lCircle.force = vec2() -} - </code> - </pre> - </p> - <div id="rigidbody_1" class="opengl_canvas_container"> - <canvas width="640" height="480"></canvas> - <div class="opengl_canvas_sidebar"> - <ul class="opengl_value_tracker"> - <li><b>Linear Force:</b><span id="rigidbody_1_force_field">N/A</span></li> - <li><b>Linear Acceleration:</b><span id="rigidbody_1_acceleration_field">N/A</span></li> - <li><b>Linear Velocity:</b><span id="rigidbody_1_velocity_field">N/A</span></li> - <li><b>Linear Position:</b><span id="rigidbody_1_position_field">N/A</span></li> - </ul> - <form id="rigidbody_1_force_submit_button" style="text-align: right; padding: 0.5rem;"> - <div class="vec2_input_group"> - <label>Force Vector</label> - <input class="vec2_x_input" type="number" placeholder="X (Default 0)"/> - <input class="vec2_y_input" type="number" placeholder="Y (Default 5000 N)"/> - </div> - <input type="submit" value="Apply Force"></input> - </form> - </div> - <button class="play_button"> - Play - </button> - <button class="stop_button"> - Stop - </button> - </div> - </section> - <hr /> - <section id="rotational-forces"> - <h2>Part 2: Rotational Forces</h2> - <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="rigidbody_2" class="opengl_canvas_container"> - <canvas width="640" height="480"></canvas> - <div class="opengl_canvas_sidebar"> - <ul class="opengl_value_tracker"> - <li><b>Angular Force:</b><span id="rigidbody_2_force_field">N/A</span></li> - <li><b>Angular Acceleration:</b><span id="rigidbody_2_acceleration_field">N/A</span></li> - <li><b>Angular Velocity:</b><span id="rigidbody_2_velocity_field">N/A</span></li> - <li><b>Angular Position:</b><span id="rigidbody_2_position_field">N/A</span></li> - </ul> - <form id="rigidbody_2_force_submit_button" style="text-align: right; padding: 0.5rem;"> - <div id="rigidbody_2_force_input" class="vec2_input_group"> - <label>Force Vector</label> - <input class="vec2_x_input" type="number" placeholder="X (Default 0)"/> - <input class="vec2_y_input" type="number" placeholder="Y (Default 5000 N)"/> - </div> - <div id="rigidbody_2_position_input" class="vec2_input_group"> - <label>Point of Application (Unit Vector)</label> - <input class="vec2_x_input" type="number" placeholder="X (Default 2 Root 2)"/> - <input class="vec2_y_input" type="number" placeholder="Y (Default 2 Root 2)"/> - </div> - <input type="submit" value="Apply Force"></input> - </form> - </div> - <button class="play_button"> - Play - </button> - <button class="stop_button"> - Stop - </button> - </div> - </section> - <section id="collisions"> - <h2>Part 3: Collisions</h2> - <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="rigidbody_3a" 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> - </section> - - <section style="height: 50vh;"></section> - </main> - </body> -</html>
\ No newline at end of file |