From cc6d3871008a89fcf48814596d7bfec05f2706e4 Mon Sep 17 00:00:00 2001 From: Matthew Kosarek Date: Sun, 7 Feb 2021 19:22:56 -0500 Subject: Added rotational dynamics to the examples --- frontend/_rigidbody/circle.js | 2 + frontend/_rigidbody/rigidbody_1.js | 10 ++++- frontend/_rigidbody/rigidbody_2.js | 77 +++++++++++++++++++++++++++++++++----- frontend/index.css | 11 ++++++ frontend/rigidbody.html | 25 +++++++++++-- 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 @@
- - + + +
@@ -135,7 +136,25 @@
- +
    +
  • Force:N/A
    • +
  • Acceleration:N/A
    • +
  • Velocity:N/A
    • +
  • Position:N/A
    • +
+
+
+ + + +
+
+ + + +
+ +