Bab 2 Output Primitif

(1)

Bab 2

Output Primitif

2.3.2 Algoritma DDA (Digital Diferential Analyzer )

=================================================================== 1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.

2. Tentukan salah satunya sebagai titik awal (x1, y1) dan yang lain sebagai titik akhir (x2, y2).

3. Hitung : dx = x2 − x1 dan dy = y2 − y1

4. Tentukan step, dengan ketentuan berikut: - bila |dx| > |dy| maka step = |dx| - bila tidak, maka step = |dy|

5. Hitung penambahan koordinat piksel dengan persamaan:

x_inc = dx / step y_inc = dy / step

6. Koordinat selanjutnya :

x = x + x_inc y = y + y_inc

7. Lakukan pembulatan u = Round(x), v = Round(x), kemudian plot piksel (u, v) pada layar 8. Ulangi point 6 dan 7 untuk menentukan posisi piksel berikutnya sampai x = x2 dan y = y2.

Contoh 2.4

Diketahui 2 buah titik A(2,1) dan titik B(8,5) bila titik A sebagai titik awal dan titik B sebagai titik akhir, maka buatlah garis yang menghubungkan titik tersebut dengan menggunakan algoritma DDA.

Jawab:

Titik awal (x1, y1) = A(2,1) dan Titik akhir (x2, y2) = B(8,5) dx = x2 − x1 = 8 −2 = 6 dan dy = y2 − y1 = 5 − 1 = 4

Karena: |dx| > |dy|, maka step = |dx| = 6

(2)

y_inc = dy / step = 4/6 = 0,67

================================================= Iterasi ke-1: (x,y) = (2,1)

x+x_inc = 2 + 1 = 3 y+y_inc = 1 + 0,67 = 1,67

Koordinat selanjutnya : (x,y) = (3; 1,67)

Pembulatan (3; 1,67) ≈ (3,2). Gambar titik (3,2) dilayar =================================================

Iterasi ke-2: (x,y) = (3; 1,67)

x+x_inc = 3 + 1 = 4

y+y_inc = 1,67 + 0,67 = 2,34

Iterasi ke-3: (x,y) = (4; 2,34)

xA+x_inc = 4 + 1 = 5

yA+y_inc = 2,34 + 0,67= 3,01

Iterasi ke-4: (x,y) = (5; 3,01)

xA+x_inc = 5 + 1 = 6

yA+y_inc = 3,01 + 0,67 = 3,68

Iterasi ke-5: (x,y) = (6; 3,68)

xA+x_inc = 6 + 1 = 7

yA+y_inc = 3,68 + 0,67 = 4,35

(3)

================================================= Iterasi ke-6: (x,y) = (7; 4,35)

xA+x_inc = 7 + 1 = 8

yA+y_inc = 4,35 + 0,67 = 5,02

Pembulatan (8; 5,02) ≈ (8,5). Gambar titik (8,5) dilayar

Karena x = x2 = 8, maka iterasi dihentikan, sehingga diperoleh titik-titik pembentuk garis sebagai

berikut: (2,1), (3,2), (4,2), (5,3), (6,4), (7,4) dan (8,5).

================================================= Bila digambar pada raster graphics diperoleh gambar 2.6:

Gambar 2.6: Titik-titik pembentuk garis hasil perhitungan menggunakan algoritma DDA digambar pada raster graphics.

Kelebihan Algoritma DDA dibanding Algoritma Brute Force

Algoritma DDA lebih cepat dibanding dengan algoritma Brute Force dan baik digunakan untuk kemiringan garis m > 1.

Kelemahan Algoritma DDA

• Prosedur untuk menggambar garis masih menggunakan fungsi pembulatan x maupun y, sehingga memerlukan waktu.

• variabel x, y maupun m memerlukan bilangan real karena kemiringan merupakan nilai pecahan. 1 2 3 4 5 6 7 8 9 10 11 7 6 5 4 3 2 2 1

(4)

2.3.3 Algoritma Bressenham

algoritma midpoint Bresenham (untuk kemiringan 0 < m < 1) adalah : 1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1, y1).

3. Hitung dx, dy, 2|dy| dan 2|dy| − 2|dx| 4. Hitung parameter : po = 2|dy| − |dx|

5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0 - bila pk < 0 maka titik selanjutnya adalah:

(xk+1, yk) dan pk+1 = pk + 2|dy|

- bila tidak, titik selanjutnya adalah:

(xk+1, yk+1) dan pk+1 = pk + 2|dy| – 2|dx|

