Bézier curve | marstau's blog

{style=”background-image:none;border-bottom:#aaaaaa 1px solid;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.6em;font:19px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

References: http://en.wikipedia.org/wiki/B%C3%A9zier_curve

Examination of cases

A Bézier curve is defined by a set of control points P~0~ through P~n~, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The first and last control points are always the end points of the curve; however, the intermediate control points (if any) generally do not lie on the curve.

[edit]Linear Bézier curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

Given points P~0~ and P~1~, a linear Bézier curve is simply a straight line between those two points. The curve is given by

$\mathbf{B}(t)=\mathbf{P}_0 + t(\mathbf{P}_1-\mathbf{P}_0)=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]$

and is equivalent to linear interpolation.

[edit]Quadratic Bézier curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

A quadratic Bézier curve is the path traced by the function B(t), given points P~0~, P~1~, and P~2~,

$\mathbf{B}(t) = (1 - t)[(1 - t) \mathbf P_0 + t \mathbf P_1] + t [(1 - t) \mathbf P_1 + t \mathbf P_2] \mbox{ , } t \in [0,1]$ ,

which can be interpreted as the linear interpolant of corresponding points on the linear Bézier curves from P~0~ to P~1~ and from P~1~ to P~2~ respectively. Rearranging the preceding equation yields:

$\mathbf{B}(t) = (1 - t)\^{2}\mathbf{P}_0 + 2(1 - t)t\mathbf{P}_1 + t\^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1].$

The derivative of the Bézier curve with respect to t is

$\mathbf{B}'(t) = 2 (1 - t) (\mathbf{P}_1 - \mathbf{P}_0) + 2 t (\mathbf{P}_2 - \mathbf{P}_1) \,.$

from which it can be concluded that the tangents to the curve at P~0~ and P~2~ intersect at P~1~. As t increases from 0 to 1, the curve departs from P~0~ in the direction of P~1~, then bends to arrive at P~2~ in the direction from P~1~.

A quadratic Bézier curve is also a parabolic segment. As a parabola is a conic section, some sources refer to quadratic Béziers as “conic arcs”.^[2]^

[edit]Cubic Bézier curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

Four points P~0~, P~1~, P~2~ and P~3~ in the plane or in higher-dimensional space define a cubic Bézier curve. The curve starts at P~0~ going toward P~1~ and arrives at P~3~ coming from the direction of P~2~. Usually, it will not pass through P~1~ or P~2~; these points are only there to provide directional information. The distance between P~0~ and P~1~ determines “how long” the curve moves into direction P~2~ before turning towards P~3~.

Writing B~P~i~,P~j~,P~k~~(t) for the quadratic Bézier curve defined by points P~i~, P~j~, and P~k~, the cubic Bézier curve can be defined as a linear combination of two quadratic Bézier curves:

$\mathbf{B}(t)=(1-t)\mathbf{B}_{\mathbf P_0,\mathbf P_1,\mathbf P_2}(t) + t \mathbf{B}_{\mathbf P_1,\mathbf P_2,\mathbf P_3}(t) \mbox{ , } t \in [0,1].$

The explicit form of the curve is:

$\mathbf{B}(t)=(1-t)\^3\mathbf{P}_0+3(1-t)\^2t\mathbf{P}_1+3(1-t)t\^2\mathbf{P}_2+t\^3\mathbf{P}_3 \mbox{ , } t \in [0,1].$

For some choices of P~1~ and P~2~ the curve may intersect itself, or contain a cusp.

