Grafika Komputer Pengenalan Grafika Komputer & Teknik Penggambaran Garis (Dosen : Defiana Arnaldy, M.Si) 0818 0296 4763 deff_arnaldy@yahoo.co.id

Pengertian Grafika Komputer Grafika komputer (Computer graphics) merupakan salah satu cabang disiplin ilmu informatika yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau secara digital. Dikenal juga dengan istilah visualisasi data Pertama kali dikembangkan oleh The Whirlwind Computer pada tahun 1950 untuk memperagakan output dari suatu hardcopy. Kemudian dikembangkan lagi oleh Dr. Ivan Sutherland sehingga menghasilkan fitur-fitur grafika saat ini.

Grafika komputer adalah ilmu yang sangat cepat berkembang pada saat ini. Perkembangan ini didukung oleh munculnya processor-processor komputer yang cepat dan kartu grafis yang semakin canggih dan hebat. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D, yang kemudian dikembangkan menjadi grafika komputer 3D, pengolahan citra (image processing), dan pengenalan pola (pattern recognation)..

Kegunaan Ilmu Grafika Komputer Pembuatan GUI (Graphical User Interface) Cartography atau pemetaan dan pemanipulasian peta. Sebagai media perencanaan dan pelaksanaan bedah dalam bidang kesehatan. Untuk perancangan objek (Graphic Design) Pembuatan game (Animation) Grafik monitoring Simulasi, dll..

Pembagian Ilmu Grafika Komputer Geometri, yaitu mempelajari cara menggambarkan permukaan bidang Animasi, yaitu mempelajari cara menggambarkan dan memanipulasi gerakan, baik secara otomatis maupun manual. Rendering, yaitu mempelajari algoritma untuk membuat dan menampilkan struktur / detail objek. Pencitraan (imaging), yaitu mempelajari cara pengambilan dan penyuntingan gambar.

Perbedaan Ilmu Grafika Komputer & Ilmu Pengolahan Citra Grafika Komputer menghasilkan gambar Materinya berisi teknik-teknik menggambar Hasilnya berupa gambar Pengolahan Citra mengolah suatu gambar/photo yang sudah ada Materinya berisi teknik-teknik untuk memperbaiki dan menyajikan informasi dari gambar/photo Hasilnya bisa gambar atau informasi didalam gambar/photo

Perbedaan Gambar & Photo Photo dibuat dari hasil pengambilan (capture) suatu gambar nyata atau gambar yang ada Detail dari setiap objek lengkap. Misalnya jumlah rambut pada manusia tertangkap apa adanya. Gambar dibuat dari hasil proses pembuatan atau peniruan Detailnya tidak lengkap. Contohnya pada gambar rambut manusia. Tidak mungkin bisa sama seperti aslinya.

Bentuk-Bentuk Primitif Geometri Grafis 1. Titik 2. Garis 3. Lingkaran 4. Polygon

Pemodelan Geometris Transformasi dari suatu konsep (atau suatu benda nyata) ke suatu model geometris yang bisa ditampilkan pada suatu komputer : Shape/bentuk Posisi Orientasi (cara pandang) Surface Properties / Ciri-ciri Permukaan (warna, tekstur) Volumetric Properties / Ciri-ciri volumetric (ketebalan/pejal, penyebaran cahaya) Lights/cahaya (tingkat terang, jenis warna) Dan lain-lain …

Pemodelan Geometris Pemodelan Geometris yang lebih rumit : Jala-Jala segi banyak: suatu koleksi yang besar dari segi bersudut banyak, dihubungkan satu sama lain. Bentuk permukaan bebas: menggunakan fungsi polynomial tingkat rendah. CSG: membangun suatu bentuk dengan menerapkan operasi boolean pada bentuk yang primitif.

Dasar Matematika yang Diperlukan dalam Grafik Komputer Geometry (2D, 3D) Trigonometry Vector spaces Points, vectors, dan koordinat Dot dan cross products

Koordinat Sistem Koordinat sistem Jendela / Layar Monitor Koordinat sistem Framebuffer OpenGL

Pengenalan OpenGL OpenGL (GLUT) adalah suatu library grafik standar untuk keperluan pemrograman grafis. Library grafik lainnya contoh DirectX Keunggulan OpenGL : bersifat open source, multiplatform, dan multilanguage. Sehingga pemakai lebih mudah menggunakannya.

