Time-Based Animation in Javascript using RequestAnimationFrame

Introduction

In this article I'll discuss key aspects of web-based animation with javascript. In particular, I'll be focusing on time-dependent animation with RequestAnimationFrame.

TODO: Expand a bit. Discuss the upcoming SVG Artworks Framework...

The Animation Loop

All animation occurs wihin a very basic loop. This was true from the inception of animated artworks from the early days of film with handrawn images to modern day computer-based systems.

[[ INSERT IMAGE ANIMATION LOOP ]] 1. update 2. render 3. wait

All animation involves rendering a scene, waiting for an interval to pass, updating the scene and rendering the updated imagery over and over again.

TODO: ELABORATE A BIT

Request Animation Frame

Web-based animation has been around since the inception of the WWW. Today, web-based animation is achieved using HTML5, CSS and Javascript. There are a few ways in which animation can be acheived in Javascript. This article focuses on the use of RequestAnimationFrame.

Documentation

For basic animation, using RAF may be simple enough. But for serious animations (think complex artworks) you need time-based animations.

Elementary Kinematics

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 I quickly needed to ground myself in real-world physics. 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 section is to quickly review basic kenetic principles in order to apply them to good effect in the context of the SVG framework.

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.

Position, Velocity and Accelaration

Position. Position represents the location of an object in space relative to a reference point. Since the SVG Artworks Framework is mainly 2D we'll consider 2D descriptions in Cartesian coordinates. Position is represented as a vector, $\vec v$, with coordinates $x$ and $y$ (horizontal and vertical).

<< INSERT IMAGE >>

Note: In order to be consisent with 2D rendering in web browsers this discussion treats positive y as down in the 2D space.
Velocity. Velocity is the rate of change of position with respect to time. In physics velocity represents both speed and direction (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.
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.

Example

Let's look at a simple 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:

Velocity over time: $$ v(t) = v_0 + at $$
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?

$$ \begin{align} p(3) &= 0 + (5 \times 3) + \frac{1}{2}(2 \times 3^2) \\ &= (15) + \frac{1}{2}(2 \times 9) \\ &= 15 + 9 \\ &= 24m \end{align} $$

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

An Important Note on Units

In going over these computations you'll notice I've been using meters as the unit of measure. And this brings up an important point. If you're working on efforts concerning simulations, games, etc., you have to keep your units in mind when working out computations necessary to simulate forces acting on your objects. For example, in creating a particle effect if I want to simulate forces like gravity and drag I can apply real-world formulas but will have to translate real-world units associated with those formulas to my artworks space. Since the SVG Artworks Framework is mainly concerned with rendering SVG graphics I'll typically consider pixels as units. TODO: make this better. Look for units discussion in UNREAL?

RESUME HERE...

A Javascript Example

INSERT JAVASCRIPT IMPLEMENTATIONS

SVG Artworks in Action!

This demo of the NN SVG ARTWORKS FRAMEWORK illustrates the application of the kinematic expressions described in this artical to simulate gravitational forces and resistance acting on an object's velocity. Somewhere between a toy and a game...