6. Ulangi nomor 5 untuk menentukan posisi piksel berikutnya, sampai x = x1 dan y = y1.

Contoh 2.5

Diketahui 2 buah titik A(2,1) dan titik B(8,5) bila titik A sebagai titik awal dan titik B sebagai titik akhir, maka buatlah garis yang menghubungkan titik tersebut dengan menggunakan algoritma Bressenham.

Jawab:

Titik awal (x0, y0) = A(2,1) dan Titik akhir (x1, y1) = B(8,5) dx = x1 − x0 = 8 −2 = 6 dan dy = y1 − y0 = 5 − 1 = 4

m = dy/ dx = 4/6 ; kemiringan garis berada diantara 0 dan 1 : 0 < m < 1 2|dx|= 2.6 = 12 ; 2|dy|= 2.4 = 8 dan 2|dy| – 2|dx| = 8 − 12 = −4

po = 2|dy| − |dx| = 8 − 6 = 2

================================================= Iterasi ke-1 ( k = 0):

Titik awal = (2,1)

Po = 2 > 0, maka titik selanjutnya adalah

x = 2 + 1 = 3 dan y = 1 + 1 = 2, koordinat selanjutnya : (3,2) p1 = p0 + 2|dy| – 2|dx| = 2 − 4 = −2

(5)

================================================= Iterasi ke-2 ( k = 1):

Titik awal = (3,2)

P1 = −2 < 0, maka titik selanjutnya adalah

x = 3 + 1 = 4 dan y = 2, koordinat selanjutnya : (4,2) p2 = p1 + 2|dy| = −2 + 8 = 6

================================================= Iterasi ke-3 ( k = 2):

Titik awal = (4,2)

P2 = 6 > 0, maka titik selanjutnya adalah

x = 4 + 1 = 5 dan y = 2 + 1 = 3, koordinat selanjutnya : (5,3) p3 = p2 + 2|dy| – 2|dx| = 6 − 4 = 2

================================================= Iterasi ke-4 ( k = 3):

Titik awal = (5,3)

x = 5 + 1 = 6 dan y = 3 + 1 = 4, koordinat selanjutnya : (6,4) p4 = p3 + 2|dy| – 2|dx| = 2 − 4 = −2

================================================= Iterasi ke-5 ( k = 4):

Titik awal = (6,4)

P3 = −2 < 0, maka titik selanjutnya adalah

x = 6 + 1 = 7 dan y = 4, koordinat selanjutnya : (7,4) p5 = p4 + 2|dy| = −2 + 8 = 6

================================================= Iterasi ke-6 ( k = 5):

Titik awal = (7,4)

x = 7 + 1 = 8 dan y = 4 + 1 = 5, koordinat selanjutnya : (8,5)

(6)

Karena x = x2 = 8, maka iterasi dihentikan, sehingga diperoleh titik-titik penyusun garis sebagai

berikut: (2,1), (3,2), (4,2), (5,3), (6,4), (7,4) dan (8,5). Bila digambar pada raster graphics diperoleh Gambar 2.8:

Gambar 2.8: Titik-titik pembentuk garis dengan kemiringan 0 < m < 1, hasil perhitungan menggunakan algoritma Bressenham yang digambar pada raster graphics.

2.4 Lingkaran

2.4.1 Simetris Delapan Titik

Pembuatan kurva lingkaran dapat dilakukan dengan menentukan titik awal (x,y) yang terletak pada lingkaran, maka tujuh titik yang lain (yang terletak pada lingkaran juga) dapat ditentukan sebagai berikut :

(−x,y), (x, −y), (−x, −y), (y,x), (−y,x), (y, −x), (−y, −x)

Sehingga terbentuk delapan titik:

(x, y), (−x,y), (x, −y), (−x, −y), (y,x), (−y,x), (y, −x), (−y, −x)

Dengan demikian sebenarnya hanya diperlukan untuk menghitung segmen 45 dalam menentukan lingkaran selengkapnya.

2.4.2 Algoritma Midpoint

• Langkah-langkah Algoritma Lingkaran Midpoint adalah:

1 2 3 4 5 6 7 8 9 10 11 7 6 5 4 3 2 2 1

(7)

1. Tentukan jari-jari r dan pusat lingkaran (xp, yp), kemudian setting sedemikian rupa sehingga titik awal berada pada: (x0, y0) = (0 , r)

2. Hitung nilai parameter :

Jika jari-jari r pecahan

Jika jari-jari r bulat

3. Untuk setiap posisi xk, dimulai dengan k = 0 berlaku ketentuan:

- bila pk < 0 maka titik selanjutnya adalah (xk+1, yk) dan pk+1 = pk + 2 xk+1 + 1

- bila tidak, titik selanjutnya adalah (xk+1, yk – 1) dan pk+1 = pk + 2 xk+1 + 1 – 2 yk+1

4. Tentukan titik simetris pada ketujuh oktan yang lain

5. Gerakkan setiap posisi piksel (x, y) pada garis lingkaran dengan titik pusat (xp, yp) dan plot nilai koordinat : x = x + xp, y = y + yp

6. Ulangi langkah 3 sampai dengan 5 hingga x ≥ y

Contoh 2.9

Buatlah gambar kurva lingkaran dengan pusat lingkaran (4,6) dan jari-jari 8, perhitungan berdasarkan dari oktan kuadran pertama dimana x = 0 sampai x = y. Koordinat titik awal dimulai dari (x,r) = (0,8). Karena jari-jari r bulat, maka gunakan P0 = 1 – r.

Iterasi ke-1:

K = 0 X0 = 0 Y0 = r = 8 P0 = 1 – r = 1 – 8 = –7

Karena P0 < 0, maka :

X1 = X0 + 1 = 0 + 1 = 1 dan Y1 = Y0 = 8, jadi Titik selanjutnya : (1,8)

P1 = p0 + 2 x1 + 1 = –7 + 2.(1) + 1 = – 4

Dengan algoritma simetris delapan titik, maka diperoleh titik-titik berikut : (1,8), (–1,8), (1, –8), (–1, –8), (8,1), (–8,1), (8, –1), (–8, –1) r p 4 5 0 r p0 1

(8)

Gerakkan setiap posisi piksel (x, y) pada garis lingkaran dengan titik pusat (4,6) diperoleh titik-titik berikut (5, 14), (3, 14), (5, –2), (3, –2), (12, 7), (–4, 7), (12, 5), (–4, 5) Iterasi ke-2: K = 1 X1 = 1 Y1 = 8 P1 = – 4 Karena P1 < 0, maka

P2 = p1 + 2 x2 + 1 = –4 + 2.(2) + 1 = 1

Dengan algoritma simetris delapan titik, maka diperoleh titik-titik berikut : (2,8), (–2,8), (2, –8), (–2, –8), (8,2), (–8,2), (8, –2), (–8, –2)

Gerakkan setiap posisi piksel (x, y) pada garis lingkaran dengan titik pusat (4,6) diperoleh titik-titik berikut

(6, 14), (2, 14), (6, –2), (2, –2), (12, 8), (–4, 8), (12, 4), (–4, 4)

Iterasi ke-3:

K = 2 X2 = 2 Y2 = 8 P2 = 1

Karena P2 > 0, maka

X3 = X2 + 1 = 2 + 1 = 3 dan Y3 = Y2 – 1 = 8 –1 = 7 , jadi Titik selanjutnya : (3,7)

P3 = p2 + 2 x3 + 1 – 2 y3 = 1 + 2.(3) + 1 – 2.(7) = – 6

(7, 13), (1, 13), (7, –1), (1, –1), (11, 9), (–3, 9), (11, 3), (–3, 3) Iterasi ke-4:

K = 3 X3 = 3 Y3 = 7 P3 = – 6

Karena P3 < 0, maka

(9)

(8, 13), (0, 13), (8, –1), (0, –1), (11, 10), (–3, 10), (11, 2), (–3, 2)

Iterasi ke-5:

K = 4 X4 = 4 Y4 = 7 P4 = 3

Karena P4 > 0, maka

P5 = p4 + 2 x4 + 1 – 2 y4 = 3 + 2.(5) + 1 – 2.(6) = 2

(9, 12), (–1, 12), (9, 0), (–1, 0), (10, 11), (–2, 11), (10, 1), (–2, 1)

Iterasi ke-6:

K = 5 X5 = 5 Y5 = 6 P5 = 2

Karena P5 > 0, maka

(10)

Bila digambar, hasil untuk oktan ke-1 ditunjukkan oleh gambar (2.13).

Gambar 2.13: Posisi piksel pada pembentukan lingkaran dengan titik pusat (0,0) dan jari-jari 8

Bab 4

Transformasi Geometri

Matrik penyajian Translasi : T =

1 0 0 1 0 0 1 y x t t , sehingga 1 ' ' y x = 1 0 0 1 0 0 1 y x t t 1 y x

Matrik penyajian Scalling : S =

