Added rotational dynamics to the examples

5 files changed, 111 insertions, 14 deletions

diff --git a/frontend/_rigidbody/circle.js b/frontend/_rigidbody/circle.js
index c044597..194a772 100644
--- a/frontend/_rigidbody/circle.js
+++ b/frontend/_rigidbody/circle.js
@@ -33,7 +33,9 @@ function circle(pGl, pRadius, pSegments, pColorList, pInitialPosition) {
         position: pInitialPosition || vec2(),
         velocity: vec2(),
         force: vec2(),
+        torque: 0,
         mass: 1,
+        rotationVelocity: 0,
         rotationRadians: 0,
         model: mat4(),
         radius: pRadius
diff --git a/frontend/_rigidbody/rigidbody_1.js b/frontend/_rigidbody/rigidbody_1.js
index 5021162..c5e4f0a 100644
--- a/frontend/_rigidbody/rigidbody_1.js
+++ b/frontend/_rigidbody/rigidbody_1.js
@@ -72,9 +72,17 @@ function main() {
                 ev.preventDefault();
                 ev.stopPropagation();
 
-                const lXValue = $(this).find('.vec2_x_input').val(),
+                let lXValue = $(this).find('.vec2_x_input').val(),
                     lYValue = $(this).find('.vec2_y_input').val();
 
+                if (lXValue.length === 0) {
+                    lXValue = 0;
+                }
+
+                if (lYValue.length === 0) {
+                    lYValue = 5000;
+                }
+
                 console.log('Applying force: ' + lXValue + ', ' + lYValue);
                 lCircle.force = addVec2(lCircle.force, vec2(Number(lXValue), Number(lYValue)));
             }
diff --git a/frontend/_rigidbody/rigidbody_2.js b/frontend/_rigidbody/rigidbody_2.js
index b41fa92..c41461e 100644
--- a/frontend/_rigidbody/rigidbody_2.js
+++ b/frontend/_rigidbody/rigidbody_2.js
@@ -24,23 +24,29 @@ function main() {
         console.log('Running Rigid Body 2');
         lProgramContext.load().then(function(pProgramInfo) {
             const lCircle = circle(lProgramContext.gl, CIRCLE_RADIUS, 30, [
-                { x: 1, y: 1, z: 0, w: 1 },
-                { x: 1, y: 0, z: 1, w: 1 },
-                { x: 0, y: 1, z: 1, w: 1 },
-                { x: 0, y: 1, z: 0, w: 1 }
-            ], vec2(lProgramContext.width / 2.0, lProgramContext.height / 2.0));
+                    { x: 1, y: 1, z: 0, w: 1 },
+                    { x: 1, y: 0, z: 1, w: 1 },
+                    { x: 0, y: 1, z: 1, w: 1 },
+                    { x: 0, y: 1, z: 0, w: 1 }
+                ], vec2(lProgramContext.width / 2.0, lProgramContext.height / 2.0));
 
             function update(pDeltaTimeSeconds) {
                 // Same physics updates from previously
-                const lGravityForce = vec2(0, -1.0 * (lCircle.mass * GRAVITY));
-                lCircle.force = addVec2(lCircle.force, lGravityForce);
+                applyForce(vec2(0, -1.0 * (lCircle.mass * GRAVITY)));
                 const lCurrentAcceleration = scaleVec2(lCircle.force, 1.0 / lCircle.mass);
                 lCircle.velocity = addVec2(lCircle.velocity, scaleVec2(lCurrentAcceleration, pDeltaTimeSeconds));
                 lCircle.position = addVec2(lCircle.position, scaleVec2(lCircle.velocity, pDeltaTimeSeconds));
-                lCircle.rotationRadians += Math.PI * pDeltaTimeSeconds;
-                lCircle.model = rotateMatrix2d(translateMatrix(mat4(), lCircle.position.x, lCircle.position.y, 0), lCircle.rotationRadians);
                 lCircle.force = vec2();
 
+                // Calculate rotation
+                const lMomentOfInertia = getMomentOfInertia(lCircle);
+                const lAngularAcceleration = lCircle.torque / lMomentOfInertia;
+
+                lCircle.rotationVelocity += lAngularAcceleration * pDeltaTimeSeconds;
+                lCircle.rotationRadians += lCircle.rotationVelocity * pDeltaTimeSeconds;
+                lCircle.model = rotateMatrix2d(translateMatrix(mat4(), lCircle.position.x, lCircle.position.y, 0), lCircle.rotationRadians);
+                lCircle.torque = 0;
+
                 // Render Code only
                 lProgramContext.gl.clearColor(0.0, 0.0, 0.0, 1.0);
                 lProgramContext.gl.clearDepth(1.0);
@@ -55,6 +61,19 @@ function main() {
                 renderCircle(lProgramContext.gl, pProgramInfo, lCircle);
             }
 
+            const TORQUE_MULTIPLIER = 100.0; // TODO: This may be unncessary
+
+            function applyForce(pForceVector, pPointOfApplication) {
+                if (pPointOfApplication !== undefined) {
+                    const lOriginToPointOfApp = subVec2(vec2(), pPointOfApplication), // The point of application is relative to the model (i.e. the center of the circle, not the scene)
+                        lPerpVec = vec2(-lOriginToPointOfApp.y, lOriginToPointOfApp.x);
+    
+                    lCircle.torque += TORQUE_MULTIPLIER * dot2(lPerpVec, pForceVector);
+                }
+
+                lCircle.force = addVec2(lCircle.force, pForceVector);
+            }
+
             function cleanup() {
                 lProgramContext.gl.deleteBuffer(lCircle.buffer);
                 lProgramContext.gl.deleteProgram(pProgramInfo.program);
@@ -65,14 +84,52 @@ function main() {
             function reset() {
                 lExitRequestFunc();
                 lProgramContext.reset();
+                $('#rigidbody_2_force_submit_button').unbind('submit').submit(false);
             }
 
             const lExitRequestFunc = requestUpdateLoop(update, cleanup);
             lProgramContext.stopButton.on('click', reset);
+            $('#rigidbody_2_force_submit_button').submit(function(pEv) {
+                pEv.preventDefault();
+                pEv.stopPropagation();
+
+                // Read in the force vector from the form
+                const lForceGroup = $('#rigidbody_2_force_input'),
+                    lPositionGroup = $('#rigidbody_2_position_input');
+
+                let lForceVectorX = lForceGroup.find('.vec2_x_input').val(),
+                    lForceVectorY = lForceGroup.find('.vec2_y_input').val();
+
+                if (lForceVectorX.length === 0) {
+                    lForceVectorX = 0;
+                }
+
+                if (lForceVectorY.length === 0) {
+                    lForceVectorY = 5000;
+                }
+
+                // Read in the point of application vector from the form
+                let lPositionGroupX = lPositionGroup.find('.vec2_x_input').val(),
+                    lPositionGroupY = lPositionGroup.find('.vec2_y_input').val();
+
+                if (lPositionGroupX.length === 0) {
+                    lPositionGroupX = -Math.sqrt(2) / 2;
+                }
+
+                if (lPositionGroupY.length === 0) {
+                    lPositionGroupY = -Math.sqrt(2) / 2;
+                }
+
+                const lForceVector = vec2(Number(lForceVectorX), Number(lForceVectorY));
+                const lPointOfApplication = scaleVec2(normalize2(vec2(Number(lPositionGroupX), Number(lPositionGroupY))), lCircle.radius);
+
+                applyForce(lForceVector, lPointOfApplication);
+            });
         });
     }
-
+    
     lProgramContext.playButton.on('click', run);
+    $('#rigidbody_2_force_submit_button').submit(false);
 }
 
 $(document).ready(main);
\ No newline at end of file
diff --git a/frontend/index.css b/frontend/index.css
index 9139963..a718784 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -89,6 +89,8 @@ section > p {
     Helpful inputs
 */
 .vec2_input_group {
+    position: relative;
+    margin-top: 1rem;
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -96,6 +98,15 @@ section > p {
     padding: 0.25rem;
 }
 
+.vec2_input_group > label {
+    position: absolute;
+    top: -1rem;
+    left: 0rem;
+    font-size: 0.8rem;
+    font-weight: bold;
+    text-align: left;
+}
+
 .vec2_input_group > input {
     width: 45%;
 }
diff --git a/frontend/rigidbody.html b/frontend/rigidbody.html
index 510c667..2cc32b7 100644
--- a/frontend/rigidbody.html
+++ b/frontend/rigidbody.html
@@ -113,8 +113,9 @@
                         </ul>
                         <form id="rigidbody_1_force_submit_button" style="text-align: right; padding: 0.5rem;">
                             <div class="vec2_input_group">
-                                <input class="vec2_x_input" type="number" value="0"/>
-                                <input class="vec2_y_input" type="number" value="5000"/>
+                                <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>
@@ -135,7 +136,25 @@
                 <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>Force:</b><span id="rigidbody_1_force_field">N/A</span></li>
+                            <li><b>Acceleration:</b><span id="rigidbody_2_acceleration_field">N/A</span></li>
+                            <li><b>Velocity:</b><span id="rigidbody_2_velocity_field">N/A</span></li>
+                            <li><b>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