I. PENGANTAR KOMPUTER GRAFIS

Transkripsi

1 I. PENGANTAR KOMPUTER GRAFIS Mengapa Belajar Komputer Grafis? Komputer grafik merupakan bagian yang penting dari kurikulum informatika/ ilmu komputer. Ini merupakan metode utama penyampaian informasi dari computer ke manusia (human). Komputer grafik banyak memerankan peran pada berbagai bidang antara lain : Entertainment animasi komputer-film : menghidupkan objek-objek untuk tujuan visualisasi proses, visualisasi pada simulator, visualisasi fenomena alam. Pada pembuatan film, komputer banyak digunakan untuk menunjang proses pemodelan, visualisasi dan editing. Sebelum dilakukan pengambilan gambar dengan kamera, dibuat model pemeran dalam cerita, kemudian divisualisasi untuk gerakan yang sulit dilakukan. User Interfaces : menjembatani pemakai dengan suatu perangkat agar pemakai dapat menggunakan perangkat tersebut dengan lebih mudah dan spontan. Visualisasi interaktif- bisnis dan ilmu pengetahuan CAD/CAM : untuk merancang, menggambar, visualisai dan analisis. Perangkat lunak aplikasi CAD pada umumnya dilengkapi dengan beberapa window yang memperlihatkan beberapa gambar objek dari sudut pandang yang berbeda, seperti tampak depan, samping, atas dan perspektif.

2 Computer Art Seniman menggunakan berbagai macam perangkat lunak grafik, dan kadang juga dilengkapi dengan hardware khusus. Computer Art terdiri dari : Commercial Art dan Fine Art. Aplikasi commercial art dapat dilihat pada dekstop publishing, advertising, desain tekstil, dsb. Perangkat lunak yang digunakan antara lain adalah : CorelDraw, Macromedia Freehand dan Adobe Illustrator. Sedangkan aplikasi fine art dapat dilihat pada penggunaan perangkat lunak grafis untuk pembuatan bermacam gambar sesuai dengan gagasan dan imajinasi yang membuat. Biasanya menggunakan Draw Program dan Paint Program. Game Permainan merupakan produk yang sangat disenangi, bukan hanya oleh anak-anak tetapi orang dewasa juga menyukainya. Berbagai game dimainan di komputer, video player dengan monitor TV, dan ada pula yang menggunakan perangkat khusus. Alat input interaktif seperti mouse dan joystick diperlukan untuk aplikasi game. Game dibuat untuk penggunaan komputer PC maupun komputer dengan perangkat khusus. Sejarah Perkembangan Grafika Komputer The Whirlwind Computer, tahun 1950 di MIT memiliki Cathode Ray Tube (CRT) untuk memperagakan keluaran alternatif dari hardcopy Ivan Sutherland dalam thesisnya pada tahun 1963 mengenai grafika computer interaktif sketchpad : struktur data, teknik interaktif. Fitur dan konsep yang dikemukakan masih dapat ditemukan dalam standar grafika pada saat ini. Munculnya CAD/CAM tahun 1964 di General Motor yang memiliki DAC system Sejak pertengahan tahun 60 an proyek-proyek penelitian dan produk komersial paket grafika computer. Perangkat peraga pada saat itu berbasiskan vector. Dengan sistem vector ini grafika digambarkan oleh electron gun pada lapisan fosfor layer seperti halnya plotter. Saat ini sebagian besar perangkat peraga berbasiskan raster scan Perkembangan tahun 70 an grafika sangat lambat karena masih mahalnya perangkat keras grafika. Awal 80 an teknologi microchip telah memungkinkan arsitektur peraga raster sehingga mulai berkembang grafika komputer raster/bitmap. Dari perangkat lunak sudah muncul usaha standarisasi untuk keperluan portabilitas : Core, CGM. CGI, dll. Core dirancang oleh komite ACM SIGGRAPH ( ), merupakan awal dari GKS (1985) dan GKS-3D (1988) yaitu standar resmi yang diakui oleh ANSI dan ISO.

3 Pertengahan tahun 80-an muncul kelas komputer grafik workstation yaitu suatu sistem komputer yang dilengkapi dengan fasilitas peragaan dan kemampuan grafika dan peranti I/O interaktif. Nama-nama terkenal saat itu adalah HP, Appolo, DEC, Xerox, dll. GUI berkembang sejalan dengan grafika bitmap tersebut ditandai dengan rancanganrancangan Star dari Xerox dan diteruskan oleh Apple Corp. Dengan produk Macintosh dan seterusnya oleh GEM ( turunan dari Macintosh untuk PC dari digital research), MS Windows. GUI melengkapi dan mengukuhkan workastation. Akhir 80 an kebutuhan akan komputer super semakin meningkat untuk komputasi intensif grafika komputer. Contoh, super komputer digunakan untuk visualisasi fenomena tornado secara realtime. Kelas workstation baru muncul : Superworkstation, kemampuan grafik yang super akibat VLSI beberapa primitif grafika : Silicon Graphics, Tekronix, HP Perangkat yang ditujukan untuk grafika dibuat contohnya Pixarr(1988) yang banyak digunakan untuk pembuatan animasi komputer. Diakhir tahun 80 an MIT mengeluarkan X Windows, yakni penggabungan lingkungan sistem grafika dan GUI dalam sistem komputasi terdistribusi multivendor. Sejak awal 90 an X windows telah mendominasi kelas workstation dengan berbagai variant untuk window managernya.

