Computer Graphic Page : 26 of 26

  

GRAFIKA KOMPUTER

PENDAHULUAN

  Pada saat ditemukan pertama kali, komputer digunakan sebagai alat bantu untuk mempercepat proses hitung menghitung. Dalam perkembangan selanjutnya, banyaknya data yang harus ditangani menjadi sangat besar. Hal ini tentu menimbulkan persoalan baru, yakni bagaimana data yang sangat banyak bisa ditangani dan disajikan dengan cara yang lebih efisien dan efektif. Memang komputer bisa mencetak hasil keluaran sampai beribu-ribu halaman jika diperlukan. Tapi tentu akan sangat membosankan apabila manusia harus membaca laporan-laporan yang sangat panjang, tidak saja akan memakan waktu, tapi kemungkinan salah menjadi lebih besar, dan yang jelas, mereka yang membaca laporan- laporan tersebut harus benar-benar tahu apa yang sesungguhnya terkandung dalam angka- angka yang tersaji dalam laporan tersebut.

  Orang kemudian mengembangkan satu alat bantu yang bisa dipakai untuk menyajikan data dalam jumlah yang sangat besar ke dalam sebuah bagan, sehingga lebih mudah untuk dipahami. Dengan adanya alat bantu tersebut, pada saat-saat tertentu dan untuk keperluan- keperluan tertentu, orang lebih suka menggunakan bagan dibanding hanya melihat deretan angka yang sangat membosankan. Sejalan dengan hal ini, para ahli komputer juga tanggap dan mereka kemudian mengembangkan perangkat yang membuat komputer menjadi sangat pandai, yakni dengan menambahkan kemampuan grafis pada komputer-komputer yang mereka kembangkan. Sehingga untuk saat ini bisa dikatakan bahwa semua komputer pasti mempunyai kemampuan grafis dan kemudian lahirlah apa yang disebut dengan grafika komputer (computer graphic).

  Grafika komputer pada dasarnya adalah suatu bidang ilmu komputer yang mempelajari tentang cara-cara untuk meningkatkan dan memudahkan komunikasi antara manusia dengan mesin (komputer) dengan jalan membangkitkan, menyimpan dan memanipulasi gambar model suatu obyek menggunakan komputer. Grafika komputer memungkinkan kita berkomunikasi lewat gambar-gambar, bagan-bagan dan diagram-diagram

SISTEM GRAFIKA KOMPUTER

  Data yang banyak  dapat diwakili dengan bagan. Dalam hal ini, operator memasukkan sejumlah data, dan dengan prosedur tertentu komputer akan menampilkan bagan yang diinginkan. Bagan yang dihasilkan ini merupakan gambar statis karena operator tidak dapat berinterkasi dengan gambar yang ada pada layar komputer.

  Cara ini sangat tidak memadai, karena ada kalanya operator ingin berinteraksi langsung dengan gambar pada layar komputer. Sistem yang memungkinkan operator berdialog dengan apa yang terlihat pada layar komputer disebut dengan sistem grafika komputer interaktif (interactive computer graphic).

  Dalam sistem interaktif, operator bisa mengendalikan segala aspek gambar yang terlihat secara dinamis. Aspek-aspek tersebut : isi gambar, format gambar, bentuk gambar, ukuran gambar dan warna gambar. Pengendalian secara dinamis dapat dilakukan dengan piranti-piranti seperti : keyboard, mouse, joystick, light pen, dll.

  Keuntungan yang kita peroleh dari sistem interaktif adalah bahwa dengan mudah kita bisa menirukan atau mensimulasikan sesuatu kejadian dalam dunia nyata (real world) pada layar komputer. Berdasarkan cara pandang kita terhadap gambar yang ada pada layar, kita bisa membedakan apa yang dimaksud dengan motion dynamic dan update dynamic.

  

Motion dynamic  pada dasarnya adalah cara pandang kita terhadap suatu obyek yang

  bergerak dan kita sebagai pengamat dalam keadaan diam atau obyek yang kita amati diam dan kita sebagai pengamat bisa bergerak bebas di sekeliling obyek tersebut. Contoh : flight

  simulator.

  

Update dynamic  pada dasarnya berhubungan erat dengan perubahan sifat dari obyek

yang sedang diamati. Sifat-sifat tersebut bisa berupa bentuk, warna atau sifat-sifat yang lain.

  Dengan menggunakan komputer, dengan mudah kita mensimulasikan tabrakan antara dua buah mobil dengan kecepatan yang bisa dibuat bervariasi. Dengan cara ini, pabrik mobil bisa mempelajari hasil simulasi dan menambahkan unsur-unsur yang diperlukan untuk lebih menjamin keselamatan pengemudi dan penumpang.

