Mechanics and web development are not really topics that can be easily combined. Nevertheless, I'm going to try to introduce you to the world of kinetics, a branch of (technical) mechanics, using my JavaScript library Whiskey Kinetics.

Don't expect to learn a lot of useful things.

Kinetics and the question of equilibrium

In mechanics, kinetics basically describes the movement of a body, taking into account forces (and masses).

Similar to statics, also a branch of mechanics, all forces acting on a body must neutralize each other. The sum of all forces must therefore always be 0!

Want an example?

Imagine an apple hanging on a tree. The apple has a mass of 0.1 kg. A weight force of 0.981 N acts vertically downwards on this apple due to the acceleration of gravity. This follows Newton's 2nd law mass * acceleration = force: 0.1 kg mass multiplied by the acceleration of gravity of 9.81 m/s² results in a weight force of 0.981 Newton.

However, the apple does not fall, but remains in place. Therefore, exactly the same force must act in the opposite direction on the apple at the same time. This is the only way it can remain in place. This counterforce is exerted by the apple's stem, which in turn is attached to the tree. The stem therefore exerts a force of 0.981 N on the apple, but in the opposite direction to the weight force. 0.981 N - 0.981 N = 0. The equilibrium of forces is established. The apple hangs.

Enough theory. Let's simulate it in Whiskey Kinetics by injecting the following web component into the DOM:

  width="800"
  height="450"
  data-worker="./wk-apple.mjs"
  data-attr-duration="3">

ℹ️ As you are reading a static version of this article, you will only see an animated GIF of the result. I therefore recommend that you read the original article and run the simulation in your browser.

Don't be confused if nothing happens. You are looking at a fairly static simulation. But that will change in the following.

As time goes on, the apple grows and eventually reaches a juicy mass of 0.2 kg. The stem would now have to exert a force of 1.96 N, which it cannot do due to its strength. The stem breaks, and suddenly, it can no longer withstand the force of the weight. The apple falls.

But what about the force equilibrium? The constant weight force of 1.96 N still acts on the apple when it falls. Also, when falling, the forces acting on the apple must neutralize each other. This means that a new, invisible force must be acting on the apple somewhere so that Newton's 2nd law is not violated.

The so-called inertial force sets in and acts against the direction of acceleration. You know this force from a vehicle accelerating forwards. The inertial force pushes you backwards into the seat.

In the case of our apple, just like the good old force of the stem, it acts upwards against the direction of acceleration (direction of fall). When the stem breaks, it is immediately 100% present and keeps the balance of forces as if the stem had never broken. In purely mathematical terms, the inertial force is an equivalent replacement for the stem. In reality, however, it is somehow not because the apple still falls and obviously cannot adequately replace the stem. The inertial force is therefore also referred to as an pseudo force because it is somehow different. But that shouldn't bother us any further at this point. The important thing is that the apple falls and the equilibrium of forces is still established.

  width="800"
  height="450"
  data-worker="./wk-apple.mjs"
  data-attr-duration="5.4"
  data-attr-grow="true">

Let's assume that the tree is standing on a very deep precipice and the apple falls for a really long time. How would the story continue? After all, the force of weight is constant. And according to our current knowledge, the inertial force would also be constant. However, a constant inertial force would result in a constant (gravitational) acceleration and this in turn would cause the apple to fall faster and faster. If the precipice were infinitely deep, the falling speed of the apple would also be infinitely fast at some point. Even before Einstein can veto this, we learn about another force: the drag force exerted by the surrounding air.

The drag increases as the speed of the apple increases and acts in the same direction as the inertial force, i.e., in the opposite direction of the weight force. Due to the equilibrium of forces, the inertial force must inevitably become smaller. However, a smaller inertial force only means that the apple no longer accelerates quite as quickly. But it still accelerates, and as a result, the drag force becomes even greater. At some point, the time is reached where the drag force is just as great as the weight force of the apple. Mathematically, there is then no more room for the inertial force. It becomes 0. At that moment, the apple has reached its final speed and, from then on, falls at a constant speed.

  width="800"
  height="450"
  data-worker="./wk-apple.mjs"
  data-attr-duration="20"
  data-attr-grow="true">

This is how kinetics works. Simply put.

Whiskey Kinetics

