mdgriffith/elm-bezier/1.0.0

NOTE: the latest version is 2.0.0

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
}
-> { one : Point
, two : Point
, three : Point
, four : Point
}

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
-> { 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

Takes a bezier and normalizes it so that it goes from (0,0) to (1,1).

{ toPoint : Float -> Point
, steps : Int
}
-> List Spline

Given

  • toPoint function which takes 0-1 and returns a point, and
  • steps The number of steps to render

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 )
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)