PENERAPAN GRAFIKA KOMPUTER

  Computer Graphic mencakup bidang :

   Computer Aided Design (CAD)  untuk proses perancangan terutama pada sistem

  rekayasa dan arsitektur. Misal : grafika komputer bisa digunakan untuk merancang komponen-komponen dari sistem-sistem mekanis, elektris, elektro-mekanis, piranti- piranti elektronis, struktur bangunan, reaktor kimia, badan-badan mobil, pesawat terbang, badan kapal lengkap dengan ruang-ruang yang ada, jaringan komputer, jaringan telepon, dll. Dalam bidang ini tekanan utama dari pemakaian grafika komputer adalah untuk memproduksi gambar dengan ketelitian yang sangat tinggi. Selain itu, gambar yang dihasilkan dari CAD bisa dipakai sebagai masukan ke suatu sistem yang akan mengevaluasi model yang digambar sesuai kebutuhan dan dengan cara-cara tertentu operator bisa mengubah model yang sudah ada untuk disesuaikan dengan kebutuhan.

   Presentasi  Art  membuat logo, gambar

   Hiburan  game

   Pendidikan dan pelatihan  simulasi pesawat terbang (flight simulator)

   Visualisasi  GUI (Graphical User Interface)

KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER

  1. Berdasarkan tipe dari objek dan gambar yang dihasilkan. Terapan-terapan yang termasuk didalam kriteria ini antara lain gambar-gambar garis dari objek 2D dan 3D (yang sering disebut dengan wired-frame pictures), misalnya garis-garis yang menunjukkan struktur suatu bangunan, gambar 2D dengan gray scale yang berbeda, gambar 3D yang memperhatikan efek pencahayaan/bayangan.

  plotting, gambar bisa dibentuk dari sekumpulan data yang diketahui atau diperoleh dari

  basis data, sehingga gambar yang dihasilkan tidak bisa diubah kecuali mengubah basis data. Dalam interactive plotting, user bisa berinteraksi dengan gambar sehingga user bisa mengubah gambar yang tampil dilayar dengan menggunakan piranti yang ada. Dalam

  interactive design user bisa menggambar bentuk tertentu dimulai dari layar dalam keadaan

  kosong, kemudian ditambahkan sejumlah objek dimana user bisa mengubah gambar yang telah terbentuk dengan mudah, misalnya memperbesar atau memperkecil gambar.

  3. Berdasarkan role of the picture atau bagaimana gambar yang tertampil mempunyai arti bagi user atau siapa saja yang melihatnya. Dalam bidang-bidang tertentu misalnya kartografi, gambar yang dihasilkan merupakan produk utama, sedangkan pada bidang- bidang lain gambar yang dihasilkan hanya merupakan visualisasi dari suatu objek atau fenomena yang ingin diamati.

  4. Berdasarkan hubungan antara objek dan gambar yang tertampil. Dalam hal ini user dapat menampilkan sebuah gambar dalam sekali tampil, sekelompok gambar yang saling berhubungan atau dengan teknik lain.

  CITRA (Image Processing) vs GRAPHIC (Computer Graphic)

  Ada sejumlah kriteria yang bisa dipakai untuk mengelompokkan penerapan grafika komputer pada bidang-bidang seperti dijelaskan diatas, yaitu :

  2. Berdasarkan interaksi dan derajat pengendalian objek/gambar dalam layar. Dalam offline

  

 Citra : berorientasi pixel, dimana gambar pada komputer dibentuk dengan model 2D

  matrix M x N  BITMAP, sehingga untuk memanipulasi citra, cukup dengan memanipulasi warna/intensitas dari pixel yang bersangkutan (elemen matrixnya).

  Graphic : berorientasi vektor, sehingga untuk memanipulasi suatu grafik, yaitu dengan

  cara mengubah elemen-elemen dari vektor yang bersangkutan. Vektor memiliki arah dan besaran.

  

 Citra : mengolah data citra untuk mendapatkan interpretasi 2D atau 3D dari objek dalam

citra.

  