4 BAB II PERALATAN SISTEM GRAFIKA 2.1. TEKNOLOGI DISPLAY Penggunaan alat utama untuk menampilkan output pada sistem grafika adalah video monitor. Pada umumnya menggunakan perancangan cathode-ray-tube (CRT). Gambar Sistem CRT Adapun operasinya secara garis besar adalah : Sebuah electron gun memancarkan electron melalui sistem focusing, dan deflection sistem (sistem untuk mengatur pembelokan) sehingga pancaran elektron mencapai posisi tertentu dari lapisan tertentu pada layer. Fosfor memancarkan sinar kecil pada setiap posisi yang berhubungan dengan pancaran electron. Sinar yang dipancarkan fosfor cepat hilang, maka diperlukan suatu pengaturan agar fosfor tetap menyala, caranya adalah dengan refreshing yakni menembakkan elektron berulang kali pada posisi yang sama. Jumlah titik maksimum yang dapat ditampilkan pada monitor tanpa tumpang tindih dinamakan resolusi. Resolusi adalah jumlah titik per centimeter yang dapat ditempatkan menurut arah horizontal dan vertical. Resolusi CRT tergantung pada tipe fosfor, intensitas yang ditampilkan, focusing gun deflection sistem. Aspect rasio merupakan property dari video monitor. Misalkan aspect ratio ¾, artinya perbandingan jumlah titik vertikal dan horisontal yang dapat ditampilkan adalah ¾ Raster-scan Display Jenis monitor grafika dengan CRT yang paling umum adalah raster-scan display. Pancaran elektronnya bergerak ke seluruh layer baris per baris dari atas ke bawah Definisi gambar disimpan dalam memori yang dikenal dengan refresh buffer atau frame buffer. Setiap titik pada layer merupakan suatu pixel (picture element) Monitor hitam-putih mempunyai nilai 0 dan 1, tiap pixel 1 bit. Frame buffer disebut bitmap. Sistem high quality menggunakan 12 bit untuk menyimpan informasi dalam 1 pixel. Menghasilkan resolusi 1024x1024 dan frame buffernya sebesar 3 MB. Frame buffernya disebut pixmap Refreshing pada raster-scan display mempunyai frame per detik. Kembalinya scan pada bagian kiri layar setelah refreshing tiap scan line dinamakan dengan horizontal trace. Pada akhir tiap frame (1/80 sampai 1/60 tiap detik ) pancaran electron yang kembali ke atas dinamakan dengan vertical retrace. Biasanya setiap frame ditampilkan dalam dua tahap menggunakan prosedur interlaced refresh. Tahap pertama, pancaran electron menyalin menurut scan line dari atas ke bawah. Tahap kedua, vertical retrace, pancaran elektoron menyisir sisa scan line.

5 Random-scan Display Pancaran diarahkan hanya kebagian layar dimana gambar dibuat Hanya membuat gambar dengan satu garis pada suatu saat (vector display), stroke writing atau kaligrafik display Komponen garis dapat digambarkan dan dilakukan refreshing oleh random-scan sistem. Dirancang untuk membuat seluruh komponen garis dengan rate antara 30 sampai 60 tiap detik. Hanya dirancang untuk aplikasi line drawing dan tidak dapat menampilkan raster drawing Color CRT Monitor Menampilkan gambar dengan kombinasi fosfor yang memancarkan warna sinar yang berbeda. Terdapat dua teknik untuk mendapatkan warna, yaitu : beam penetration dan shadow mask. electron gun shadow mask lapisan fosfor Beam penetration digunakan untuk menampilkan gambar berwarna dengan random-scan monitor. Shadow mask digunakan pada raster-scan sistem termasuk TV. Metode ini menghasilkan tingkat warna yang banyak jika dibandingkan dengan metode beam penetration. Color CRT dalam sistem grafika dirancang sebagai RGB monitor. Menggunakan shadow mask dan mengambil tingkat intensitas untuk setiap electron gun(red,green,blue) langsung dari sistem komputer tanpa pemrosesan antara. Sistem grafik dengan kualitas tinggi yang mempunyai 24 bit per pixel dalam frame buffer, dapat menghasilkan hampir 17 juta warna pilihan untuk tiap pixel. RGB monitor dengan penyimpanan 24 bit per pixel dapat menghasilkan full color atau true color DVST (Direct View Storage Tube) Merupakan metode lain untuk mengatur citra pada layar dengan cara menyimpan informasi citra pada CRT. DVST menyimpan informasi gambar sebagai charge distribution di belakang lapisan fosfor pada layar. DVST mempunyai kelebihan yaitu dapat menampilkan gambar yang kompleks dengan resolusi tinggi tanpa adanya kedipan. Hal ini karena tidak diperlukannya refreshing. Sedangkan kelemahan yaitu DVST pada dasarnya tidak menampilkan warna, dan bagian yang diseleksi tidak dapat dihilangkan. Untuk menghilangkan sebagian gambar harus dilakukan dengan menghapus semua gambar pada layar, dan setelah itu dilakukan modifikasi gambar lagi Flat-Panel Display Alat ini merupakan suatu kelas video display yang mengurangi volume, berat dan penggunaan power dibandingkan dengan CRT. Mempunyai ukuran lebih tipis dibanding dengan CRT. Penggunaannya antara lain pada TV dengan ukuran kecil, kalkulator, video game saku, laptop, dsb. Flat-panel display dibagi menjadi dua yaitu : (1). emissive display (emitters), dimana mengkonversi energi listrik menjadi sinar. Contohnya adalah : Plasma panel, light emitting diode, dan film electroluminescent. (2). nonemmisive display (nonemitters) menggunakan efek optic untuk mengkonversi sinar matahari atau sinar dari sumber lain ke dalam pola grafik. Contohnya adalah : liquid christal display (LCD).

