Modeling Physics in Javascript: Introduction

by Burak Kanber

Physics in Javascript Table of Contents:

Another post that starts with "I love":

I love physics. I really do. Once upon a time I was a real engineer (Master in Mechanical Engineering, hybrid car design, control systems, sustainable energy, etc etc etc) but decided to go back to the software world. Regardless, I still can't get physics out of my head. I read textbooks on quantum mechanics regularly. It's a sickness.

The great thing about physics is that it's not too hard. Well, maybe it is, but once you understand a handful of core concepts, you can do tons of problems. If you can figure out how a ball moves under the influence of gravity, you can also model the motion of a car's suspension. While that sounds like a big stretch, it's really not: it's all tied together by a few basic concepts.

I also enjoy Javascript. I'm not a graphics programmer, and have no knowledge of OpenGL or WebGL, but I like Javascript especially because it controls the fancy HTML5 canvas element.

And, if you can combine your rudimentary knowledge of physics with your rudimentary knowledge of Javascript, you can build really cool physics models and simulations.

With this series, I'm going to teach you how to model physics. We'll use Javascript to do the math and draw the animations to the canvas.

We'll start simple, with a bouncy ball and gravity, and we'll eventually move on to modeling full systems. It's going to be fun. While it'll start slow, I want to end up modeling things like bipedal robots within a couple dozen posts. And you'll be learning physics in the process.

Buckle up. Here's an example of a grandfather clock that actually simulates real physics for the swinging pendulum -- just to whet your appetite:

(PS: the physics in the below example is a little bit fudged, because it was a code-debugging example I used for a class I used to teach; please wait for the full article on the pendulum clock before trying to follow the physics!)