Editing Bézier curve (section)

==Constructing Bézier curves==
===<span id="constructing-bezier-curves"></span>Linear curves===
Let ''t'' denote the fraction of progress (from 0 to 1) the point '''B'''(''t'') has made along its traversal from '''P'''<sub>0</sub> to '''P'''<sub>1</sub>. For example, when ''t''=0.25, '''B'''(''t'') is one quarter of the way from point '''P'''<sub>0</sub> to '''P'''<sub>1</sub>. As ''t'' varies from 0 to 1, '''B'''(''t'') draws a line from '''P'''<sub>0</sub> to '''P'''<sub>1</sub>.
{| style="margin:1em auto; text-align:center; float:none; clear:both; font-size:95%; vertical-align:top;"
|-
| style="border-bottom:1px solid #222;"|[[File:Bézier 1 big.gif|240px|Animation of a linear Bézier curve, ''t'' in [0,1]]]
|-
|Animation of a linear Bézier curve, ''t'' in [0,1]
|}

===Quadratic curves===
For quadratic Bézier curves one can construct intermediate points '''Q'''<sub>0</sub> and '''Q'''<sub>1</sub> such that as ''t'' varies from 0 to 1:
* Point '''Q'''<sub>0</sub>(''t'') varies from '''P'''<sub>0</sub> to '''P'''<sub>1</sub> and describes a linear Bézier curve.
* Point '''Q'''<sub>1</sub>(''t'') varies from '''P'''<sub>1</sub> to '''P'''<sub>2</sub> and describes a linear Bézier curve.
* Point '''B'''(''t'') is interpolated linearly between '''Q'''<sub>0</sub>(''t'') to '''Q'''<sub>1</sub>(''t'') and describes a quadratic Bézier curve.

{| style="margin:1em auto; text-align:center; float:none; clear:both; font-size:95%; vertical-align:top;"
|-
| style="border-bottom:1px solid #2f2;"|[[File:Bézier 2 big.svg|240px|Construction of a quadratic Bézier curve]]||
| style="border-bottom:1px solid #2f2;"|[[File:Bézier 2 big.gif|240px|Animation of a quadratic Bézier curve, ''t'' in [0,1]]]
|-
|Construction of a quadratic Bézier curve||
|Animation of a quadratic Bézier curve, ''t'' in [0,1]
|}

===Higher-order curves===
For higher-order curves one needs correspondingly more intermediate points. For cubic curves one can construct intermediate points '''Q'''<sub>0</sub>, '''Q'''<sub>1</sub>, and '''Q'''<sub>2</sub> that describe linear Bézier curves, and points '''R'''<sub>0</sub> and '''R'''<sub>1</sub> that describe quadratic Bézier curves:

{| style="margin:1em auto; text-align:center; float:none; clear:both; font-size:95%; vertical-align:top;"
|-
| style="border-bottom:1px solid #22f;"|[[File:Bézier 3 big.svg|240px|Construction of a cubic Bézier curve]]||
| style="border-bottom:1px solid #22f;"|[[File:Bézier 3 big.gif|240px|Animation of a cubic Bézier curve, ''t'' in [0,1]]]
|-
|Construction of a cubic Bézier curve||
|Animation of a cubic Bézier curve, ''t'' in [0,1]
|}

For fourth-order curves one can construct intermediate points '''Q'''<sub>0</sub>, '''Q'''<sub>1</sub>, '''Q'''<sub>2</sub> and '''Q'''<sub>3</sub> that describe linear Bézier curves, points '''R'''<sub>0</sub>, '''R'''<sub>1</sub> and '''R'''<sub>2</sub> that describe quadratic Bézier curves, and points '''S'''<sub>0</sub> and '''S'''<sub>1</sub> that describe cubic Bézier curves:

{| style="margin:1em auto; text-align:center; float:none; clear:both; font-size:95%; vertical-align:top;"
|-
| style="border-bottom:1px solid #f2f;"|[[File:Bézier 4 big.svg|240px|Construction of a quartic Bézier curve]]||
| style="border-bottom:1px solid #f2f;"|[[File:Bézier 4 big.gif|240px|Animation of a quartic Bézier curve, ''t'' in [0,1]]]
|-
|Construction of a quartic Bézier curve||
|Animation of a quartic Bézier curve, ''t'' in [0,1]
|}