6 LCD Terdiri dari susunan molekul yang dapat bergerak seperti cairan. Terdiri dua pelat kaca dengan sinar polarizer pada sebelah kanan ke plat lainnya. Sinar yang melalui material di rotasi sampai arah yang berlawanan. Sinar itu kemudian direfleksikan kembali ke arah orang yang melihatnya. Jenis ini dinamakan dengan passive-matrix LCD. Definisi gambar disimpan pada refresh buffer, dan refreshing pada layar dilakukan dengan rate 60 frame per detik. Warna ditampilkan dengan menggunakan material yang berbeda dan menempatkan tiga pixel warna pada setiap lokasi layar. Metode lain dari LCD adalah dengan menempatkan transistor pada setiap lokasi layar. Transistor tersebut digunakan untuk mengontrol tegangan pada setiap lokasi pixel dan menghindari kebocoran keluar dari sell liquid-christal. Flat panel ini disebut dengan active-matrix display RASTER-SCAN SYSTEM Pada umumnya terdiri dari beberapa unit pemroses. Kecuali CPU, digunakan processor khusus video controler atau display controler yang berfungsi untuk mengontrol operasi dari peralatan display Video Controler Operasi dasar pada video controler, dua register digunakan untuk menyimpan koordinat pixel pada layar. Nilai dari posisi pixel yang disimpan pada frame buffer diambil dan digunakan untuk mengatur intensitas dari pancaran elektorn. Kecuali refreshing dasar, beberapa operasi dapat dilakukan. Video controler dapat mengambil intensitas pixel dari area memori yang berbeda pada siklus refreshing yang berbeda. Pada sistem dengan kualitas tinggi, sering digunakan dua frame buffer, sehingga satu buffer digunakan untuk refreshing, sedangkan yang lain diisi dengan nilai intensitas. Kedua buffer dapat saling tukar untuk melakukan fungsi tersebut, sehingga dapat memenuhi kebutuhan mekanisme yang cepat, seperti animasi real-time. Untuk merefresh suatu display dengan ukuran 1024 x 768 pixel pada suatu refresh rate 60 hz memerlukan suatu akses memori setiap 1/(1024*768)60) seconds = 21 ns. Sedangkan untuk men-set komponen warna red, green, dan blue video controler menggunakan suatu look-up Table yang digunakan untuk mengkonversi warna ke kekuatan signal. Berikut ini adalah gambar Video Controller. Tabel 1. SI Unit Raster-Scan Display Processor Raster system terdiri dari display processor tersendiri, biasanya disebut dengan graphic controller atau display processor. Kebutuhan display processor ini untuk membebaskan CPU dari pekerjaan grafik. Fungsi utama display processor adalah membuat digitasi gambar yang dimasukkan dari program aplikasi ke dalam frame buffer. Proses digitasi tersebut dikenal dengan nama scan conversion. Perintah grafik pada pembuatan garis lurus dan objek geometri lainnya dikonversi menjadi intensitas titik yang diskrit. Metode yang sama digunakan untuk mengkonversi kurva dan outline suatu poligon.

7 2.3. RANDOM-SCAN SYSTEM Program aplikasi dimasukkan dan disimpan dalam sistem memori dari suatu perangkat lunak aplikasi grafika. Perintah grafik pada program aplikasi diterjemahkan ke dalam display file yang disimpan dalam sistem memori. Kemudian display file diakses oleh display processor untuk ditampilkan pada layar monitor. Display processor mengulang kembali setiap perintah dari program pada saat dilakukan refreshing. Pola grafik digambar pada random-scan system dengan menembakkan elektron langsung sesuai komponen garis pada layar monitor. Garis ditentukan oleh nilai dari dua koordinat titik awal dan titik akhir PERALATAN INPUT INTERAKTIF Macam input interaktif dapat dibagi dalam lima macam peralatan logika dasar, yaitu : - Keyboard, untuk memasukkan karakter atau string - Locator, untuk mengenali posisi atau orientasi (mouse, trackball dan spaceball, joystick, Glove, digitizer, touch panel, light pen). - pick, untuk menyeleksi entity suatu tampilan - valuator, untuk memasukkan bilangan real - choice, untuk menyeleksi dari suatu action atau pilihan yang tersedia Keyboard Digunakan sebagai alat input untuk memasukkan teks (data bukan grafik), seperti nama label yang berhubungan dengan grafik tertentu, koordinat layar, pemilihan menu, fungsi grafik Locator Mouse Berbentuk kotak kecil, mudah dipegang, digunakan untuk mengatur posisi kursor pada layar. Bagian bawah mouse terdapat roda atau bola yang digunakan untuk menentukan jumlah dan arah dari gerakan. Untuk mendeteksi gerakan mouse bisa dengan sensor optik. Trackball dan spaceball Sebuah bola yang dapat diputar dengan jari untk menghasilkan posisi kursor pada layar. Trackball digunakan pada aplikasi 2 dimensi, spaceball pada aplikasi 3 dimensi, virtual reality, pemodelan. Joystick Terdiri dari tongkat kecil yang terpasang pada sistem untuk mengendalikan kursor pada layar, dapat bergerak bebas kanan-kiri, maju-mundur, atas-bawah, berputar Penggunaan umumnya lebih sulit dilakukan karena perpindahan posisi yang kecil memerlukan lima atau sepuluh kali gerakan kursor, hal ini menyebabkan posisi kursor pada layar tidak tepat seperti yang dikehendaki, sehingga penggunaan biasanya hanya untuk komputer game. Glove Digunakan untuk mendetekasi gerakan jari dan tangan. Sepasang elektromagnet antara antena pemancar dan penerima digunakan untuk melengkapi informasi tentang posisi dan orientasi dari tangan. Digitizer Alat untuk membuat gambar, lukisan, atau memilih posisi koordinat suatu objek baik 2 dimensi maupun 3 dimensi. Digunakan untuk scan suatu objek dan masukannya pada sistem berupa nilai diskrit dari posisi koordinat. Tablet (graphic tablet/data tablet) adalah papan datar ukuran 6 x 6 inch atau lebih, digunakan untuk mendeteksi posisi stylus sesuai kehendak user. Stylus adalah alat yang berbentuk pensil dan digunakan untuk menunjuk posisi pada tablet.

8 Touch panel/touch screen Untuk menampilkan objek atau posisi layar dengan sentuhan jari. Aplikasi yang umum menggunakan touch panel adalah pemilihan proses dengan memilih icon yang ada. Light Pen Digunakan untuk menyeleksi posisi layar dengan mendeteksi sinar yang datang dari titik pada layar CRT. Mempunyai beberapa kekurangan sehingga jarang dipakai : - saat light pen menunjuk layar sebagian image dari screen terserap oleh tangan dan pen - penggunaan pen dalam jangka lama menyebabkan kelelahan pada tangan - terkadang tidak dapat mendeteksi area berwarna hitam - terkadang memberi hasil yang salah dari pembacaan data karena pengaruh sinar ruangan Valuator Dilengkapi dengan nilai skalar dan digunakan sebagai dasar pada potentiometer, seperti pengaturan volume dan tone pada peralatan stereo, dapat diputar Choice Function key adalah bentuk yang paling umum sebagai peralatan choice( pilihan). Terkadang choice dibuat merupakan unit yang terpisah, tetapi lebih banyak menjadi satu kesatuan dengan keyboard, tablet, mouse. Digunakan untuk memasukkan perintah atau pilihan menu pada suatu program grafik.

