Bezier curve
lastmod 2026-03-20created 2017-05-2310 edits
A Bézier Curve is a curve of degree n-1 obtained from n points, and it holds a fairly important place in the field of numerical analysis. In particular, cubic Bézier curves are used to generate smooth curves in PostScript fonts, METAFONT, GIMP, and so on, while TrueType fonts use the quadratic Bézier curve algorithm.
in HTML5
See the HTML:canvas#quadraticCurveTo and HTML:canvas#bezierCurveTo APIs. They are quadratic and cubic Bézier curves, respectively.
Implementation
Implemented with godot. The language used is C#.
Quadratic Bezier
Godot_-_bezier_quadratic_points.png
private List<Vector2> QuadraticBezierPoints(Vector2 p0, Vector2 p1, Vector2 p2, float step, bool ignoreStart = false, bool ignoreStop = false)
{
Debug.Assert(0 < step && step <= 1);
var cursor = step;
var result = new List<Vector2>();
if (!ignoreStart)
{
result.Add(QuadraticBezier(p0, p1, p2, 0));
}
while (cursor < 1)
{
result.Add(QuadraticBezier(p0, p1, p2, cursor));
cursor += step;
}
if (!ignoreStop)
{
result.Add(QuadraticBezier(p0, p1, p2, 1));
}
return result;
}
private Vector2 QuadraticBezier(Vector2 p0, Vector2 p1, Vector2 p2, float t)
{
var q0 = p0.LinearInterpolate(p1, t);
var q1 = p1.LinearInterpolate(p2, t);
return q0.LinearInterpolate(q1, t);
}
Output:
Godot_-_bezier_quadratic_points.gif
Cubic Bezier
Godot_-_bezier_cubic_points.png
private List<Vector2> CubicBezierPoints(Vector2 p0, Vector2 p1, Vector2 p2, Vector2 p3, float step, bool ignoreStart = false, bool ignoreStop = false)
{
Debug.Assert(0 < step && step <= 1);
var cursor = step;
var result = new List<Vector2>();
if (!ignoreStart)
{
result.Add(CubicBezier(p0, p1, p2, p3, 0));
}
while (cursor < 1)
{
result.Add(CubicBezier(p0, p1, p2, p3, cursor));
cursor += step;
}
if (!ignoreStop)
{
result.Add(CubicBezier(p0, p1, p2, p3, 1));
}
return result;
}
private Vector2 CubicBezier(Vector2 p0, Vector2 p1, Vector2 p2, Vector2 p3, float t)
{
var q0 = p0.LinearInterpolate(p1, t);
var q1 = p1.LinearInterpolate(p2, t);
var q2 = p2.LinearInterpolate(p3, t);
var r0 = q0.LinearInterpolate(q1, t);
var r1 = q1.LinearInterpolate(q2, t);
return r0.LinearInterpolate(r1, t);
}
Output:
Godot_-_bezier_cubic_points.gif
For reference, the implementation of the LinearInterpolate function of Vector2 is as follows:
Vector2 linear_interpolate(const Vector2 &p_a, const Vector2 &p_b, real_t p_t)
{
Vector2 res = p_a;
res.x += (p_t * (p_b.x - p_a.x));
res.y += (p_t * (p_b.y - p_a.y));
return res;
}
De Casteljau's algorithm
Casteljau's algorithm is a technique for computing Bézier curves that repeatedly interpolates points on the curve using the given control points.
DEFAULT_CURVE_TESSELLATION_TOL: Final[float] = 1.25
"""
Tessellation tolerance when using BezierCurve without a specific number of segments.
Decrease for highly tessellated curves (higher quality, more polygons),
Increase to reduce quality.
"""