Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

rendering

2D bounce simulation using launch Angle, initial velocity, gravity, elasticity and friction

Rebound expressions applied to position, rotation, and scale properties

Overview of Bounce

Our ultimate goal is to use an expression that simulates a bounce at the end of the keyframe movement. To understand how the bounce simulation works, it is useful to start with a scenario that may be more familiar – a projectile bouncing as it hits the ground/floor. For simplicity, let’s limit it to two dimensions. There are many factors that come into play when you fire a 2D projectile: gravity, the elasticity of the object, the Angle of launch, the initial velocity, and sometimes friction. The expression that simulates this motion must essentially decompose the initial velocity into x and y components. Gravity is acting in the y direction. With each bounce, the object loses y velocity based on elasticity and x velocity based on friction. Take all of these factors into account and you get the following 2D bounce expression:

elev = degreesToRadians(75);
v = 1900;
e = 7.;
f = . 5;
g = 5000;
nMax = 9;
tLaunch = 1;

vy = v * Math.sin(elev);
vx = v * Math.cos(elev);
if (time >= tLaunch) {
    t = time - tLaunch;
    tCur = 0;
    segDur = 2 * vy / g;
    tNext = segDur;
    d = 0; // x distance traveled
    nb = 0; // number of bounces
    while (tNext < t && nb <= nMax) {
        d += vx * segDur;
        vy *= e;
        vx *= f;
        segDur *= e;
        tCur = tNext;
        tNext += segDur;
        nb++
    }
    if (nb <= nMax) {
        delta = t - tCur;
        x = d + delta * vx;
        y = delta * (vy - g * delta / 2);
    } else {
        x = d;
        y = 0;
    }
    value + [x, -y]
} else
    value
Copy the code

There are a few things to note about this expression. The bounce parameters — Angle of launch (ELEV), initial velocity (v), elasticity (e), friction (f), and gravity (G) — are all defined at the top of the expression. Note that you must also define the maximum bounce number (nMax) to prevent the expression from disappearing into endless calculations of smaller and smaller bounces. This version of the expression also contains a variable to control the time to launch (tLaunch).

Keyframe bounce

Now let’s look at this expression, and that’s the whole point of this part. This expression uses the speed at which the property enters the keyframe to calculate a bounce (in the opposite direction from entering the animation) with a series of decreasing bounces. This expression uses most of the logic in basic 2D rebound expressions, except that you don’t have to worry about the launch Angle and initial velocity (which is taken from the keyframe) or friction. This expression can be used for most attributes. See the above (second) GIF for examples that apply to scale, position (2D and 3D), and rotation properties. Expressions:

e = 7.;
g = 5000;
nMax = 9;

n = 0;
if (numKeys > 0) {
    n = nearestKey(time).index;
    if (key(n).time > time) n--;
}
if (n > 0) {
    t = time - key(n).time;
    v = -velocityAtTime(key(n).time - 001.) * e;
    vl = length(v);
    if (value instanceof Array) {
        vu = (vl > 0)? normalize(v) : [0.0.0];
    } else {
        vu = (v < 0)? -1 : 1;
    }
    tCur = 0;
    segDur = 2 * vl / g;
    tNext = segDur;
    nb = 1; // number of bounces
    while (tNext < t && nb <= nMax) {
        vl *= e;
        segDur *= e;
        tCur = tNext;
        tNext += segDur;
        nb++
    }
    if (nb <= nMax) {
        delta = t - tCur;
        value + vu * delta * (vl - g * delta / 2);
    } else {
        value
    }
} else
    value
Copy the code

As before, you can control the bounce characteristics by adjusting the elasticity (E) and gravity (g) variables.