1 0 0 0 0 0 0 y x S S , sehingga 1 ' ' y x = 1 0 0 0 0 0 0 y x S S 1 y x

Matrik penyajian Rotasi: R =

1 0 0 0 cos sin 0 sin cos , sehingga

(11)

1 ' ' y x = 1 0 0 0 cos sin 0 sin cos 1 y x Contoh 4.7

Tentukan posisi dari segitiga ABC yang dibentuk oleh titik-titik A(10,2), B(10,8) dan C(3,2) jika dilakukan transformasi berikut :

a) translasi kearah sumbu x = 4, kearah sumbu y = −2

b) Scalling dengan skala kearah sumbu x = 2, kearah sumbu y = −2 c) Diputar 90o berlawanan jarum jam

Jawab: a) 1 ' ' y x = 1 0 0 2 1 0 4 0 1 1 1 1 2 8 2 3 10 10 = 1 1 1 0 6 0 7 14 14

diperoleh A’(14,0), B’(14,6) dan C’(7,0)

b) 1 ' ' y x = 1 0 0 0 2 0 0 0 2 1 1 1 2 8 2 3 10 10 = 1 1 1 4 16 4 6 20 20

diperoleh A’(20, −4), B’(20, −16) dan C’(6, −4)

c) 1 ' ' y x = 1 0 0 0 90 cos 90 sin 0 90 sin 90 cos 0 0 0 0 1 1 1 2 8 2 3 10 10 = 1 1 1 3 10 10 2 8 2

diperoleh A’(−2, 10), B’(−8, 10) dan C’(−2, 3)

4.5 Komposisi Matrik Transformasi 2D Contoh 4.8

Tentukan posisi dari segitiga ABC yang dibentuk oleh titik-titik A(5,5), B(10,5) dan C(8,10) jika

dilakukan komposisi transformasi berikut: penggeseran pada 6 6

(12)

berlawanan jarum jam, kemudian diakhiri dengan penskalaan dengan faktor skala 3 3 terhadap titik pusat P(0,0). Jawab:

Dalam hal ini kita harus menghitung matrik komposisi berikut

1 * * * 1 ' ' y x T R S y x

Proses dilakukan terhadap operasi translasi terlebih dahulu

1 0 0 10 5 5 8 10 5 1 0 0 6 1 0 6 0 1 1 0 0 0 ) 90 cos( ) 90 sin( 0 ) 90 sin( ) 90 cos( 1 0 0 0 3 0 0 0 3 1 ' ' y x 1 1 1 42 48 33 48 33 33 1 ' ' y x

Diperoleh titik hasil transformasi : A’(−33, 33), B’(−33, 48) dan C’(−48, 42)

4.8 Transformasi Geometri 3D

Transformasi geometri 3D merupakan pengembangan dari transformasi geometri 2D. Secara umum representasi transformasi pada 3D juga dibuat dalam bentuk matrik untuk memudahkan perhitungan. 4.8.1 Translasi z x y (x, y, z) (x’, y’, z’) T (Tx, Ty, Tz)

(13)

Dalam hal ini, z y x T z z T y y T x x ' ' '

. Dalam bentuk matrik

1 1 0 0 0 1 0 0 0 1 0 0 0 1 1 ' ' ' z y x T T T z y x z y x 4.8.2 Penskalaan (Scalling)

Dalam hal ini,

z S z y S y x S x z y x . ' . ' . '

. Dalam bentuk matrik

1 1 0 0 0 0 0 0 0 0 0 0 0 0 1 ' ' ' z y x S S S z y x z y x 4.8.3 Rotasi

Rotasi terhadap sumbu-z sebesar sudut Ө.

z x y (x, y, z) (x’, y’, z’) T (Sx, Sy, Sz) z x y (x, y, z) (x’, y’, z’)

(14)

Dalam hal ini, z z y x y y x x ' cos sin ' sin cos '

Dalam bentuk matrik rotasi terhadap sumbu-z sebesar sudut Ө.

1 1 0 0 0 0 1 0 0 0 0 cos sin 0 0 sin cos 1 ' ' ' z y x z y x

Dengan cara yang sama diperoleh rotasi terhadap sumbu-x sebesar sudut Ө.

cos sin ' sin cos ' ' z y z z y y x x

Dalam bentuk matrik rotasi terhadap sumbu-x sebesar sudut Ө.

1 1 0 0 0 0 cos sin 0 0 sin cos 0 0 0 0 1 1 ' ' ' z y x z y x

rotasi terhadap sumbu-y sebesar sudut Ө.

cos sin ' ' sin cos ' z x z y y z x x

(15)

1 1 0 0 0 0 cos 0 sin 0 0 1 0 0 sin 0 cos 1 ' ' ' z y x z y x

Bab 5

Viewing Dan Clipping 2D

5.1.2 Viewing Transformation

matrik transformasi dari World Coordinates ke Viewer Coordinates System adalah

1

0

1

0

1 *

1

0

0 0

y

x

v

u

M

_x _y y x VC WC

Sehingga posisi titik terhadap Viewing Coordinates adalah

1 *

1

w w VC WC v v

y

x

M

y

x

word VC WC viewer M P P * (5-1)

Pword = posisi titik terhadap World Coordinates (data posisi titik pembentuk permukaan obyek yang tersimpan di memori)

Pviewer = posisi titik terhadap Viewing Coordinates (posisi titik pembentuk bagian permukaan obyek yang ada di dalam window)

(16)

Sebuah segitiga T dibentuk oleh titik-titik (3,1), (4,1) dan (4,2) terletak pada World Coordinates dilihat oleh seorang pengamat dengan arah pandang atas P-Po, dimana Po(2,1) dan P(3.5 , 3). Arah pandang atas inilah yang dipakai sebagai Viewing Coordinates.

a) Hitunglah koordinat-koordinat segitiga T, terhadap pengamat (Viewing Coordinates). b) Sama seperti point (a), tetapi P(2,3) dan Po(2,1).

