Proper support for favicons, rigid body intersections are no longer broken, palinko game

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