Graphic : Menggunakan model 2D atau 3D untuk mendapatkan hasil realistik pada layar

 Citra : menitikberatkan pembahasannya pada teknik-teknik untuk meningkatkan kualitas

  suatu citra yang telah ada sebelumnya sesuai dengan keperluan penggunanya atau pada metode persepsi mesin terhadap suatu informasi visual (misalnya dalam dunia robotika)

  Graphic : Grafika Komputer cenderung mempelajari konsep dan implementasi dari suatu

  metode untuk membangkitkan suatu citra maupun animasi, baik dalam bentuk dua dimensi maupun tiga dimensi.

  

 Citra : Pengolahan Citra berawal dari citra digital yang kemudian akan dianalisa dan atau

  disintesa ulang untuk mendapatkan citra baru dengan kualitas yang lebih baik, atau dianalisa untuk mendapatkan deskripsi objek-objek yang terdapat dalam citra tersebut.

  Graphic :Proses-proses Grafika Komputer berawal dari primitif-primitif dasar grafis (titik,

  garis, lingkaran dll) yang mendeskripsikan objek-objek yang kemudian akan membentuk suatu citra dua dimensi maupun tiga dimensi.

  0 1 2 3 4 Jika dipandang sebagai bitmap (BMP) dalam citra, maka

  gambar tersebut direpresentasikan sbg :

  1 0 1 1 1 0 2 0 1 0 1 0 3 0 1 0 1 0 4 0 1 0 1 0

  0 1 1 1 0

  Tapi jika di pandang sebagai vektor dalam grafik, maka gambar tersebut direpresentasikan sbg : 1. Cara pertama : (3,Timur),(4,Selatan),(3,Barat),(4,Utara).

  Kelemahan : kita tidak dapat menentukan titik asal dari vektor.

  2. Cara kedua : [(0,1),(0,3)], [(0,3),(4,3)], [(4,3),(4,1)], [(4,1),(0,1)] Dengan cara ini, maka kita mengetahui titik asal dan tujuan sehingga kita dapat memperoleh arah dan besar dari vektor tersebut. _{-1 2 2} Arah = tan [(Y2-Y1)/(X2-X1)] + (Y1-Y2)

  Besar =  (X1-X2) 3. Cara ketiga : Menggunakan informasi atribut segi empat.

  [(0,1),(4,3)] atau (0,1,4,3) Jika ada suatu gambar yang terdiri dari grafik dan area dapat diisi dengan warna tertentu, maka itu disebut grafik juga. Intinya grafik adalah gambar yang koordinatnya dapat diubah.

  MONITOR

  Dalam computer graphic, monitor adalah salah satu perangkat penting. (Zaman dulu, printer merupakan perangkat penting dalam computer graphic). Pada dasarnya, semua monitor dengan kemampuan grafis memiliki 3 komponen utama :

  1. Display

  2. Frame Buffer, dimana gambar yang akan ditampilkan ke layar disimpan sebagai matrix dimana nilai elemennya menunjukkan intensitas dari citra grafis yang akan ditampilkan.

  3. Display Controller/Display Processor, berfungsi untuk melewatkan isi frame buffer dan mengolahnya untuk ditampilkan ke display. Cara untuk menampilkan gambar pada layar membedakan jenis tampilan yang ada :

  1. Vector Display/Calligraphic Display/Stroke Display. (60-an)

  Frame buffer pada jenis vector display berisi display list/display program yang memberi

  perintah penggambaran titik, perintah penggambaran garis dan perintah penggambaran karakter. Perintah-perintah ini selanjutnya akan diolah oleh display

  processor yang akan mengubah data digital menjadi tegangan analog yang akan

  dipakai untuk memancarkan elektron, yang apabila mengenai tabung display yang dilapisi fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar. Karena sinar pendar dari fosfor itu tidak bertahan lama, dalam puluhan atau ratusan milidetik, maka elektron-elektron tersebut harus ditembakkan minimal 30 kali per detik untuk menghindari adanya kedip. Proses ini disebut sebagai electron refresh.

  2. Raster Display. (70-an) Dikembangkan berdasarkan teknologi televisi. Dalam jenis tampilan ini, grafis, karakter dan bentuk-bentuk lain selalu digambar berdasarkan komponen terkecilnya yaitu titik atau pixel/pel (picture element). Sebuah pixel pada layar bisa dihidup-matikan dengan mudah. Karena status sebuah pixel adalah hidup(nyala) atau mati, maka dengan mudah dikodekan menggunakan biner (0/1). Dengan cara inilah sesungguhnya suatu citra grafis disimpan dalam frame buffer. Untuk gambar hitam-putih  warna hitam digunakan bit 1 dan warna putih digunakan bit 0. Untuk gambar warna, ex :

   Citra 4 bit  menggunakan 16 kombinasi warna  Citra 8 bit  menggunakan 256 kombinasi warna  Citra 24 bit  menggunakan 16 juta kombinasi warna

  Jenis-jenis monitor :

  1. Layar Tabung (CRT = Cathode-Ray Tube)

  2. Layar datar (LED, LCD, Plasma display)

  

Figure 1. Basic Design of a magnetic-deflection CRT

Figure 2. Operation of an electron gun with an accelerating anode

Layar LCD

  Macam layar/tampilan :

  1. B/W : Hercules 2. Color : CGA, EGA, VGA, SVGA, XGA, IBM8514, dll. Setiap mode layar mempunyai perbedaan dalam beberapa hal, antara lain :

   Jumlah pixel dalam 1 layar (resolusi layar) Mis. 340 x 200, 640 x 400, 640 x 480, 800 x 600, 1024 x 968

  Y

  X Di dalamnya berisi cairan yang dapat diubah warnanya tergantung dari tegangan yang diberikan.

  Mis. Pada titik (x,y) ingin diberikan warna tertentu, maka bagian x dan bagian y dialiri tegangan tertentu . Warna (informasi warna)  jumlah byte untuk tiap pixel

   Mis. 2 color, 4 color, 16 color, 256 color, 16 M Color.

  Dot Pitch  Merupakan unit terkecil dalam menampilkan warna pixel.

   Dot pitch dapat dibedakan berdasarkan kerapatannya.

  Mis. 0.28mm, 0.26mm, 0.32mm, 0.39mm Semakin kecil dot pitch, maka tampilan gambar semakin halus.

  Warna tampilan layar Jumlah Warna Contoh Monitor

  Bit

  2

  1 B/W

  4

  2 CGA

  16

  4 Mode DOS 256

  8 VGA Mengapa jumlah warna yang ditampilkan selalu merupakan kelipatan 2,4,16,256  karena alasan efisiensi penggunaan teknologi yang telah ada dan kemudian dipadukan untuk menghasilkan tampilan warna yang baru.

  Contoh soal :

  Berapakah memori yang dibutuhkan untuk citra 8 bit dengan ukuran 800 x 600 ? Memori yang dibutuhkan = 800 x 600 x 8 bit = 3.840.000 bit 

  = 480.000 byte  469 KB

  Horizontal & Vertical Retrace

