Rigid body with both normal and tangental forces Shows how the tangental force causes the object to sping roll down the slope versus just a normal fforce Try it Comment out the line for the addForce for the tangental force it still works but doesn t spin slides down the slope without spinning const canvas document createElement canvas document body appendChild canvas canvas width canvas height 500 canvas style border 1px solid gray const ctx canvas getContext 2d Simulation parameters const gravity 9 81 const timeStep 1 30 60 FPS const penaltyStiffness 1000 Penalty force constant Sphere object const sphere radius 20 position x 100 y 50 velocity x 0 y 0 angle 0 angularVelocity 0 mass 1 inertia 0 5 1 20 20 Sphere moment of inertia I 0 5 m r 2 Ground lines can represent slopes const groundLines start x 0 y 250 end x 300 y 300 Flat ground start x 300 y 300 end x 500 y 250 Sloped ground Utility function subtract vectors function subtract v1 v2 return x v1 x v2 x y v1 y v2 y Utility function normalize vector function normalize v const length Math sqrt v x v x v y v y return x v x length y v y length Utility function dot product function dot v1 v2 return v1 x v2 x v1 y v2 y Utility function perpendicular in 2D rotate 90 degrees function perpendicular v return x v y y v x Utility function length of vector function length v return Math sqrt v x v x v y v y Detect collision between sphere and a line function detectCollision sphere line const lineVec subtract line end line start const sphereToLineStart subtract sphere position line start const projectionLength dot sphereToLineStart lineVec dot lineVec lineVec const projectionPoint x line start x projectionLength lineVec x y line start y projectionLength lineVec y const distVec subtract sphere position projectionPoint const distToLine length distVec if distToLine sphere radius projectionLength 0 projectionLength 1 return point projectionPoint distance distToLine normal normalize distVec return null Global variables for accumulated forces let accumulatedForce x 0 y 0 let accumulatedTorque 0 For rotational forces Adds a force at a given world location and accumulates the total force and torque param Object force The force vector x y param Object worldLocation The point of application of the force in world coordinates x y function addForce force worldLocation Accumulate linear force accumulatedForce x force x accumulatedForce y force y Calculate the torque r worldLocation sphere position const r x worldLocation x sphere position x y worldLocation y sphere position y Torque r x F cross product in 2D r_x F_y r_y F_x const torque r x force y r y force x accumulatedTorque torque Integrate forces to update the sphere s velocity angular velocity position and angle function integrateForces Integrate linear velocity sphere velocity x accumulatedForce x sphere mass timeStep sphere velocity y accumulatedForce y sphere mass timeStep Integrate angular velocity sphere angularVelocity accumulatedTorque sphere inertia timeStep Update position and angle sphere position x sphere velocity x timeStep sphere position y sphere velocity y timeStep sphere angle sphere angularVelocity timeStep Clear accumulated forces and torque for the next step accumulatedForce x 0 y 0 accumulatedTorque 0 Apply physics gravity collision response rolling function applyPhysics Apply gravity as a force through the center of the sphere addForce x 0 y gravity sphere mass sphere position Collision detection with ground lines for let line of groundLines const collision detectCollision sphere line if collision Contact point const contactPoint collision point const contactNormal collision normal Calculate the penetration depth const penetrationDepth sphere radius collision distance Normal force penalty force to push the sphere out const normalForce x contactNormal x penetrationDepth penaltyStiffness y contactNormal y penetrationDepth penaltyStiffness Tangential direction and friction const contactTangent perpendicular contactNormal const relativeVelocity dot sphere velocity contactTangent Static friction threshold if relative velocity is very small stop the rotation const frictionThreshold 0 1 let tangentialForce x 0 y 0 if Math abs relativeVelocity frictionThreshold Static friction stop motion sphere angularVelocity 0 tangentialForce x sphere velocity x 10 Strong force to stop motion y sphere velocity y 10 else Dynamic friction case const frictionCoefficient 1 0 const tangentialForceMagnitude relativeVelocity frictionCoefficient tangentialForce x contactTangent x tangentialForceMagnitude y contactTangent y tangentialForceMagnitude Add forces at the contact point addForce normalForce contactPoint Normal force at contact point addForce tangentialForce contactPoint Tangential force friction at contact point Move the sphere out of penetration depth to avoid sinking sphere position x contactNormal x penetrationDepth sphere position y contactNormal y penetrationDepth Draw contact point normal and tangent drawContactDetails contactPoint contactNormal contactTangent Damping angular velocity to simulate friction stopping rotation over time const angularDamping 0 99 sphere angularVelocity angularDamping Integrate accumulated forces integrateForces Drawing functions function drawSphere Draw the sphere ctx beginPath ctx arc sphere position x sphere position y sphere radius 0 2 Math PI ctx fillStyle blue ctx fill ctx stroke Draw the rotation marker line from center to edge based on angle const markerLength sphere radius Length of the marker to the edge of the sphere const markerX sphere position x markerLength Math cos sphere angle const markerY sphere position y markerLength Math sin sphere angle ctx beginPath ctx moveTo sphere position x sphere position y ctx lineTo markerX markerY Draw the rotating line ctx strokeStyle white Color of the rotation marker ctx lineWidth 2 ctx stroke function drawGroundLines ctx lineWidth 2 ctx strokeStyle black groundLines forEach line ctx beginPath ctx moveTo line start x line start y ctx lineTo line end x line end y ctx stroke function drawContactDetails contactPoint normal tangent Draw contact point ctx beginPath ctx arc contactPoint x contactPoint y 5 0 2 Math PI ctx fillStyle red ctx fill Draw normal ctx strokeStyle green ctx beginPath ctx moveTo contactPoint x contactPoint y ctx lineTo contactPoint x normal x 50 contactPoint y normal y 50 ctx stroke Draw tangential direction ctx strokeStyle red ctx beginPath ctx moveTo contactPoint x 8 contactPoint y ctx lineTo contactPoint x 8 tangent x 50 contactPoint y tangent y 50 ctx stroke Animation loop function animate ctx clearRect 0 0 canvas width canvas height Draw everything drawSphere drawGroundLines Apply physics for let s 0 s 10 s applyPhysics Loop requestAnimationFrame animate Start the animation animate
ontact point const contactPoint collision point const contactNormal collision normal Calculate the penetration depth const penetrationDepth sphere radius collision distance Normal force penalty force to push the sphere out const normalForce x contactNormal x penetrationDepth penaltyStiffness y contactNormal y penetrationDepth penaltyStiffness Tangential direction and friction const contactTangent perpendicular contactNormal const relativeVelocity dot sphere velocity contactTangent Static friction threshold if relative velocity is very small stop the rotation const frictionThreshold 0 1 let tangentialForce x 0 y 0 if Math abs relativeVelocity frictionThreshold Static friction stop motion sphere angularVelocity 0 tangentialForce x sphere velocity x 10 Strong force to stop motion y sphere velocity y 10 else Dynamic friction case const frictionCoefficient 1 0 const tangentialForceMagnitude relativeVelocity frictionCoefficient tangentialForce x contactTangent x tangentialForceMagnitude y contactTangent y tangentialForceMagnitude Add forces at the contact point addForce normalForce contactPoint Normal force at contact point addForce tangentialForce contactPoint Tangential force friction at contact point Move the sphere out of penetration depth to avoid sinking sphere position x contactNormal x penetrationDepth sphere position y contactNormal y penetrationDepth Draw contact point normal and tangent drawContactDetails contactPoint contactNormal contactTangent Damping angular velocity to simulate friction stopping rotation over time const angularDamping 0 99 sphere angularVelocity angularDamping Integrate accumulated forces integrateForces Drawing functions function drawSphere Draw the sphere ctx beginPath ctx arc sphere position x sphere position y sphere radius 0 2 Math PI ctx fillStyle blue ctx fill ctx stroke Draw the rotation marker line from center to edge based on angle const markerLength sphere radius Length of the marker to the edge of the sphere const markerX sphere position x markerLength Math cos sphere angle const markerY sphere position y markerLength Math sin sphere angle ctx beginPath ctx moveTo sphere position x sphere position y ctx lineTo markerX markerY Draw the rotating line ctx strokeStyle white Color of the rotation marker ctx lineWidth 2 ctx stroke function drawGroundLines ctx lineWidth 2 ctx strokeStyle black groundLines forEach line ctx beginPath ctx moveTo line start x line start y ctx lineTo line end x line end y ctx stroke function drawContactDetails contactPoint normal tangent Draw contact point ctx beginPath ctx arc contactPoint x contactPoint y 5 0 2 Math PI ctx fillStyle red ctx fill Draw normal ctx strokeStyle green ctx beginPath ctx moveTo contactPoint x contactPoint y ctx lineTo contactPoint x normal x 50 contactPoint y normal y 50 ctx stroke Draw tangential direction ctx strokeStyle red ctx beginPath ctx moveTo contactPoint x 8 contactPoint y ctx lineTo contactPoint x 8 tangent x 50 contactPoint y tangent y 50 ctx stroke Animation loop function animate ctx clearRect 0 0 canvas width canvas height Draw everything drawSphere drawGroundLines Apply physics for let s 0 s 10 s applyPhysics Loop requestAnimationFrame animate Start the animation animate