9 2.5 IMAGE SCANNER Gambar diagaram, foto, teks hitamputih maupun berwarna dapat disimpan dengan image scanner untuk pemrosesan dengan komputer. Gradasi dari gray scale atau warna dapat direkam dan disimpan sebagai array. Setelah itu pemrosesan dilakukan dengan komputer, seperti transformasi atau cropping terhadap gambar tersebut. Berbagai jenis image scanner mempunyai tingkat resolusi hasil gambar yang berbeda. Pada photo scanner (drum scanner), gambar diletakkan pada sutau tabung yang dapat berputar. Pancaran sinar yang mengenai gambar dipantulkan kemudian diukur oleh photocell. Pada tabung berputar, sinar yang datang dari light source bergerak dari ujung satu ke ujung lain sehingga akan mengerjakan seluruh gambar. Pada gambar berwarna, beberapa filter diperlukan untuk memisahkan berbagai warna. Scanner yang menggunakan light source mempunyai resolusi lebih besar dari 2000 unit per inch. Pantulan sinar Light detector Pancaran sinar Deflection system Light source 2.6 VOICE SYSTEM Membuat pola pengenalan gelombang suara pada saat seseorang mengucapkan suatu kata. Masukan dari voice-system digunakan untuk menginisialisasi operasi grafika / memasukkan data. Input berupa suara analog yang dikonversi ke dalam data digital untuk pemrosesan dengan komputer. Sistem ini beroperasi dengan membandingkan suatu input dengan kamus yang sudah disimpan. Gelombang suara mempunyai frekuensi yang berbeda, dan dengan melakukan beberapa kali perulangan dapat ditentukan pola yang tertentu. Setiap kata diucapkan berulang kali, kemudian sistem menganalisis dan membuat pola frekuensi untuk kata tersebut. Kemudian sistem akan mencari frekuensi yang cocok dalam kamus. 2.7 PERALATAN HARDCOPY Format output hardcopy diantaranya kertas,film,transparansi, dll. Kualitas gambar yang dihasilkan tergantung dari ukuran dot size dan dot per inch, atau line per inch yang dapat ditampilkan.printer menghasilkan output dengan metode : Impact Karakter diperoleh dengan menekankan bentuk dari karakter tersebut ke kertas menggunakan pita, contoh : line printer Nonimpact Menggunakan teknologi laser, inkjet, electrostatic, electrothermal, xerographic process. Impact Printer Disebut impact dot-matrix printer karena pin harus menyentuh pita yang menekan kertas sehingga membentuk suatu titik (dot). Mempunyai dot-matrix print head yang berisi pin kawat dengan nomor pin sesuai dengan kualitas printer tersebut. Printer ini bertahan lama digunakan sampai sekarang karena murah, dapat menangani berbagai macam tipe dan ukuran kertas, dapat menangani banyak bentuk seperti invoice, dll. Pada aplikasi grafik dengan kualitas rendah/rancangan kasar suatu grafik cukup menggunakan printer ini. Plotter Pen plotter menggerakkan pen diatas kertas secara random, seperti vector-drawing. Pada pembuatan gambar garis, pen diletakkan tepat pada posisi awal garis, turun ke bawah, kemudian bergerak menurut garis lurus sampai titik akhir garis. Pada posisi tersebut pen diangkat ke atas dan berpindah ke garis lain. Cara kerja pen plotter ada 2 macam :

10 flatbed plotter Menggerakkan pen pada posisi x dan y di atas kertas. Pen dapat naik turun untuk mendapatkan posisi yang tepat pada kertas. Flatbed plotter tersedeia dengan ukuran 12 x 18 inch sampai dengan 6 x 10 feet, bahkan lebih. drum plotter Berlawanan dengan flatbed plotter, drum plotter menggerakkan kertas sepanjang suatu axis dan pen sepanjang axis yang lain. Laser Printer Tembakan laser membuat distribusi pada tabung yang berputar dan dilapisi bahan photoelectric, seperti selenium. Toner dituangkan pada tabung, kemudian ditransferkan ke kertas. Ink-jet printer Menghasilkan gambar dengan memercikkan tinta berwarna cyan, magenta, yellow dan kadang black ke atas kertas. Pada beberapa tipe, ink-jet terpasang pada head dari printer. Head dari printer bergerak untuk menggambar satu scan line dan mnegulangi kembali sampai seluruh bidang kertas tercetak. Thermal printer Menggunakan panas untuk dot matrix print head, dan membuat output dengan kertas tertentu yang sensitif terhadap panas. Panas mentransfer pigmen dari color wax paper ke plain paper. Wax paper dan plain paper digambar bersama-sama dengan panas tertentu untuk mentransfer pigmen. Untuk cetakan berwarna wax mempunyai empat warna yaitu cyan, magenta, yellow, black. 2.8 PERANGKAT LUNAK GRAFIKA Perangkat lunak grafika terdiri dari 2 macam kategori, yaitu : Perangkat lunak untuk pemrograman Dilengkapi dengan fungsi grafik yang dapat digunakan pada bahasa pemrograman tingkat tinggi, seperti C atau FORTRAN, contoh paket pemrograman adalah GL (Graphic Library) System yang digunakan pada peralatan Silicon Graphic. Konsep dasar general package termasuk pembentukan komponen gambar (seperti garis lurus, poligon, lingkaran,dll) Paket aplikasi khusus. Membentuk suatu tampilan tanpa memikirkan bagaimana hal itu dapat terjadi. Contoh : paket aplikasi untuk menggambar, sistem untuk bisnis, kedokteran, CAD,dll Standar perangkat lunak Standarisasi perangkat lunak mempunyai tujuan supaya paket aplikasi grafik yang dirancang dengan suatu fungsi standar perangkat lunak dapat digunakan tanpa tergantung pada perangkat keras tertentu. Standar perangkat lunak adalah Graphical Kernel System (GKS) dan Programmer s Hirarchical Interactive Graphics Standard (PHIGS). Fungsi grafik standar adalah satu set spesifikasi grafik yang tidak tergantung pada salah satu bahasa pemrograman. Fungsi grafik tersebut didefinisikan untuk bahasa pemrograman tingkat tinggi oleh Language Binding. Standarisasi untuk metode device interface adalah sistem Computer Graphics Interchange (CGI) dan Computer Graphics Metafile (CGM) yang digunakan sebagai standar untuk penyimpanan dan pemindahan gambar.

