Line VS Bezier Curve

Kurva Bezier
Pertemuan: 06
Dosen Pembina
Danang Junaedi
Sriyani Violina
IF-UTAMA

Other Curves

IF-UTAMA

IF-UTAMA

Drawing the Curve (1)

IF-UTAMA

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

P11(t)

P01(t)
P02(t)
P0

IF-UTAMA

Representasi de Casteljau

IF-UTAMA

P2

P0

P2

IF-UTAMA

Representasi de Casteljau

IF-UTAMA

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 1960s 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 doesnt necessarily touch the
control points.
The general form Bezier equation, which describes each point on the
curve as a function of time

IF-UTAMA

Kurva Bezier

IF-UTAMA

10

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

Contoh soal

solusi
a. Dengan kenaikan sebanyak 0.02 maka jumlah titik yang
diperlukan antara 0 dan 1 adalah

Diketahui 3 buah titik kontrol dengan

koordinat C1(1,2), C2(7,10), C3(15,4) ,
dengan menggunakan kenaikan t=0.02
maka tentukanlah:

1
1
=
= 50 titik
t 0 .02
b. Karena terdiri dari 3 titik kontrol maka persamaan menjadi :

1. Berapa titik yang digunakan untuk membangun

kurva bezier?
2. Berapa nilai titik pada kurva pada saat t=0.8?

(x+y)3-1= (x+y)2
x2 + 2xy + y2 = 0
x = (1-t) dan y = t
Maka persamaan tersebut menjadi :
L(t) = (1-t)2 + 2(1-t)t + t2

IF-UTAMA

13

Solusi (lanjutan)

Diketahui 4 buah titik kontrol dengan koordinat

C1(0,1), C2(1,2), C3(2,2), C4(3,1) dengan
menggunakan kenaikan t=0.02 maka
tentukanlah:

= (1-t)2.x1 + 2(1-t)t.x2 + t2.x3

= (1-t)2.y1 + 2(1-t)t.y2 + t2.y3

Catatan : x1, x2, x3, y1, y2 dan y3 diambil dari titik kontrol

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
y = (1-0.8)2.2 + 2(1-0.8)(0.8).10 + (0.8)2.4
y = 0.08 + 3.2 + 2.56 = 5.84 ~ 6
Nilai titik pada kurva saat t = 0.8 adalah (12,6)
IF-UTAMA

14

Soal (untuk 4 titik kontrol)

Titik untuk t=0.8

x
y

IF-UTAMA

Berapa nilai titik pada kurva pada saat t=0.8?

15

IF-UTAMA

16

Linear Bzier curves

Given points P0 and P1, a linear Bzier curve
is simply a straight line between those two
points. The curve is given by

Ilustrasi Pembuatan Kurva

Bezier
en.wikipedia.org/wiki/Bzier_curve

and is equivalent to linear interpolation.

IF-UTAMA

17

18

Quadratic Bzier curves

Ilustrasi: kurva linier

The t in the function for a
linear Bzier 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

IF-UTAMA

A quadratic Bzier curve is the path traced by

the function B(t), given points P0, P1, and P2,

A quadratic Bzier curve is also a parabolic

segment.

19

IF-UTAMA

20

Cubic Bzier curves

Ilustrasi: kurva kuadratik

Four points P0, P1, P2 and P3 in the plane or in

three-dimensional space define a cubic Bzier
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:

For quadratic Bzier 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 Bzier curve.
Point Q1 varies
from P1 to P2 and describes
a linear Bzier curve.
Point B(t) varies
from Q0 to Q1 and describes
a quadratic Bzier curve.

IF-UTAMA

21

Ilustrasi : Kurva Cubic

22

Ilustrasi: Fourth-order curve

For higher-order
curves one needs
correspondingly more
intermediate points.
For cubic curves one
can construct
intermediate
points Q0,Q1 & Q2 that
describe linear Bzier
curves, and
points R0 & R1 that
describe quadratic
Bzier curves
IF-UTAMA

IF-UTAMA

For fourth-order curves

one can construct
intermediate
points Q0, Q1, Q2 & Q3 th
at describe linear Bzier
curves,
points R0, R1 & R2that
describe quadratic
Bzier curves, and
points S0 & S1 that
describe cubic Bzier
curves

23

IF-UTAMA

24

The Math Behind the Bezier

Curve
A cubic Bezier curve is defined by four points.
Two are endpoints.

www.moshplant.com/direct-or/bezier/math.html

(x0,y0) is the origin endpoint.

(x3,y3) is the destination endpoint.

The points (x1,y1) and (x2,y2) are control points.

IF-UTAMA

25

IF-UTAMA

26

This is how the equations are defined in

Adobe's PostScript references.
x(t) = axt3 + bxt2 + cxt + x0
x1 = x0 + cx / 3
x2 = x1 + (cx + bx) / 3
x3 = x0 + cx + bx + ax

Two equations define the points on the curve.

Both are evaluated for an arbitrary number of
values of t between 0 and 1.
As increasing values for t are supplied to the
equations, the point defined by x(t),y(t) moves
from the origin to the destination.

IF-UTAMA

y(t) = ayt3 + byt2 + cyt + y0

y1 = y0 + cy / 3
y2 = y1 + (cy + by) / 3
y3 = y0 + cy + by + ay

27

IF-UTAMA

28

 This method of definition can be reverseengineered, so:

Referensi
1.
2.

cx = 3 (x1 - x0)
bx = 3 (x2 - x1) - cx
ax = x3 - x0 - cx - bx

3.

4.

cy = 3 (y1 - y0)
by = 3 (y2 - y1) - cy
ay = y3 - y0 - cy - by

5.

IF-UTAMA

29

-,2009, Chapter 8 - Kurva Beizer, Departement Teknik Informatika IT

Telkom
David W. Smith ,-, Bezier Curve Ahead!,
http://www.mactech.com/articles/mactech/Vol.05/05.01/BezierCurve/,
Tanggal Akses: 10 November 2010
-,-, Bezier Curves,
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
Nils Pipenbrinck, 1999, DeCasteljau Algorithm,
http://www.cubic.org/docs/bezier.htm Tanggal Akses : 10 November
2010
Bill Casselman,-, Bezier curves,
http://www.math.ubc.ca/~cass/gfx/bezier.html, Tanggal Akses : 10
November 2010

IF-UTAMA

30