Custom bounce easing function

259 Views Asked by At

I'm trying to write a bounce easing function with an adjustable amount of bounciness. This is the one I'm currently using but it's much too bouncy for my use case: https://easings.net/#easeOutBounce

Have created a tool to help visualise the functions in JS: http://slot.works/tools/easing/

Ideally, I'd love to be able to control the number of bounces and the "bounciness" of each bounce, but I can't into maths so not sure how to even go about this.

1

There are 1 best solutions below

0
On

HINT: use a quadratic function.
If you take gravity $g$, and the ball begins in the air $X$ meters high while stationary, then we can write $$f_1''(t)=g$$ Integrating, $$f_1'(t)=gt+c_0$$ but the velocity at $t=0$ is $0$, so $c_0=0$. Next, $$f_1(t)=\frac{1}{2}gt^2+c_1$$ At $t=0$, $f_1(t)=X$, so $c_1=X$ giving $$f_1(t)=\frac{1}{2}gt^2+X$$ We can find the place where it hits the ground - $$ f_1(t)=0 \\ -\frac{2X}{g}=t^2 \\ t=\sqrt{-\frac{2X}{g}} $$

I'll leave the rest to you, but here are the steps you need to do:

  • find the velocity by substituting that value into $f_1'(t)$, and multiply it by some number $0<k<1$, and make it positive.
  • Use that number as your initial velocity, and use $0$ as your initial position. ($g$) is still the acceleration
  • Repeat the steps above but with $f_2(t)$, and solve for $c_1$ and $c_2$.
  • Remember that initial velocity and position occur at $t=\sqrt{-\frac{2X}{g}}$ for your second function.

Final note: Since you appear to be using this for programming, perhaps it would be easier to simulate it rather than precalculate the functions?