Pengantar Grafika Komputer

(1)

G R A F I K A K O M P U T E R

/ P T I 2 7 5 /PENDIDIKAN TEKNIK INFORMATIKA/2 SKS

Pengantar Grafika Komputer

Kompetensi dan Referensi

Kompetensi

Mahasiswa dapat merancang dan membangun sebuah aplikasi Grafika komputer dengan menggunakan library OpenGL. Referensi

 Alan Oursland, Using Opengl In Visual C++, Interface Technologies, Inc., 2000.

 Dave Shreiner, Jakie Neider, Opengl Programming Guide, Fifth Edition, Addison Wesley 2006

 Richard S. Wright, Jr., Benjamin Lipchak, Nicholas Haemel, Opengl® Superbible Fourth Edition, Comprehensive Tutorial And Reference, 2007

 Shalini Govil-Pai, Sunnyvale, CA, U. S. A. Principles Of Computer Graphics Teory And Practice Using OpenGL And Maya, Springer, 2004

 Tom Mcreynolds, David Blythe, Advanced Graphics Programming Using Opengl, Elsevier, Addison Wesley, 2005

Komponen Penilaian

Partisipasi, keaktifan & Presensi= 5% Tugas = 35% UTS = 25% UAS = 35%

Kebutuhan

Dev C++ Glut OpenGL

Materi

Pengenalan grafika komputer Manfaat grafika komputer Materi dalam grafika komputer Mengenal library grafis OpenGL Instalasi GLUT OpenGL Mengenal Pemrograman Grafis

Struktur dasar Pemrograman Grafika menggunakan OpenGL

Apakah Grafika Komputer

 Grafika komputer atau dalam bahasa Inggris Computer Graphics dapat

diartikan sebagai bidang ilmu dengan seperangkat alat yang terdiri dari hardware dan software untuk mempelajari bagaimana menghasilkan suatu gambar, grafik atau citra realistik untuk seni, game komputer, foto dan film animasi.

 Sistem grafika komputer dapat dijalankan dengan komputer pribadi (Personal Computer) atau pada workstation. Sistem ini terdiri dari hardware dan software yang digunakan untuk membuat sembarang objek 2 Dimensi (2D) dan 3 Dimensi (3D).

(2)

Pengenalan Grafika Komputer

Sebutkan perbedaan antara grafika komputer dan

Image Processing?

Apa perbedaan photo dan gambar?

Jawab

Grafika komputer

menghasilkan suatu gambar

Materinya berisi teknik-teknik menggambar

Hasilnya gambar

Image Processing

mengolah suatu gambar

Materinya berisi teknik

memperbaiki dan menyajikan informasi

Hasilnya bisa gambar atau informasi

Jawab

Photo dihasilkan dari

capture (mengambil)

gambar yang ada

Detail dari setiap obyek lengkap. Misalnya jumlah kumis kucing pada kucing tertangkap apa adanya.

Gambar dihasilkan dari

proses pembuatan atau meniru

Detail tidak lengkap.

Peranan dan Penggunaan Grafika Komputer

Antarmuka pengguna. Pemanfaatan GUI (Graphical User Interface)

Perpetaan (Cartography). Peta yang disimpan dan

dimanipulasi dan dilihat pada komputer

Kesehatan.

Computer Aided Design (CAD). Merancang banyak

objek (seperti bagian mekanik) menggunakan grafika komputer.

Sistem multimedia.

Peranan dan Penggunaan Grafika Komputer (2)

Presentasi grafika untuk produk slide Sistem Paint

Presentasi data saintifik.

Simulasi/pelatihan. Contoh: simulator penerbangan Aplikasi lain. Contoh: desain jaringan logika

interaktif, desain arsitektur interaktif, kontrol proses, pemrosesan citra, dll.

Elemen Gambar

 Untuk menciptakan gambar dalam komputer diperlukan

beberapa elemen menggunakan primitif grafik dasar.

 Contoh primitif grafik dasar: Titik

Garis

Segiempat

(3)

Obyek Kompleks

 Obyek kompleks dapat dibuat dengan kombinasi

dari grafik primitif.

 Contoh :

Pertanyaan

Bagaimana cara komputer menggambar?

Jawab

Layar komputer terdiri atas ribuan titik yang disebut

piksel (bentuk kotak atau bulat)

Komputer harus tahu bagaimana mengatur piksel

untuk menampilkan bentuk atau gambar

Bagaimana menggambar titik, garis, atau lingkaran

Sistem Penampil Komputer

CRT (Cathode Ray Tube)

Sistem Penampil Komputer

Secara konsep, penampil komputer merupakan larik

2 dimensi (matriks)

Jumlah baris dan kolom piksel disebut resolusi layar,

misalnya 1024 x 1024

Monitor berwarna mempunyai 3 phosfor berwarna yang berbeda, yaitu RGB (Red Green Blue)

Sistem Penampil Komputer

Warna dibentuk dari kombinasi RGB

Jumlah total warna yang bisa ditampilkan oleh

monitor ditentukan oleh jumlah bit yang digunakan untuk menyatakan warna

