Updated stylings and very nearly have square collisions complete and proper

7 files changed, 162 insertions, 24 deletions

diff --git a/frontend/2d/_collisions/circle_line.js b/frontend/2d/_collisions/circle_line.js
index e5898f0..0736e2c 100644
--- a/frontend/2d/_collisions/circle_line.js
+++ b/frontend/2d/_collisions/circle_line.js
@@ -125,7 +125,8 @@
     
             circleObject.position = lSubdividedCircle.position;
             circleObject.velocity = addVec2(lSubdividedCircle.velocity, scaleVec2(lCollisionNormal, lImpulseMagnitude / circleObject.mass));
-            circleObject.rotationVelocity = lSubdividedCircle.rotationVelocity + dot2(lFirstPerp, scaleVec2(lCollisionNormal, lImpulseMagnitude));
+            circleObject.rotationVelocity = lSubdividedCircle.rotationVelocity 
+                + dot2(lFirstPerp, scaleVec2(lCollisionNormal, lImpulseMagnitude)) / getCircleMomentOfInertia(circleObject);
     
             updateCircle(circleObject, pDeltaTimeSeconds - lSubdividedDeltaTime);
     
diff --git a/frontend/2d/_collisions/rectangle_line.js b/frontend/2d/_collisions/rectangle_line.js
index ac73f71..dec5108 100644
--- a/frontend/2d/_collisions/rectangle_line.js
+++ b/frontend/2d/_collisions/rectangle_line.js
@@ -34,7 +34,8 @@
 
             rectangleObject = rectangle(programContext.gl, { 
                 width: 50, 
-                height: 25, 
+                height: 50, 
+                mass: 1,
                 color: { x: 0.3, y: 0.5, z: 0.1, w: 0.7 },
                 position: vec2(programContext.width / 2.0 - 100, programContext.height / 2.0 + 100)
             });
@@ -43,16 +44,16 @@
             lineObjectList = [];
             
             lineObjectList.push(line2({ x: 100, y: 100 }, { x: programContext.width - 100, y: 200 }, programContext.gl,
-                { x: 1, y: 0, z: 0, w: 1 }, 2.0));
+                { x: 1, y: 0, z: 0, w: 1 }, 10000000.0));
 
             lineObjectList.push(line2({ x: 100, y: 200 }, { x: programContext.width - 100, y: 100 }, programContext.gl,
-                { x: 1, y: 1, z: 0, w: 1 }, 2.0));
+                { x: 1, y: 1, z: 0, w: 1 }, 10000000.0));
 
             lineObjectList.push(line2({ x: 100, y: 0 }, { x: 100, y: programContext.height }, programContext.gl,
-                { x: 0, y: 1, z: 0, w: 1 }, 2.0));
+                { x: 0, y: 1, z: 0, w: 1 }, 10000000.0));
 
             lineObjectList.push(line2({ x: programContext.width - 100, y: 0 }, { x: programContext.width - 100, y: programContext.height }, programContext.gl,
-                { x: 0, y: 1, z: 0, w: 1 }, 2.0));
+                { x: 0, y: 1, z: 0, w: 1 }, 10000000.0));
             
 
             exitRequestFunc = requestUpdateLoop(update, cleanup);
