Introduction

I've always had a love of cartoon physics. Who can stop but to laugh out loud watching a Tom 'n' Jerry cartoon or a Road Runner short with Wile E. Coyote? But when I started working with computer graphics and simulations over the course of developing a flight simulator subsystem for US Air force pilot training I quickly needed to ground myself in real-world physics.

More recently I've had some time to re-engage in a long-standing passion project of mine and found myself revisiting the fundamentals of kinematics. The project revolves around a Framework (watch for forthcoming announcements!) I'm developing to support SVG artworks. But, ahead of formally announcing the framework, I'm writing this post for artistic types who might have a general interest in kinematics. Before you can control and bend them to your will in your artworks you need to understand the basic laws of motion. So the purpose of this post is to quickly review basic kinetic principles in order to apply them to good effect in the creation of SVG art for simulations, games, sequential art any any other applications that may be inspired by the muse.

Elementary Kinematics

What is Kinematics?

Kinematics is the study of motion without worrying about the forces that cause it. The focus is on position, velocity and acceleration and how these aspects of motion change over time. Basic kinematic principles have been well-known since Newton. It is my view that understanding basic kinematics will help vector graphics artists be more creative in their artistic endeavors.

Position, Velocity and Acceleration

You don't have to be an expert in physics to produce good game art or illustrations. But I personally have found that a basic understanding of the relations between three aspects of motion can take you a looong way to creating a wide range of assets. Those aspects are position, velocity and acceleration.

1. Position. Position represents the location of an object in space relative to a reference point. Since SVG art is described in 2 dimensions I'll limit the scope of this post to a 2D coordinate system^*. But the principles we'll examine can be readily extended to 3D.

   << INSERT IMAGE >>

   ^* In order to be consisent with 2D rendering in web browsers I'll be treating positive $y$ as down in the 2D space.

2. Velocity. Velocity is the rate of change of position with respect to time. In physics velocity represents both speed and direction and so is conveniently represented as a vector with orientation and magnitude.

   Mathematically, velocity is the first derivative of position.

   $$ v = \frac{dx}{dt} $$

   If you integrate an object's velocity you get its position.

3. Acceleration. Acceleration if the rate of change in velocity over time.

   Acceleration is the first derivative of velocity and the second derviative of position.

   $$ a = \frac{dv}{dt} = \frac{d^2x}{dt^2} $$

   If you integrate an object's acceleration you get its velocity, and as I just observed if you integrate that you get position.

Representing Motion

To keep things simple I like to work by way of example. Suppose we have an object in motion starting at position $x=0$ with an initial velocity $v_0$ of $5 m/s$ and a constant acceleration, $a$, of $2 m/s^2$ . Using the definitions above we can represent its motion as:

1. Velocity over time: $$ v(t) = v_0 + at $$

2. Position over time: $$ p(t) = x_0 + v_0t + \frac{1}{2}at^2 $$

Let's look at the object's motion over the course of a 3 second interval. Where is the object located after 3 seconds?

So, after a 3 second interval we see the object has moved 24 meters.

A Javascript Implementation

With this in mind we can consider a programmatic implemenation of these formulas in Javascript. The forthcoming framework I'm developing represents movable objects (namely sprites) using a base class that encapsulates the math.

/**
  * Base class for movable entities in my forthcoming SVG Artworks 
  * Framework. The Moveble base class encapsulates the math necessary
  * to move objects around the 2D SVG canvas applying the basic 
  * kinematic principles relating position to velocity and acceleration
  * over time. This class facilitates the creation of a wide variety of
  * animations and simulations.
  */
class Movable {
    constructor(svg_id, x, y, vx = 0, vy = 0, ax = 0, ay = 0) {
        this.id = svg_id;
        this.svg_group = document.getElementById( svg_id );
        this.px = x;
        this.py = y;
        this.vx = vx;
        this.vy = vy;
        this.ax = ax;
        this.ay = ay;
    }

    move(deltaTime) {
        // Update velocity based on acceleration
        this.vx += this.ax * deltaTime;
        this.vy += this.ay * deltaTime;

        // Update position based on velocity
        this.px += this.vx * deltaTime;
        this.py += this.vy * deltaTime;
    }

    render() {
        this.svg_group.setAttribute( 
            'transform',
            `translate( ${this.px}, ${this.py} )`
        );
     }
    ...
}
    

SVG Artworks in Action!

And here's an example of the application of the principles in action. Below you should see a demo in the form of something between a toy and a game illustrating the basic kinematics application with the classic example of projectile motion. The example illustrates a cannon ball shot and in playing with it you can observe the iconic parabolic trajectory of an object subjected to forces of gravity and drag represented in velocity and acceleration over time.

Note: you can modify the cannon ball's trajectory by changing the x and y values associated with its velocity. Back in the olden days, the only way to adjust your aim was to to change the cannon's orientation and/or add more gunpowder to increase its explosive force.

Conclusion

So that's it for now. Inspired by work on my forthcoming SVG Artworks Framework the purpose of this post is merely to share observations on the fundamentals of kinematics as applied to illustration with 2D vector graphics. We looked at the basic math describing motion as a function of position, velocity and acceleration over time and played a bit with toy developed through applying these basic equations. Understanding kinematics can take you a long way to developing a wide range of applications in game art, simulations, educational materials, and much much more. Stay tuned for more SVG artwork support coming soon!