Teori
Kliping
Clipping
berasal dari kata clip, yang secara umum memiliki arti memotong. Dalam ilmu
grafika komputer, clipping merupakan proses pemotongan objek sehingga hanya
bagian objek yang berada di dalam area tampil(viewport) yang dapat dilihat oleh
user, sedangkan bagian objek yang berada di luar area tampil akan
disembunyikan. Hal tersebut dilakukan agar proses perhitungan koordinat pixel
pada layar tidak terlalu rumit.
Jika
metode untuk menampilkan atau memotong bagian dari sebuah objek untuk
ditampilkan pada sebuah media berupa window disebut clipping, maka media yang digunakan untuk memotong objek dan
menampilkannya pada media tersebut, disebut sebagai clip-window (window pengklip). klip window yang digunakan untuk
melakukan proses kliping bisa berbagai macam bentuk dari window, bisa empat
persegi panjang, bujur sangkar, segitiga, lingkaran, atau bentuk bangun ruang
yang lainnya. Tetapi yang sudah umum digunakan berupa rectangle window atau window persegi empat, sebab bentuk monitor
yang umum pun memiliki bentuk empat persegi panjang.
Pada
tahun 1974, Sutherland dan Hodgman memperkenalkan sebuah teknik yang mereka
temukan untuk menguji, apakah bagian dari sebuah poligon dapat terlihat jika
poligon tersebut berada didalam window, dan melakukan proses kliping luar bagian
polygon yang berada diluar window. Metode yang mereka gunakan atau mereka
kenalkan menguji setiap sisi dari window untuk bisa menampilkan bagian yang
berada didalam batasannya. Metode ini memang dibuat untuk melakukan proses
kliping dimana objek yang digunakan berupa poligon.
Ada
beberapa teknik yang dapat digunakan untuk melakukan proses clipping,
diantaranya adalah sebagai berikut :
1. Vertex Clipping
2. Line Clipping
3. Polygon Clipping
Sebenarnya
metode kliping yang telah ada, semuanya memiliki cara yang sama yaitu
menentukan apakah sebuah titik berada dalam window atau berada diluar window,
dan apakah semua, sebagian atau tidak
sama sekali sebuah garis yang terbentuk oleh dua buah titik berada pada window.
Gambar :Keadaan Garis Terhadap
Window Klip
Dengan
melihat gambar diatas maka prosedur untuk
mengklip sebuah garis itu bergantung pada letak end-point dari sebuah garis terhadap sisi window pengklip, lalu
mengikuti :
1. Jika
kedua end-point berada didalam
window, maka seluruhnya terlihat.
2. Jika
satu end-point berada didalam window
dan yang lainnya berada diluar window, maka garis tersebut memotong sisi window
dan bagian dari garis tersebut yang berada didalam window yang terlihat.
3. Jika
kedua end-point berada diluar window,
maka perhitungan diperlukan untuk menentukan, jika garis tersebut tidak
memotong sisi window manapun maka garis tersebut secara keseluruhan tidak
terlihat, atau jika garis tersebut memotong dua buah sisi window maka bagian
tengah yang berada didalam window yang terlihat.
Metode diatas merupakan prinsip dasar
dalam melakukan kliping terhadap suatu objek. Setelah melakukan proses diatas
maka objek yang telah kita kliping akan terlihat apakah tampak pada window atau
tidak. Objek-objek yang berbeda memerlukan teknik kliping yang berbeda pula,
hanya ide dasarnya melihat pada penjelasan proses kliping diatas.
Vertex Clipping
(Clipping Titik)
Teknik
yang digunakan untuk mengimplementasikan Vertex Clipping cukup sederhana yaitu
dengan menggunakan rumus umum sebagai berikut :
Xmin
≤ x ≤ Xmax
Ymin
≤ y ≤ Ymax
Xmin,
Xmax, Ymin, dan Ymax merupakan batas maksimum untuk clipping window yang
berbentuk persegi empat dengan posisi standar. Agar teknik ini dapat di
jalankan, kedua kondisi di atas harus terpenuhi. Jika ada sebuah titik yang
tidak memenuhi kedua kondisi tersebut, maka titik tersebut tidak akan muncul
pada viewport.
Contoh
:
Terdapat
2 buah titik, yaitu P1(2,2) dan P2(3,6) dengan Xmin = 1, Xmax = 5, Ymin = 1,
dan Ymax = 5.
contoh
1 (vertex clipping)
Dari
gambar di atas dapat dilihat bahwa titik P2 tidak memenuhi kedua kondisi umum
dari vertex clipping berada sehingga titik P2 tidak akan di tampilkan.
Clipping
titik dapat diaplikasikan pada scene yang menampilkan ledakan atau percikan air
pada gelombang laut yang dibuat dengan mendistribusikan beberapa partikel.
Line
Clipping (Clipping Garis)
Line clipping diproses dengan melakukan inside-outside test, yaitu memeriksa kedua titik ujungdari
garis tersebut .Berdasarkan test tersebut
garis dapat dikategorikan
menjadi 4 jenis, yaitu :
Jenis Line Clipping
1. Invisible
: Garis yang tidak terlihat
sepenuhnya / berada di luar clipping window.
2. Half-partial
: Garis yang terpotong sebagian oleh
clipping window.
3. Full-partial
: Garis yang terpotong penuh oleh
clipping window dan melintasi
clipping window.
4. Visible
: Garis yang terletak di dalam clipping window.
Untuk garis
yang invisible dan visible tidak perlu dilakukan aksi
clipping karena pada kondisi invisible,
garis tidak perlu ditampilkan,
sedangkan
pada kondisi visible garis bias langsung ditampilkan.
Untuk segmen garis dengan
end point
(x1, y1) dan (x2, y2) serta keduanya terletak di luar
clipping window memiliki persamaan.
Y = x1 + u(x2 - x1)
X = x1 + u(x2 - x1)
0 ≤ u ≤ 1.
Persamaan tersebut dapat digunakan untuk mengenali nilai
parameter untuk koordinat pemotongan dengan bata
clipping window.
Dalam melakukan teknik
line clipping dapat menggunakan
beberapa algoritma, seperti :
- Cohen-Sutherland
- Liang-Barsky
Algoritma yang paling terkenal
adalah algoritma Cohen-Sutherland. Pada algoritma
ini setiap titik
ujung (endpoint) dari garis direpresentasikan kedalam
4 digit angka biner yang
disebut region code. Masing-masing digit tersebut akan menentukan posisi
titik relative terhadap
batas clipping yang berbentuk
segi empat. Untuk lebih
jelas dapat dilihat
pada bagan dan
tabel di bawah ini.
Setiap ujung garis
diberi kode 4 bit dan disebut
sebagai region code,
region code ditentukan berdasarkan area dimana ujung garis
tersebut berada. Cohen-Sutherland menyusun
region code
Region Code
Bit ke-0 : Region Kiri (L)
Bit ke-1 : Region Kanan (R)
Bit ke-2 : Region Bawah (B)
Bit ke-3 : Region Atas (T)
Bit dengan nilai 1 menandakan bahwa titik berada
pada region yang bersangkutan. Jika
tidak maka akan
diset dengan nilai 0.
Polygon
Clipping
Polygon merupakan bidang yang tersusun dari verteks (titik sudut)
dan edge (garis penghubung
setiap verteks). Untuk dapat
melakukan proses clipping pada polygon diperlukan
algoritma yang lebih kompleks dari kedua teknik
clipping yang telah di bahas sebelumnya. Salah satunya adalah algortima Sutherland-Hodgman .Ide dasarnya adalah memperhatikan edge pada setiap arah
pandang, lalu clipping polygon dengan
persamaan edge, kemudian lakukan clipping tersebut
pada semua edge hingga polygon terpotong sepenuhnya. Berikut ini ketentuan dari
algoritma Sutherland-Hodgman :
1. Polygon
dapat
dipotong dengan setiap edge dari window sekali pada satu waktu.
2. Vertex
yang telah terpotong
akan disimpan untuk
kemudian digunakan untuk memotong edge
yang masih ada.
3. Perhatikan
bahwa jumlah vertex biasanya berubah-ubah dan
sering bertambah.
contoh polygon slipping
STUDI
KASUS:
Vertex
cliping
Terdapat 2 buah titik, yaitu
P1(2,2) dan P2(3,6) dengan Xmin = 1, Xmax = 5,
Ymin = 1, dan Ymax = 5.
contoh kasus
1 (vertex clipping)
Dari gambar di atas dapat
dilihat bahwa titik P2 tidak memenuhi kedua kondisi umum dari vertex clipping
berada sehingga titik P2 tidak akan di tampilkan.
Clipping titik dapat
diaplikasikan pada scene yang menampilkan ledakan atau percikan air pada
gelombang laut yang dibuat dengan mendistribusikan beberapa partikel.
Line
cliping
Diketahui dua buah garis
yaitu garis AB dengan titik A(2,2) dan titik B(3,5). Kemudian garis CD dengan
titik C(2,7) dan titik D(5,7). Lalu titik E(0,-1) dan titik F(7,7). Clipping
window dengan Xmin = 1, Xmax = 6, Ymin =
1, dan Ymax = 6.
Langkah penyelesaian :
Lakukan pengecekan pada
setiap titik terhadap window
a. Garis AB
Titik A(2,2)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
2 > 1
|
|
R = 0
|
X < Xmax ;
2 < 6
|
|
B = 0
|
Y > Ymin ;
2 > 1
|
|
T = 0
|
Y < Ymax ;
2 < 6
|
Titik B(3,5)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
3 > 1
|
|
R = 0
|
X < Xmax ;
3 < 6
|
|
B = 0
|
Y > Ymin ;
5 > 1
|
|
T = 0
|
Y < Ymax ;
5 < 6
|
Dari kedua tabel di atas
terlihat bahwa garis AB berada pada region 0000, yaitu terletak di dalam
clipping window dan bersifat visible. Oleh karena itu garis AB dapat dilihat
sepenuhnya tanpa melalui proses clipping. Hal tersebut dapat dibuktikan dengan
menggunakan operator logika AND terhadap kedua titik yang menyusun garis AB,
yaitu 0000 AND 0000 = 0000.
b. Garis CD
Titik C(2,7)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
2 > 1
|
|
R = 0
|
X < Xmax ;
2 < 6
|
|
B = 0
|
Y > Ymin ;
7 > 1
|
|
T = 1
|
Y > Ymax ;
7 < 6
|
Titik D(5,7)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
5 > 1
|
|
R = 0
|
X < Xmax ;
5 < 6
|
|
B = 0
|
Y > Ymin ;
7 > 1
|
|
T = 1
|
Y < Ymax ;
7 > 6
|
Dari kedua tabel di atas
terlihat bahwa garis CD berada pada region 1000, yaitu terletak di sebelah atas
clipping window dan bersifat invisible. Oleh karena itu garis CD tidak dapat
dilihat sepenuhnya dan tidak melalui proses clipping. Hal tersebut dapat
dibuktikan dengan menggunakan operator logika AND terhadap kedua titik yang
menyusun garis CD, yaitu 1000 AND 1000 = 1000.
c. Garis EF
Titik E(2,-1)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
2 > 1
|
|
R = 0
|
X < Xmax ;
2 < 6
|
|
B = 1
|
Y < Ymin ;
-1 < 1
|
|
T = 0
|
Y < Ymax ;
-1 < 6
|
Titik F(3,7)
|
Region
|
Kondisi
|
|
L = 0
|
X > Xmin ;
3 > 1
|
|
R = 0
|
X < Xmax ;
3 < 6
|
|
B = 0
|
Y > Ymin ;
7 > 1
|
|
T = 1
|
Y > Ymax ;
7 > 6
|
Dari kedua tabel di atas
terlihat bahwa garis EF memiliki titik yang berada di luar clipping window,
namun kedua titik tersebut dihubungkan dengan sebuah garis yang melalui
clipping window, sehingga garis EF bersifat Full-partial dan harus melalui
proses clipping. Hal tersebut dapat dibuktikan dengan menggunakan operator
logika AND terhadap kedua titik yang menyusun garis EF, yaitu 0100 AND 1000 =
0000. Untuk melakukan proses clipping dapat mengikuti langkah-langkah berikut
ini :
1.
Menentukan titik
potong yang dihitung berdasarkan bit yang bernilai 1 dari region code dengan
menggunakan panduan tabel berikut ini :
|
Region Bit
|
Berpotongan
dengan
|
Dicari
|
Titik
Potong
|
|
L = 1
|
Xmin
|
yp1
|
( Xmin ,
yp1 )
|
|
R = 1
|
Xmax
|
Yp2
|
( Xmin ,
yp2 )
|
|
B = 1
|
Ymin
|
xp1
|
( yp1 ,
Ymin )
|
|
T = 1
|
Ymax
|
Xp2
|
( yp2 ,
Ymax )
|
Dengan nilai xp1 ,
xp2 , yp1 , yp2 yang dapat
dihitung dengan menggunakan persamaan :
xp1 = x1 +
( Ymin – y1 ) / m
xp2 = x1 +
( Ymax – y1 ) / m
yp1 = y1 +
m * ( Xmin – x1 )
yp2 = y1 +
m * ( Xmax – x1 )
dimana nilai m adalah
sebagai berikut :
m = ( y2 – y1 )
/ ( x2 – x1 )
Sehingga untuk garis EF
(2,-1) dan (3, 7) dapat dilakukan perhitungan :
m = 7 – (-1) / 3 – 2 = 8/1 =
8
Region code untuk titik
E(2,-1) adalah 0100, maka R = 1. Pada titik ini akan dicari xp1.
xp1 = x1 +
( Ymin – y1 ) / m
= 2 + (1 – (-1)) / 8 = 2,25
Maka titik
potongnya adalah (2,25 ; 1)
Region code untuk titik F(3,
7) adalah 1000, maka T = 1. Pada titik ini akan dicari xp1.
Xp2 = x1 +
( Ymax – y1 ) / m
= 3 + (6 – 7) / 8 = 2,875
Maka titik
potongnya adalah (2,875 ; 6)
Dari perhitungan di atas
dapat disimpulkan bahwa garis EF akan di representasikan melalui titik E(2,25 ;
1) dan titik F(2, 875 ; 6)
Polygon
cliping
Diketahui sebuah polygon ABC dengan titik A(4,7), B(10,4), dan C(2,0).
Clipping window memiliki nilai Xmin = 1, Xmax =
8, Ymin = 1, dan Ymax = 6.
Contoh Kasus Polygon Clipping
Dari gambar di atas dapat dilihat bahwa terdapat 6 buah titik potong yang
akan dicari. Pada bagian atas clipping window terdapat 2 buah titik potong,
yaitu perpotongan garis AC dengan Ymax dan garis AB dengan Ymax.
Lalu pada bagian kanan clipping window terdapat 2 buah titik potong, yaitu
perpotongan garis BA dengan Xmax dan garis BC dengan Xmax.
Kemudian pada bagian bawah window clipping juga terdapat 2 buah titik potong,
yaitu perpotongan garis CA dengan Ymin dan garis CB dengan Ymin.
Oleh karena itu akan dilakukan 3 kali interseksi.
Interseksi bagian atas
Mencari titik potong antara garis AC [(4,7) ; (2,0)] dan Ymax .
slope = (y2 – y1) / (x2 – x1).
= (0 – 7) / (2 – 4) = -7 / -2 = 3,5
IX = x1 + (ymax – y1) / slope
= 4 + (6 – 7) / 3,5 = 3,714
IY = ymax = 6
Maka titik potongnya adalah (IX, IY) = (3,714 ; 6)
Mencari titik potong antara garis AB [(4,7) ; (10,4)] dan Ymax .
slope = (y2 – y1) / (x2 – x1).
= (4 – 7) / (10 – 4) = -3 / 6 = -0,5
IX = x1 + (ymax – y1) / slope
= 4 + (6 – 7) / -0,5 = 6
IY = ymax = 6
Maka titik potongnya adalah (IX, IY) = (6, 6)
Interseksi bagian kanan
Mencari titik potong antara garis BA [(10,4) ; (4,7)] dan Xmax .
slope = (y2 – y1) / (x2 – x1).
= (7 – 4) / (4 – 10) = 3 / -6 = -0,5
IX = xmax = 8
IY = slope * (xmax – x1) + y1
= -0,5 * (8 – 10) + 4 = 5
Maka titik potongnya adalah (IX, IY) = (8, 5)
Mencari titik potong antara garis BC [(10,4) ; (2,0)] dan Xmax .
slope = (y2 – y1) / (x2 – x1).
= (0 – 4) / (2 – 10) = -4 / -8 = 0,5
IX = xmax = 8
IY = slope * (xmax – x1) + y1
= 0,5 * (8 – 10) + 4 = 3
Maka titik potongnya adalah (IX, IY) = (8, 3)
Interseksi bagian bawah
Mencari titik potong antara garis CA [(2,0) ; (4,7)] dan Ymin.
slope = (y2 – y1) / (x2 – x1).
= (7 – 0) / (4 – 2) = 7 / 2 = 3,5
IX = x1 + (ymin – y1) / slope
= 2 + (1 – 0) / 3,5 = 2,286
IY = ymin = 1
Maka titik potongnya adalah (IX, IY) = (2,286 ; 1)
Mencari titik potong antara garis CB [(2,0) ; (10,4)] dan Ymin.
slope = (y2 – y1) / (x2 – x1).
= (4 – 0) / (10 – 2) = 4 / 8 = 0,5
IX = x1 + (ymin – y1) / slope
= 2 + (1 – 0) / 0,5 = 4
IY = ymin = 1
Maka titik potongnya adalah (IX, IY) = (4, 1)
Dari perhitungan yang telah dilakukan di atas, maka akan dibuat polygon
baru dengan titik A(3,714 ; 6), B(6, 6), C(8, 5), D(8, 3), E(2,286 ; 1), dan
F(4, 1).
Hasil Polygon Clipping
Kesimpulan
Dari semua algoritma yang telah dibahas di atas, dapat disimpulkan bahwa ide dasar dalam proses clipping adalah
dengan menyembunyikan sementara
bagian dari objek yang
berada di luar viewport. Hal tersebut bermanfaat untuk mengurangi kerja
CPU dalam melakukan
komputasi gambar, sehingga CPU akan
berkerja dengan lebih efisien.
Saat
ini penelitian mengenai
algoritma clipping masih terus dikembangkan untuk
mencari cara yang paling efisien dalam melakukan proses tersebut. Setelah membaca artikel ini, saya sangat berharap anda
dapat mencari dan
mengembangkan algoritma clipping terbaik
dari yang pernah ada sebelumnya.
Daftar
pustaka :
Tiada ulasan:
Catat Ulasan