Refresh Rate :

  Kecepatan update dari awal (kiri atas layar) hingga kembali setelah vertcal retrace

  Horizontal Retrace Vertical Retrace PLOTTER

  Jika pada printer menggunakan Raster Technology (mencetak dari atas ke bawah, dari kiri ke kanan), maka pada plotter menggunakan Vector Technology (mencetak dari segala arah). NB : Scanner tidak termasuk hardware grafik, tapi lebih tepatnya termasuk hardware citra karena gambar hasil scan disimpan dalam bentuk bitmap (dengan teknologi raster).

PERANGKAT LUNAK GRAFIS

  Untuk menampilkan suatu informasi grafis, banyak perangkat lunak yang telah dibuat dalam membantu proses-proses dalam grafika komputer, contohnya :

   Lokasi (2D  x,y) , (3D  x,y,z)

   Warna

   Tipe Garis (Pattern)

   Ketebalan garis (Thickness)

   Lokasi  titik-titik ujung, mis : (x1,y1), (x2,y2) Ada juga yang menyatakan garis dengan : titik awal, arah dan panjang.

  Attributnya :

   Warna

  Attributnya :

   Corel draw, AutoCAD, 3D Studio MAX, MS.Paint, dll Perangkat Tools untuk pengembangan grafis (pustaka/library) :

  

PRIMITIF GRAFIS

TITIK (PIXEL/DOT)

  Dikumpulkan 1 minggu.

  Tugas I Buat Grafik dengan salah satu library di atas (BGI,OpenGL,DirectX).

   DirectX

   OpenGL

   BGI (Borland Graphic Interface)

GARIS (LINE)

LINGKARAN (CIRCLE)

   Jari-jari lingkaran atau radius (r atau d)

   Ketebalan (Thickness)

   Tipe Garis (Pattern)

   Warna

  ELLIPSE

  Attributnya :

   Titik pusat (Xp,Yp)

   Jari-jari horizonal (a) & Jari-jari vertical (b)

   Ketebalan (Thickness)

   Tipe Garis (Pattern)

   Warna

  POLYGON

   Yang teratur :

   Yang tidak teratur :

  Attributnya :

   Titik pusat (Xp,Yp) Poligon yang teratur dapat dibuat dengan menggunakan dimensi garis yang memiliki panjang tetap. Contoh :

  Polygon (6,3,5,4), dimana :

   Kurva Teratur Misal : Kurva sinus, cosinus, kurva y=x ²

  4 (x1,y1) (x2,y2) (x1,y1) (x2,y2)  Hal ini dapat dilakukan dengan rotasi

  4

  4

  4

  4

  (6,3)

   Kurva Tak Teratur Gunakan Metode Control Point. Misal : Bezier.

  KURVA

   (6,3)  lokasi awal

   Pattern Untuk menggambar segi – 4 seperti :

   Warna  Thickness

   Lokasi : Titik kiri atas (x1,y1) dan Titik kanan bawah (x2,y2)

  Attributnya :

  SEGI – 4

  Untuk polygon yang teratur dapat dibuat dengan menggunakan algoritma iterasi, tetapi untuk polygon yang tidak teratur digunakan suatu array yang menyimpan suatu lokasi titik-titik sikunya.

   4  Panjang sisi. Hasil :

   5  Segi 5

  Control Point

CHARACTER (FONT)

   Window API  DrawPixel (x,y,color)

  = 800 * y + x = 800 * 6 + 5 = 4805

  B800:0000h Karakter B800:0001h Attribut B800:0002h B800:0004h B800:0003h A000:0000h Warna A000:0001h Warna A000:0004h A000:0003h A000:0002h Mode Text Mode Grafis (0,0) (799,599) 800 600  Dengan titik acuan (0,0), maka alamat offsetnya :

  Jika ingin mengakses koordinat (5,6) dengan resolusi 800 x 600 : void mode_int (no_mode)

   DMA (Direct Memory Access)  langsung mangakses ke alamat memory : ex. Untuk mode text  B800:0000h Untuk mode grafis  A000:0000h

   Interupt, yaitu :

  2. Low Level Programming

   OPENGL GL_Drawdot (x,y,color)

  Attributnya :

   BGI  putpixel (x,y,color)

  1. Pustaka Grafik (Graphic Library), misal :

  Pembuatan titik dapat dilakukan dengan berbagai cara antara lain :

  Titik (Dot/Pixel) Titik merupakan elemen yang paling dasar.

   Warna

   Thickness  Super/Subscript

   Jenis Character  Kemiringan (Slanted), mis : horizontal, vertical

• H/W, yang beroperasi pada processor
• S/W, ada 2 yaitu : DOS dan BIOS

  { REGS R; R.h.ah = no_mode; Int86(0x10,&R,&R);

  } void setpixel_DMA (x,y,color) { char *Segmen = 0xA0000000;

  (Segmen+(800*y+x)) = color; } procedure getpixel_DMA(x,y,color); begin mem[A000:(800*y+x)] := color; end;