Jumlah bit yang digunakan disebut resolusi warna monitor. Contoh:

Monitor VGA 8 bit

Monitor advance 24 bit (8 bit untuk masing-masing R,G,B) = 16 juta warna

(4)

Sistem Penampil Komputer

Sistem Koordinat

Koordinat adalah rangkaian angka untuk

menentukan posisi pada suatu garis atau permukaan (2D atau 3D)

Misalnya: koordinat kartesian yang terdiri atas dua

garis lurus yang disebut sumbu yaitu sumbu horisontal (sumbu-x) dan sumbu vertikal (sumbu-y)

Sistem Koordinat

Pada penampil komputer, juga didefinisikan sistem

koordinat kartesian.

Titik asal (origin) biasanya didefinisikan pada ujung

kiri-atas layar penampil

Clipping Area

Pada umunya aplikasi tidak menggangu keseluruhan

ukuran monitor, tetapi hanya sebagian saja, hal ini disebut sebagai clipping area

Pendefinisian area window yang akan digunakan

oleh sebuah aplikasi disebut viewport.

Piranti untuk Memaparkan Output Grafika

Komputer

Keyboards Tombol Mouse Graphics tablets Joysticks dan trackballs Knobs

Space balls dan data gloves

Data Input = Primitif Input

Strings (keyboards, suara) Pilihan (tombol, layar sentuh) Valuators (analouge dial) Locator (mouse)

(5)

Pemrograman Grafika Komputer

Tiga komponen untuk kerangka kerja aplikasi

grafika komputer:

model aplikasi

Program aplikasi

Sistem grafik

Rapid Applications Development

(RAD)

Aplikasi pengembang cepat, misalnya: Delphi

Borland C++

Visual C++

Visual Basic

RAD memudahkan dalam pembuatan antarmuka,

form, tombol, dll. Sehingga dapat membantu percepatan dalam pembuatan program aplikasi grafik.

Instalasi GLUT

Download Dev C++ dan install di komputer

masing-masing.

http://www.brothersoft.com/dev-c++-65296.html Install Dev C++

Buka C++

Pilih menu Tools  Package Manager  klik install

Pilih paket GLUT untuk Dev C++ pada folder dimana tersimpan paket tersebut. Ikuti perintah instalasi berikutnya

Pengantar C++

Struktur program C++

Daftar header file  untuk mengkompile C++ (wajib ada)

Deklarasi fungsi-fungsi tambahan (tidak wajib ada) Kepala fungsi utama/main  program yang

dijalankan (wajib ada)

Definisi fungsi utama/main  untuk membuat statement

Definisi fungsi-fungsi tambahan (subroutine)

Contoh

Tipe Data

Integer

tipe data bilangan bulat dalam rentang tertentu. Keyword Ukuran

(bit) Jangkauan nilai

Int 16 bit -32768 s/d 32768 Short int atau

short 16 bit -32768 s/d 32768 Long int atau long 32 bit -2147483648 s/d

(6)

Tipe Data

Tipe Data Pecahan

Tipe data teks (char), dapat berupa suatu karakter

atau kumpulan karakter (string)

Tipe data boolean adalah tipe data yang nilainya

hanya ada 2 yaitu true dan false.

String, sekumpulan data char yang dijadikan satu. Keyword Ukuran (bit) Jangkauan Nilai

Float 32 bit 3.4E-038 s/d 3.4E+038 Double 32 bit 1.7E-038 s/d 1.7E+038 Long double 64 bit 1.7E-038 s/d 1.7E+038

Tipe Data

Format deklarasi variabel:

<tipe_data> <nama_variabel>

contoh: int angka; char huruf;

Format deklarasi konstanta :

1) #define <nama_konstanta> <nilai>

contoh: #define pi 3.24 #define nama “UNY” 2)

#Const<tipe_data>

<nama_konstanta>=<nilai>;

contoh: const int pi=3.14; const char nama[]=“UNY”;

Operator

Operator pengejaan  =

Operator aritmatika  *, /,+,-,% (mod: sisa pembagian)

Operator aritmatika unary  ++ : increment - - : decrement

Operator hubungan  >, >=, <, <=,= = (sama

dengan),!= (tdk sama dgn)

Operator logika  &&, ||, !

Input dan Output

cout<< perintah mencetak output Cin>>  perintah untuk memasukkan input

Contoh

Array

Array adalah kumpulan data yang terdiri atas banyak variabel yang sudah ditentukan dan mempunyai tipe yang sama

Setiap elemen array mempunyai indeks sehingga disebut variabel berindeks

Array  1 dimensi

2 dimensi atau lebih (untuk matriks) Sintaks:

1 dimensi:

<tipe array><nama array>[panjang array]={....} Contoh: int tinggi[4]={34 20 52 18}

2 dimensi:

<tipe array><nama array>[panjang baris][panjang kolom]={{....},{....}}

Contoh: int A[2][4]={{1,2,3,4}{5,6,7,8}}

Tugas

Download Dev C++ dari link yang telah diberikan di

atas

Install di komputer anda

Tuliskan 2 program contoh dalam materi ini pada