2d/rigidbody/rigidbody_3.html


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
94
95
96
97
98
99
100
101

<!DOCTYPE html>
<html lang="en">
	<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">
		<meta name="description" content="A place to learn all about real-time physics simulations through descriptions, code snippets, and example programs all written in C++ and OpenGL.">
		<meta name="og:description" content="A place to learn all about real-time physics simulations through descriptions, code snippets, and example programs all written in C++ and OpenGL.">
	</head>
	<body>
		<header>
			<h1><a title="physicsforgames.com" href="/">Physics for Games</a></h1>
		</header>
		<main>
		<nav>
		<ul class="outer-tree">
			<li><a href="/">Introduction</a></li>
			<li>
				<span>&#127936;<span>2D</span></span>
				<ul class="inner-tree">
					<li><label>Rigidbody</label></li>
					<li><a title="/2d/rigidbody/rigidbody_1.html" href="/2d/rigidbody/rigidbody_1.html">Linear Forces</a></li>
					<li><a title="/2d/rigidbody/rigidbody_2.html" href="/2d/rigidbody/rigidbody_2.html">Rotational Forces</a></li>
					<li><a title="/2d/rigidbody/rigidbody_3.html" href="/2d/rigidbody/rigidbody_3.html">Collisions</a></li>
					<li><label>Collisions</label></li>
					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
					<li><label>Softbody</label></li>
					<li><a title="/2d/softbody/softbody_1.html" href="/2d/softbody/softbody_1.html">Springs</a></li>
					<li><a title="/2d/softbody/softbody_2.html" href="/2d/softbody/softbody_2.html">Springy Rectangle</a></li>
				</ul>
			</li>
			<li>
				<span>&#127776;<span>3D</span></span>
				<ul class="inner-tree">
					<li><label>Rigidbody</label></li>
					<li><a title="/3d/rigidbody.html" href="/3d/rigidbody.html">Rigidbody in 3D</a></li>
				</ul>
			</li>
			<li>
				<span>&#128295;<span>WebAssembly</span></span>
				<ul class="inner-tree">
					<li><a title="/intro/intro.html" href="/intro/intro.html">Introduction</a></li>
				</ul>
			</li>
			<li>
				<span>&#128712;<span>About</span></span>
				<ul class="inner-tree">
					<li><a title="/roadmap.html" href="/roadmap.html">Roadmap</a></li>
				</ul>
			</li>
		</ul>
		</nav>
<script src="./rigidbody_3/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>
<article>
  <h1>Rigidbody #3: Collision Response</h1>
  <p>
    Now that we have our objects flying and spinning around the scene according to the laws of physics, let's see what happens when two of these objects collide with one another. Please note that this section is <b>not</b> about how we <i>find</i> those collisions, but rather how we <i>resolve</i> those collisions. The links under the "Collision" section on the left pane contain different algorithms on how you can find these collisions.
    <br/><br/>
    As always, I recommend reading <a href='http://www.chrishecker.com/images/e/e7/Gdmphys3.pdf'>Chris Hecker's explanation</a> of this particular topic if you want more in-depth information.
  </p>
  <section>
	<h2></h2>
  </section>
  <section>
	<h2>
	  Live Example
	</h2>
    <p>
      I didn't put any user interaction into this demo yet. This is live however. You can watch as two circles collide with one another.
    </p>
    <div class="opengl_canvas_container">
      <canvas id="gl_canvas" width="800" height="600"></canvas>
      <button id="gl_canvas_play" class="play_button">
        Play
      </button>
      <button id="gl_canvas_stop" class="stop_button">
        Stop
      </button>
    </div>
  </section>
</article>
		</main>
	</body>
</html>