summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/_collisions/2d/collisions_1.js (renamed from frontend/_rigidbody/pill.js)0
-rw-r--r--frontend/_collisions/2d/part_1.html61
-rw-r--r--frontend/_rigidbody/2d/part_1.html (renamed from frontend/2d_part_1.html)26
-rw-r--r--frontend/_rigidbody/2d/part_2.html (renamed from frontend/2d_part_2.html)26
-rw-r--r--frontend/_rigidbody/2d/part_3.html (renamed from frontend/2d_part_3.html)31
-rw-r--r--frontend/_rigidbody/2d/rigidbody_1.js (renamed from frontend/_rigidbody/rigidbody_1.js)12
-rw-r--r--frontend/_rigidbody/2d/rigidbody_2.js (renamed from frontend/_rigidbody/rigidbody_2.js)11
-rw-r--r--frontend/_rigidbody/2d/rigidbody_3a.js (renamed from frontend/_rigidbody/rigidbody_3a.js)11
-rw-r--r--frontend/_rigidbody/2d/rigidbody_3b.js (renamed from frontend/_rigidbody/rigidbody_3b.js)24
-rw-r--r--frontend/_shared/2d/program_common.js (renamed from frontend/_rigidbody/program_common.js)2
-rw-r--r--frontend/_shared/2d/shader.js (renamed from frontend/_rigidbody/shader.js)4
-rw-r--r--frontend/_shared/2d/shaders/orthographic.frag (renamed from frontend/_rigidbody/shaders/orthographic.frag)0
-rw-r--r--frontend/_shared/2d/shaders/orthographic.vert (renamed from frontend/_rigidbody/shaders/orthographic.vert)0
-rw-r--r--frontend/_shared/math/circle.js (renamed from frontend/_rigidbody/circle.js)13
-rw-r--r--frontend/_shared/math/mat4.js (renamed from frontend/_rigidbody/mat4.js)0
-rw-r--r--frontend/_shared/math/vec2.js (renamed from frontend/_rigidbody/vec2.js)5
-rw-r--r--frontend/index.css13
-rw-r--r--frontend/index.html6
-rw-r--r--frontend/index.js9
-rw-r--r--frontend/navbar.html19
-rw-r--r--frontend/rigidbody.html162
21 files changed, 173 insertions, 262 deletions
diff --git a/frontend/_rigidbody/pill.js b/frontend/_collisions/2d/collisions_1.js
index e69de29..e69de29 100644
--- a/frontend/_rigidbody/pill.js
+++ b/frontend/_collisions/2d/collisions_1.js
diff --git a/frontend/_collisions/2d/part_1.html b/frontend/_collisions/2d/part_1.html
new file mode 100644
index 0000000..ab60b17
--- /dev/null
+++ b/frontend/_collisions/2d/part_1.html
@@ -0,0 +1,61 @@
+<!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">
+ <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="/_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="collisions_1.js"></script>
+ </head>
+ <body>
+ <header>
+ <h1>Physics for Games</h1>
+ </header>
+ <main>
+ <nav>
+ </nav>
+ <section>
+ <h1>Part 1: Circle-Line</h1>
+ <article>
+ <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="collision_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
diff --git a/frontend/2d_part_1.html b/frontend/_rigidbody/2d/part_1.html
index 830f201..ec0acbf 100644
--- a/frontend/2d_part_1.html
+++ b/frontend/_rigidbody/2d/part_1.html
@@ -2,19 +2,19 @@
<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">
+ <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">
<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>
- <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="/_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>
@@ -22,14 +22,10 @@
</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>
+ <h1>Part 1: Linear Forces</h1>
<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.
diff --git a/frontend/2d_part_2.html b/frontend/_rigidbody/2d/part_2.html
index 845985c..0291290 100644
--- a/frontend/2d_part_2.html
+++ b/frontend/_rigidbody/2d/part_2.html
@@ -2,19 +2,19 @@
<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">
+ <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">
<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>
- <script src="_rigidbody/shader.js"></script>
- <script src="_rigidbody/circle.js"></script>
- <script src="_rigidbody/program_common.js"></script>
- <script src="_rigidbody/rigidbody_2.js"></script>
+ <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_2.js"></script>
</head>
<body>
<header>
@@ -22,14 +22,10 @@
</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>
+ <h1>Part 2: Rotational Forces</h1>
<article>
- <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>
diff --git a/frontend/2d_part_3.html b/frontend/_rigidbody/2d/part_3.html
index 6e46843..c1479da 100644
--- a/frontend/2d_part_3.html
+++ b/frontend/_rigidbody/2d/part_3.html
@@ -2,20 +2,20 @@
<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">
+ <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">
<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>
- <script src="_rigidbody/shader.js"></script>
- <script src="_rigidbody/circle.js"></script>
- <script src="_rigidbody/program_common.js"></script>
- <script src="_rigidbody/rigidbody_3a.js"></script>
- <script src="_rigidbody/rigidbody_3b.js"></script>
+ <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_3a.js"></script>
+ <script src="rigidbody_3b.js"></script>
</head>
<body>
<header>
@@ -23,14 +23,11 @@
</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>
+ <h1>Part 3: Collisions</h1>
<article>
- <h2>Part 3: Collisions</h2>
+ <h2>Implementation</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>
@@ -51,7 +48,7 @@
</div>
</article>
<article>
- <h2>Fun Example: Plinko Game</h2>
+ <h2>Plinko Game</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>
diff --git a/frontend/_rigidbody/rigidbody_1.js b/frontend/_rigidbody/2d/rigidbody_1.js
index 697822d..e49c7c9 100644
--- a/frontend/_rigidbody/rigidbody_1.js
+++ b/frontend/_rigidbody/2d/rigidbody_1.js
@@ -1,9 +1,9 @@
-/// <reference path="../scripts/jquery-3.5.1.min.js"/>
-/// <reference path="vec2.js" />
-/// <reference path="mat4.js" />
-/// <reference path="shader.js" />
-/// <reference path="circle.js" />
-/// <reference path="program_common.js" />
+/// <reference path="../../scripts/jquery-3.5.1.min.js"/>
+/// <reference path="../../_shared/math/vec2.js" />
+/// <reference path="../../_shared/math/mat4.js" />
+/// <reference path="../../_shared/2d/shader.js" />
+/// <reference path="../../_shared/math/circle.js" />
+/// <reference path="../../_shared/2d/program_common.js" />
(function() {
diff --git a/frontend/_rigidbody/rigidbody_2.js b/frontend/_rigidbody/2d/rigidbody_2.js
index c878c1a..4632b11 100644
--- a/frontend/_rigidbody/rigidbody_2.js
+++ b/frontend/_rigidbody/2d/rigidbody_2.js
@@ -1,8 +1,9 @@
-/// <reference path="../scripts/jquery-3.5.1.min.js"/>
-/// <reference path="vec2.js" />
-/// <reference path="mat4.js" />
-/// <reference path="shader.js" />
-/// <reference path="circle.js" />
+/// <reference path="../../scripts/jquery-3.5.1.min.js"/>
+/// <reference path="../../_shared/math/vec2.js" />
+/// <reference path="../../_shared/math/mat4.js" />
+/// <reference path="../../_shared/2d/shader.js" />
+/// <reference path="../../_shared/math/circle.js" />
+/// <reference path="../../_shared/2d/program_common.js" />
(function() {
function main() {
diff --git a/frontend/_rigidbody/rigidbody_3a.js b/frontend/_rigidbody/2d/rigidbody_3a.js
index 74d309b..d38f1da 100644
--- a/frontend/_rigidbody/rigidbody_3a.js
+++ b/frontend/_rigidbody/2d/rigidbody_3a.js
@@ -1,8 +1,9 @@
-/// <reference path="../scripts/jquery-3.5.1.min.js"/>
-/// <reference path="vec2.js" />
-/// <reference path="mat4.js" />
-/// <reference path="shader.js" />
-/// <reference path="circle.js" />
+/// <reference path="../../scripts/jquery-3.5.1.min.js"/>
+/// <reference path="../../_shared/math/vec2.js" />
+/// <reference path="../../_shared/math/mat4.js" />
+/// <reference path="../../_shared/2d/shader.js" />
+/// <reference path="../../_shared/math/circle.js" />
+/// <reference path="../../_shared/2d/program_common.js" />
(function() {
function main() {
diff --git a/frontend/_rigidbody/rigidbody_3b.js b/frontend/_rigidbody/2d/rigidbody_3b.js
index df81582..803161a 100644
--- a/frontend/_rigidbody/rigidbody_3b.js
+++ b/frontend/_rigidbody/2d/rigidbody_3b.js
@@ -1,14 +1,14 @@
-/// <reference path="../scripts/jquery-3.5.1.min.js"/>
-/// <reference path="vec2.js" />
-/// <reference path="mat4.js" />
-/// <reference path="shader.js" />
-/// <reference path="circle.js" />
-/// <reference path="program_common.js" />
+/// <reference path="../../scripts/jquery-3.5.1.min.js"/>
+/// <reference path="../../_shared/math/vec2.js" />
+/// <reference path="../../_shared/math/mat4.js" />
+/// <reference path="../../_shared/2d/shader.js" />
+/// <reference path="../../_shared/math/circle.js" />
+/// <reference path="../../_shared/2d/program_common.js" />
(function() {
// Define Constants
const GRAVITY = 50.0;
- const COF_OF_RESTITUITION = 0.2;
+ const COF_OF_RESTITUITION = 0.9;
var lProgramContext = undefined;
@@ -39,12 +39,12 @@
// Generate a peg. These pegs will NOT be updated, so that they
// dont' fall due to gravity.
- for (let lRowIdx = 1; lRowIdx < lNumVerticalPegs - 1; lRowIdx++) {
- for (let lColIdx = 0; lColIdx < lNumHorizontalPegs -1; lColIdx++) {
+ for (let lRowIdx = 0; lRowIdx < lNumVerticalPegs - 1; lRowIdx++) {
+ for (let lColIdx = 0; lColIdx <= lNumHorizontalPegs; lColIdx++) {
lPegList.push(circle(lProgramContext.gl,
16.0, 16,
[ { x: 165.0 / 255.0, y: 42.0 / 255.0, z: 42.0 / 255.0, w: 1.0 }],
- vec2((lColIdx + 1) * 80.0, lRowIdx * 80.0),
+ vec2((lRowIdx % 2 ? 40 : 0) + (lColIdx) * 80.0, lRowIdx * 80.0),
10000 // Real big so it's almost negligble
));
}
@@ -112,8 +112,6 @@
const lIntersectionResult = getIntersectionDataForCircles(lPeg, lSubdividedBall);
- console.log(lIntersectionResult);
-
const lRelativeVelocity = lIntersectionResult.relativeVelocity,
lCollisionNormal = lIntersectionResult.collisionNormal,
lFirstPerp = getPerp2(lIntersectionResult.firstPointOfApplication),
@@ -130,8 +128,6 @@
lBall.velocity = subVec2(lBall.velocity, scaleVec2(lCollisionNormal, lImpulseMagnitude / lBall.mass));
lBall.rotationVelocity = lBall.rotationVelocity - dot2(lSecondPerp, scaleVec2(lCollisionNormal, lImpulseMagnitude)) / getMomentOfInertia(lBall);
- console.log(lBall.rotationVelocity);
-
// Now we update in our new direction with the remaining time that we have left.
updateCircle(lBall, pDeltaTimeSeconds - lSubdividedDeltaTime);
diff --git a/frontend/_rigidbody/program_common.js b/frontend/_shared/2d/program_common.js
index 988056f..48d0a6b 100644
--- a/frontend/_rigidbody/program_common.js
+++ b/frontend/_shared/2d/program_common.js
@@ -1,5 +1,5 @@
/// <reference path="shader.js" />
-/// <reference path="mat4.js" />
+/// <reference path="../math/mat4.js" />
function getContext(pId, pOnRun) {
const lCanvas = $(pId).find('canvas'),
diff --git a/frontend/_rigidbody/shader.js b/frontend/_shared/2d/shader.js
index bf08638..4deddb5 100644
--- a/frontend/_rigidbody/shader.js
+++ b/frontend/_shared/2d/shader.js
@@ -41,12 +41,12 @@ function loadOrthographicShader(pGl) {
}
}
- return fetch('/_rigidbody/shaders/orthographic.vert').then(function(pResponse) {
+ return fetch('/_shared/2d/shaders/orthographic.vert').then(function(pResponse) {
if (pResponse.status === 200) {
return pResponse.text().then(function(pShader) {
lVertex = pShader;
- return fetch('/_rigidbody/shaders/orthographic.frag').then(function(pResponse) {
+ return fetch('/_shared/2d/shaders/orthographic.frag').then(function(pResponse) {
if (pResponse.status === 200) {
return pResponse.text().then(function(pShader) {
lFragment = pShader;
diff --git a/frontend/_rigidbody/shaders/orthographic.frag b/frontend/_shared/2d/shaders/orthographic.frag
index 84b6b2e..84b6b2e 100644
--- a/frontend/_rigidbody/shaders/orthographic.frag
+++ b/frontend/_shared/2d/shaders/orthographic.frag
diff --git a/frontend/_rigidbody/shaders/orthographic.vert b/frontend/_shared/2d/shaders/orthographic.vert
index 0356f9c..0356f9c 100644
--- a/frontend/_rigidbody/shaders/orthographic.vert
+++ b/frontend/_shared/2d/shaders/orthographic.vert
diff --git a/frontend/_rigidbody/circle.js b/frontend/_shared/math/circle.js
index 1cec7ce..340d7dc 100644
--- a/frontend/_rigidbody/circle.js
+++ b/frontend/_shared/math/circle.js
@@ -92,23 +92,18 @@ function doCirclesIntersect(pFirst, pSecond) {
function getIntersectionDataForCircles(pFirst, pSecond) {
// The collision normal is simply the difference between the two current positions
const lCollisionNormal = normalize2(subVec2(pFirst.position, pSecond.position));
-
- // TODO: Might be useful in the future?
const lCollisionPoint = vec2(
((pFirst.position.x * pSecond.radius) + (pSecond.position.x * pFirst.radius)) / (pFirst.radius + pSecond.radius),
((pFirst.position.y * pSecond.radius) + (pSecond.position.y * pFirst.radius)) / (pFirst.radius + pSecond.radius)
);
- const lSecondDeepestPointInFirst = (subVec2(pSecond.position, scaleVec2(lCollisionNormal, pSecond.radius)));
- const lFirstDeepestPointInSecond = (addVec2(pFirst.position, scaleVec2(lCollisionNormal, pFirst.radius)));
- const lLengthOfOverlapByTwo = length2(subVec2(lFirstDeepestPointInSecond, lSecondDeepestPointInFirst)) / 2.0;
- const lMedianIntersectingPoint = addVec2(lSecondDeepestPointInFirst, scaleVec2(lCollisionNormal, lLengthOfOverlapByTwo));
-
return {
relativeVelocity: subVec2(pFirst.velocity, pSecond.velocity),
collisionNormal: lCollisionNormal,
- firstPointOfApplication: subVec2(lMedianIntersectingPoint, pFirst.position),
- secondPointOfApplication: subVec2(lMedianIntersectingPoint, pSecond.position)
+ //firstPointOfApplication: addVec2(scaleVec2(normalize2(pFirst.velocity), pFirst.radius), pFirst.position),
+ //secondPointOfApplication: addVec2(scaleVec2(normalize2(pSecond.velocity), pSecond.radius), pSecond.position)
+ firstPointOfApplication: subVec2(lCollisionPoint, pFirst.position),
+ secondPointOfApplication: subVec2(lCollisionPoint, pSecond.position)
}
}
diff --git a/frontend/_rigidbody/mat4.js b/frontend/_shared/math/mat4.js
index 6ab29e2..6ab29e2 100644
--- a/frontend/_rigidbody/mat4.js
+++ b/frontend/_shared/math/mat4.js
diff --git a/frontend/_rigidbody/vec2.js b/frontend/_shared/math/vec2.js
index 2db42e0..cff38ce 100644
--- a/frontend/_rigidbody/vec2.js
+++ b/frontend/_shared/math/vec2.js
@@ -32,8 +32,9 @@ function length2(v) {
}
function normalize2(v) {
- const lLength = 1.0 / length2(v);
- return { x: v.x * lLength, y: v.y * lLength };
+ const lLength = length2(v);
+ const lInverseLength = lLength === 0 ? 1.0 : 1.0 / length2(v);
+ return { x: v.x * lInverseLength, y: v.y * lInverseLength };
}
function vec2str(v) {
diff --git a/frontend/index.css b/frontend/index.css
index c8cc394..471f6f3 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -48,14 +48,23 @@ nav {
font-size: 1rem;
}
-nav > a {
+nav > ul {
+ list-style: none;
+ padding-left: 0px;
+}
+
+nav > ul > li > ul {
+ padding-left: 1rem;
+}
+
+nav a {
color: #404040;
text-decoration: none;
display: inline-block;
min-width: 196px;
}
-nav > a:hover {
+nav a:hover {
color: #1a1a1a;
cursor: pointer;
}
diff --git a/frontend/index.html b/frontend/index.html
index c62696d..22fbe2c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -15,14 +15,10 @@
</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>
+ <h1>Introduction: Rigid Body Physics</h1>
<article>
- <h2>Introduction: Rigid Body Physics</h2>
<p>
You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan,
and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk
diff --git a/frontend/index.js b/frontend/index.js
index f481bc6..d14ca95 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -2,8 +2,13 @@
(function() {
function main() {
- const lPathName = window.location.pathname.length > 1 && window.location.pathname.startsWith('/') ? window.location.pathname.substr(1) : window.location.pathname;
- $('nav').find('a[href="' + lPathName + '"').addClass('nav-selected');
+
+ $.get('/navbar.html', function(pData) {
+ $('nav').html(pData);
+
+ const lPathName = window.location.pathname.length > 1 && window.location.pathname.startsWith('/') ? window.location.pathname.substr(1) : window.location.pathname;
+ $('nav').find('a[href="' + lPathName + '"').addClass('nav-selected');
+ });
}
$(document).ready(main);
diff --git a/frontend/navbar.html b/frontend/navbar.html
new file mode 100644
index 0000000..c55439b
--- /dev/null
+++ b/frontend/navbar.html
@@ -0,0 +1,19 @@
+
+<ul>
+ <li>
+ <span>Rigidbody</span>
+ <ul>
+ <li><a href="/">Introduction</a></li>
+ <li><a href="/_rigidbody/2d/part_1.html">2D - Linear Forces</a></li>
+ <li><a href="/_rigidbody/2d/part_2.html">2D - Rotational Forces</a></li>
+ <li><a href="/_rigidbody/2d/part_3.html">2D - Collision Forces</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <span>Collisions</span>
+ <ul>
+ <li><a href="/_collisions/2d/part_1.html">Circle-Line</a></li>
+ </ul>
+ </li>
+</ul> \ No newline at end of file
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
generated by cgit v1.2.1 (git 2.18.0) at 2024-10-18 21:28:23 +0000