11 SISTEM KOORDINAT Pada komputer grafik ada 3 macam sistem koordinat yang harus kita perhatikan : Koordinat nyata Koordinat sistem (koordinat cartesian) Koordinat tampilan / layar KOORDINAT NYATA (WORLD COORDINATE) Adalah koordinat yang pada saat itu objek yang bersangkutan berada, misal koordinat sebuah kursi tergantung dari letak kursi itu ada dimana, bagaimana letaknya. Dalam implementasinya koordinat nyata bisa dikatakan sebagai WINDOW yaitu area di dunia nyata yang menunjukkan bagian yang dilihat oleh pemirsa. KOORDINAT CARTESIAN Setiap titik yang digambar dengan teknik point-plotting lokasinya ditentukan berdasarkan sistem koordinat cartesian. Setiap titik ditentukan lokasinya melalui pasangan nilai x dan y. Dimana nilai koordinat x bertambah positif dari kiri ke kanan dan nilai y bertambah positif dari bawah ke atas. A (2,4) B (5,3) sumbu y (0,0) sumbu x Koordinat 2 Dimensi Koordinat 3 Dimensi y sumbu y sumbu x x z KOORDINAT TAMPILAN/LAYAR Arah sumbu koordinat kartesian berkebalikan dengan yang digunakan di layar komputer. Pada layar komputer sumbu x bertambah positif ke kanan dan sumbu y bertambah positif ke bawah. Seperti pada gambar berikut jika sebuah titik pada koordinat cartesian digambar ulang ke layar komputer maka secara visual lokasi titik tersebut akan berubah. x positif y positif (0,0) A (1,1) A (1,1) y positif (0,0) x positif cartesian Layar komputer

12 Dalam implementasinya koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan. xv WT VT yw yv VB WB WL xw WR VL Viewport VR Window Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus : xv t t yv x y x y = = s s dengan s s x y * xw * yw + + VR VL = WR WL VL * WR VR * WL = WR WL VT VB = WT WB VB * WT VL * WB = WT WB t t x y

13 GARIS KUADRAN GARIS Garis merupakan salah satu bentuk dasar dari gambar. Sebuah garis dalam grafika disebut segment. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis, yaitu (x1,y1) dan (x2,y2). (x2,y2) (x1,y1) Berdasarkan arah garis maka sebuah garis dapat di salah satu area (kuadran). Tanda panah pada arah garis menunjukkan lokasi (x2,y2) Kuadran Kriteria Arah Garis Contoh I (x1<x2) dan (y1<y2) (-3,2) (-1,4) II (x1>x2) dan (y1<y2) (-3,-3) (-6,-1) III (x1>x2) dan (y1>y2) (6,-2) (4,-5) IV (x1<x2) dan (y1>y2) (3,9) (6,2) (x2,y2) (x1,y1) (x1,y1) (x2,y2) (x1,y1) 1 (x2,y2) 2 3 (x2,y2) 4 (x1,y1) Pada gambar diatas garis 1 terletak pada kuadran I, garis 2 di kuadran III, garis 3 di kuadran IV, garis 4 di kuadran II. Jadi kuadran garis tidak berhubungan dengan nilai negatif maupun positif tetapi menyatakan arah garis.

14 Contoh : Q P Garis P : (1,1) (5,4) kuadran I Garis Q : (6,7) (2,1) kuadran III Bila garis Q : (2,1) (6,7) kuadran I

15 ALGORITMA GARIS DDA (Digital Differential Analyzer) Merupakan salah satu algoritma menggambar garis yang sederhana. Gradien garis : y2 y1 m = x2 x1 Bentuk garis : a. cenderung mendatar Gradien bernilai 0 < m < 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar m pixel pada sumbu y b. cenderung tegak Gradien bernilai m > 1 Pixel bertambah 1 pada sumbu y dan bertambah sebesar 1/m pixel pada sumbu x c. miring 45 o Gradien bernilai m = 1 Pixel bertambah 1 pada sumbu x dan bertambah sebesar 1 pixel pada sumbu y Listing algoritma DDA : x = x1 ; y = y1; m = (y2 y1) / (x2 x1) jika m > 0 dan m < 1 maka selama x <= x2 maka gambar pixel pada (x,y) x = x + 1 y = y + m akhir selama x <= x2 tetapi jika m > 1 maka selama y <= y2 maka gambar pixel pada (x,y) x = x + 1/m y = y + 1 akhir selama y <= y2 tetapi jika m = 1 maka selama x <= x2 maka Gambar pixel pada (x,y) X = x+1 Y=y+1 akhir selama x <= x2 Kelemahan algoritma DDA : hanya dapat digunakan untuk nilai x1 < x2 dan y1 < y2 atau garis yang berada di kuadran I

16 ALGORITMA GARIS BRESENHAM dikembangkan oleh Bresenham berdasarkan selisih antara garis yang diinginkan terhadap setengah ukuran dari pixel yang sedang digunakan Algoritma Bresenham untuk dx > dy dx = x2 x1; dy = y2 y1 ; d1 = 2 * dy ; d2 = 2 * (dy dx); e = d1 dx ; x = x1 ; y = y1 Gambar pixel di (x,y) e = e + d1 y = y T e>=0 Y e = e + d2 y = y + 1 x = x + 1 stop Y x >=x2 T Algoritma Bresenham untuk dx < dy dx = x2 x1; dy = y2 y1 ; d1 = 2 * dy ; d2 = 2 * (dy dx); e = d1 dy ; x = x1 ; y = y1 Gambar pixel di (x,y) e = e + d1 x = x T e>=0 Y e = e + d2 x = x + 1 y = y + 1 stop Y y >=y2 T Contoh :

17 Hitung lokasi 5 titik pertama yang dilewati oleh garis (10,30) (256,147) menggunakan algoritma bresenham. Gambarkan hasil perhitungannya. Garis (10,30) (256,147) dx = (x2 x1) = (256 10) = 246 dy = (y2 y1) = (147 30) = 117 gunakan algoritma untuk dx > dy e = 2 * dy dx = 2 * = -12 d1 = 2 * dy = 2 * 117 = 234 d2 = 2 * (dy dx) = 2 * ( ) = -258 x = 10 ; y = 30 e = -12 e < 0 e = e + d1 = = 222 x = x + 1 = 11 ; y = y = e = 222 e >= 0 e = e + d2 = = -36 x = x + 1 = 12; y = y + 1 = 31 e = -36 e < 0 e = e + d1 = = 198 x = x + 1 = 13; y =y =31 e = 198 e >= 0 e =e + d2 = = -60 x = x + 1 =14; y =y +1 = 32

