Bézier Curve

This article is a stub. It may be incomplete, unfinished, or have missing parts/sections. If the article can be expanded, please do so! There may be suggestions on its talk page. (November 2019)

For more information, see Bézier curve on Wikipedia.

A Bézier Curve is a parametric curve with many control points. It is infinitely scalable and often used in computer graphics.

A Bézier curve with two control points is a linear Bézier curve (a line). Three points is a quadratic Bézier curve and four is cubic. Orders higher than this are increasingly uncommon and mathematically complicated. For curves with many control points, it is more common to construct them from many lower order curves.

This article focuses on 2-dimensional Bézier curves but higher dimensions are also possible.

Evaluation

Evaluation of a parametric curve means to find a point along it, given an input parameter. The parameter is essentially how far along the curve, typically normalized so that 0 means the start of the curve and 1 means the end of the curve. To evaluate a Bézier curve, the coordinates of the control points are needed plus the parameter.

For the following examples, custom blocks will be used as they clearly show inputs and outputs. The x and y variables are the output coordinate.

Linear

Evaluation of a linear Bézier curve is the same as linear interpolation between the end points.

define evaluate line at (t) with points: (x1) (y1) (x2) (y2) 
set [x v] to (((x1) * ((1) - (t))) + ((x2) * (t)))
set [y v] to (((y1) * ((1) - (t))) + ((y2) * (t)))

Alternatively:

define evaluate line at (t) with points: (x1) (y1) (x2) (y2) 
set [x v] to ((x1) + (((x2) - (x1)) * (t)))
set [y v] to ((y1) + (((y2) - (y1)) * (t)))

Quadratic

define evaluate quadratic Bézier at (t) with points: (x1) (y1) (x2) (y2) (x3) (y3)
set [x v] to ((((1)-(t)) * ((((1)-(t))*(x1)) + ((t)*(x2)))) + ((t) * ((((1)-(t))*(x2)) + ((t)*(x3)))))
set [y v] to ((((1)-(t)) * ((((1)-(t))*(y1)) + ((t)*(y2)))) + ((t) * ((((1)-(t))*(y2)) + ((t)*(y3)))))

Examples:

• Bezier Curves by ScratchReallyROCKS
• QuadraticBezierCurve by GraphicXs

Cubic

Examples:

• 4 Point Bezier Curve by raytracing

Quintic and Beyond

Examples:

• Bézier Curve Generator by -Rex-Test-
• Bézier curve test 3 by PikachuB2005_test
• Recursive Bezier Curve by Loev06

Drawing

Pen can be used to draw a Bézier curve. For a linear Bézier curve, it is trivial: draw a straight line between the start and end point. For higher orders, use a loop to evaluate the curve at many points and move the sprite along them.

set [t v] to [0]
evaluate quadratic Bézier at (t) with points: (-50) (-45) (-48) (27) (35) (20) ::custom
go to x: (x) y: (y) // go to the start point at t=0
pen down
repeat (10)
  change [t v] by (0.1)
  evaluate quadratic Bézier at (t) with points: (-50) (-45) (-48) (27) (35) (20) ::custom
  go to x: (x) y: (y)
end
pen up

See Also

• Vector Graphics