Terminology {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

Some terminology is associated with these parametric curves. We have

$\mathbf{B}(t) = \sum_{i=0}\^n \mathbf{b}_{i,n}(t)\mathbf{P}_i,\quad t\in[0,1]$

where the polynomials

$\mathbf{b}_{i,n}(t) = {n\choose i} t\^i (1-t)\^{n-i},\quad i=0,\ldots n$

are known as Bernstein basis polynomials of degree n.

Note that t^0^ = 1, (1 − t)^0^ = 1, and that the binomial coefficient, $\scriptstyle {n \choose i}$ , also expressed as $\^n{\mathbf{C}}_i$ or ${\mathbf{C}_i}\^n$ is:

${n \choose i} = \frac{n!}{i!(n-i)!}.$

The points P~i~ are called control points for the Bézier curve. The polygon formed by connecting the Bézier points with lines, starting with P~0~ and finishing with P~n~, is called the Bézier polygon (or control polygon). The convex hull of the Bézier polygon contains the Bézier curve.

Linear curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

Animation of a linear Bézier curve, t in [0,1] ————————————————————————————————————————————————————————————————————————————————————

The t in the function for a linear Bézier curve can be thought of as describing how far B(t) is from P~0~ toP~1~. For example when t=0.25, B(t) is one quarter of the way from point P~0~ to P~1~. As t varies from 0 to 1,B(t) describes a straight line from P~0~ to P~1~.

[edit]Quadratic curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

For quadratic Bézier curves one can construct intermediate points Q~0~ and Q~1~ such that as t varies from 0 to 1:

Point Q~0~ varies from P~0~ to P~1~ and describes a linear Bézier curve.
Point Q~1~ varies from P~1~ to P~2~ and describes a linear Bézier curve.
Point B(t) varies from Q~0~ to Q~1~ and describes a quadratic Bézier curve.

[![Construction of a [ of a quadratic Bézier cu rve, t in [0,1]”)

Construction of a Animation of a quadratic quadratic Bézier curve Bézier curve, t in [0,1] ———————— ———————— ————————

[edit]Higher-order curves {style=”background-image:none;border-bottom-style:none;padding-bottom:0.17em;widows:2;text-transform:none;background-color:#ffffff;text-indent:0px;margin:0px 0px 0.3em;font:bold 17px/19.2px sans-serif;white-space:normal;orphans:2;letter-spacing:normal;color:#000000;overflow:hidden;word-spacing:0px;padding-top:0.5em;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;”}

For higher-order curves one needs correspondingly more intermediate points. For cubic curves one can construct intermediate points Q~0~, Q~1~, and Q~2~that describe linear Bézier curves, and points R~0~ & R~1~ that describe quadratic Bézier curves:

[![Construction of a [ t in [0,1]”)

Construction of a cubic Animation of a cubic Bézier curve Bézier curve, t in [0,1] ———————— ———————— ————————

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

[![Construction of a [ of a quartic Bézier curv e, t in [0,1]”)

Construction of a Animation of a quartic quartic Bézier curve Bézier curve, t in [0,1] ———————— ———————— ————————

For fifth-order curves, one can construct similar intermediate points.

Animation of a fifth order Bézier curve, t in [0,1] ——————————————————————————————————————————————————————————————————————————————————————————

These representations rest on the process used in De Casteljau’s algorithm to calculate Bezier curves.^[3]^

软件工具

编程开发

errors

左右互搏

点滴知识

数据结构与算法

undo

todo

标签

software 160

framework 14

hacker 4

php 6

android 64

back-end 11

block-chain 12

cpp 1

cocos2dx 22

error-unresolved 92

lua 9

operating-system 1

python 3

unity3d 32

algorithm 86

assembly 2

css 2

c＃ 3

html 1

javascript 2

kotlin 1

solidity 2

golang 1

game-engine 57

objective-c 2

seo 1

undo 1

java 59

c＋＋ 43

normal-knowledge 22

mac 7

ios 12

game-design 15

Bootstrap 1

CentOS 1

ETCD 1

Kafka 1

database 4

go 2

mysql 1

易语言 1

team 1

app 1

log 1

dropbox 2

SDK 1

h5 1

btc 9

web 4

protocol 1

googleplay 1

pay 1

root 1

html5 1

loom-network 1

metamask 2

blockchain 5

js 3

tools 2

c++ 2

domain 1

宝塔 1

server 2

quick-cocos2d-x 1

spider 1

jailbreak 2

tool 1

rom 1

gateway 1

git 2

github 1