Our big project -- our goal -- for this mechanics/dynamics portion of Modeling Physics in Javascript is to model a car's suspension system. It'll take us three non-consecutive articles to get there, but it's a worthy system to model. If you can model a car suspension then it's safe to say you know how to model dynamics systems.

Today, we'll be talking about arguably the most important set of building blocks there is: the spring-mass-damper.

The spring-mass-damper is important to learn because it's everywhere in mechanics. Superficially, the system is just a block connected to a wall by a spring and a damper (we'll talk about what a damper is in a bit). But as you can imagine, physics is a can of worms -- and there's a lot more to this simple system than meets the eye.

## The Spring and Hooke's Law

The humble spring is one of the three most important mechanical components to know how to model. Why is the spring so important? How often do you actually see a spring? Sure, they're in lots of mechanical devices, like your car and your door lock and your clicky pen, but it turns out that they're a lot more important than their use in mechanical devices.

The reason springs are so important is because there's nothing in the real universe that's "infinitely rigid". Every object in the universe is a little bit springy, even if you can't tell by eye.

Imagine you're holding a stick from one end and you rest the other end against a cup on a table. You want to push the cup across the table, so you start pushing the stick with your hand. As it turns out, the cup does *not *start moving the instant you start moving your hand. There's a tiny delay -- a fraction of a second -- before the cup starts moving.

That's because the stick isn't "infinitely rigid" -- the molecules in the stick don't all move at once. The stick is actually a spring! If you now re-imagine that scenario with a big, floppy spring, you can immediately see why the cup doesn't start moving instantly: the spring has to compress a little bit first, and only when it compresses enough does the cup start moving. Additionally, the force from your end of the spring takes some time to travel down to the other end of the spring -- think about wiggling a slinky back and forth. You're not moving the whole object instantaneously, but rather you're sending a little shockwave through the spring.

(By the way, the speed of that shockwave is called the "speed of sound", and every different material has a different speed of sound.)

Back to the stick: it's really a spring; a very, very stiff spring (the term "stiffness" actually refers to something slightly different, but for this article I'll use "stiffness" and "spring constant" interchangeably). A big floppy spring isn't very stiff, and so you can compress it quite a bit before it builds up enough force to move the cup. But imagine a stiffer spring: it needs less compression before the cup moves. Even a metal rod is a spring. You can't see it with your eyes or feel it with your hand, but the metal rod *does *compress a little bit before the other end moves. It's just so stiff that you can't see the compression with the naked eye.

So not only can actual springs be modeled as springs (mathematically) but so can sticks and rods! They're just really stiff springs. And you can even connect individual particles to each other by springs to make a realistic fluid or fabric particle simulator. So as I said: springs are everywhere.

Fortunately for us, the basic method of modeling springs is really easy. It's governed by Hooke's Law, which says this:

**F _{spring}** = -k

**Δx**

The force that a spring pushes or pulls with is -k (called the "spring constant", measured in kg / s^{2}) times the displacement. Let's look a little closer:

The displacement is how much the spring is being stretched or compressed. If a spring wants to be 10 inches long (we'll call this "equilibrium length" or "natural length"), but it's being crushed to 8 inches, the displacement is 2 inches.

The spring constant is a characteristic of the spring itself. We'll assume that it's a constant, but that's not true in the real world. The value of "k" changes due to things like temperature and if the spring is stretched to an extreme, but the assumption that "k" is a constant is usually a good one. There are also springs designed to have a non-constant "k", but we'll avoid those too.

The spring constant is also negative; that implies that the spring force *fights* the direction you're displacing the spring. If you stretch a spring, it tries to compress itself. If you compress a spring, it tries to stretch itself. The spring wants to be back to its equilibrium length, and the farther it is from its natural length, the harder it'll push back.

In short: a spring *resists changes in displacement.*

## Dashpots and Viscous Damping

While a spring resists changes in displacement, a damper resists velocity. A spring wants to go back to position 0, while a damper wants to go back to velocity 0. Physically dampers can take many forms, but the one we typically talk about is called a dashpot. The dashpot is a cylinder filled with fluid with a piston that can move through the liquid. You can move the piston through the liquid, but you experience considerable resistance in doing so. Check out the Wikipedia article for a nice image.

Why are dampers so important? Just like springs, *actual* dampers are not used everywhere (in cars we call them "shock absorbers"), but the mathematic model *is* seen everywhere. Dampers often represent the internal frictional losses of a system.

Mathematically, if you had just a perfect mass and a perfect spring and "plucked" it in a vacuum, the mass would oscillate back and forth *forever*, always returning to the same exact two extreme points. But intuition and a lifetime of experience tells us that shouldn't happen, even in a vacuum! The spring itself is made of metal, and when the spring flexes the molecules rub up against each other -- that causes friction, and friction takes away from the energy of the sprung mass. The result is that (even in a vacuum) the spring will warm up slightly and the mass will eventually stop moving.

But it's really difficult to model the internal material friction of the metal in the spring. So instead, we assume the spring is perfect ("ideal"), and add a damper to the system instead. The damper ends up representing the internal losses of the spring. The damper adds a dash of reality to the system, and will make the mass eventually stop moving just like in real life.

The viscous damping force equation is similar to the spring force equation:

**F _{damping}** = -b

**v**

Instead of using the displacement like we did with Hooke's law, we're using the velocity. Instead of the spring constant we have -b, called the "viscous damping coefficient", measured in kg / s. Again, we have the negative sign, which signifies that the force acts *opposite* the velocity. If you're moving one direction, damping will slow you down by pulling in the opposite direction.

## Resonant Frequency

Together, the spring, mass and damper elements form what's called a harmonic oscillator, and that system has some interesting properties: most notably, a "resonant frequency" (or natural frequency). If you've ever whacked a knife against a table, or tapped a wine glass with a fork and listened to it ring, you've listened to a resonant frequency. Because of the springiness of all materials, every object in the world has some frequency that it "likes". If you tap the object, it'll resonate at its so-called "natural frequency".

Additionally, if by some external means, you wiggle the object at that very frequency, you can cause it to vibrate *wildly.* That's what happens when an opera singer breaks a glass with her voice -- she's singing that frequency and therefore "exciting" the glass at its natural frequency. More impressive is the Tacoma Narrows Bridge Collapse Disaster, caused by the wind exciting the bridge's natural frequency. Jump to 1 minute for the oscillation, 3 minutes for the collapse.

If you know the spring stiffness and mass of a spring-mass system, you can calculate the natural frequency. The natural frequency is

*f*_{n} = ( 1 / 2 π ) * sqrt( k / m )

If there's a damper attached to the system, that changes the natural frequency slightly.

If you use external motion to excite a spring-mass-damper system (called forced vibration), the following effects occur:

- If the external frequency is lower than the natural frequency, the mass will move more or less with the external "shaker"
- If the external frequency is near the natural frequency, the mass will move much farther from end to end than the external shaker (think of pushing somebody on a swing), but the mass will also be 90 degrees out of phase with the shaker.
- If the external frequency is higher than the natural frequency, the mass will move less far than the shaker, and will also be 180 degrees out of phase with the shaker (ie, moving in the opposite direction).

Let's build the code and play with this, so we can finally see these effects in action!

## The Code

```
/* Spring stiffness, in kg / s^2 */
var k = -20;
var spring_length = 180;
/* Damping constant, in kg / s */
var b = -0.5;
/* Block position and velocity. */
var block = {x: 100, v: 0, mass: 0.5};
var wall = {x: 30, lx: 30, v: 0, t: 0, frequency: 0};
```

Some of the usual setup above. We create a block object and a wall object. We set a spring_length (for the spring's equilibrium length), and initialize the spring constant and the damping constant.

Inside our loop:

```
var loop = function() {
/* Move the wall. */
wall.t += frameRate;
wall.lx = wall.x;
wall.x = 30 + 70 * Math.sin(2 * Math.PI * wall.frequency * wall.t);
wall.v = (wall.x - wall.lx) / frameRate;
/* Loop continues .... */
```

In our example, the spring and damper are connected to a moveable wall on one end and a block on the other end. The code above moves the wall according to the sine function.

```
/* ... continued from above . */
/* Move the block. */
if ( ! mouse.isDown )
{
var F_spring = k * ( (block.x - wall.x) - spring_length );
var F_damper = b * ( block.v - wall.v );
var a = ( F_spring + F_damper ) / block.mass;
block.v += a * frameRate;
block.x += block.v * frameRate;
}
```

There's not too much magic here. We learned how to use forces in the Gravity and Drag article before this one.

We first calculate the spring force by figuring out the spring displacement: the distance between the wall and block at this moment minus the equilibrium length of the spring. Then we multiply that by the spring constant, which is a negative number.

The damping force is calculated similarly, except using the velocities of the wall and block instead of position.

Not shown is a bunch of code to draw the wall and block. There's also some mouse handling: in this example, you can grab the block with the mouse.

In order to get a good feel for what goes on with spring-mass-damper systems, please try the following procedure:

- Grab the block with the mouse, pull it to the side, and let go. The block will oscillate and die out.
- Increase stiffness to -60 kg / s
^{2}, decrease damping to 0 and pluck the block. The block will oscillate (almost) forever. It won't go forever because of the mathematical solving technique we're using -- more on that next week! - Increase damping to -10 kg / s, pluck the block. There should be no oscillation.
- Set the following: stiffness = -15, damping = -0.3, mass = 0.2
- Set the frequency to 0.5 Hz -- observe that the mass moves more or less with the wall
- Set the frequency to 1.5 Hz -- observe the wild resonant oscillation
- Set the frequency to 3.0 Hz -- observe that the mass moves less than the wall, and also in the opposite direction

What does this mean for a car suspension? Imagine the wall as the road and wheel, and the mass as the rest of the car. If you drive slowly over big, loping bumps, the whole car moves up and down. If you drive quickly over rapid bumps, the tire will bounce up and down a lot but the car will stay more or less in place.

Next week we'll be talking about different methods of solving our equations, and hopefully get something that feels a little smoother.

Here's the JSFiddle: