Line VS Bezier Curve

Kurva Bezier

Sesi 09

Dosen Pembina
Danang Junaedi
Sriyani Violina

IF-UTAMA 1 IF-UTAMA 2

Other Curves Drawing the Curve (1)

IF-UTAMA 3 IF-UTAMA 4

Drawing the Curve (2) Algoritma de Casteljau

• Algoritma untuk membuat kurva menggunakan sejumlah
titik kontrol, dan menggunakan teknik in-betweening
untuk mendapatkan kurva yang diinginkan.
• Dikembangkan oleh P. de Casteljau, dan merupakan
cikal bakal kurva Bezier, yang secara terpisah
dikembangkan lebih lanjut oleh P. Bezier.
• Implementasi Algoritma de Casteljau yang paling
sederhana adalah pembentukan kurva berdasarkan 3
titik kontrol yaitu
P1 P1

P01(t) P11(t)
P02(t)

P2 P2
P0
IF-UTAMA 5 IF-UTAMAP0 6

1
 Representasi de Casteljau Representasi de Casteljau

IF-UTAMA 7 IF-UTAMA 8

Bezier Curve Kurva Bezier

• Bezier curves are used in computer graphics to produce curves
which appear reasonably smooth at all scales (as opposed to
polygonal lines, which will not scale nicely).
• Bezier curves are named after their inventor, Dr. Pierre Bezier.
• Bezier was an engineer with the Renault car company and set out in
the early 1960’s to develop a curve formulation which would lend
itself to shape design.
• The Bezier curve is a parametric function of four points; two
endpoints and two “control” points.
• The curve connects the endpoints, but doesn’t necessarily touch the
control points.
• The general form Bezier equation, which describes each point on
the curve as a function of time

IF-UTAMA 9 IF-UTAMA 10

Kurva Bezier Kurva bezier

Perhitungan bezier bisa dibantu dengan
cara sebagai berikut :
– Untuk n titik kontrol maka persamaan kurva
bezier adalah (x+y)n-1
– Ganti x dengan (1-t) dan y dengan t,
kemudian selesaikan persamaan dengan titik
yang dimaksud

IF-UTAMA 11 IF-UTAMA 12

2
 Contoh soal solusi
Diketahui 3 buah titik kontrol dengan a. Dengan kenaikan sebanyak 0.02 maka jumlah titik
yang diperlukan antara 0 dan 1 adalah
koordinat C1(1,2), C2(7,10), C3(15,4) , 1 1
dengan menggunakan kenaikan t=0.02 = = 50titik
t 0.02
maka tentukanlah: b. Karena terdiri dari 3 titik kontrol maka persamaan
1. Berapa titik yang digunakan untuk menjadi :
membangun kurva bezier? (x+y)3-1= (x+y)2
x2 + 2xy + y2 = 0
2. Berapa nilai titik pada kurva pada saat
x = (1-t) dan y = t
t=0.8?
Maka persamaan tersebut menjadi :
L(t) = (1-t)2 + 2(1-t)t + t2
IF-UTAMA 13 IF-UTAMA 14

Solusi (lanjutan)
Soal (untuk 4 titik kontrol)
Titik untuk t=0.8 Diketahui 4 buah titik kontrol dengan
x = (1-t)2.x1 + 2(1-t)t.x2 + t2.x3 koordinat C1(0,1), C2(1,2), C3(2,2), C4(3,1)
y = (1-t)2.y1 + 2(1-t)t.y2 + t2.y3 dengan menggunakan kenaikan t=0.02
Catatan : x1, x2, x3, y1, y2 dan y3 diambil dari titik kontrol maka tentukanlah:

x = (1-0.8)2.1 + 2(1-0.8)(0.8).7 + (0.8)2.15

x = 0.04 + 2.24 + 9.6 = 11.88 ~ 12 Berapa nilai titik pada kurva pada saat
y = (1-0.8)2.2 + 2(1-0.8)(0.8).10 + (0.8)2.4 t=0.8?
y = 0.08 + 3.2 + 2.56 = 5.84 ~ 6
Nilai titik pada kurva saat t = 0.8 adalah (12,6)
IF-UTAMA 15 IF-UTAMA 16

Linear Bézier curves

• Given points P0 and P1, a linear Bézier
curve is simply a straight line between
Ilustrasi Pembuatan Kurva
those two points. The curve is given by
Bezier
en.wikipedia.org/wiki/Bézier_curve
• and is equivalent to linear interpolation.

IF-UTAMA 17 IF-UTAMA 18

3
 Ilustrasi: kurva linier
• The t in the function for
a linear Bézier curve
can be thought of as
describing how far B(t)
is from P0 to P1.
• For example
when t=0.25, B(t) is
one quarter of the way
from point P0 to P1.
• As t varies from 0 to
1, B(t) describes a
curved line
from P0 to P1.
IF-UTAMA 19
Ilustrasi: kurva kuadratik
• For quadratic Bézier
curves one can construct
intermediate
points Q0 and Q1 such
that as t varies from 0 to
1:
• Point Q0 varies
from P0 to P1 and
describes a linear Bézier
curve.
• Point Q1 varies
from P1 to P2 and
describes a linear Bézier
curve.
• Point B(t) varies
from Q0 to Q1 and
IF-UTAMA
describes a quadratic 21
Bézier curve.
Ilustrasi : Kurva Cubic
• For higher-order
curves one needs
correspondingly
more intermediate
points. For cubic
curves one can
construct
intermediate
points Q0,Q1 & Q2 th
at describe linear
Bézier curves, and
points R0 & R1 that
describe quadratic
Bézier curves
IF-UTAMA 23
Quadratic Bézier curves
• A quadratic Bézier curve is the path traced
by the function B(t), given points P0, P1,
and P2,
• A quadratic Bézier curve is also a
parabolic segment.
IF-UTAMA 20
Cubic Bézier curves
• Four points P0, P1, P2 and P3 in the plane or
in three-dimensional space define a cubic
Bézier curve.
• The curve starts at P0 going toward P1 and
arrives at P3 coming from the direction of P2.
Usually, it will not pass through P1 or P2;
these points are only there to provide
directional information. The distance
between P0 and P1 determines "how long" the
curve moves into direction P2 before turning
towards P3.
• The parametric form of the curve is:
IF-UTAMA 22
Ilustrasi: Fourth-order curve
• For fourth-order
curves one can
construct intermediate
points Q0, Q1, Q2 & Q3
that describe linear
Bézier curves,
points R0, R1 & R2that
describe quadratic
Bézier curves, and
points S0 & S1 that
describe cubic Bézier
curves
IF-UTAMA 24
4
 The Math Behind the Bezier
Curve
www.moshplant.com/direct-
or/bezier/math.html
IF-UTAMA
• A cubic Bezier curve is defined by four points.
• Two are endpoints.
– (x0,y0) is the origin endpoint.
– (x3,y3) is the destination endpoint.
• The points (x1,y1) and (x2,y2) are control
25
points. IF-UTAMA 26

• This is how the equations are defined in

Adobe's PostScript references.

x(t) = axt3 + bxt2 + cxt + x0

• Two equations define the points on the x1 = x0 + cx / 3
curve. Both are evaluated for an arbitrary x2 = x1 + (cx + bx) / 3
x 3 = x 0 + c x + bx + ax
number of values of t between 0 and 1.
• As increasing values for t are supplied to y(t) = ayt3 + byt2 + cyt + y0
the equations, the point defined y1 = y0 + cy / 3
by x(t),y(t) moves from the origin to the y2 = y1 + (cy + by) / 3
destination. y 3 = y 0 + c y + by + ay

IF-UTAMA 27 IF-UTAMA 28

• This method of definition can be reverse- Referensi

engineered, so:
1. -,2009, Chapter 8 - Kurva Beizer, Departement Teknik Informatika
– IT Telkom
2. David W. Smith ,-, Bezier Curve Ahead!,
cx = 3 (x1 - x0) http://www.mactech.com/articles/mactech/Vol.05/05.01/BezierCur
ve/, Tanggal Akses: 10 November 2010
bx = 3 (x2 - x1) - cx 3. -,-, Bezier Curves,
ax = x3 - x0 - cx - bx http://freespace.virgin.net/hugo.elias/graphics/x_bezier.htm atau
http://freespace.virgin.net/hugo.elias/graphics/x_main.htm#3 ,
Tanggal Akses : 10 November 2010
4. Nils Pipenbrinck, 1999, DeCasteljau Algorithm,
http://www.cubic.org/docs/bezier.htm Tanggal Akses : 10
cy = 3 (y1 - y0) November 2010
5. Bill Casselman,-, Bezier curves,
by = 3 (y2 - y1) - cy http://www.math.ubc.ca/~cass/gfx/bezier.html, Tanggal Akses
: 10 November 2010
ay = y3 - y0 - cy - by

IF-UTAMA 29 IF-UTAMA 30