diff options
Diffstat (limited to 'frontend/2d_part_1.html')
| -rw-r--r-- | frontend/2d_part_1.html | 126 |
1 files changed, 65 insertions, 61 deletions
diff --git a/frontend/2d_part_1.html b/frontend/2d_part_1.html index 312611a..830f201 100644 --- a/frontend/2d_part_1.html +++ b/frontend/2d_part_1.html @@ -7,6 +7,7 @@ <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> + <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon"> <script src="_rigidbody/vec2.js"></script> <script src="_rigidbody/mat4.js"></script> @@ -26,68 +27,71 @@ <a href="2d_part_2.html">2D - Rotational Forces</a> <a href="2d_part_3.html">2D - Collision Forces</a> </nav> - <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> + <section> + <article> + <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> - <button class="play_button"> - Play - </button> - <button class="stop_button"> - Stop - </button> - </div> + </article> + </section> </main> </body> </html>
\ No newline at end of file |