1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!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>
</head>
<body>
<header>
<h1>Physics for Games</h1>
</header>
<main>
<nav>
<a href="/">Introduction</a>
<a href="2d_part_1.html">2D - Linear Forces</a>
<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>
</div>
<button class="play_button">
Play
</button>
<button class="stop_button">
Stop
</button>
</div>
</main>
</body>
</html>
|
