Suitable interpolation for animating explosions

Question

Is there a standard interpolation function for animating explosions? Like there is with smoothstep or smootherstep for walking animations or cars going from point A to B.

I'm assuming the explosion needs to grow very fast at the beginning and then slow down - how much in relation to the default linear interpolation, I don't know.

I've tried inverse smoothstep and inverse squared from this article: Interpolation Tricks, but none quite cuts it, maybe I'm applying them wrong.

Answer 1

There are multiple easing functions (https://easings.net) that can help you, more specifically "ease out" functions (faster at the beginning, slower at the end).

I have all of those in the link implemented, but in my opinion, the ones more suitable for an explosion effect are: quartic ease out, quintic ease out, exponential ease out and circular ease out.

I'm assuming the explosion needs to grow very fast at the beginning and then slow down - how much in relation to the default linear interpolation, I don't know.

I've tried inverse smoothstep and inverse squared from this article: Interpolation Tricks, but none quite cuts it, maybe I'm applying them wrong.

Work with easing functions as if you were working with a linear function, for each frame you add a constant to the value that you pass to the function:

/* EXPLOSION INITIALIZATION */
progress = 0.0;
frame_index = 0;

/* EXPLOSION UPDATE METHOD */
frame_index = quartic_ease_out(progress) * total_frames;
/* Add the constant 0.1 for the next frame */
progress = progress + 0.1;
if (progress > 1.0) {
  /* The explosion is over */
}

/* EXPLOSION DRAW METHOD */
draw_sprite(x, y, animation[frame_index].pixels);

The function receives an value from 0.0 to 1.0, and outputs an value form 0.0 to 1.0. Notice that you don't have to do any tricks with the value that you are passing to the function, you just need to update it linearly, and the function returns the proper "smoothed" value for you.

Answer 2

Yes, the velocities are the highest at detonation time, and as the explosion progresses, the system loses energy.

So fast growth that fizzles out would be a good model.

So a function with a fifth power could make for a suitable curve.

You could also simply raise x to the power of 0.2 over a 0..1 range to get a similar response.