JavaScript & HTML5: Implementing the 2D Physics Engine Core

JavaScript & HTML5: Implementing the 2D Physics Engine Core
Prev
Next »

Implementing the 2D Physics Engine Core using JavaScript & HTML5In the previous article, you implemented functionality to support basic drawing operations. Drawing is the first step to constructing your physics engine because it allows you to observe the output while continuing to expand the engine’s capabilities. In this article, two critical components for 2D physics simulations, the core engine loop and rigid shape class, will be examined and added to the engine. The core engine loop, or the engine loop, allows the engine to control and handle the real-time interaction of game objects, while the rigid shape class abstracts and hides the detailed information such as positions and rotation angles that are required for future physics calculations.

This blog begins with the brief coverage of a simple vector calculation library. It is assumed that you have a background in basic vector operations in 2D space, and thus the required code is provided without extensive conceptual explanations. The article then introduces you to a rigid shape class, a critical abstraction that will encapsulate all the information of an object that is required in a physics simulation, for example (as will be introduced in a following blog) information such as width, height, center position, mass, inertia, and friction. This information presented through the rigid shape class will be utilized throughout the engine’s evolution into a fully featured 2D game physics library. For this article you will begin with the creation of the rigid shape class that only contains information for drawing of the object onto the canvas. Lastly, you will be introduced to one of the more important components of the physics engine, the core engine loop.

After completing this article, you will be able to:

  • Control the position and rotation of objects based on user keyboard input.
  • Simulate gravity that affects all objects in the scene and the ability to toggle gravity on and off.
  • Select and display the properties of a specific object.
  • Reset the scene.

 

Prev
Next »
Comments (0)
There are no comments posted here yet
Leave your comments
Posting as Guest
×
Suggested Locations