18 LINGKARAN Untuk menggambar sebuah lingkaran hanya diperlukan menggambar titik-titik pada oktan pertama saja, sedangkan titik-titik pada kuadran lain dapat diperoleh dengan mencerminkan titik-titik pada oktan pertama. Dari gambar dibawah ini titik pada oktan pertama dapat dicerminkan melalui sumbu Y = X untuk memperoleh titik-titik pada oktan kedua dari kuadran pertama. Titik-titik pada kuadran pertama dicerminkan melalui sumbu X = 0 untuk memperoleh titik-titik pada kuadran kedua. Gambar berikut menunjukkan menggambar lingkaran dengan merefleksikan octan pertama refleksikan kuadran pertama dengan sumbu X=0 Y refleksikan octan pertama dengan sumbu Y=X sumbu Y=X 3 2 hanya octan pertama yang dibuat X 6 7 refleksikan setengah lingkaran atas dengan sumbu Y=0 Y ( 0,R ) yi R Ri Kuadran pertama dari sebuah lingkaran X xi Ri merupakan jarak dari titik (xi,yi) ke pusat lingkaran Jarak titik (xi,yi) di lingkaran ke pusat lingkaran dapat dihitung : Ri = x 2 i + y 2 i Ri 2 = x 2 i + y 2 i Ri 2 = R 2

19 ALGORITMA LINGKARAN BRESENHAM x i = 0 ; y i = R Ulangi sampai y i = 0 Hitung i Gambar titik di (x i,y i ) Jika i < 0 maka hitung δ Jika δ < = 0 maka x i = x i +1 Jika δ > 0 maka x i = x i +1 dan y i = y i 1 Jika i > 0 maka hitung δ Jika δ < = 0 maka y i = y i -1 Jika δ > 0 maka x i = x i +1 dan y i = y i 1 Jika i = 0 maka x i = x i +1 dan y i = y i 1 Rumus : i = (x i +1) 2 + (y i 1) 2 R 2 δ = (x i +1) 2 + (y i ) 2 R 2 (x i +1) 2 + (y i 1) 2 R 2 δ = (x i ) 2 + (y i 1) 2 R 2 (x i +1) 2 + (y i 1) 2 R 2 Contoh : Jika diketahui R = 5 dan titik terakhir yang dipilih adalah (0,5) hitung koordinat titik berikutnya yang harus dipilih. Jawab : xi = 0, yi = 5 i = (x i +1) 2 + (y i 1) 2 R 2 = (0 +1) 2 + (5 1) = = -8 karena i < 0 maka δ = (x i +1) 2 + (y i ) 2 R 2 (x i +1) 2 + (y i 1) 2 R 2 = (0 +1) 2 + (5) (0 +1) 2 + (5 1) = 1 8 = 1 8 = 7 karena δ < 0 maka koordinat titik berikutnya adalah (x i +1, y i ) = (0+1, 5) = (1,5)

20 TRANSFORMASI 2 DIMENSI Transformasi merupakan metode untuk mengubah lokasi titik. Bila transformasi dikenakan terhadap sekumpulan titik yang membentuk sebuah benda maka benda tersebut akan mengalami perubahan. Transformasi dasar : - translation (translasi) - scaling (skala) - rotation (putar) TRANSLATION Transformasi geser adalah transformasi yang menghasilkan lokasi baru dari sebuah objek sejauh jarak pergeseran tr = (tr x,tr y ). Untuk menggeser benda sejauh tr maka setiap titik dari objek akan digeser sejauh tr x dalam sumbu x dan tr y dalam sumbu y. (Q x,q y ) = (P x + tr x, P y + tr y ) Contoh : Jika diketahui titik L (1,-1) dan vektor translasi (3,2) maka hitung lokasi titik L yang baru setelah dilakukan translasi. Jawab : L x = 1 dan L y = -1 dan tr x =3 tr y =2 maka (Q x,q y ) = (L x + tr x, L y + tr y ) = (1+3, -1+2) = (4,1) Jadi lokasi titik L yang baru adalah (4,1). Q (4,1) L (1,-1) SKALA Berbeda dengan transformasi geser yang tidak mengubah bentuk objek, transformasi skala akan mengubah bnetuk objek sebesar skala S x dan S y sehingga : (Q x,q y ) = (P x * S x, P y * S y ) Contoh : Gambar berikut menunjukkan suatu objek setelah mengalami transformasi skala dengan S x =2 S y =2 Y Y X 2 6 X

21 ROTASI Pemutaran objek dilakukan dengan menggeser semua titik P sejauh sudut q dengan tr = 0 dan titik pusat pemutaran berada di titik (0,0), sehingga : Q x = P x cos(θ) P y sin(θ) Q y = P x sin(θ) + P y cos(θ) Contoh : Objek berikut diputar sebesar 60 Y X Dari gambar diperoleh koordinat titik sudut dari objek tersebut aalah P1 = (1,1), P2 = (3,1), P3 = (3,2), P4 = (1,2). Objek diputar 60 dengan titik pusat (0,0), maka : Q1 x = P1 x cos(θ) P1 y sin(θ) Q1 y = P1 x sin(θ) + P1 y cos(θ) Q1 x = 1 * cos(60) 1* sin(60) = (1*0,5) (1*0,866) = 0,36 Q1 y = 1 * sin(60) + 1* cos(60) = (1*0,866) + (1*0,5) = 1,36 Q1 = ( 0.36, 1.36) dengan cara yang sama akan diperoleh : Q2 x = 3 * cos(60) 1* sin(60) = (3*0,5) (1*0,866) = 0,63 Q2 y = 3 * sin(60) + 1* cos(60) = (3*0,866) + (1*0,5) = 3,09 Q2 = (0.63, 3.09) Q3 x = 3 * cos(60) 2* sin(60) = (3*0,5) (2*0,866) = 0,23 Q3 y = 3 * sin(60) + 2* cos(60) = (3*0,866) + (2*0,5) = 3,59 Q3 = ( 0.23, 3.59) Q4 x = 1 * cos(60) 2* sin(60) = (1*0,5) (2*0,866) = 1,23 Q4 y = 1 * sin(60) + 2* cos(60) = (1*0,866) + (2*0,5) = 1,86 Q4 = ( 1.23, 1.86) Y Q3 Q2 Q4 Q1 1 3 X

