Bézier(pronounced bez-E-ey) curves are super cool and commonly used in animation!
Here is an excellent video on them..
This module borrows a lot of code from Elm Geometry, but is much more focused on animation needs for Elm Animator.
fromPoints : Point -> Point -> Point -> Point -> Spline
{ x : Basics.Float, y : Basics.Float }
toPoints : Spline -> { one : Point, two : Point, three : Point, four : Point }
standard : Spline
A very common Bézier curve that goes from (0,0) to (1,1) with control points at (0.4,0) and (0.2,1).
This is the standard transition curve for a lot of animation systems.
fromCatmullRom : Point -> Point -> Point -> Point -> Spline
toCatmullRom : Spline -> { one : Point, two : Point, three : Point, four : Point }
Note This only approximates a Catmull-Rom spline, it won't successsfully round trip with toCatmullRom
because the control points are lost.
atX : Basics.Float -> Spline -> { point : { x : Basics.Float, y : Basics.Float }, t : Basics.Float }
pointOn : Spline -> Proportion -> Point
Given a spline and a proportion, return the point on the spline at that proportion.
first : Spline -> Point
controlOne : Spline -> Point
controlTwo : Spline -> Point
last : Spline -> Point
firstDerivative : Spline -> Proportion -> Point
secondDerivative : Spline -> Proportion -> Point
normalize : Spline -> Spline
Takes a bezier and normalizes it so that it goes from (0,0) to (1,1).
trace : { toPoint : Basics.Float -> Point, steps : Basics.Int } -> List Spline
Given
toPoint
function which takes 0-1 and returns a point, andsteps
The number of steps to renderReturn a list of splines that approximates the curve.
splitAt : Basics.Float -> Spline -> ( Spline, Spline )
Split a spline at a particular parameter value, resulting in two smaller splines.
Note, this is not the intuitive version you're thinking of.
splitAtX : Basics.Float -> Spline -> ( Spline, Spline )
splitList : Basics.Float -> List Spline -> { before : List Spline, after : List Spline }
takeBefore : Basics.Float -> List Spline -> List Spline
takeAfter : Basics.Float -> List Spline -> List Spline
scale : Basics.Float -> Point -> Point
translateBy : Point -> Point -> Point
withVelocities : Basics.Float -> Basics.Float -> Spline -> Spline
The math here comes the fromEndpoints
constructor in elm-geometry
https://github.com/ianmackenzie/elm-geometry/blob/3.9.0/src/CubicSpline2d.elm#L174
toPath : Spline -> String
Render a spline to a string that can be used in SVG
e.g. (M100,250 C100,100 400,100 400,250)
This uses absolute coordinates.
toCss : Spline -> String
Normalize and render to a string that can be used in CSS
e.g. cubic-bezier(0.1, 0.7, 1.0, 0.1)