Whiskey Kinetics is the name of my library, which I use to calculate such things. Admittedly, it offers no real added value. I just developed it for fun. You can have a look at it on GitHub.

As the previous interactive examples show, calculation scenarios can be easily integrated via web components.

The custom element always refers to the same simulation file (wk-apple.mjs) and generates different results based on a few modified parameters that you can define yourself (data-attr-duration for the duration of the simulation and data-attr-grow for a growing apple).

In the wk-apple.mjs itself, the scenario is modeled, the individual frames are calculated within a web worker thread, and then the corresponding frames are rendered in a Canvas element using window.requestAnimationFrame(). Each frame represents a certain period of time, for example 0.001 seconds. The smaller the period, the more accurate the simulation and the longer the calculation time.

Each calculation scenario consists of objects of the type

• Particle, which represents a mass point, or
• Link, which establishes a connection between two mass points and can simulate real material behavior.

There are no more types or classes. These two are sufficient to carry out a large number of different simulations.

The apple scenario, for example, consists of only 3 objects:

• Apple (Particle)
• Tree (Particle, which here merely fulfills the role of a fixed point)
• Stem (Link that connects the tree to the apple)

Schematic structure of the wk-apple.mjs:

import { Particle, Vec2D, Link } from "./whiskey-kinetics.mjs";

onmessage = (e) => {
  // Modeling the scenario
  const tree = new Particle(/* ... options ... */);
  const apple = new Particle(/* ... options ... */);
  const stem = new Link(tree, apple, {/* ... options ... */});

  // Set simulation and animation parameters
  const duration = Number(e.data.duration);
  const steps = duration * 1000;
  const durationPerStep = duration / steps;
  const fps = 60;
  const denominator = Math.round(steps / duration / fps);

  // Prepare frame data for the animation (result)
  const frames = {
    posApple: [],
    speedApple: [],
    weightApple: [],
    isGrowing: [],
    inertialForce: [],
    dragForce: [],
    forceStem: [],
  };

  // Calculate the frames
  for (let i = 1; i < steps; i++) {
    // Timestamp
    const time = i * durationPerStep;

    // Update apple's weight
    const isGrowing = e.data.grow === "true" && !stem.destroyed;
    if (isGrowing) {
      apple.mass = initalWeightApple + time / 50;
    }

    // Apply gravity to the apple
    apple.addAcceleration(new Vec2D(0, -9.81));

    // Update / Calcuate the apple and stem
    apple.update(time);
    stem.update(time);

    // Record relevant frame data
    if (i % denominator === 0) {
      frames.posApple.push(apple.position.y);
      frames.speedApple.push(apple.velocity.y);
      frames.weightApple.push(apple.mass);
      frames.isGrowing.push(isGrowing);
      frames.inertialForce.push(/* ... */);
      frames.dragForce.push(/* ... */);
      frames.forceStem.push(/* .. */);
    }
  }

  // Simulation is done
  postMessage({ frames, fps });
};

// In this function, the result is drawn based on the calculated
// frame data ('data.frames') and the current frame index.
export function draw(ctx, frameIndex, data) {
  ctx.beginPath();
  ctx.ellipse(data.frames.posApple[frameIndex]);
  // ....
}

More examples

This 4-joint crane, which moves a heavy ball and gets faster and faster, shows a somewhat more complex scenario:

  width="800"
  height="450"
  data-worker="./wk-four-bar.mjs">

Both the apple examples and the crane are modeled abstractly, as the geometry of the objects (or parts) is not really important, but rather the movements they perform. However, if you want to examine the object itself, you can use the same components (Particle, Link) to model geometries as a mesh. This allows you to load and inspect parts with a specific geometry. The principle is called Finite Element Method.

To illustrate this, the last example shows a simple beam with cut-outs that is pulled at the end of the beam. Let 's see what weak points the component/geometry has and where it is likely to break.

  width="800"
  height="300"
  data-worker="./wk-beam.mjs">

Recap

• Forces act on objects. All forces must neutralize each other. Always.
• Whiskey Kinetics is purely a fun project. Nevertheless, it can be used to simulate realistic material and movement behavior in both abstract and geometric ways.
• The apple doesn't fall far from the tree, unless the precipice is very deep.