GARIS (LINE)

  Persamaan garis :

   Y y – y x – x _{1 1 2}

  = y – y x – x _{2 1 2 1}  y = m.x + c

  dimana :

  Y m = (y ^{2 -y 1 )/(x 2 -x 1} ) = y/x ₁

   c = y ^{1 – m.x 1 atau}

   c = y ^{2 – m.x 2} X ₁ X ₂ Algoritma Pembuatan Garis

  Algoritma pembuatan garis lurus vertikal dan horisontal relatif mudah, tetapi bila garis tersebut miring, maka algoritma menjadi sulit. Misalkan : Line (1,3,8,5). ₂ m = (y ^{2 -y 1 )/(x 2 -x 1 ) = (5-3)/(8-1) = /} _{2 19} ⁷ c = y ₂ ^{1 – m.x} ₁₉ ^{1 = 3 – / 7 .1 = / 7}

  y = / ^{7 .x + / 7} Selanjutnya kita membuat iterasi dari x ^{1 2}

   x

  Yi (dibulatkan) Xi Yi 7 6 5 4 3

  2 1 0 0123456789

  1

  3.00

  3

  10

  3

  2

3.29 Y

  3

  3.57

  4

  4

  3.86

  4

  5

  4.14

  4

  6

  4.43

  4

  7

  4.71

  5

  85.005

  X DDA (Digital Differential Analyser) Algorithm y m . x c

    y y y ₂   ₁ m

    x x x _{2 1}  