Jawab: a) P(3.5 , 3) Po(2,1) ) 8 . 0 , 6 . 0 ( 2 5 . 1 ) 2 , 5 . 1 ( ) 1 , 2 ( ) 3 , 5 . 3 ( ) 1 , 2 ( ) 3 , 5 . 3 ( 2 2 0 0 P P P P v ) 6 . 0 , 8 . 0 ( ) 1 , 0 , 0 ( ) 0 , 8 . 0 , 6 . 0 ( ) 1 , 0 , 0 ( x vx u

1

0

2

8 .

0

6 .

0

1

6 .

0

8 .

0

1

0

1

0

2

0

1 *

1

0

8 .

0

6 .

0

6 .

0

8 .

0

VC WC

M

w VC WC v M T T *

1

2 .

1

2

6 .

0

6 .

1

8 .

0

1

2

1

4

3 *

1

0

2

8 .

0

6 .

0

1

6 .

0

8 .

0

v

T

koordinat-koordinat segitiga T, terhadap pengamat adalah (0.8,0.6), (1,2), (1.6,1.2)

b) P(2 , 3) Po(2,1) ) 1 , 0 ( 2 0 ) 2 , 0 ( ) 1 , 2 ( ) 3 , 2 ( ) 1 , 2 ( ) 3 , 2 ( 2 2 0 0 P P P P v ) 0 , 0 , 1 ( ) 1 , 0 , 0 ( ) 0 , 1 , 0 ( ) 1 , 0 , 0 ( x vx u

(17)

Teknik ini diperlukan untuk menjaga proporsionalitas ukuran obyek. Gambar 5-5 menunjukkan sebuah titik yang terletak di (xw, yw) pada koordinat window ditransformasi ke (xv,yv) pada koordinat viewport dengan persamaan 5-2:

min max min min max min

xv

x

xw

x

_w _v dan min max min min max min

yv

y

yw

y

_w _v (5-2)

koordinat di normalisasi kedalam range [ –1, 1] seperti Gambar 5-6. Gambar 5-5: Transformasi dari window ke viewport

Word Coordinates System Device Coordinates System

Window Viewport XWmin X_Wmax YWmin YWmax xw yw

●

(xw, yw) (xv , yv) XVmax XVmin YVmax YVmin xv yv

(18)

Gambar 5-6: Normalisasi koordinat Sehingga, transformasi dari window ke Normalized Coordinates adalah

m in m ax m in

)

1 (

1 )

1 (

xw

x

_n _w atau

1

2 (

m in

)

m in m ax

xw

x

xw

x

_n _w m in m ax m in

)

1 (

1 )

1 (

yw

y

_n _w atau

1

2 (

m in

)

m in m ax

yw

y

yw

y

_n _w

transformasi dari Normalized Coordinates ke Viewport (Device Coordinates).

m in m ax m in

)

1 (

1 )

1 (

xv

x

_n _v atau

(

1 )

2 )

(

_max _min min n v

x

xv

x

m in m ax m in

)

1 (

1 )