22 SKALA ATAU ROTASI MENGGUNAKAN SEMBARANG TITIK PUSAT Seperti telah dijelaskan sebelumnya, skala dan rotasi menggunakan titik (0,0) sebagai titik pusat transformasi. Agar dapat menggunakan sembarang titik pusat (Xt,Yt) sebagai titik pusat maka transformasi dilakukan dengan urutan : 1. Translasi (-Xt, -Yt) 2. Rotasi atau Skala 3. Translasi (Xt,Yt) Contoh : Dengan menggunakan objek persegi panjang sebelumnya, putar objek sebesar 60 dengan titik pusat (3,2). Jawab : Karena objek diputar pada titik pusat (3,2) maka sebelum dilakukan pemutaran objek harus ditranslasikan sebesar (-3,-2), setelah itu objek diputar sebesar 60 dan kemudian hasil pemutaran ditranslasikan sebesar (3,2). 1. Translasi sebesar (-3,-2) : Q1 = (1 3, 1 2) = ( 2, 1) Q2 = (3 3, 1 2) = (0, 1) Q3 = (3 3, 2 2) = (0,0) Q4 = (1 3,2 2) = ( 2,0) 2. Titik Q1,Q2,Q3,Q4 dirotasikan sebesar 60 : Q1 = ( 0.134, 2.232) Q2 = (0.866, 0.5) Q3 = (0,0) Q4 = ( 1.0, 1.732) 3. Titik Q1,Q2, Q3,Q4 ditranslasikan sebesar (3,2) : Q1 = (2.866, 0.232) Q2 = (3.866, 1.5) Q3 = (3, 2) Q4 = (2, 0.268) Y Objek asli Hasil rotasi 1 3 X

23 TRANSFORMASI HOMOGENEOUS Transformasi yang sudah dibahas sebelumnya baik di titik pusat (0,0) maupun di sembarang titik merupakan transformasi linear. Transformasi juga dapat dilakukan dengan menggunakan matriks transformasi yang menggabungkan transformasi translasi, penskalaan dan rotasi ke dalam satu model matriks atau sering disebut juga sebagai transformasi homogeneous. Isi dari matriks transformasi bergantung pada jenis transformasi yang dilakukan : Translasi : M 1 0 = 0 1 Tr x Tr y Skala : M S x = 0 0 S 0 0 y Rotasi : M cosθ = sin θ 0 sin θ cosθ Transformasi dilakukan dengan menggunakan rumus : [ x ' y' 1] = [ x y 1] * M

24 CLIPPING 2 DIMENSI Tidak semua garis harus digambar di area gambar karena garis-garis yang tidak terlihat di area gambar seharusnya tidak perlu digambar. Metode untuk menentukan bagian garis yang perlu digambar atau tidak perlu digambar disebut clipping. Clipping juga dapat diartikan sebagai suatu tindakan untuk memotong suatu objek dengan bentuk tertentu. KETAMPAKAN GARIS (LINE VISIBILITY) Posisi ketampakan garis terhadap area gambar (viewport) : 1. Garis yang terlihat seluruhnya (fully visible) : garis tidak perlu dipotong 2. Garis yang hanya terlihat sebagian (partially visible) : garis yang perlu dipotong 3. Garis yang tidak terlihat sama sekali (fully invisible) : garis tidak perlu digambar viewport fully invisible partially invisible fully visible ALGORITMA COHEN-SUTHERLAND Algoritma Cohen-Sutherland merupakan metode untuk menentukan apakah sebuah garis perlu dipotong atau tidak dan menentukan titik potong garis. Area gambar didefinisikan sebagai sebuah area segiempat yang dibatasi oleh xmin dan xmax,ymin dan ymax. ymax Y ymin xmin xmax X Setiap ujung garis diberi kode 4 bit dan disebut sebagai region code. Region code ditentukan berdasarkan area dimana ujung garis tersebut berada. Susunan region code : Bit ke Region Bit Isi 0 L 1 apabila x < xmin 0 apabila x >= xmin 1 R 1 apabila x > xmax 0 apabila x <= xmax 2 B 1 apabila y < ymin 0 apabila y >= ymin 3 T 1 apabila y > ymax 0 apabila y <= ymax T B R L

25 Region Code Arti 0000 Terletak di dalam viewport 0001 Terletak di sebelah kiri viewport 0010 Terletak di sebelah kanan viewport 0100 Terletak di sebelah bawah viewport 0101 Terletak di sebelah kiri bawah viewport 0110 Terletak di sebelah kanan bawah viewport 1000 Terletak di sebelah atas viewport 1001 Terletak di sebelah kiri atas viewport 1010 Terletak di sebelah kanan atas viewport Contoh : Jika diketahui area gambar ditentukan dengan xmin=1, ymin = 1 dan xmax=4, ymax=5 dan 2 garis : 1. P ( 1, 2) (5,6) 2. Q ( 1,5) (6,7) Y Q P X maka untuk menentukan region code dari masing-masing garis tersebut adalah : 1. Garis P Ujung garis P ( 1, 2) L = 1 karena x < xmin yaitu 1 < 1 R = 0 karena x < xmax yaitu 1 < 4 B = 1 karena y < ymin yaitu 2 < 1 T = 0 karena y < ymax yaitu 2 < 5 sehingga region code untuk ujung P ( 1, 2) adalah 0101 Ujung garis P (5, 6) L = 0 karena x > xmin yaitu 5 > 1 R = 1 karena x > xmax yaitu 5 > 4 B = 0 karena y > ymin yaitu 6 > 1 T = 1 karena y > ymax yaitu 6 > 5 sehingga region code untuk ujung P (5, 6) adalah 1010 Karena region code kedua ujung garis tidak 0000 maka garis P kemungkinan bersifat partialy invisible dan perlu dipotong. 2. Garis Q Ujung garis P ( 1, 5) L = 1 karena x < xmin yaitu 1 < 1 R = 0 karena x < xmax yaitu 1 < 4 B = 0 karena y > ymin yaitu 5 > 1 T = 0 karena y = ymax yaitu 5 = 5 sehingga region code untuk ujung P ( 1, 2) adalah 0001 Ujung garis P (6, 7) L = 0 karena x > xmin yaitu 6 > 1 R = 1 karena x > xmax yaitu 6 > 4 B = 0 karena y > ymin yaitu 7 > 1

