Simple Website

Introduction
Part 1: Linear Forces
Part 2: Rotational Forces

Introduction: Rigid Body Physics

+ You're most likely here because you have some interest in the world of rigid body physics. Maybe you have some knowledge of rendering via OpenGL or Vulkan, + and you want to begin watching your up-until-now static scene come to life. Well, you're in the right place! In the course of this tutorial series I will walk + you through the entirety of a 2D rigid body physics system entirely in the web. All of this information will be extendable to other languages, but we will use + JavaScript and WebGL in these blog posts. Additionally, much of the information presented here can be extended to 3 dimensions, but 3D carries some complications + with it, that we will discuss in future blog posts. +

+ In implementing a rigidy body physics system, we're primarily interested in two sub-fields of physics, namely dynamics and kinematics. Although I'm + far as can be from being an expert in either of these fields, I will explain - from a programmer's persepctive - what they mean to me: +

+ Kinematics is the study of how an object's movement changes over time. These are the classic position, velocity, and acceleration equations + that you're most likely familiar with from high school or college physics. +
+ Dynamics is the study of whats causes kinematic movement. These are the classic force and momentum equations that you may already be familiar + with as well. +

+ Finally, I must provide a disclaimer that all of rigid body systems are very math-y. You will need to know a decent amount of vector calculus and linear algebra to really understand + what's going on here. I am going to assume that you have this knowledge. If you don't already have this knowledge, I will try and provide some resources on the Books + n' References page of the website. +

Part 1: Linear Forces

+ 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. +

+ Let's begin by recalling the relationships between acceleration, velocity, and position. +

+ Knowing all this, you should be able to understand the following source code fairly easily; +

+                        
+function update(dtSeconds) {
+    // Add up the forces acting on the circle
+    const GRAVITY = 9.8;
+    const lGravityForce = vec2(0, -1.0 * (lCircle.mass * GRAVITY));
+    lCircle.force = addVec2(lCircle.force, lGravityForce);
+
+    // Figure out acceleration (a = F / m)
+    const lCurrentAcceleration = scaleVec2(lCircle.force, 1.0 / lCircle.mass);
+
+    // Calculate the new velocity: v = v0 + a * t
+    lCircle.velocity = addVec2(lCircle.velocity, scaleVec2(lCurrentAcceleration, dtSeconds));
+
+    // Update the position based on velocity: x = x0 + v * t
+    lCircle.position = addVec2(lCircle.position, scaleVec2(lCircle.velocity, dtSeconds));
+
+    // Update the model matrix accordingly
+    lCircle.model = translateMatrix(mat4(), lCircle.position.x, lCircle.position.y, 0);
+
+    // Reset the force vector for the next update
+    lCircle.force = vec2()
+}
+                        
+

Force:N/A
Acceleration:N/A
Velocity:N/A
Position:N/A

+ +

+ + +

Part 2: Rotational Forces

+ +

+ + +

+ +