summaryrefslogtreecommitdiff
path: root/frontend/2d/_rigidbody/part_1.html
diff options
context:
space:
mode:
authorMatthew Kosarek <mattkae@protonmail.com>2021-05-16 19:50:15 -0400
committerMatthew Kosarek <mattkae@protonmail.com>2021-05-16 19:50:15 -0400
commita00c0aab1eb5a7a55bef8ca08115bdd722ab5699 (patch)
tree45b5c4cc8c380d0630a8e0185af7229f26dc754a /frontend/2d/_rigidbody/part_1.html
parent4941a1874b6ca9d142d94df70b2aec5e0b35b94e (diff)
Moved the frontend directory up so that it no longer exists
Diffstat (limited to 'frontend/2d/_rigidbody/part_1.html')
-rw-r--r--frontend/2d/_rigidbody/part_1.html93
1 files changed, 0 insertions, 93 deletions
diff --git a/frontend/2d/_rigidbody/part_1.html b/frontend/2d/_rigidbody/part_1.html
deleted file mode 100644
index 9e8d8f0..0000000
--- a/frontend/2d/_rigidbody/part_1.html
+++ /dev/null
@@ -1,93 +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 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/circle.js"></script>
- <script src="/_shared/2d/shader.js"></script>
- <script src="/_shared/2d/program_common.js"></script>
- <script src="rigidbody_1.js"></script>
- </head>
- <body>
- <header>
- <h1>Physics for Games</h1>
- </header>
- <main>
- <nav>
- </nav>
- <section>
- <h1>Part 1: Linear Forces</h1>
- <article>
- <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>
- </article>
- </section>
- </main>
- </body>
-</html> \ No newline at end of file