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 : Float

, y : 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 :

Float

-> Spline

-> { point :

{ x : Float

, y : Float

}

, t : 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 : Float -> Point

, steps : Int

, start : Float

, end : Float

}

-> List Spline

Trace out a curve by sampling it at regular intervals.

Return a list of splines that approximates the curve.

Splitting

splitAt : 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 : Float -> Spline -> ( Spline, Spline )

splitList :

Float

-> List Spline

-> { before : List Spline

, after : List Spline

}

takeBefore : Float -> List Spline -> List Spline

takeAfter : Float -> List Spline -> List Spline

Modification

scale : Float -> Point -> Point

translateBy : Point -> Point -> Point

withVelocities : Float -> 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)

mdgriffith/elm-bezier/2.0.0

Bezier

Splitting

Modification

Serialization

Modules