top of page
Search
  • cedarcantab

Physics Simulations in Javascript: Introduction

Updated: Jun 19, 2023

(Let's code a Physics Engine from scratch)


When you code any game involve stuff moving about and colliding with each other using some kind of game programming framework like Phaser, there's something called a physics engine working in the background taking care of a lot of maths behind the motion of the objects. The beauty of modern game creation frameworks is that you don't need to understand how it works. If your objective is to create games, you should not expend effort in understanding physics engines, rather spend your creativity on the game logic, art etc. This is just for intellectual curiosity.


The world of physics engine - or more generally simulating the motion of objects according to the laws of physics - is fascinating from an intellectual perspective, deep and sometimes dark (!).


For those still reading, join me in my exploration of physics simulations by creating a physics engine.


Starting at the Beginning


What is a Physics Engine?


Generally speaking, the job of a physics engine is to:

  • move game objects around the screen according to some rules resembling law of physics

  • checking collision between game objects

  • making game objects react when they collide against each other





Laws of Physics


As stated above, fundamentally, physics engines are about moving objects around according to laws of physics. And with laws of physics, inevitably there's a lot of maths. The more complex the behaviour, the more complicated the maths get. However, for 2D rigid body physics engines, you will get an awful long way with just the following.


Newton's laws of motion

Top of the list are the three Newton's laws of motion, summarised in the here. They are:


  1. A body will remain at rest or continue to move in a straight line at a constant speed unless acted upon by a force.

  2. The acceleration of a body is proportional to the resultant force acting on the body, and is in the same direction as the resultant force.

  3. For every action there is an equal and opposite reaction.


Newton's 1st law

Sometimes referred to as Law of Inertia, in practical terms this means that a game object will remain stationary or move at a constant velocity unless a force is being applied to it.


In the real world there are multiple forces at play all the time, such as gravity, wind and friction which are being applied to an object, in addition to say, a driver of a car pressing down on the acceleration pedal.


Newton's 2nd law

Mathematically we express the second law of motion as follows, where F is the force on the body, m is the mass and a is the resulting acceleration.




The 1st law tells us that when force is applied, the velocity (speed) of the object is changed. The 2nd law defines how the speed changes.


Combined with the definition of acceleration (a = change in velocity / elapsed time), the above becomes:




and if both sides are multiplied by delta t, it becomes (relevant later). In words, it means that force multiplied by time equals the mass multiplied by change in velocity.


Introducing a couple of additional concepts, impulse and momentum (will become relevant later).


Momentum

Momentum is the product of a body’s mass and velocity.




Impulse

Force multiplied by time is known as impulse.




Since mass multiplied by velocity is the momentum, the right hand side of the equation is the change in momentum; in words it is saying that Impulse = Change in Momentum, or:




Newton's 3rd law

This law gives clues as to what happens when two objects collide. For example, when 2 balls collide, the speed and direction of both the balls are changed. An intuitively less obvious example is a ball on top of a table - there is a force downwards acting on the table due to gravity, and there is an equal force upward from the table, which keeps the ball from "falling" down. The alternative wording of the law "forces of the two objects on each other are always equal and are directed in opposite directions" may be easier to interpret in this context. Expressed mathematically:




Note that the forces are equal, not the acceleration. The acceleration is inversely proportional to the mass of the object (as per the 2nd law).


Where these laws become relevant

The 1st and 2nd laws are particularly relevant for moving objects around the screen.


The 3rd law is relevant when thinking about how objects behave when they collide.


Also relevant to behaviour after collision is the law of conservation of momentum and law of conservation of energy. I won't go into detail on this for now since I will only need it when I (eventually) get to collisions.


Conservation of Momentum

Law of conservation of momentum states that, if no external force acts on a closed system of objects, the momentum of the closed system remains constant.


The total momentum of a "system" is the sum of the momenta of each object in that system.




This logic behind this theorem can be expressed in a different way, referred to the impulse-momentum change theorem. This is saying that when two objects collide, each experience equal and opposite momentum changes.




Conservation of (Kinetic) Energy


Kinetic energy is a form of energy that an object has by reason of its motion. The translational kinetic energy of an object of mass m and velocity v, is equal to one-half of the mass, m, and the squsre of its velocity





A perfectly elastic collision is defined as one in which there is no net conversion of kinetic energy into other forms (such as heat or noise). For the brief moment during which the two objects are in contact, some (or all) of the energy is stored momentarily in the form of elastic potential energy. But if we compare the total kinetic energy just before the collision with the total kinetic energy just after the collision, they are found to be the same. We say that the total kinetic energy is conserved.





Awareness of the above laws will get us a long way for coding linear motion physics.


Useful References







21 views0 comments
記事: Blog2_Post
bottom of page