26 T = 1 karena y > ymax yaitu 7 > 5 sehingga region code untuk ujung P (5, 6) adalah 1010 Karena region code kedua ujung garis tidak 0000 maka garis Q kemungkinan bersifat partialy invisible dan perlu dipotong. Menentukan Titik Potong Langkah berikutnya menentukan lokasi titik potong antara garis tersebut dengan batas area gambar. Titik potong dihitung berdasarkan bit=1 dari region code dengan menggunakan panduan tabel berikut : Region Bit Berpotongan dengan Dicari Titik potong L = 1 xmin yp1 (xmin,yp1) R = 1 xmax yp2 (xmax,yp2) B = 1 ymin xp1 (xp1,ymin) T = 1 ymax xp2 (xp2,ymax) dengan xp1,xp2,yp1, dan yp2 dihitung menggunakan persamaan berikut ini : y min y1 xp1 = x1 + m y max y1 xp2 = x1 + m yp1 = y1 + m * ( x min x1) yp2 = y1 + m * ( x max x1) dengan m = y2 y1 x2 x1 Bergantung pada lokasi ujung garis maka akan diperoleh 2,3,atau 4 titik potong seperti gambar berikut: Q P1 P3 P1 P1 Q Q P2 P P P2 P P2 P4 2 titik potong 3 titik potong P3 4 titik potong Bila ditemukan titik potong lebih dari 2 pada 1 ujung maka pilih titik potong yang ada di dalam area gambar. Untuk contoh diatas titik potong pada garis P adalah : Region Bit B = 1 titik (1.25, 1) Region Bit R = 1 titik (4, 4.7) cara mencarinya sebagai berikut :

27 Titik potong garis P (-1,-2) (5,6) m = y2 y1 = 6 (-2 ) = 8/6 x2 x1 5 (-1) Region code 0101 di titik (-1,-2) : L = 1 yp1 = y1 + m * (xmin x1) = -2 + (8/6) * (1-(-1) yp1 = 0,67 Titik potongnya adalah (xmin,yp1) = (1, 0.67) B = 1 xp1 = x1 + ymin y1 m = -1 + (1 - (-2)) 8/6 xp1 = 1,25 Titik potongnya adalah (xp1,ymin) = (1.25, 1) Region code 1010 di titik (5,6) : R = 1 yp2 = y1 + m * (xmax x1) = 6 + (8/6) * (4-5) yp2 = 4,7 Titik potongnya adalah (xmax,yp2) = (4, 4.7) T = 1 xp2 = x1 + ymax y1 m = 5 + (5-6) 8/6 xp2 = 4,25 Titik potongnya adalah (xp2,ymax) = (4.25, 5) Ada 4 titik potong pada garis P yaitu (1, 0.67), (1.25,1), (4, 4.7), (4.25, 5). Pilih titik potong yang terdapat dalam viewport yaitu (1.25,1) dan (4, 4.7).

28 POLYGON Polygon adalah bentuk yang disusun dari serangkaian garis. Titik sudut dari polygon disebut vertex. Garis penyusun polygon disebut edge. edges vertex Sebuah polygon selalu mempunyai properti dasar : - jumlah vertex - koordinat vertex - data lokasi tiap vertex Polygon digambar dengan menggambar masing-masing edge dengan setiap edge merupakan pasangan dari vertex i vertex i+1, kecuali untuk edge terakhir merupakan pasangan dari vertex n vertex 1. Operasi-operasi pada polygon : - Menginisialisasi polygon inisialisasi terhadap polygon perlu dilakukan untuk mengatur agar field vertnum berisi 0. - Menyisipkan vertex menyimpan informasi tentang vertex dan menyesuaikan informasi tentang jumlah vertex dengan menambahkan satu ke vertnum. - Menggambar polygon mengunjungi vertex satu per satu dan menggambar edge dengan koordinat (vertex i.x, vertex i.y) (vertex i+1.x vertex i+1.y) dari vertex nomor satu sampai vertnum 1. Khusus untuk edge terakhir mempunyai koordinat (vertex vertnum.x, vertex vertnum.y) (vertex 1.x vertex 1.y). - Mewarnai polygon Mengisi area yang dibatasi oleh edge polygon dengan warna tertentu. Algoritma menggambar polygon : index = 1 selama index <= jumlah_vertex lakukan vertex1 = ambil vertex ke[index] jika index = jumlah_vertex maka vertex2 = ambil vertex ke [1] tetapi jika tidak maka vertex2 = ambil vertex ke [index+1] x1 = vertex1.x y1 = vertex1.y x2 = vertex2.x y2 = vertex2.y gambar garis dari (x1,y1) ke (x2,y2) index = index + 1 akhir selama index <= jumlah_vertex

29 Algoritma Flood Fill (Seed Fill) Merupakan algoritma untuk mengisi area di dalam sebuah polygon. Bekerja dengan cara : - Pemakai menentukan warna polygon serta lokasi titik yang menjadi titik awal. - Kemudian algoritma akan memeriksa titik-titik tetangga. - Bila warna titik tetangga tidak sama dengan warna isi polygon maka titik tersebut akan diubah warnanya. - Proses tersebut dilanjutkan sampai seluruh titik yang berada di dalam polygon selesai diproses. - Penentuan titik tetangga dapat menggunakan metode 4 koneksi atau 8 koneksi seperti berikut : 4 koneksi 8 koneksi Ketepatan algoritma Flood Fill ditentukan oleh titik awal (seed point) dan apakah polygon yang diwarnai merupakan polygon tertutup. Apabila polygon tidak tertutup, meskipun hanya 1 titik yang terbuka maka pengisian akan melebar ke area di luar polygon. algoritma floodfill input x,y : integer // lokasi awal input fill : Tcolor // warna isian(baru) input oldcolor : Tcolor // warna lama mulai w = ambil warna pixel pada lokasi (x,y) jika w = oldcolor maka ubah warna pixel pada lokasi (x,y) menjadi berwarna fill; floodfill (x+1, y, fill, oldcolor); floodfill (x-1, y, fill, oldcolor); floodfill (x, y+1, fill, oldcolor); floodfill (x, y-1, fill, oldcolor); akhir algoritma