@@ -68,7 +69,101 @@
     }
 
     function collision(pDeltaTimeSeconds) {
+        for (var lineIdx = 0; lineIdx < lineObjectList.length; lineIdx++) {
+            var lLine = lineObjectList[lineIdx];
+            
+            if (areIntersecting(rectangleObject, lLine, pDeltaTimeSeconds)) {
+                break;
+            }
+        }
+    }
+    
+    function doesPointIntersect(pPoint, pLine) {
+        const EPSILON = 0.98;
+        return distanceFromPoint2ToLine2(pPoint, pLine) <= EPSILON;
+    }
+
+    function getIntersectionInformation(pRectangle, pCollisionPoint, pLine) {
+        var lCollisionNormal = pLine.normal,
+            lRectCollisionPoint_WorldCoords = multMat4ByVec2(pRectangle.model, pCollisionPoint),
+            lRectPosition = pRectangle.position,
+            lTrueRectCollisionPoint = normalize2(subVec2(lRectPosition, lRectCollisionPoint_WorldCoords));
+
+        console.log(lTrueRectCollisionPoint);
+
+        return {
+            relativeVelocity:           subVec2(pRectangle.velocity, pLine.velocity),
+            collisionNormal:            lCollisionNormal,
+            rectangleCollisionPoint:    lTrueRectCollisionPoint
+        }
+    }
+
+    function areIntersecting(pRectangle, pLine, pDeltaTimeSeconds) {
+        var lCollisionPoint = undefined,
+            lCheckCollision = function(pRectangle) {
+                var lLowerLeft      = multMat4ByVec2(pRectangle.model, vec2(-pRectangle.width / 2.0, -pRectangle.height / 2.0)),
+                    lUpperLeft      = multMat4ByVec2(pRectangle.model, vec2(-pRectangle.width / 2.0, pRectangle.height / 2.0)),
+                    lUpperRight     = multMat4ByVec2(pRectangle.model, vec2(pRectangle.width / 2.0, pRectangle.height / 2.0)),
+                    lLowerRight     = multMat4ByVec2(pRectangle.model, vec2(pRectangle.width / 2.0, -pRectangle.height / 2.0));
+
+                if (doesPointIntersect(lLowerLeft, pLine)) {
+                    console.log('Lwer left');
+                    lCollisionPoint = vec2(-pRectangle.width / 2.0, -pRectangle.height / 2.0);
+                    return true;
+                } else if (doesPointIntersect(lUpperLeft, pLine)) {
+                    console.log('Upper left');
+                    lCollisionPoint = vec2(-pRectangle.width / 2.0, pRectangle.height / 2.0);
+                    return true;
+                } else if (doesPointIntersect(lUpperRight, pLine)) {
+                    console.log('Upepr right');
+                    lCollisionPoint = vec2(pRectangle.width / 2.0, pRectangle.height / 2.0);
+                    return true;
+                } else if (doesPointIntersect(lLowerRight, pLine)) {
+                    console.log('Lower right');
+                    lCollisionPoint = vec2(pRectangle.width / 2.0, -pRectangle.height / 2.0);
+                    return true;
+                }
+
+                return false;
+            };
+
+        if (!lCheckCollision(pRectangle)) {
+            return;
+        }
+
+        // Subdivide until we find the exact moment where we intersected
+        var lSubdividedDeltaTime = pDeltaTimeSeconds,
+            lSubRectangle = undefined;
+        do {
+            lSubRectangle = JSON.parse(JSON.stringify(pRectangle));
+            lSubRectangle.position = {...pRectangle.prevPos};
+            lSubRectangle.velocity = {...pRectangle.prevVelocity};
+            lSubRectangle.getMomentOfInertia = pRectangle.getMomentOfInertia;
+            lSubdividedDeltaTime = lSubdividedDeltaTime / 2.0;
+            updateRigidBody2(lSubRectangle, lSubdividedDeltaTime);
+            if (lSubdividedDeltaTime === 0) {
+                console.error('This should NOT be happening');
+                break;
+            }
+        } while (lCheckCollision(lSubRectangle)); 
         
+        var lIntersectionResult = getIntersectionInformation(lSubRectangle, lCollisionPoint, pLine),
+            lRelativeVelocity   = lIntersectionResult.relativeVelocity,
+            lCollisionNormal    = lIntersectionResult.collisionNormal,
+            lRectPerp           = getPerp2(lIntersectionResult.rectangleCollisionPoint);
+
+        const lNumerator = dot2(scaleVec2(lRelativeVelocity, -(1.0 + 1.0)), lCollisionNormal);
+        const lLinearDenomPart = dot2(lCollisionNormal, (scaleVec2(lCollisionNormal, 1.0 / pRectangle.mass)));
+        const lRotationalDenomPart = (Math.pow(dot2(lRectPerp, lCollisionNormal), 2) / pRectangle.getMomentOfInertia());
+
+        const lImpulseMagnitude = lNumerator / (lLinearDenomPart + lRotationalDenomPart);
+
+        pRectangle.position = lSubRectangle.position;
+        pRectangle.velocity = addVec2(lSubRectangle.velocity, scaleVec2(lCollisionNormal, lImpulseMagnitude / pRectangle.mass));
+        pRectangle.rotationVelocity = lSubRectangle.rotationVelocity + dot2(lRectPerp, scaleVec2(lCollisionNormal, lImpulseMagnitude)) / pRectangle.getMomentOfInertia();
+
+        updateRigidBody2(pRectangle, pDeltaTimeSeconds - lSubdividedDeltaTime);
+        return true;
     }
 
     function render() {
diff --git a/frontend/_shared/math/line2.js b/frontend/_shared/math/line2.js
index a9e72be..8b30c1c 100644
--- a/frontend/_shared/math/line2.js
+++ b/frontend/_shared/math/line2.js
@@ -32,7 +32,8 @@ function line2(pStart, pEnd, pGl, pColor, pMass) {
         length: length2(lDiffVector),
         mass: pMass,
         direction: normalize2(lDiffVector),
-        velocity: vec2(0, 0)
+        velocity: vec2(0, 0),
+        position: vec2()
     };
 }
 