1 (

yv

y

_n _v atau

(

1 )

2 )

(

_max _min min n v

y

yv

y

Contoh 5.2

(19)

Diketahui sebuah titik terletak di (1, 0) pada World Coordinates dilihat melalui sebuah window berukuran (0, −1) – (2, 1). Tentukan posisi titik tersebut pada Device Coordinates, bila titik tersebut ditempatkan pada viewport berukuran (50, 100) – (600, 400) seperti pada Gambar 5-6, (a) tanpa Normalized Coordinates (b) dengan Normalized Coordinates (c) dengan Normalized

Coordinates menggunakan standart VGA 640 × 480 (d) dengan Normalized Coordinates

menggunakan standart SVGA 800 × 600

Gambar 5-6: Sebuah titik terletak di (1,0) pada World Coordinates System Jawab: (a) min max min min max min

xv

x

xw

x

_w _v min max min min max min

yv

y

yw

y

_w _v 50 600 50 0 2 0 1 x_v 100 400 100 ) 1 ( 1 ) 1 ( 0 yv xv = 325 yv = 250

(b) Transformasi dari window ke Normalized Coordinates

)

(

2

1

_{m in} m in m ax

xw

x

xw

x

_n _w

1

2 (

_{m in}

)

m in m ax

yw

y

yw

y

_n _w

0 )

0

1 (

0

2

1

n

x

[

0 (

1 )]

0 )

1 (

1

2

1

n

y

Transformasi dari Normalized Coordinates ke Device Coordinates (viewport)

)

1 (

2 )

(

_max _min min n v

x

xv

x

(

1 )

2 )

(

_max _min min n v

y

yv

y

(20)

325 )

1

0 (

2 )

50

600 (

50

v

x

(

0

1 )

250

2 )

100

400 (

100

v

y

(c) standart VGA 640 × 480

)

1 (

2 )

(

_max _min min n v

x

xv

x

(

1 )

2 )

(

_max _min min n v

y

yv

y

320 )

1

0 (

2 )

0

640 (

0

v

x

(

0

1 )

240

2 )

0

480 (

0

v

y

(d) standart SVGA 800 × 600

)

1 (

2 )

(

_max _min min n v

x

xv

x

(

1 )

2 )

(

_max _min min n v

y

yv

y

400 )

1

0 (

2 )

0

800 (

0

v

x

(

0

1 )

300

2 )

0

600 (

0

v

y

5.2.1 Clipping Titik m ax m in x x x dan y_{m in} y y_{m ax} (5-6) Contoh 5.3

Diketahui sebuah koordinat window mempunyai diagonal titik (5,7) − (25,20). Diketahui pula titik-titik A(1,5), B(7,10), C(100,15) dan D(8,23), terletak seperti pada Gambar 5-10. Titik-titik yang akan ditampilkan dilayar adalah titik-titik yang berada didalam window, maka titik A(1,5) dan titik D(8,23) harus dilakukan clipping, sedangkan titik B(7,10) dan titik C(10,15) tidak dilakukan clipping. Window Xmax = 25 Xmin = 5 Ymax = 20 Ymax = 7

•

A(1,5)

•B

(7,10)

•

C(10,15)

•

D(8,23)

(21)

Gambar 5-10(a): Titik-titik A, B, C, dan D sebelum dilakukan clipping.

Gambar 5-10(b): Setelah diclipping hanya titik B dan C saja yang ditampilkan di layar.

5.2.2 Clipping Garis

Algoritma Clipping Garis Cohen-Sutherland

Window di bagi-bagi menjadi wilayah-wilayah yang didasarkan pada urutan kode berikut :

T B R L

T : Top B : Bottom R : Right L : Left Window Xmax = 25 Xmin = 5 Ymax = 20 Ymin = 7

•B

(7,10)

•

C(10,15)

(22)

Algoritma Kliping Cohen-Sutherland :

1. Tentukan region code dari setiap ujung garis

2. Jika kedua ujung garis memiliki regioncode 0000, maka garis berada di dalam window clipping. Gambar garis tersebut.

3. Jika salah satu ujung garis terletak di dalam window (garis P1P2), lakukan clipping

dengan cara berikut: tentukan titik potong garis dengan tepi window (misalnya titik P), kemudian gambar garis antara ujung garis yang didalam window P1 dengan titik potong

P.

L

R

B

T

1 0 0 0

Window

0 0 0 0

0 1 0 0

0 0 0 1

0 0 1 0

1 0 0 1

T L

T R

1 0 1 0

0 1 0 1

0 1 1 0

B R

B L

Sebelum proses clipping Setelah proses clipping

P1

P2

Sebelum proses clipping

P1

P2

P

(23)

4. Jika kedua ujung garis tidak berada didalam window, lakukan operasi logika AND untuk kedua region code

o Jika hasilnya tidak 0000, maka buang garis tersebut (invisible)

o Jika hasilnya 0000 (garis EF, garis CD dan garis AB), cari titik potong antara garis dengan sisi-sisi window. Cari dua titik potong yang berada di dalam window (E’ dan F’ atau C’ dan D’), kemudian gambar garis antara kedua titik potong tersebut.

5. Ulangi langkah 2 untuk garis yang lain.

Titik potong garis dengan batas window dihitung menggunakan persamaan berikut:

m y y

x

x ₁ ( batas 1) dan y y₁ m(x_batas x₁) (5-7)

Contoh 5.4

Diketahui kedudukan garis-garis pada sebuah window pada gambar 5-13: Berdasarkan gambar tersebut tentukan :

Sebelum proses clipping Setelah proses clipping

A B

•

C D E F

•

• • •

• _•

E’ F’ C’ D’

Sebelum proses clipping

E’

F’ _C’

D’

(24)

a. Region code dari titik-titik A, B, C, D, E, F, G, H, I, dan J, serta sebutkan berapa kategori yang dapat dibangun berdasakan region code tadi.

b. Dengan menggunakan algoritma clipping Cohen-Sutherland, jelaskan bagaimana proses clipping dilakukan terhadap garis CD, EF dan GH.

Jawab:

A) Titik Region code Kategori Titik A(3,4) 0 0 0 0 visible B(5,9) 0 0 0 0 visible C(5,11) 1 0 0 0 invisible D(7,8) 0 0 0 0 visible E(0,5) 0 0 0 1 invisible F(5,-1) 0 1 0 0 invisible G(0,3) 0 0 0 1 invisible H(3,-1) 0 1 0 0 invisible I(10,8) 0 0 1 0 invisible J(9,2) 0 0 1 0 invisible

