BUKU 1
KOMPUTER GRAFIS
A. TUJUAN
Mahasiswa memahami konsep dari OpenGL
Mahasiswa mampu mengkonfigurasikan GLUT OpenGL dengan Dev C++
Mahasiswa mampu setting project OpenGL di Dev C++
Mahasiswa mampu membuat window
B. DASAR TEORI
1. OpenGL
OpenGL adalah suatu library grafis standard yang digunakan untuk keperluan-
keperluan pemrograman grafis, Selain OpenGL, library grafis yang banyak digunakan
adalah DirectX. OpenGL bersifat Open-Source, multi-platform dan multi-language. Saat
ini semua bahasa pemrograman mendukung OpenGL. Dan OpenGL bisa bekerja dalam
lingkungan Windows, Unix, SGI, Linux, free BSD dll.
GLUT (GL Utility Toolkit) merupakan pengembangan dari OpenGL yang didesain
untuk aplikasi dengan level kecil hingga menengah dan menggunakan callback functions
untuk menambahkan interaksi dari user.
glBegin(GL_TRIANGLES);
glVertex2f(-0.5f, -0.5f);
glVertex2f(0.5f, -0.5f);
glVertex2f(0.0f, 0.25f);
glEnd();
Perintah Pengertian
GL_QUARDS Untuk menggambar segi empat
GL_LINES Penggambarkan sebuah garis
glVertex3f Untuk menentukan titik 3 dimensi
glColor3f Untuk penentuan suatu warna
glLineWidth Yaitu suatu fungsi yang berfungsi
untuk mengatur tebalnya garis,
glPointSize suatu fungsi yang berfungsi untuk
mengatur besarnya suatu objek,
gluOrtho2D yaitu suatu fungsi untuk mengatur
proyeksi hasil eksekusi dan
mendefinisikan besarnya sistem
koordinat dengan urutan kirikanan dan
bawah-atas.
glClearColor Menandakan warna apa yang
digunakan sebagai background. Warna
dinyatakan dalam bentuk RGBA,
angka pertama memwakili warna
merah, kedua hijau, ketiga biru, dan
keempat adalah alpha atau tingkat
transparansi. Tiap warna berkisar
antara 0 hngga 1.
glClear Untuk menghapus window dan
memberikan warna yang telah kita
definisakn sebelumnya dengan
menggunakan glClearColor
glPushMatrix Menyimpan koordinat Matrik yang ada
glPopMatrix Berguna untuk memanggil suatu fungsi
yang telah disimpan pada glPushMatrix
glBegin(GL_Lines) Untuk memulai menggambar dalam
bentuk garis. Setiap pasangan verteks
sebagai seg,em garis independen
glEnd Untuk mengakhiri penggambaran
sebuah garis
SwapBuffers(hDC) untuk menukar bagian belakang buffer
menjadi buffer screen
glflush() Rendiring
a. Pastikan PC atau Laptop yang digunakan telah terinstall Dev C++ dan telah
mendownload FreeGlut, disarankan mengunakan Dev C++ versi 5.11.
b. Ekstrak File FreeGlut, akan terdapat folder bin, include, dan lib.
c. Copy isi file folder bin\x64 ke C:\windows\system32\
f. selesai
a. Buka Aplikasi Dev C++. Klik File > New > Project
b. Setelah New Project akan tampil jenis lembar kerja yang akan digunakan, klik
Console Application > OK
#include <GL/glut.h>
void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
glutSwapBuffers();
}
D. Latihan
Buatlah sebuah window berwarna putih dengan ukuran 600 x 300 dengan posisi window
berada pada koordinat 100, 200. Nama window adalah Pratikum 1.
E. Tugas
A. TUJUAN
Mahasiswa memahami sistem koordinat 2D
Mahasiswa mampu menggambar titik
Mahasiswa mampu menggambar garis
Mahasiswa mampu setting warna objek geometri primitif
B. DASAR TEORI
1. Sistem Koordinat 2D
Sistem koordinat 2D terdiri dari 2 sumbu, yaitu sumbu x dan y. Berikut ini adalah
contoh dari dari koordinat 2D dimana ukuran windownya adalah 640, 480.
Sebelum mengatur sistem koordinat, terlebih dahulu harus menentukan posisi dan
ukuran windownya. Untuk mengatur posisi window gunakan perintah:
glutInitWindowPosition(x, y);
glutInitWindowPosition(100,200);
glutInitWindowSize(lebar,tinggi);
glutInitWindowSize(640,480);
x = 100
y = 200
Lebar=640
Tinggi=480
gluOrtho2D(Kiri,kanan,bawah,atas);
gluOrtho2D(-320.,320.,-240.,240.);
Koordinat kartesius dapat juga di atur dengan nilai minimal -1 dan maksimal 1..
Dengan perintah:
gluOrtho2D(-1.0,1.0,-1.0,1.0);
-1 1
-1
2. Menggambar Titik
Titik dalam Grafika Komputer bisa didefinisikan sebagai suatu posisi tertentu
dalam suatu sistem koordinat. Dalam koordinat kartesius, titik didefinisikan sebagai
kombinasi dua bilangan yang menentukan posisi tersebut dalam koordinat x dan y (2D).
Jika kita ingin menempatkan titik-titik A(20,40), B(10,10), C(40,-1.50), D(-40,-
20), dan E(–40,30) Kita bisa menggambarkan sebagai berikut:
glBegin (GL_POINTS);
glVertex2i (20,40);
glVertex2i (10,10);
glVertex2f (40.0,-1.5);
glVertex2i (-40,-20);
glVertex2i (-40,30);
glEnd();
3. 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).
(10, 40)
(10, 10)
Jika kita ingin membuat garis, dimana titik awalnya pada koordinat (10,10) dan
titik akhirnya pada koordinat (10,200) maka kita dapat menulis programnya sebagai
berikut:
glBegin (GL_LINES);
glVertex2i (10,10);
glVertex2i (10,40);
glEnd();
4. Warna
Untuk mengatur warna dari objek primitif geometri, maka gunakan perintah
berikut ini:
glColor3f(1.0,1.0,1.0);
Titik
1. Setting project OpenGL di Dev C++. Nama project: Pratikum2Titik
#include <GL/glut.h>
void gambar(){
glPointSize(6.0);
glBegin (GL_POINTS);
glColor3f(0.0, 0.0, 0.5);
glVertex2i (20,40);
void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
gambar();
glutSwapBuffers();
Garis
5. Setting project OpenGL di Dev C++. Nama project: Pratikum2Garis
#include <GL/glut.h>
void gambar(){
glColor3f(1.0,0.0,1.0);
glBegin (GL_LINES);
glVertex2f (0.1,0.10);
glVertex2f (0.1,0.90);
glEnd();
glColor3f(0.0,1.0,0.0);
glPointSize(6.0);
glBegin (GL_POINTS);
glVertex2f (0.2,0.20);
glEnd();
}
void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
gambar();
glutSwapBuffers();
D. Latihan
Lihat File Presentase
E. Tugas
Buatlah laporan mengenai hasil praktikum dan latihan.
Praktikum 3
PRIMITIF GEOMETRI II
A. TUJUAN
Mahasiswa mampu menggambar segiempat
Mahasiswa mampu menggambar segitiga
Mahasiswa mampu menggambar segienam
Mahasiswa dapat menggunakan reshape callback function
B. DASAR TEORI
1. Segiempat
Untuk memulai membuat bentuk segiempat, kita harus mengiinisialisasikan
terlebih dulu titik-titik koordinatnya yang terdiri dari 4 titik. Contohnya:
glBegin (GL_POLYGON);
glVertex2f (-0.5, -0.5);
glVertex2f (-0.5, 0.5);
glVertex2f (0.5, 0.5);
glVertex2f (0.5, -0.5);
glEnd();
2. Segitiga
Untuk memulai membuat bentuk segiempat, kita harus mengiinisialisasikan
terlebih dulu titik-titik koordinatnya yang terdiri dari 3 titik. Contohnya:
(0.0, 0.0)
glBegin (GL_TRIANGLES);
glVertex2f (-0.5, -0.5);
glVertex2f (0.0, 0.0);
glVertex2f (0.5, -0.5);
glEnd();
3. Segienam
Untuk memulai membuat bentuk segienam, kita harus mengiinisialisasikan terlebih
dulu titik-titik koordinatnya yang terdiri dari 6 titik. Contohnya:
glBegin (GL_POLYGON);
C(-0.2, 0.4) D(0.2, 0.4)
glVertex2f (-0.4, -0.2);
glVertex2f (-0.2, 0.4);
glVertex2f (0.2, 0.4);
E(0.4, 0.2) glVertex2f (0.2, 0.4);
B(-0.4,
glVertex2f (-0.2, 0.0);
0.2)
glVertex2f (-0.2, 0.0);
glEnd();
A(-0.2, 0) F(0.2, 0)
4. Reshape Callback Function
Jika kita drag ujung windows sehingga window tidak lagi berupa bujursangkar,
bujursangkar-nya juga berubah bentuk. Gambar berikut mengilustrasikan situasinya.
Agar gambar tetap berada pada proporsi yang tepat, maka perlu digunakan callback
reshape yang dipanggil setiap kali window berubah ukuran. Untuk itu perlu lakukan
perintah berikut:
C. PRATIKUM
1. Setting project OpenGL di Dev C++. Nama project: Pratikum3
#include <GL/glut.h>
void garis(){
glColor3f(0.0,1.0,1.0);
glBegin (GL_POLYGON);
glVertex2f (-0.5, -0.5);
glVertex2f (-0.5, 0.5);
glVertex2f (0.5, 0.5);
glVertex2f (0.5, -0.5);
glEnd();
glColor3f(1.0,0.0,1.0);
glBegin (GL_TRIANGLES);
glVertex2f (-0.5, -0.5);
glVertex2f (0.0, 0.0);
glVertex2f (0.5, -0.5);
glEnd();
glColor3f(0.0,0.0,1.0);
glBegin (GL_POLYGON);
glVertex2f (-0.2, 0);
glVertex2f (-0.4, 0.2);
glVertex2f (-0.2, 0.4);
glVertex2f (0.2, 0.4);
glVertex2f (0.4, 0.2);
glVertex2f (0.2, 0);
glEnd();
}
void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
garis();
glutSwapBuffers();
}
int main(int argc,char** argv){
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("pratikum 3");
glClearColor(1.0,1.0,1.0,1.0);
gluOrtho2D(-1.,1.,-1.,1.);
glutIdleFunc(display); glutDisplayFunc(display);
glutReshapeFunc(resize);
glutMainLoop();
return 0;
}
D. Latihan
Lihat File Presentase
E. Tugas
Buatlah laporan mengenai hasil praktikum dan latihan.
Praktikum 4
ALGORITMA PEMBENTUK OBJEK
A. TUJUAN
Mahasiswa mampu menggambar lingkaran dan elipse
Mahasiswa mampu menggambar garis
B. DASAR TEORI
1. Lingkaran
Membuat sebuah bidang seperti segitiga, segi-empat, dan segi-banyak lainnya
merupakan hal yang mudah untuk dilakukan. Tentukan letak x dan y dari masing-masing
titik, kemudian menghubungkannya, jadilah sebuah bidang. Lalu bagaimanakah dengan
lingkaran? Apakah dapat dilakukan hanya dengan menghubungkan titik-titik yang ada
seperti bidang lainnya? Tentu saja tidak. Jadi bagaimana cara membuatnya? Apa itu
sebenarnya lingkaran?
Jadi apa itu sebenarnya lingkaran? lingkaran merupakan himpunan semua titik pada
bidang tertentu dan dalam jarak tertentu (yang disebut jari-jari) dari suatu titik tertentu
(yang disebut pusat lingkaran). Didalam OpenGL, membuat lingkaran tidak seperti
membuat bidang lainnya. Seperti untuk membuat segitiga, maka digunakan
GL_TRIANGLE, untuk membuat segiempat, maka digunakan GL_QUADS, sedangkan
untuk membuat lingkaran tidak ada.
Untuk mengatasi hal itu, maka kita perlu untuk membuat sendiri sebuah fungsi yang
dapat menggambarkan sebuah lingkaran. Berikut contoh fungsi yang dapat digunakan
untuk membuat sebuah lingkaran.
Pada dasarnya penentuan titik koordinat x,y pada lingkaran dapat dilihat melalui
ilustrasi gambar di bawah ini :
Namun pada penerapan program proses penentuan titik koordinat pada lingkaran
dapat kita kembangkan seperti kode program di bawah ini :
float x=x_tengah+jari2*cos(sudut);
float y=y_tengah+jari2*sin(sudut);
Letak posisi koordinat lingkaran berasal dari penambahan titik tengah lingkaran
yang telah ditentukan sebelumnya dengan jari-jari dikali dengan sudut cos untuk kordinat
x, dan sudut sin untuk koordinat y. Bagaimana dengan membuat gambar elipse? Membuat
gambar elipse sebenarnya hampir sama dengan membuat gambar lingkaran. Pada
lingkaran hanya mengenal satu jari-jari sedangkan di elipse mempunyai dua jari-jari
a(arah horisontal) dan b(arah vertikal). Hal inilah yang membuat elipse menjadi lonjong.
Berikut contoh fungsi yang dapat digunakan untuk membuat sebuah elipse.
2. Algoritma Bresenham
Algoritma Garis Bresenham adalah suatu algoritma yang menentukan titik- titik
dalam dimensi yang membentuk pendekatan dekat dengan garis lurus antara dua titik
yang diberikan. Pendekatan ini biasa digunakan untuk menggambar garis pada layar
komputer, karena hanya menggunakan integer penambahan, pengurangan dan
pergeseran. Algoritma ini merupakan salah satu algoritma paling awal yang
dikembangkan di bidang komputer grafis.
Langkah-langkah pembentukan garis berdasarkan algoritma Bressenham
a. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
b. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1,y1).
c. Hitung dx, dy, 2dy dan 2dy - 2dx
d. Hitung parameter : p = 2dy – dx
e. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,
1) bila pk < 0 maka titik selanjutn ya adalah: (xk+1, yk) dan pk+1 = pk +
2dy
2) bila tidak, titik selanjutnya adalah: (xk+1, yk+1) dan pk+1 = pk + 2dy –
2dx
f. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya, sampai x = x1 atau y = y1.
Contoh :
Diketahui 2 buah titik A(10,10) dan titik B(17,16) bila titik A sebagai titik awal
dan titik B sebagai titik akhir, tentukan titik-titik antara yang menghubungkan titik A dan
titik B sehingga membentuk garis AB dengan menggunakan algoritma Bressenham.
//GARIS MENDATAR(HORIZONTAL)
void lineBresHori (GLint x0, GLint y0, GLint xEnd, GLint yEnd)//rumus
{
GLint dx = (xEnd - x0);
GLint dy = (yEnd - y0);
GLint p = 2*dy-dx; GLint twoDy = 2*dy;
GLint twoDyMinusDx = 2*(dy-dx); GLint x,y;
C. PRATIKUM
Lingkaran
1. Setting project OpenGL di Dev C++. Nama project: Pratikum4Lingkaran
#include <GL/glut.h>
#include<math.h>
const double PI = 3.141592653589793;
int i;
void renderScene(void) {
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 0.0, 0.0); //merah
lingkaran(30,70,-200,0);
glColor3f(0.0, 1.0, 0.0); //hijau
lingkaran(30,70,200,0);
glColor3f(0.0, 0.0, 1.0); //biru
lingkaran(100,100,0,0);
glFlush();
}
Garis
5. Setting project OpenGL di Dev C++. Nama project: Pratikum4Garis
#include <GL/glut.h>
glColor3f(0.0,1.0,0.0);
glPointSize(4.0); GLint x1 = 50;
GLint y1 = 100; GLint x2 = 150; GLint y2 = 100;
lineBres(x1,y1,x2,y2);
glColor3f(0.0,0.0,1.0);
glPointSize(4.0); GLint x3 = 50; GLint y3 = 150; GLint x4
= 150; GLint y4 = 150;
lineBres(x3,y3,x4,y4);
}
D. Latihan
Lihat File Presentase
E. Tugas
Buatlah laporan mengenai hasil praktikum dan latihan