diff options
Diffstat (limited to 'frontend/_rigidbody')
| -rw-r--r-- | frontend/_rigidbody/2d/part_1.html | 93 | ||||
| -rw-r--r-- | frontend/_rigidbody/2d/part_2.html | 66 | ||||
| -rw-r--r-- | frontend/_rigidbody/2d/part_3.html | 71 | ||||
| -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/_rigidbody/circle.js | 117 | ||||
| -rw-r--r-- | frontend/_rigidbody/mat4.js | 43 | ||||
| -rw-r--r-- | frontend/_rigidbody/pill.js | 0 | ||||
| -rw-r--r-- | frontend/_rigidbody/program_common.js | 75 | ||||
| -rw-r--r-- | frontend/_rigidbody/shader.js | 60 | ||||
| -rw-r--r-- | frontend/_rigidbody/shaders/orthographic.frag | 5 | ||||
| -rw-r--r-- | frontend/_rigidbody/shaders/orthographic.vert | 13 | ||||
| -rw-r--r-- | frontend/_rigidbody/vec2.js | 55 |
15 files changed, 258 insertions, 398 deletions
diff --git a/frontend/_rigidbody/2d/part_1.html b/frontend/_rigidbody/2d/part_1.html new file mode 100644 index 0000000..ec0acbf --- /dev/null +++ b/frontend/_rigidbody/2d/part_1.html @@ -0,0 +1,93 @@ +<!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="rigidbody_1.js"></script> + </head> + <body> + <header> + <h1>Physics for Games</h1> + </header> + <main> + <nav> + </nav> + <section> + <h1>Part 1: Linear Forces</h1> + <article> + <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> + </article> + </section> + </main> + </body> +</html>
\ No newline at end of file diff --git a/frontend/_rigidbody/2d/part_2.html b/frontend/_rigidbody/2d/part_2.html new file mode 100644 index 0000000..0291290 --- /dev/null +++ b/frontend/_rigidbody/2d/part_2.html @@ -0,0 +1,66 @@ +<!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="rigidbody_2.js"></script> + </head> + <body> + <header> + <h1>Physics for Games</h1> + </header> + <main> + <nav> + </nav> + <section> + <h1>Part 2: Rotational Forces</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="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> + </article> + </section> + </main> + </body> +</html>
\ No newline at end of file diff --git a/frontend/_rigidbody/2d/part_3.html b/frontend/_rigidbody/2d/part_3.html new file mode 100644 index 0000000..c1479da --- /dev/null +++ b/frontend/_rigidbody/2d/part_3.html @@ -0,0 +1,71 @@ +<!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="rigidbody_3a.js"></script> + <script src="rigidbody_3b.js"></script> + </head> + <body> + <header> + <h1>Physics for Games</h1> + </header> + <main> + <nav> + </nav> + <section> + <h1>Part 3: Collisions</h1> + <article> + <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> + <div id="rigidbody_3a" class="opengl_canvas_container"> + <canvas width="640" height="480"></canvas> + <div class="opengl_canvas_sidebar"> + <div class="slider_container"> + <label for="time_step_slider">Time Step</label> + <input type="range" min="0.1" max="1.0" value="1.0" step="0.1" class="slider" id="time_step_slider"> + </div> + </div> + <button class="play_button"> + Play + </button> + <button class="stop_button"> + Stop + </button> + </div> + </article> + <article> + <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> + <div id="rigidbody_3b" 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> + </article> + </section> + </main> + </body> +</html>
\ No newline at end of file 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/circle.js b/frontend/_rigidbody/circle.js deleted file mode 100644 index 1cec7ce..0000000 --- a/frontend/_rigidbody/circle.js +++ /dev/null @@ -1,117 +0,0 @@ -/// <reference path="mat4.js" /> -/// <reference path="vec2.js" /> - -const BYTES_PER_FLOAT = 4; - -/** - * Initializes a new circle object for the WebGL context. - * - * @param {WebGLRenderingContext} pGl - * @param {number} pRadius - * @param {number} pSegments - * @param {Array<Vector4>} pColorList - * @param {vec2} pInitialPosition - * @param {number} pMass - */ -function circle(pGl, pRadius, pSegments, pColorList, pInitialPosition, pMass) { - const lBuffer = pGl.createBuffer(); - - pGl.bindBuffer(pGl.ARRAY_BUFFER, lBuffer); - - var lBufferedData = []; - vertexCount = 0; - - const lAngleIncrements = (360.0 / pSegments) * (Math.PI / 180.0); - for (let lSegIdx = 0; lSegIdx < pSegments; lSegIdx++) { - const lAngle = lAngleIncrements * lSegIdx, - lNextAngle = lAngleIncrements * (lSegIdx + 1), - lColorIndex = Math.floor(pColorList.length * (lSegIdx / pSegments)), - lColor = pColorList[lColorIndex]; // TODO: Calculate which one to use - - lBufferedData = lBufferedData.concat([ - 0, 0, lColor.x, lColor.y, lColor.z, lColor.w, - pRadius * Math.sin(lAngle), pRadius * Math.cos(lAngle), lColor.x, lColor.y, lColor.z, lColor.w, - pRadius * Math.sin(lNextAngle), pRadius * Math.cos(lNextAngle), lColor.x, lColor.y, lColor.z, lColor.w - ]); - - vertexCount += 3; - } - - pGl.bufferData(pGl.ARRAY_BUFFER, new Float32Array(lBufferedData), pGl.STATIC_DRAW) - pGl.bindBuffer(pGl.ARRAY_BUFFER, undefined); - - return { - buffer: lBuffer, - vertexCount: vertexCount, - prevPos: vec2(), - position: pInitialPosition || vec2(), - prevVelocity: vec2(), - velocity: vec2(), - force: vec2(), - torque: 0, - mass: pMass === undefined ? 1 : pMass, - rotationVelocity: 0, - rotationRadians: 0, - model: translateMatrix(mat4(), pInitialPosition ? pInitialPosition.x : 0, pInitialPosition ? pInitialPosition.y : 0, 0), - radius: pRadius - }; -} - -function renderCircle(pGl, pProgramInfo, pCircle) { - pGl.uniformMatrix4fv(pProgramInfo.uniformLocations.model, false, pCircle.model); - pGl.bindBuffer(pGl.ARRAY_BUFFER, pCircle.buffer); - { - pGl.enableVertexAttribArray(pProgramInfo.attributeLocations.position); - pGl.vertexAttribPointer(pProgramInfo.attributeLocations.position, 2, pGl.FLOAT, false, BYTES_PER_FLOAT * 6, 0); - - pGl.enableVertexAttribArray(pProgramInfo.attributeLocations.color); - pGl.vertexAttribPointer(pProgramInfo.attributeLocations.color, 4, pGl.FLOAT, false, BYTES_PER_FLOAT * 6, BYTES_PER_FLOAT * 2); - } - - pGl.drawArrays(pGl.TRIANGLE_STRIP, 0, pCircle.vertexCount); -} - -function getMomentOfInertia(pCircle) { - return (Math.PI * Math.pow(pCircle.radius, 4)) / 4; -} - -function doCirclesIntersect(pFirst, pSecond) { - const lDistanceBetween = Math.pow(pFirst.position.x - pSecond.position.x, 2) - + Math.pow(pFirst.position.y - pSecond.position.y, 2) - return lDistanceBetween <= Math.pow(pFirst.radius + pSecond.radius, 2); -} - -/** - * Returns intersection information about the intersecting circles. - * - * Warning! Only use this if doCirclesIntersect returned true for these circles. - * - * @param {circle} pFirst - * @param {circle} 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) - } -} - -function freeCircle(pGl, pCircle) { - pGl.deleteBuffer(pCircle.buffer); -}
\ No newline at end of file diff --git a/frontend/_rigidbody/mat4.js b/frontend/_rigidbody/mat4.js deleted file mode 100644 index 6ab29e2..0000000 --- a/frontend/_rigidbody/mat4.js +++ /dev/null @@ -1,43 +0,0 @@ -function mat4() { - return [ - 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 - ] -} - -function orthographic(pLeft, pRight, pBottom, pTop) { - const lResult = mat4(); - lResult[0] = 2.0 / (pRight - pLeft); - lResult[5] = 2.0 / (pTop - pBottom); - lResult[10] = 1.0; - lResult[12] = -(pRight + pLeft) / (pRight - pLeft); - lResult[13] = -(pTop + pBottom) / (pTop - pBottom); - return lResult; -} - -function translateMatrix(m, x, y, z) { - m = [...m]; - m[12] += x; - m[13] += y; - m[14] += z; - return m; -} - -function rotateMatrix2d(m, angle) { - m = [...m]; - m[0] = Math.cos(angle); - m[1] = -Math.sin(angle); - m[4] = Math.sin(angle); - m[5] = Math.cos(angle); - return m; -} - -function scaleMatrix(m, x, y, z) { - m = [...m]; - m[0] = m[0] * x; - m[5] = m[5] * y; - m[10] = m[10] * z; - return m; -}
\ No newline at end of file diff --git a/frontend/_rigidbody/pill.js b/frontend/_rigidbody/pill.js deleted file mode 100644 index e69de29..0000000 --- a/frontend/_rigidbody/pill.js +++ /dev/null diff --git a/frontend/_rigidbody/program_common.js b/frontend/_rigidbody/program_common.js deleted file mode 100644 index 988056f..0000000 --- a/frontend/_rigidbody/program_common.js +++ /dev/null @@ -1,75 +0,0 @@ -/// <reference path="shader.js" /> -/// <reference path="mat4.js" /> - -function getContext(pId, pOnRun) { - const lCanvas = $(pId).find('canvas'), - lPlayButton = $(pId).find('.play_button'), - lStopButton = $(pId).find('.stop_button'), - lGl = lCanvas[0].getContext('webgl'), - lWidth = lCanvas.width(), - lHeight = lCanvas.height(); - - return { - canvas: lCanvas, - playButton: lPlayButton, - stopButton: lStopButton, - gl: lGl, - width: lWidth, - height: lHeight, - perspective: orthographic(0, lWidth, 0, lHeight), - load: function() { - lPlayButton.empty().append($('<div>').addClass('spin-loader')); - return loadOrthographicShader(lGl).then(function(pProgramInfo) { - lPlayButton.css('display', 'none'); - lStopButton.css('display', 'block'); - return pProgramInfo; - }); - }, - reset: function() { - lPlayButton.css('display', 'block'); - lPlayButton.empty().text('Play'); - lStopButton.css('display', 'none'); - lStopButton.on('click', undefined); - } - }; -} - -function requestUpdateLoop(pFunction, pOnExit) { - let lDeltaTimeSeconds = undefined, - lLastTimeSeconds = undefined, - lIsRunning = true; - - function update(pTimeStamp) { - if (!lIsRunning) { - if (pOnExit) { - pOnExit(); - } - return; - } - - pTimeStamp = pTimeStamp / 1000.0; // Convert to seconds - - // Time calculation - if (lLastTimeSeconds === undefined) { - lLastTimeSeconds = pTimeStamp; - lDeltaTimeSeconds = 0; - } else { - lDeltaTimeSeconds = pTimeStamp - lLastTimeSeconds; - lLastTimeSeconds = pTimeStamp; - } - - while (lDeltaTimeSeconds > 0) { - pFunction(lDeltaTimeSeconds); - lDeltaTimeSeconds -= 0.16; - } - requestAnimationFrame(update); - } - - requestAnimationFrame(update); - - function lExit() { - lIsRunning = false; - } - - return lExit; -}
\ No newline at end of file diff --git a/frontend/_rigidbody/shader.js b/frontend/_rigidbody/shader.js deleted file mode 100644 index bf08638..0000000 --- a/frontend/_rigidbody/shader.js +++ /dev/null @@ -1,60 +0,0 @@ -function loadShader(pGl, pShaderType, pShaderSource) { - const lShader = pGl.createShader(pShaderType); - pGl.shaderSource(lShader, pShaderSource); - pGl.compileShader(lShader); - if (!pGl.getShaderParameter(lShader, pGl.COMPILE_STATUS)) { - alert('An error occurred compiling the shaders: ' + pGl.getShaderInfoLog(lShader)); - pGl.deleteShader(lShader); - return null; - } - - return lShader; -} - -function loadOrthographicShader(pGl) { - var lVertex, lFragment; - - function lLoadShaders() { - const lVertexShader = loadShader(pGl, pGl.VERTEX_SHADER, lVertex); - const lFragmentShader = loadShader(pGl, pGl.FRAGMENT_SHADER, lFragment); - - const lShaderProgram = pGl.createProgram(); - pGl.attachShader(lShaderProgram, lVertexShader); - pGl.attachShader(lShaderProgram, lFragmentShader); - pGl.linkProgram(lShaderProgram); - - if (!pGl.getProgramParameter(lShaderProgram, pGl.LINK_STATUS)) { - alert('Unable to initialize the shader program: ' + pGl.getProgramInfoLog(lShaderProgram)); - return null; - } - - return { - program: lShaderProgram, - attributeLocations: { - position: pGl.getAttribLocation(lShaderProgram, 'position'), - color: pGl.getAttribLocation(lShaderProgram, 'color') - }, - uniformLocations: { - projection: pGl.getUniformLocation(lShaderProgram, 'projection'), - model: pGl.getUniformLocation(lShaderProgram, 'model') - } - } - } - - return fetch('/_rigidbody/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) { - if (pResponse.status === 200) { - return pResponse.text().then(function(pShader) { - lFragment = pShader; - return lLoadShaders(); - }); - } - }); - }); - } - }); -}
\ No newline at end of file diff --git a/frontend/_rigidbody/shaders/orthographic.frag b/frontend/_rigidbody/shaders/orthographic.frag deleted file mode 100644 index 84b6b2e..0000000 --- a/frontend/_rigidbody/shaders/orthographic.frag +++ /dev/null @@ -1,5 +0,0 @@ -varying lowp vec4 VertexColor; - -void main() { - gl_FragColor = VertexColor; -}
\ No newline at end of file diff --git a/frontend/_rigidbody/shaders/orthographic.vert b/frontend/_rigidbody/shaders/orthographic.vert deleted file mode 100644 index 0356f9c..0000000 --- a/frontend/_rigidbody/shaders/orthographic.vert +++ /dev/null @@ -1,13 +0,0 @@ -attribute vec2 position; -attribute vec4 color; - -uniform mat4 projection; -uniform mat4 model; - -varying lowp vec4 VertexColor; - -void main() { - vec4 fragmentPosition = projection * model * vec4(position, 1, 1); - gl_Position = fragmentPosition; - VertexColor = color; -}
\ No newline at end of file diff --git a/frontend/_rigidbody/vec2.js b/frontend/_rigidbody/vec2.js deleted file mode 100644 index 2db42e0..0000000 --- a/frontend/_rigidbody/vec2.js +++ /dev/null @@ -1,55 +0,0 @@ -function vec2(x = 0, y = 0) { - return { x: x, y: y}; -} - -function addVec2(v1, v2) { - return { - x: v1.x + v2.x, - y: v1.y + v2.y - }; -} - -function subVec2(v1, v2) { - return { - x: v1.x - v2.x, - y: v1.y - v2.y - }; -} - -function scaleVec2(v, s) { - return { - x: v.x * s, - y: v.y * s - }; -} - -function dot2(v1, v2) { - return v1.x * v2.x + v1.y * v2.y; -} - -function length2(v) { - return Math.sqrt(v.x * v.x + v.y * v.y); -} - -function normalize2(v) { - const lLength = 1.0 / length2(v); - return { x: v.x * lLength, y: v.y * lLength }; -} - -function vec2str(v) { - return `(${v.x.toFixed(2)}, ${v.y.toFixed(2)})`; -} - -function getPerp2(v) { - return { - x: -v.y, - y: v.x - }; -} - -function negate2(v) { - return { - x: -v.x, - y: -v.y - }; -}
\ No newline at end of file |