• Jika 0<m<1  y k+1 = y k + m x k+1 = x k + 1
• Jika m>1  x k+1 = x k + 1/m y k+1 = y k + 1

  Bresenham’s Algorithm (|m|<1

  Repeat If Pk<0 then

  Plot (Xk+1,Yk) Otherwise

  Plot (Xk+1,Yk+1) Until X=end

  Contoh : Line (20,10,30,18)

  DX = 10, DY = 8 Po = 2 DY - DX = 6

  2 ₁

  2

  2 ₁ P x y P _{k k}      _

  P x y     2 P y P _{ k k   }

2 DY = 16

  6 2 (27,16) 2 -2 (23,12) 7 -2 (28,16)

  3 14 (24,13)

  8 14 (29,17)

  4 10 (25,14)

  9 10 (30,18)

  5 6 (26,15)

  6 (21,11)

  Maka proses generate garis nya adalah : K P k (X k+1 ,Y k+1 ) K P k (X k+1 ,Y k+1 )

  2 DY - 2DX = -4

  1 2 (22,12)

    y x

   Until X ³ Y

  Equally Spaced points 100 ^{2 2}

     

    . sin . cos r y y r x x c c

     

  2 ^{2 2 2} 100 100 x y y x

  ) ( x x r y y _c    

  2 20 -6 ^{2 2 2} ) ( ) ( r y y x x _{c c}     _{2 2 2}

  2Y P k

  2X

  Example : k (X,Y)

  Otherwise X=X+1; Y=Y-1 Plot (X,Y) P ^k+1 = P ^k +2X– 2Y+1

  CIRCLE

  If Pk<0 then X=X+1 Plot (X,Y) P ^k+1 = P ^k +2X+1

   (Xo,Yo)=(0,r); Plot (Xo,Yo)  P0 = 1 – r  Repeat

  Midpoint Circle Algorithm

   Using polar coordinate approach :  Symmetric in octant  calculating only sector from x=0 to x=y

  8 6 (8,6) 1 9,9 (1,10)

5 8,6 (5,9)

9 4,5 (9,5) 2 9,8 (2,10) 6 8 (6,8) 10 (10,0) 3 9,5 (3,10)

7 7,1 (7,7)

  

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

10 (0,10)

4 9,1 (4,9)

   Considerable computation at each step  Spacing between plotted pixel is not uniform.  Example :

  Problem :

   Calculate the position of points  stepping along x axis from (Xc-r) to (Xc+r) with :

   Defined as the set of points that are all at given distance r from a center position (Xc,Yc), expressed :

• - (0,10) 20 -9 (1,10)

  1 (2,10)

  

14

     

    . sin . cos _{y c x c} r y y r x x

  Reg.I Reg.II r y r x

    _{y c x c} r y y r x x

   

  1 ) ( ) ( ^{2 2}

  for all points Ellipse Equation : Polar : Midpoint Ellipse Algorithm d1+d2 = constant

   Set of points such as the sum of the distance from two pixed position (foci) is the same

  6 ELLIPSE

  14

  4 20 -1 2 (3,10)

  5 6 (7,7)

  

16

  12

  8 5 (6,8)

  

18

  10

  6 3 (4,9) 8 18 -3 4 (5,9)

  

20

  6

  F1

F2

d1 d2 P(x,y)

  2 r y

  )=(0,r y

  2 (x+½ )

  Region II : (x o

  ) P = r y

  2

  ) P = r y

  ,y o

  ); Plot (x o

  ,y o

  2

  2 (y-1)– r x

  2 r y

  2 While y>0 y=y-1 P y

  ,y o

  ); Plot (x o

  )=(0,r y

  ,y o

  2 P x = 0; P y

• – r
• 1/4r
• r

  2 y While P x

  <P y x=x+1 P x

  = P x

  x

  =2r x

  x

  x

  = P y

• 2r

  x

  2 If P  0 x=x+1 P x

• 2r

2 If P  0

  y Otherwise P k+1

  2 P k+1 = P k

  = P x

• 2r

  x

  2

  x

  y

  y=y-1 P y

• r
• P
• P
• – 2r

  = P y

  x

  2 P k+1 = P k

  y

  2

• r
• P
• P

  x

  y Otherwise P k+1

  = P k

  y

• r
• r
• P
• Region I :
• Region II :

  2

  Example : r ^x =8, r ^y =6

  k (x,y) P x P y P k (0,6) 768 -332 1 (1,6) 72 768 -224 2 (2,6) 144 768 -44 3 (3,6) 216 768 208 4 (4,5) 288 640 -108 5 (5,5) 360 640 288 6 (6,4) 432 512 244 7 (7,3) 504 384 400 Region I : (x o

  = P k

  x Plot(x,y)

  x 2- P y

  Plot(x,y)

  y

  k (x,y) P x P y P k - - - - -151 (8,2) 576 256 233 1 (8,1) 576 128 169 2 (8,0) 576 233 AREA FILLING

  Dalam grafis, selain digunakan primtif-primitif grafis, diperlukan algoritma khusus untuk mengisi warna. Untuk pengisian warna pada grafik diterapkan pada titik yang memiliki hole.

  Contoh :

  Ada beberapa algortima yang dapat digunakan untuk melakukan area filling, yaitu :

• Scan Line  Boundary Fill Algorithm  Flood Fill Algorithm

  Scan Line

   Dimulai dari kiri atas layar

   Bergerak ke kanan hingga batas kanan layar

   Ulangi untuk baris-baris berikutnya

   Jika ditemukan suatu batas area, maka dilakukan operasi putpixel hingga ditemukan batas area berikutnya

  Kelemahan :

   Algoritma akan gagal jika ditemui titik-titik ujung, sehingga perlu penanganan khusus.  Solusi : periksa semua informasi titik ujung berdasarkan list vektor yang dimiliki setiap primitif.

  Boundary Fill Algorithm  Dengan teknik ini pengisian warna dilakukan berdasarkan penentuan titik awal.

• Posisi awal diletakkan pada area filling.
• Kemudian semua titik tetangga diuji terhadap batas area
• Ada 2 metoda untuk mencari titik tetangga :

  1

  6

  7

  4

  8 X

  3

  2

  1

  3

  2

  4 X

• Algoritma 4 Connected :

  End; End;

   4 Connected 

  Putpixel (x,y,fillColor); Bfill(x+1,y,fillColor,boundcol); Bfill(x-1,y,fillColor,boundcol); Bfill(x,y+1,fillColor,boundcol); Bfill(x,y-1,fillColor,boundcol);

  If getpixel(x,y)= oldColor then Begin

  Procedure floodFill (x,y,fillColor,oldColor); Begin

  Flood Fill Algorithm

  End; End;

  Putpixel (x,y,fillcol); Bfill(x+1,y,fillcol,boundcol); Bfill(x-1,y,fillcol,boundcol); Bfill(x,y+1,fillcol,boundcol); Bfill(x,y-1,fillcol,boundcol);

  Currcol  getpixel(x,y); If (Currcol<>boundcol) and (Currcol<>fillcol) then Begin

  Currcol : integer; Begin

  Procedure BFill (x,y,fillcol,boundcol); Var

  8 Connected  Kemudian digunakan suatu algoritma rekursif untuk pengisiannya.

  5

  TRANSFORMASI 2D Transformasi digunakan untuk mengubah bentuk objek grafik.

  Ada 2 macam untuk transformasi, yaitu:

• Transformasi 2D
• Transformasi 3D Kategori transformasi dasar :
• Translasi  Rotasi  Skala Transformasi lain :
• Shear  Refleksi

  Transformasi Translasi

  Objek digeser dalam : Arah X - Arah Y -

  Misal : Diketahui titik (2,3) di translasi arah x=4 dan arah y=1 _{x   4 y 1}

  ( 2 , 3 )   ( 6 , 3 )   (

  6 ,  4 )  Matrix Homogen Translasi

   Memudahkan perhitungan suatu translasi dapat dinyatakan dalam matrix homogen berikut :

  1  

   

  1  

  Tx Ty 1   _{Tx , Ty}   ( x , y ) ( x ' , y ' )  x’ = x +Tx

     

  y’ = y + Ty

  Operasi Translasi :

  1    

  1 1 x Tx y Ty

  1

   x y .

     

 

    Tx Ty 1  

    Transformasi Skala Digunakan untuk memperbesar/memperkecil objek.

   Skala dapat dilakukan dalam arah x dan/atau arah y.

   Y Matrix Homogen Skala (terhadap titik (0,0))

  Sx  

    Sy

   

  1  

  X  

  (0,0) Sx , Sy ( x , y ) ( x ' , y ' )  x’ = x.Sx

      y’ = y.Sy

  Operasi Translasi terhadap titik (0,0): Sx

      x y 1 . Sy x . Sx y . Sy

  1    

      1 

    Penskalaan terhadap sembarang titik

  Y Y _f

  X X (0,0) _f

  Langkah-langkah :

  1. Translasi ke (0,0)

  2. Skala-kan

  3. Translasi balik ke (X f ,Y f )

  Matrix Homogen Skala (terhadap titik (X f ,Y f ))

1 Sx

  1      

       

  1 Sy 1       

  Xf Yf

  1

1 Xf Yf

  1        

        Sx

     

  Sy   

  Xf . Sx Xf Yf . Sy Yf  1       

  Sx    

  Sy

     Xf (

1 Sx ) Yf (

  1 Sy )  1     

  Transformasi Rotasi (c,d) Operasi Rotasi terhadap titik (0,0) d r Titik (a,b)(c,d), dimana :

  a=r.cos 

  b (a,b)

  b=r.sin 

  r c=r.cos(+)=r.cos .cos –r.sin .sin 

  =a.cos  – b.sin 

   d=r.sin(+)=r.sin .cos +r.cos .sin 

  Matrix Homogen Rotasi cos sin

       

   sin cos  

     1 

    Operasi Rotasi terhadap titik (0,0): cos sin

     

    x y 1 . sin cos x . cos y . sin x . sin cos   

  1  

      1 

   

       

    Rotasi terhadap sembarang titik (mis. Terhadap titik (X f ,Y f )

  Langkah-langkah :

  1. Translasi ke (0,0)

  2. Rotasi-kan

  3. Translasi balik ke (X f ,Y f )

  1 cos sin

  1

       

        1 . sin cos

  1   

  

        Xf Yf

  1

  1 Xf Yf  1             

  

GRAFIKA 3 DIMENSI

  Grafika Komputer dalam aplikasinya terbagi menjadi 2 : Grafika 2D  Grafika 3D 

  Aplikasi 2D banyak dipakai dalam pembuatan grafik, peta, kreasi 2D yang banyak membantu pemakai dalam membuat visualisasi. Grafika 2D memiliki kekurangan, yaitu : ketidakmampuannya untuk merepresentasikan objek

  3D. Kekurangan ini sangat dirasakan terutama dalam bidang desain, dimana kebanyakan desainer membuat barang yang ada dalam dunia nyata yang berdimensi 3. Grafika 3D memiliki kemampuan untuk membuat visualisasi dari sebuah benda yang nyata yang dapat dilihat dari berbagai sudut pandang. Hal inilah yang membuat grafika 3D banyak dipakai terutama dalam bidang desain dari sebuah produk.

GEOMETRI 3D

  Dalam grafika komputer, sebuah objek harus dispesifikasikan dengan metode geometri analitik. Sama halnya dengan grafika 2D, objek yang paling sederhana adalah sebuah titik. Sebuah titik dalam grafika komputer harus dideskripsikan dengan benar dimana letaknya, sehingga tidak ada ambiguitas dimana titik tersebut berada. Karena itu dibutuhkan sebuah sistem koordinat untuk mendeskripsikan letak titik tersebut.

  Jika dalam grafika 2D dikenal sistem koordinat dengan 2 sumbu/axis x dan y, maka dalam grafika 3D digunakan sistem koordinat dengan 3 sumbu, yaitu x,y,z. Pada sistem koordinat inilah sebuah objek dideskripsikan. Sebuah titik, objek paling sederhana dalam grafika komputer, harus memiliki attribut x,y,z untuk menunjukkan letaknya pada sebuah dunia 3D (world). Pada sistem koordinat 3D harus diperhatikan orientasi dari sumbu x,y dan z. Grafika 3D mengenal 2 buah sistem koordinat, yaitu :

  Right-handed coordinat system (Sistem Koordinat Tangan Kanan)  Left-handed coordinat system (Sistem Koordinat Tangan Kiri) 

• +y +y +z +x +x +z Right-handed Left-handed

  Posisi sebuah titik dalam grafika 3D diekspresikan dengan (x,y,z). Beberapa titik yang berdekatan akan membentuk sebuah garus. Seperti pada grafika 2D, sebuah garis dibentuk dengan mendeskripsikan dua buah titik, yaitu (x1,y1,z1) dan (x2,y2,z2) yang menjadu ujung dari sebuah garis. Sebuah garis dalam grafika 3D dapat diekspresikan dengan sepasang persamaan, yaitu :

  

y y y y

_{1 2}

 

₁

  



x x x x

 

^{1 2 1} z z z z   _{1 2 1}

  



x x x x

 

_{1 2 1} Pada grafika 3D, terdapat sebuah geometri yang sangat penting, yaitu bidang datar (plane).

  Sebuah bidang datar pada grafika 3D dispesifikasikan dengan sebuah persamaan, yaitu : Ax + By + Cz + D = 0

  Dengan adanya geometri 3D untuk mengekspresikan sebuah titik, garis dan bidang datar, maka sebuah objek 3D dapat didekripsikan dengan geometri tersebut. Sebuah objek dalam grafika 3D dapat dibangun dengan menggunakan primitif 3D.

PRIMITIF 3D

  Primitif adalah beberapa bentuk dasar yang dapat dengan mudah didefinisikan secara matematik. Pada grafika 3D  terdapat primitif yang paling umum :

  Bola (sphere)  Kubus(cube)  Silinder (cylinder)  Kericut (cone)  Cincin (torus)  Primitif-primitif ini biasanya diambil dari bentuk-bentuk dasar benda yang sangat umum.

  Sehingga pemodelan benda-benda pada grafika 3D dapat dimodelkan dengan menggunakan primitif-primitif tersebut. Setiap primitif 3D memiliki parameter, yaitu :

   Nilai yang mengekspresikan letak Bentuk primitif tersebut 

  Misal : Kubus dapat diekspresikan dengan 1 buah titik (x,y,z) dan sebuah nilai yang mengekspresikan panjang rusuk primitif tersebut. Titik (x,y,z) menentukan salah satu titik sudut dari kubus, sekaligus berfungsi untuk menentukan letak primitif tersebut dalam world. Primitif dalam grafika 3D memiliki parameter yang berbeda satu dengan yang lain. Sehingga setiap objek dalam grafika 3D harus didefinisikan dari primitif apa dia diturunkan dan bagiaman cara melakukan rendering pada objek tersebut.

  RENDERING  Proses untuk menghasilkan sebuah citra 2D dari data 3D.

  Prose ini bertujuan untuk untuk memberikan visualisasi pada user mengenai data 3D tersebut melalui monitor atau pencetak yang hanya dapat menampilkan data 2D. Metode rendering yang paling sederhana dalam grafika 3D :

  1. Wireframe rendering  Objek 3D dideskripsikan sebagai objek tanpa permukaan.

  Pada wireframe rendering, sebuah objek dibentuk hanya terlihat garis-garis yang menggambarkan sisi-sisi edges dari sebuah objek. Metode ini dapat dilakukan oleh sebuah komputer dengan sangat cepat, hanya kelemahannya adalah tidak adanya permukaan, sehingga sebuah objek terlihat tranparent. Sehingga sering terjadi kesalahpahaman antara siss depam dan sisi belakang dari sebuah objek.

  2. Hidden Line Rendering

   Metode ini menggunakan fakta bahwa dalam sebuah objek, terdapat permukaan yang tidak terlihat atau permukaan yang tertutup oleh permukaan lainnya. Dengan metode ini, sebuah objek masih direpresentasikan dengan garis-garis yang mewakili sisi dari objek, tapi beberapa garis tidak terlihat karena adanya permukaan yang menghalanginya. Metode ini lebih lambat dari daro wireframe rendering, tapi masih dikatakan relatif cepat. Kelemahan metode ini adalah tidak terlihatnya karakteristik permukaan dari objek tersebut, seperti warna, kilauan (shininess), tekstur, pencahayaan, dll.

  3. Shaded Rendering

   Pada metode ini, komputer diharuskan untuk melakukan berbagai perhitungan baik pencahayaan, karakteristik permukaan, shadow casting, dll. Metode ini menghasilkan citra yang sangat realistik, tetapi kelemahannya adalah lama waktu rendering yang dibutuhkan.

  Algoritma Karakteristik Geometri Kamera Cahaya Permukaan Rendering + + + + Secara umum, proses untuk menghasilkan rendering dua dimensi dari objek-objek 3D melibatkan 5 komponen utama : Geometri  Kamera  Cahaya  Karakteristik Permukaan  Algoritma Rendering 

  KAMERA

  Dalam grafika 3D, sudut pandang (point of view) adlah bagian dari kamera. Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya untuk menentukan sudut pandang kita pada sebuah world, sehingga sering disebut virtual camera. Sebuah kamera dipengaruhi oleh dua buah faktor penting.Faktor pertama adalah lokasi (camera location). Lokasi sebuah kamera ditentukan dengan sebuah titik (x,y,z). Faktor kedua adalah arah pandang kamera. Arah pandang kamera ditunjukkan dengan sebuah sistem yang disebut sistem koordinat acuan pandang atau sistem (U,N,V). Arah pandang kamera sangat penting dalam membuat sebuah citra, karena letak dan arah pandang kamera menentukan apa yang terlihat oleh sebuah kamera. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut camera interest.

  Objek di dalam Field of View Objek diluar Field of View

  Pada kamera, dikenal field of view yaitu daerah yang terlihat oleh sebuah kamera.Field of view pada grafika 3D berbentuk piramid, karena layar monitor sebuah komputer berbentuk segiempat. Objek-objek yang berada dalam field of view ini akan terlihat dari layar monitor, sedang objek-objek yang berada di luar field of view ini tidak terlihat pada layar monitor. Field

  

of view ini sangat penting dalam pemilihan objek yang akan diproses dalam rendering. Objek-

  objek diluar field of view biasanya tidak akan diperhitungkan, sehingga perhitungan dalam proses rendering, tidak perlu dilakukan pada seluruh objek.

  CAHAYA

  Sumber cahaya pada grafika 3D merupakan sebuah objek yang penting, karena dengan cahaya ini sebuah world dapat terlihat dan dapat dilakukan proses rendering. Sumber cahaya ini juga membuat sebuah world menjadi lebih realistis dengan adanya bayangan dari objek- objek 3D yang ada.

  Sebuah sumber cahaya memiliki jenis. Pada grafika 3D dikenal beberapa macam sumber cahaya, yaitu :  point light  memancar ke segala arah, namun intensitas cahaya yang diterima objek bergantung dari posisi sumber cahaya. Tipe ini mirip seperti lampu pijar dalam dunia nyata.