#include <GL/glut.h> void display(void)‏ { glClear(GL_COLOR_BUFFER_BIT); myTriangle(); } void init()‏ { glClearColor(1.0, 1.0, 1.0, 1.0); glColor4f(1.0, 0.0, 0.0, 1.0); glMatrixMode(GL_PROJECTION); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); } int main(int argc, char** argv)‏ { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(300, 300); glutInitWindowPosition(0, 0); glutCreateWindow("Membuat Segitiga"); glutDisplayFunc(display); init(); glutMainLoop(); }

Teknik Penggambaran Garis Garis terbentuk dari minimal 2 buah titik/vertex Garis dapat disebut juga dengan vektor Vektor memiliki satuan nilai dan arah (terhadap sumbu x/y/z) Sebuah objek 2D maupun 3D terbentuk dari sekumpulan vertex yang dihubungkan (garis) dan dibentuk.

Perhitungan Jarak antar Titik Mengukur jarak garis P1 ke P2 (vektor a)? Pergerakan vektor = a a = P2 – P1 = (x2, y2, z2) – (x1, y1, z1) Jarak vektor = ||a|| Berdasarkan rumus Euclidian : ||a|| = √(x2 − x1)2 + (y2 − y1)2 + (z2 − z1)2 Normalisasi vektor : a = a/||a||

Contoh 1 Berapakah jarak garis A->F dan A->B ? Tentukan pula pergerakan vektor dan normalisasi vektornya! Bagaimanakah membuat garis dalam ilmu grafika komputer?

Algoritma DDA (Digital Differential Analyzer) Prinsip algoritma ini adalah mengambil nilai integer terdekat dengan jalur garis berdasarkan atas sebuah titik yang telah ditentukan sebelumnya (titik awal garis). Algoritmanya yakni : Tentukan dua titik yang akan dihubungkan dalam pembentukan garis Tentukan salah satu titik sebagai titk awal (x0, y0) dan titik akhir (x1, y1) Hitung Dx = x1 – x0 dan Dy = y1 – y0

4. Tentukan langkah, yaitu dengan cara jarak maksimum jumlah penambahan nilai x maupun nilai y, dengan cara : Jika nilai absolut Dx lebih besar dari absolut Dy, maka Step = absolut dari Dx Jika tidak, maka Step = absolut Dy 5. Hitung penambahan koordinat pixel yaitu x_plus = Dx/Step, dan y_plus = Dy/Step 6. Koordinat selanjutnya ; (x + x_plus, y + y_plus) 7. Posisi pixel pada layar ditentukan dengan pembulatan nilai koordinat tersebut. 8. Ulangi langkah (6) dan (7) untuk menentukan posisi pixel selanjutnya sampai x = x1 dan y = y1.

Contoh 2 Jika ada 2 buah titik A (10, 10) dan B(18, 20) yang dihubungkan akan membentuk sebuah garis, bagaimanakah penggambarannya bila menggunakan metode DDA ?

Algoritma Bressenham Berbeda dengan Algoritma DDA, Algoritma Bressenham tidak membulatkan nilai posisi pixel setiap waktu. Algoritma Bressenham hanya menggunakan penambahan nilai integer yang juga dapat diadaptasi untuk menggambar lingkaran. Algoritmanya sebagai berikut : Tentukan dua titik yang akan dihubungkan Tentukan salah satu titik di sebelah kiri sebagai titik awal yaitu (x0, y0) dan titik lainnya sebagai titik akhir (x1, y1) Hitung Dx, Dy, 2Dx, dan 2Dy – 2Dx Hitung parameter awal : P0 = 2Dy - Dx

e) Jalankan perhitungan, dimulai dengan k = 0, cek : Jika Pk <= 0, maka : pk+1 = pk + 2Dy, dan titik (Xk + 1, Yk) Jika Pk > 0, maka : pk+1 = pk + 2Dy – 2Dx dan titik (xk + 1, Yk + 1) f) Ulangi langkah (e) untuk menentukan posisi pixel selanjutnya sampai x = x1 dan y = y1.

Contoh 3 Jika ada 2 buah titik K(4, 6) dan L(10, 10 ) yang dihubungkan dan membentuk sebuah garis, bagaimana kah penggambarannya bila menggunakan metode Bressenham ?

Refferensi Pratiwi, Dian. 2009. http://dianrefescorner.blogspot.com/2009/09/materi-kuliah-grafika-komputer.html

Selesai....