Kategori I : Garis AB visible, karena region code kedua ujungnya 0000

Kategori II : Garis I J invisible karena, region code I = 0010 , J = 0010 dan 0 0 1 0 AND 0 0 1 0 = 0 0 1 0 ≠ 0 0 0 0 2 8 1 10 A(3,4) B(5,9) C(5,11) D(7,8) E(0,5) F(5, −1) G(0, 3) H(3, −1) I(10,8) J(9,2) Window 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 1 1 0 1 0 0 1 0 1 0 1 1 0 C’ E’ F’ H’ G’

•

(25)

Kategori III :

Garis CD candidates for clipping, karena 1 0 0 0 AND 0 0 0 0 = 0 0 0 0 Garis EF candidates for clipping, karena 0 0 0 1 AND 0 1 0 0 = 0 0 0 0 Garis GH candidates for clipping, karena 0 0 0 1 AND 0 1 0 0 = 0 0 0 0

B) Proses Clipping Clipping garis CD

Garis CD melewati titik C (5,11) region code 1000 (atas window) dan tittik D(7,8) region code 0000 (dalam window). Gradien garis CD : 2 3 5 7 11 8 1 2 1 2 x x y y m

Titik potong C’ antara garis CD dengan batas atas window ymax = 10 adalah

67 , 5 2 / 3 11 10 5 ) ( ₁ 1 x x m y y x x batas

Titik potong C’ (5,67 , 10) region code = 0000

Clipp garis CC’ dan gambar garis C’D, karena garis C’D region code kedua ujungnya 0000 Clipping garis EF

Garis EF melewati titik E (0, 5) region code 0001 (kiri window) dan titik F(5, −1) region code 0100 (bawah window). Gradien garis EF 5 6 0 5 5 1 1 2 1 2 x x y y m

Titik potong E’ antara garis EF dengan batas kiri window xmin = 2 adalah

6 , 2 ) 0 2 ( 5 6 5 ) ( ₁ 1 y y x x m y y _batas

Titik potong E’(2, 2,6) region code = 0000

(26)

67 , 2 3 8 2 / 3 5 1 0 ) ( ₁ 1 x x m y y x x batas

Titik potong F’ (2,67 , 1) region code = 0000

Clipp garis EE’ dan garis FF’ karena keduanya invisible, kemudian gambar garis E’F’, karena region code kedua ujungnya 0000

Clipping garis GH

Garis GH melewati titik G (0, 3) region code 0001 (kiri window) dan H(3, −1) region code 0100 (bawah window) 3 4 0 3 3 1 1 2 1 2 x x y y m

Titik potong G’ antara garis GH dengan batas kiri window xmin = 2 adalah

3 , 0 ) 0 2 ( 3 4 3 ) ( ₁ 1 y y x x m y y _batas

Titik potong G’(2, 0,3) region code = 0100 ≠ 0000

Titik potong H’ antara garis GH dengan batas bawah window ymin = 1 adalah

5 , 1 3 / 4 3 1 0 ) ( ₁ 1 x x m y y x x batas

Titik potong H’ (1,5 , 1) region code = 0001 ≠ 0000

(27)

Hasil Clipping

Soal – Soal Latihan

2. Diketahui 2 buah titik A dan titik B. Bila titik A sebagai titik awal dan titik B sebagai titik akhir, tentukan titik-titik antara yang menghubungkan titik A dan titik B sehingga membentuk garis AB dengan menggunakan (a) Algoritma brute force (b) algoritma DDA (c) algoritma Bressenham , jika :

i) A(3,2) dan B(11, 6)

