mdgriffith / elm-bezier / Bezier

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


type Spline


type alias Point =
{ 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

Return a list of splines that approximates the curve.

Splitting

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

Modification

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

Serialization

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)