Line VS Bezier Curve Kurva Bezier Pertemuan: 06 Dosen Pembina Danang Junaedi Sriyani Violina IF-UTAMA 1 IF-UTAMA 2 Other Curves Drawing the Curve (1) IF-UTAMA 3 IF-UTAMA 4 1
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 P 1 P 1 P 01 (t) P 02 (t) P 11 (t) P 0 P 2 P 0 P 2 IF-UTAMA 5 IF-UTAMA 6 Representasi de Casteljau Representasi de Casteljau IF-UTAMA 7 IF-UTAMA 8 2
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 3
Contoh soal 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. Berapa titik yang digunakan untuk membangun kurva bezier? 2. Berapa nilai titik pada kurva pada saat t=0.8? solusi a. Dengan kenaikan sebanyak 0.02 maka jumlah titik yang diperlukan antara 0 dan 1 adalah 1 1 = = 50titik t 0.02 b. Karena terdiri dari 3 titik kontrol maka persamaan menjadi : (x+y) 3-1 = (x+y) 2 x 2 + 2xy + y 2 = 0 x = (1-t) dan y = t Maka persamaan tersebut menjadi : L(t) = (1-t) 2 + 2(1-t)t + t 2 IF-UTAMA 13 IF-UTAMA 14 Solusi (lanjutan) Titik untuk t=0.8 x = (1-t) 2.x1 + 2(1-t)t.x2 + t 2.x3 y = (1-t) 2.y1 + 2(1-t)t.y2 + t 2.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 15 Soal (untuk 4 titik kontrol) 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: Berapa nilai titik pada kurva pada saat t=0.8? IF-UTAMA 16 4
Linear Bézier curves Ilustrasi Pembuatan Kurva Bezier en.wikipedia.org/wiki/bézier_curve 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 and is equivalent to linear interpolation. IF-UTAMA 17 IF-UTAMA 18 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 P 0 to P 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 curved line from P 0 to P 1. Quadratic Bézier curves A quadratic Bézier curve is the path traced by the function B(t), given points P 0, P 1, and P 2, A quadratic Bézier curve is also a parabolic segment. IF-UTAMA 19 IF-UTAMA 20 5
Ilustrasi: kurva kuadratik 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. IF-UTAMA 21 Cubic Bézier curves Four points P 0, P 1, P 2 and P 3 in the plane or in three-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. The parametric form of the curve is: IF-UTAMA 22 Ilustrasi : Kurva Cubic For higher-order curves one needs correspondingly more intermediate points. For cubic curves one can construct intermediate points Q 0,Q 1 & Q 2 that describe linear Bézier curves, and points R 0 & R 1 that describe quadratic Bézier curves Ilustrasi: Fourth-order curve For fourth-order curves one can construct intermediate points Q 0, Q 1, Q 2 & Q 3 th at 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 IF-UTAMA 23 IF-UTAMA 24 6
The Math Behind the Bezier Curve www.moshplant.com/direct-or/bezier/math.html A cubic Bezier curve is defined by four points. Two are endpoints. (x 0,y 0 ) is the origin endpoint. (x 3,y 3 ) is the destination endpoint. The points (x 1,y 1 ) and (x 2,y 2 ) are control points. IF-UTAMA 25 IF-UTAMA 26 This is how the equations are defined in Adobe's PostScript references. 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. x(t) = a x t 3 + b x t 2 + c x t + x 0 x 1 = x 0 + c x / 3 x 2 = x 1 + (c x + b x ) / 3 x 3 = x 0 + c x + b x + a x y(t) = a y t 3 + b y t 2 + c y t + y 0 y 1 = y 0 + c y / 3 y 2 = y 1 + (c y + b y ) / 3 y 3 = y 0 + c y + b y + a y IF-UTAMA 27 IF-UTAMA 28 7
This method of definition can be reverseengineered, so: c x = 3 (x 1 - x 0 ) b x = 3 (x 2 - x 1 ) - c x a x = x 3 - x 0 - c x - b x c y = 3 (y 1 - y 0 ) b y = 3 (y 2 - y 1 ) - c y a y = y 3 - y 0 - c y - b y Referensi 1. -,2009, Chapter 8 - Kurva Beizer, Departement Teknik Informatika IT Telkom 2. David W. Smith,-, Bezier Curve Ahead!, http://www.mactech.com/articles/mactech/vol.05/05.01/beziercurve/, Tanggal Akses: 10 November 2010 3. -,-, 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 4. Nils Pipenbrinck, 1999, DeCasteljau Algorithm, http://www.cubic.org/docs/bezier.htm Tanggal Akses : 10 November 2010 5. Bill Casselman,-, Bezier curves, http://www.math.ubc.ca/~cass/gfx/bezier.html, Tanggal Akses : 10 November 2010 IF-UTAMA 29 IF-UTAMA 30 8