@@ -40,6 +41,13 @@ function getLine2MomentOfInertia(pLine) {
     return (1.0 / 12.0) * pLine.mass * Math.pow(pLine.length, 2);
 }
 
+function getLine2MidPoint(pLine) {
+    return {
+        x: (pLine.end.x + pLine.start.x) / 2.0,
+        y: (pLine.end.y + pLine.start.y) / 2.0
+    }
+}
+
 function renderLine2(pGl, pProgramInfo, pLine) {
     pGl.uniformMatrix4fv(pProgramInfo.uniformLocations.model, false, mat4()); // Model on a line is always default matrix
     pGl.bindBuffer(pGl.ARRAY_BUFFER, pLine.buffer);
diff --git a/frontend/_shared/math/mat4.js b/frontend/_shared/math/mat4.js
index 6ab29e2..d31a20e 100644
--- a/frontend/_shared/math/mat4.js
+++ b/frontend/_shared/math/mat4.js
@@ -40,4 +40,24 @@ function scaleMatrix(m, x, y, z) {
     m[5] = m[5] * y;
     m[10] = m[10] * z;
     return m;
+}
+
+function multMat4ByVec2(matrix, vec) {
+    var lInnerVec = {...vec};
+    lInnerVec.z = 0.0;
+    lInnerVec.w = 1.0;
+
+    return {
+        x: lInnerVec.x * matrix[0] + lInnerVec.y * matrix[4] + lInnerVec.z * matrix[8] + lInnerVec.w * matrix[12],
+        y: lInnerVec.x * matrix[1] + lInnerVec.y * matrix[5] + lInnerVec.z * matrix[9] + lInnerVec.w * matrix[13]
+    };
+}
+
+function multMat4ByVec4(matrix, vec) {
+    return {
+        x: vec.x * matrix[0] + vec.y * matrix[4] + vec.z * matrix[8] + vec.w * matrix[12],
+        y: vec.x * matrix[1] + vec.y * matrix[5] + vec.z * matrix[9] + vec.w * matrix[13],
+        z: vec.x * matrix[2] + vec.y * matrix[6] + vec.z * matrix[10] + vec.w * matrix[14],
+        w: vec.x * matrix[3] + vec.y * matrix[7] + vec.z * matrix[11] + vec.w * matrix[15]
+    };
 }
\ No newline at end of file
diff --git a/frontend/_shared/math/rectangle.js b/frontend/_shared/math/rectangle.js
index c24fa12..012c460 100644
--- a/frontend/_shared/math/rectangle.js
+++ b/frontend/_shared/math/rectangle.js
@@ -7,19 +7,19 @@ function rectangle(pGl, pData) {
     pGl.bindBuffer(pGl.ARRAY_BUFFER, lBuffer);
 
     var lBufferedData = [
-        0,              0,              lColor.x, lColor.y, lColor.z, lColor.w,
-        0,              pData.height,   lColor.x, lColor.y, lColor.z, lColor.w,
-        pData.width,    pData.height,   lColor.x, lColor.y, lColor.z, lColor.w,
-        pData.width,    pData.height,   lColor.x, lColor.y, lColor.z, lColor.w,
-        pData.width,    0,              lColor.x, lColor.y, lColor.z, lColor.w,
-        0,              0,              lColor.x, lColor.y, lColor.z, lColor.w
+        -pData.width / 2.0, -pData.height / 2.0,    lColor.x, lColor.y, lColor.z, lColor.w,
+        -pData.width / 2.0, pData.height / 2.0,     lColor.x, lColor.y, lColor.z, lColor.w,
+        pData.width / 2.0,  pData.height / 2.0,     lColor.x, lColor.y, lColor.z, lColor.w,
+        pData.width / 2.0,  pData.height /2.0,      lColor.x, lColor.y, lColor.z, lColor.w,
+        pData.width / 2.0,  -pData.height / 2.0,    lColor.x, lColor.y, lColor.z, lColor.w,
+        -pData.width / 2.0, -pData.height / 2.0,    lColor.x, lColor.y, lColor.z, lColor.w
     ];
 
     pGl.bufferData(pGl.ARRAY_BUFFER, new Float32Array(lBufferedData), pGl.STATIC_DRAW)
     pGl.bindBuffer(pGl.ARRAY_BUFFER, undefined);
 
     pData.getMomentOfInertia = function() {
-        return Math.pow(pData.width * pData.height, 3.0) / 12.0;
+        return (1.0 / 12.0) * pData.mass * (pData.height * pData.height + pData.width * pData.width);
     };
         
     return makeRigidBody2({
diff --git a/frontend/_shared/math/vec2.js b/frontend/_shared/math/vec2.js
index cff38ce..11e71cd 100644
--- a/frontend/_shared/math/vec2.js
+++ b/frontend/_shared/math/vec2.js
@@ -53,4 +53,12 @@ function negate2(v) {
         x: -v.x,
         y: -v.y
     };
+}
+
+// Algorithm plucked from: https://matthew-brett.github.io/teaching/rotation_2d.html
+function rotateAboutOrigin2(v, angle) {
+    return {
+        x: v.x * Math.cos(angle) - v.y * Math.sin(angle),
+        y: v.x * Math.sin(angle) + v.y * Math.cos(angle),
+    };
 }
\ No newline at end of file
diff --git a/frontend/index.css b/frontend/index.css
index 00ea6e9..5f9619c 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,19 +1,23 @@
 body {
     font-size: 16px;
-    font-family: "Open Sans", sans-serif;
+    font-family: "Helvetica", sans-serif;
+    line-height: 1.3rem;
     width: 100%;
     height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     margin: 0rem;
     padding: 0rem;
+    overflow-x: auto;
+    overflow-y: auto;
 }
 
 header {
+    background-color: lemonchiffon;
     padding-top: 1rem;
+    padding-bottom: 1rem;
+    font-size: 20px;
+    margin: auto;
     width: 1260px;
-    flex: 0 1 auto;
+    max-width: 1260px;
     text-align: center;
 }
 
@@ -27,10 +31,11 @@ main {
     display: flex;
     flex-direction: row;
     color: #1a1a1a;
-    width: 1200px;
+    width: 1260px;
+    margin: auto;
+    max-width: 1260px;
     background-color: white;
     flex: 1 1 100%;
-    height: 100%;
     margin-bottom: 1rem;
     overflow-y: hidden;
 }
@@ -38,13 +43,15 @@ main {
 section {
     min-width: 74%;
     width: 74%;
-    overflow-y: auto;
+    overflow-y: hidden;
 }
 
 /*
     Navigation bar
 */
 nav {
+    padding-top: 1rem;
+    position: sticky;
     width: 20%;
     min-width: 20%;
     max-width: 20%;
@@ -55,7 +62,6 @@ nav {
     text-align: left;
     font-size: 1rem;
     user-select: none;
-    border-right: 1px solid black;;
 }
 
 .outer-tree {
@@ -201,7 +207,7 @@ article .opengl_canvas_container .play_button {
     height: 128px;
     position: absolute;
     top: calc(50% - 56px);
-    left: calc(50% - 184px);
+    left: calc(50% - 214px);
     border: 1px solid white;
     color: white;
     background-color: transparent;