mdgriffith/elm-bezier/2.0.0

Bezier.Spring

Spring calculations!

This module really does 3 things.

  1. Find a spring that will settle in a certain amount of time.
  2. Calculate the position of an item at a certain time using a spring.
  3. Calculate the Bezier segments that will approximate the spring motion.
type alias Parameters =
{ stiffness : Float
, damping : Float
, mass : Float
}

The parameters that define a spring.

Check out the presets or new if you want some help constructing these values.

new :
{ wobble : Float
, quickness : Float
, settleMax : Float
}
-> Parameters

Normally when working with springs you have to choose a stiffness and a damping and they'll have seemingly arbitrary values like 216 or 14. This can be very hard to develop an intuition for!

Your first option is to use one of the preselected springs.

The next option could be using this function.

It takes:

  • wobble (0-1) - How wobbly you want the spring to be.
  • quickness (0-1) - How quickly you want the spring to move.
  • settleMax (ms) - The maximum time you want the spring to take to settle.

Preselected Springs

noWobble : Parameters
gentle : Parameters
wobbly : Parameters
stiff : Parameters
at :
{ spring : Parameters
, target : Float
, initial :
{ velocity : Float
, position : Float
}
}
-> Duration
-> { velocity : Float
, position : Float
}
Calculate the spring's current position and velocity given a spring, a duration, a target position, and an initial state.




Duration is in milliseconds. Initial and returned velocities are in position units per second.
{ spring : Parameters
, target : Float
, stepSize : Float
, initial :
{ velocity : Float
, position : Float
}
}
-> Float
-> { velocity : Float
, position : Float
}

Iteratively step through a spring to get the final position and velocity.

at is faster, but possibly less accurate?

settlesAt : Parameters -> Float

We can detect when a spring will settle if it is underdamped (meaning it oscillates before resting). https://en.wikipedia.org/wiki/Settling_time

However for critically and overdamped systems it gets a lot more complicated. Fortunately, I'm not sure that that's an issue as I don't think we want to model overdamped spring systems for animation. https://electronics.stackexchange.com/questions/296567/over-and-critically-damped-systems-settling-time

Parameters
-> { position : Float
, velocity : Float
}
-> Float
-> List Spline

Given a spring, a starting position and velocity, and a target position, calculate the list of Bezier segments that will approximate the spring motion.

The segments' x coordinates are elapsed time in milliseconds, from zero to settlesAt spring. Their y coordinates are positions. Initial velocity is in position units per second.

This assumes that the spring settles. The endpoint samples the spring at its estimated settling time; it is not forced to the exact target position.