ii) A(3,2) dan B(7, 7)

C’ E’ F’

•

Window 2 8 1 10 A(3,4) B(5,9) D(7,8)

(28)

iii) A(–5, 10) dan B(0, 0)

iv) A(–5, 4) dan B(0,0)

3 Berdasarkan soal no.2, bagaimana menurut saudara, mana algoritma yang lebih baik, Algoritma brute force , algoritma DDA atau algoritma Bressenham ? Mengapa ?

4. (a) Buatlah gambar kurva lingkaran dengan pusat lingkaran (0,0) dan jari-jari 6, perhitungan berdasarkan dari oktan kuadran pertama dimana x = 0 sampai y = r. Koordinat titik awal dimulai dari (x,r) = (0,6). Untuk mempermudah perhitungan gunakan P0 = 1 – r (

sekali lagi, ini hanya untuk mempermudah perhitungan dalam contoh). (b) sama seperti soal (a), tetapi pusat lingkarang di P(2,5).

2. Tentukan posisi dari segitiga ABC yang dibentuk oleh titik-titik A(20,24), B(15,20) dan C(60,12), jika dilakukan pemutaran dengan pusat sumbu koordinat dengan rotasi putarnya 30 derajat berlawanan arah dengan arah jarum jam.

4. Tentukan posisi dari segitiga ABC yang dibentuk oleh titik-titik A(10,5,6), B(15,18,2) dan C(30,25,10) jika dilakukan transformasi berikut :

a) translasi kearah sumbu x = 2, sumbu y = −3, sumbu z = 4

b) Scalling dengan skala kearah sumbu x = 5, sumbu y = −3, sumbu z = 7 c) Diputar 45o terhadap sumbu y

1. Diketahui sebuah titik terletak di (2, –1) pada World Coordinates System dilihat melalui sebuah window berukuran (–1, −3) – (3, 2). Tentukan posisi titik tersebut pada Device

Coordinates System, bila titik tersebut ditempatkan pada viewport berukuran (30, 20) –

(330, 270) (a) tanpa Normalized Coordinates (b) dengan Normalized Coordinates (c) dengan Normalized Coordinates menggunakan standart XGA 1024 × 768 (d) dengan

Normalized Coordinates menggunakan standart SXGA 1280 × 1024

2. Diketahui sebuah koordinat window mempunyai diagonal titik (2,8) − (20,20). Diketahui pula titik-titik A(1,5), B(7,10), C(10,15) dan D(8,23). Agar bisa ditampilkan dilayar, tentukan titik-titik mana yang harus dilakukan clipping

(29)

3. Tentukan hasil clipping garis menggunakan algoritma Cohen-Sutherland untuk gambar berikut

4. Tentukan hasil clipping garis menggunakan algoritma Liang-Barsky untuk gambar berikut Window −3 6 −1 8 A(1,4) B(−5,10) C(2,9) E (−5, −2) D(3, −3) F(8, 9) G(4,1) H(10,1) Window −1 4 2 7 A(−3,3) B(1,9) C(3,9) E (2, 5) D(5, 3) F(1, 0)

(30)

5. Lakukan Clipping dengan algoritma Sutherland-Hodgman dari sebuah polygon (A, B, C, D) yang dibatasi oleh window segi empat ( 2, 1) – (12,8) seperti gambar berikut

2 12 1 8 A(3, 10) B(11, 10) C(10, 0) D(4, 0)