For fifth-order curves, one can construct similar intermediate points.
{| style="margin:1em auto; text-align:center; float:none; clear:both; font-size:95%; vertical-align:top;"
|-
|style="border-bottom: 1px solid silver"|[[File:BezierCurve.gif|240px|Animation of the construction of a fifth-order Bézier curve]]
|-
|Animation of a fifth-order Bézier curve, ''t'' in [0,1] in red. The Bézier curves for each of the lower orders are also shown.
|}

These representations rest on the process used in [[De Casteljau's algorithm]] to calculate Bézier curves.<ref>{{cite web |last=Shene |first=C. K. |title=Finding a Point on a Bézier Curve: De Casteljau's Algorithm |url=http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html |access-date=6 September 2012}}</ref>

===Offsets (or stroking) of Bézier curves===
The curve at a fixed offset from a given Bézier curve, called an [[parallel curve|offset or parallel curve]] in mathematics (lying "parallel" to the original curve, like the offset between rails in a [[railroad track]]), cannot be exactly formed by a Bézier curve (except in some trivial cases). In general, the two-sided offset curve of a cubic Bézier is a 10th-order [[algebraic curve]]<ref name="Kilgard">{{cite web |author=Mark Kilgard |date=April 10, 2012 |title=CS 354 Vector Graphics & Path Rendering |url=http://www.slideshare.net/Mark_Kilgard/22pathrender |page=28}}</ref> and more generally for a Bézier of degree ''n'' the two-sided offset curve is an algebraic curve of degree 4''n''&nbsp;−&nbsp;2.<ref>{{cite web |title=Introduction to Pythagorean-hodograph curves |author=Rida T. Farouki |url=http://faculty.engineering.ucdavis.edu/farouki/wp-content/uploads/sites/41/2013/02/Introduction-to-PH-curves.pdf |archive-url=https://web.archive.org/web/20150605214546/http://faculty.engineering.ucdavis.edu/farouki/wp-content/uploads/sites/41/2013/02/Introduction-to-PH-curves.pdf |url-status=dead |archive-date=June 5, 2015 }}, particularly p.&nbsp;16 "taxonomy of offset curves".</ref> However, there are [[heuristic]] methods that usually give an adequate approximation for practical purposes.<ref>For example:
* {{cite book |last1=Ostromoukhov |first1=Victor |title=Hermite Approximation for Offset Curve Computation |url=https://perso.liris.cnrs.fr/victor.ostromoukhov/publications/pdf/ICCG93_Hermite.pdf|citeseerx=10.1.1.43.1724 |language=en}}
* {{cite web |last1=Kilgard |first1=Mark J. |last2=Moreton |first2=Henry Packard |title=US20110285719A1 Approximation of stroked higher-order curved segments by quadratic bèzier curve segments |url=https://patents.google.com/patent/US20110285719 |website=Google Patents |date=24 November 2011}}
For a survey see {{cite journal |last1=Elber |first1=G. |title=Comparing offset curve approximation methods |journal=IEEE Computer Graphics and Applications |date=May 1997 |volume=17 |issue=3 |pages=62–71 |doi=10.1109/38.586019|url=http://3map.snu.ac.kr/mskim/ftp/comparing.pdf}}</ref>

In the field of [[vector graphics]], painting two symmetrically distanced offset curves is called ''stroking'' (the Bézier curve or in general a path of several Bézier segments).<ref name="Kilgard"/> The conversion from offset curves to filled Bézier contours is of practical importance in converting [[font]]s defined in [[Metafont]], which require stroking of Bézier curves, to the more widely used [[PostScript fonts|PostScript type 1 font]]s, which only require (for efficiency purposes) the mathematically simpler operation of filling a contour defined by (non-self-intersecting) Bézier curves.<ref>{{cite journal |url=https://www.tug.org/TUGboat/tb16-3/tb48kinc.pdf |archive-url=https://ghostarchive.org/archive/20221009/https://www.tug.org/TUGboat/tb16-3/tb48kinc.pdf |archive-date=2022-10-09 |url-status=live |title=MetaFog: Converting Metafont shapes to contours |author=Richard J. Kinch |date=1995 |journal=TUGboat |volume=16 |issue=3–Proceedings of the 1995 Annual Meeting}}</ref>