lab multimedia dan pengolahan...

MODUL GRAFIKA KOMPUTER 2017 LAB MULTIMEDIA DAN PENGOLAHAN CITRA

BAB I

PENGENALAN OPENGL

A. TUJUAN

a. Mampu melakukan konfigurasi Library opengl di Visual Studio

2008

b. Mampu memahami inisialisasi fungsi openGL

c. Mampu membuat objek dasar dengan fungsi openGL

B. MATERI

a. Konfigurasi library openGL

b. Inisialisas OpenGL

C. 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. Untuk pemrograman OpenGL menggunakan

C++, diperlukan library tambahan yaitu :

1. glut.h yang dicopy ke $dir-C\Microsoft Visual Studio 9.0 (sesuaikan dengan

versi visual studio anda)\Vc\include

2. glut32.lib yang dicopy ke $dir\Program Files\Microsoft Visual Studio 9.0

(sesuaikan dengan versi visual studio anda)\Vc\lib

3. glut32.dll yang dicopy ke $dir\Windows\System32 or if Win64 to sysWOW64

D. KLASIFIKASI FUNGSI

a. Primitive : berupa geometric,

b. imagesAttribute : berupa color, line type, light, texture

c. Viewing : berupa vithrtual

d. cameraControl : turn fuction ON / OFF

e. Windowing : window, mouse, keyboard

E. CARA KERJA OPENGL

OpenGL lebih mengarah pada prosedural daripada sebuah deskriptif API

grafis.Untuk mendeskripsikan scene dan bagaimana penampilannya,sebenarnya

programer lebih tau untuk menentukan hal-hal yang dibutuhkan untuk

menghasilkan efek yang di inginkan.Langkah tersebut termasuk memanggil

banyak perintah openGL, perintah tersebut digunakan untuk menggambarkan


grafis primitif seperti titik,garis dan poligon dalam tiga dimensi.Sebagai

tambahan,openGL mendukung lighting, shading, texture mapping, blending,

transparancy,dan banyak kemampuan efek khusus lainnya.

F. INISIALISASI AWAL

Inti dari tahapan ini adalah mengatur view port dan persepektif untuk

penampilan obyek ke dalam layar monitor, viewport adalah besarnya layar

monitor(image) yang dipakai untuk menampilkanobyek, sedangkan persepektif

yang dimaksud adalah pengaturan sumbu z dalam penampilan obyek 3

dimensi,sehingga user dapat melihat obyek seolah-olah dalam bidang 3 dimensi

(X-Y-Z),selain itu penggambaran obyek yang dilakukan oleh programer juga dapat

menggunaan koordinat 3 dimensi. Selain ke dua tujuan di atas pada tahap ini juga

dilakukan koneksi awal dengan library openGL, koneksi ini dilakukan supaya

fungsi-fungsi yang di sediakan openGL dapat digunakan. Fungsi/prosedur yang

digunakan :

Fungsi / Prosedur Pengertian

LoadGlut(glut32.dll) „if you no

include gl in system‟

Pemanggilan library openGL

InitGL Inisialisasi openGL awal yang harus

dilakukan

glViewport Untuk pengaturan viewport

glMatrixMode Untuk pengaturan viewport

Pembuatan Gambar


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 memwakil 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 memmulai 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

Fungsi dasar menggambar titik

Fungsi / Prosedur Pengertian Contoh

glVertex2i(x,y) Yaitu suatu fungsi

untuk menggambar

titik pada koordinat x

dan y, dengan nilai

satuan berupa integer.

glVertex2i(10,10)

glVertex2f(x,y) Yaitu suatu fungsi

untuk menggambar


dan y, dengan nilai

satuan berupa float.

glVertex2f(10.0,10.0)

glVertex2d(x,y) Yaitu suatu fungsi

untuk menggambar


dan y, dengan nilai

satuan berupa double.

glVertex2d(10.0,10.0)


Definisi primitive objek


# define GL_POINTS Primitif objek ini dipergunakan untuk menciptakan

suatu titik.

# define GL_LINES Primitif objek ini adalah suatu primitive objek

guna menciptakan suatu garis.

# define GL_LINE_LOOP Menarik sekelompok verteks yang terhubung

menjadi segmen garis dari titik pertama sampai

terakhir, kemudian kembali ke verteks yang

pertama.

# define GL_LINE_STRIP Menggambar sekelompok verteks yang terhubung

menjadi segitiga. Sebuah segitiga baru

didefinisikan untuk setiap titik yang diberikan

setelah dua verteks pertama dan seterusnya.

# define GL_TRIANGLES Triangle atau segitiga adalah tiga buah titik yang

terhubung menjadi suatu segitiga dengan blok di

tengahnya.

#define

GL_TRIANGLES_STRIP

Pada triangles strip jumlah vertex yang

dipergunakan adalah 3 buah vertex.

#define

GL_TRIANGLES_FAN

Triangles fan adalah pembuatan suatu objek

dengan menggunakan segitiga dimana hanya

menggunakan 1 titik pusat saja.

# define GL_QUADS Quad atau segempat adalah empat buah titik yang

terhubung menjadi quat segi empat dengan blok di

tengahnya.

#define GL_QUADS

_STRIP

Pada quads strip 4 buah vertex merupakan 1

kelompok.

# define GL_POLYGON Polygon merupakan suatu fungsi yang mirip

dengan polyline, tetapi menghasilkan kurva

tertutup dengan blok warna (fill).

Fungsi untuk memberikan warna (fungsi color):

Fungsi Warna

glColor3f(0,0,0); Black

glColor3f(0,0,1); Blue

glColor3f(0,1,0); Green

glColor3f(0,1,1); Cyan

glColor3f(1,0,0); Red

glColor3f(1,0,1); Magenta

glColor3f(1,1,0); Yellow


glColor3f(1,1,1); White

Transformasi objek


glTranslatef(x,y,z); Parameter pertama menunjukkan translasi berdasarkan

sumbu x.

Parameter ke dua menunjukkan translasi terhadap sumbu

y.

Parameter ke tiga menunjukkan parameter terhadap

sumbu z pada kanvas.

glRotatef(sudut,x,y,z)

;

Parameter pertama merupakan nilai perputaran sudut yang

diinginkan.

Parameter ke dua adalah perputaran terhadap sumbu x,

parameter ke tiga merupakan perputaran terhadap sumbu

y,

Parameter ke empat6 adalah perputaran terhadap sumbu z.

Dan parameter ke dua, ke tiga, dan ke empat harus

bernilai 1 untuk menjadi sumbu putar sempurna. Dan

untuk pemberian nilainya akan menyebabkan perputaran

searah dengan jarum jam ketika diberi nilai negatif, dan

sebaliknya.

glScalef(x,y,z); Parameter pertama, kedua, dan ke tiga masing-masing

menunjukkan nilai skala untuk obyek berdasarkan sumbu

x, y, dan z. Jika nilai skala adalah 1, maka ukuran obyek

tersebut adalah tetap


BAB II

P R I M I T I F O B J E K

A. TUJUAN

a. Mampu melakukan inisialisasi pembuatan primitif objek pada openGL

b. Mampu membuat primitif objek menggunakan openGL

B. MATERI

a. Konsep primitif objek di openGL

b. Pembuatan primitif objek di openGL

C. Definisi Primitif Objek

Contoh primitive grafika dasar antara lain : titik, garis, kurva, fill area dan

text. Objek kompleks dapat dibuat dengan kombinasi dari primitive ini. Misalkan,

Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling

terhubung. Secara umum algoritma grafis memiliki persamaan yaitu bagaimana

menampilkan hasil.

Contoh SegiEmpat yang menggunakan Primitive Objek :

Pada primitive object dapat digunakan untuk membuat segi empat berikut

adalah pembuatan suatu objek berupa segiempat, pertama mengalami Proses

Rendering :

SegiEmpat (posx, posy, w, h)


1. Maka sintaks pembuatan segiempat :

Segitiga


Segi_8


BAB III

Algoritma Pembentukan Objek

A. TUJUAN

a. Mampu memhami konsep algoritma bresenham

b. Mampu menerapkan algoritma bresenham pada openGL

c. Mampu membuat garis dengan algoritma bresenham

B. MATERI

a. Konsep algoritma bresenham

b. Penerapan algoritma bresenham pada openGL

C. 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. Konsep Algoritma Bresenham

Langkah-langkah pembentukan garis berdasarkan algoritm Bressenham

adalah:

1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.

2. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1,y1).

3. Hitung dx, dy, 2dy dan 2dy - 2dx

4. Hitung parameter : p = 2dy – dx

5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,

a. bila pk < 0 maka titik selanjutn ya adalah: (xk+1, yk) dan pk+1 = pk +

2dy

b. bila tidak, titik selanjutnya adalah: (xk+1, yk+1) dan pk+1 = pk + 2dy –

2dx

6. 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.


Contoh program

#include <stdio.h>

#include <glut.h>

void display()

{

glMatrixMode(GL_PROJECTION);

gluOrtho2D(0.0,300.0,0.0,300.0);

}

void setPixel (GLint xCoordinate, GLint yCoordinate)

{

glBegin (GL_POINTS);

glVertex2i (xCoordinate, yCoordinate

glEnd();

glFlush();

}

void lineBres (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;

if(x0 > xEnd){

x=xEnd;

y=yEnd;

xEnd=x;

}

else{

x=x0;

y=y0;

}

setPixel(x,y);

while(x<xEnd){

x++;

if(p<0)

p+=twoDy;

else{

y++;

p+=twoDyMinusDx;

}

setPixel(x,y);

}

}

void drawMyLine ()

{

glColor3f(1.0,0.0,0.0);

glPointSize(4.0);

GLint x0 = 50;

GLint y0 = 50;

GLint xEnd = 150;

GLint yEnd = 50;

lineBres(x0,y0,xEnd,yEnd);

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);

}

int main(int argc, char** argv)

{

glutInitWindowSize(400,400);

glutInitWindowPosition(0,0);

glutCreateWindow("bresenham");

display();

glutDisplayFunc(drawMyLine);

glutMainLoop();

return 0;

}

TUGAS


BAB IV

Transformasi objek

A. TUJUAN

a. Mampu memahami transformasi objek pada openGL

b. Mampu melakukan transformasi objek menggunakan openGL

c. Mampu melakukan implementasi transformasi objek pada openGL

B. MATERI

a. Konsep Transformasi Objek

b. Penerapan Transformasi objek pada openGL

C. Tujuan transformasi adalah :

1. Merubah atau menyesuaikan komposisi pemandangan

2. Memudahkan membuat objek yang simetris

3. Melihat objek dari sudut pandang yang berbeda

4. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini

biasa dipakai untuk animasi komputer.

Secara substansi, Grafika Komputer adalah proses transformasi dari model

3D obyek berupa informasi geometri bentuk, informasi pose, warna, texture, dan

pencahayaan menjadi citra 2D

Jika dilihat secara analogi, hal di atas mirip dengan cara kerja kamera

dalam mengambil foto dalam bidang fotografi (cf. Gambar 4). Model ini disebut

model sintesis camera.


Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus

melakukan beberapa proses, yaitu:

1. Melakukan pengesetan kamera dalam bentuk setting lensa kamera

(Transformasi Proyeksi),

2. Mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),

3. Mengatur letak obyek (Transformasi Modeling), dan

4. Mengatur skala dan layout dari foto (Transformasi Viewport)

D. Translasi

Translasi adalah transformasi dengan bentuk yang tetap, memindahkan

objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang

sama.Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi

bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah

sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. Translasi juga

berlaku pada garis, objek atau gabungan objek 2D yang lain. Untuk hal ini, setiap

titik pada garis atau objek yang ditranslasi dalam arah x dan y masing -masing

sebesar tx,ty.

Program di bawah ini akan memberikan ilustrasi bagaimana transformasi

translate diimplementasikan.


Contoh Translasi

E. Rotate

Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka

perlu di tentukan pusat dan besar sudut putar. sedangkan translasi adalah

pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami

pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah.

Rotasi berbeda dengan translasi karena perubahan posisi pada translasi

tidak mengacu pada suatu titik tertentu. Keistimewaan dari rotasi adalah jarak

antara titik pusat dengan masing-masing bagian dari obyek yang diputar akan

selalu tetap, seberapa jauh pun obyek itu diputar.

Pada sebuah game yang menggunakan grafik vektor dan grafik bitmap,

rotasi dan translasi sangat di butuhkan. Dengan basic4GL kita bisa

menggunakan source code yang tersedia yaitu :


glTranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu

koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z. glRotatef

(angle, x, y, z) digunakan untuk memutar suatu bidang pada sudut tertentu

(angle).

Untuk membangkitkan rotasi pada objek 3D kita harus membuat aksis dari

rotasi dan jumlah sudut rotasi . Tidak seperti melakukan rotasi pada objek 2D

yang semua proses transformasi dilakukan di koordinat xy, sebuah rotasi objek

tiga dimensi bisa dilakukan di space manapun.

Contoh Program Rotasi


F. Scale

Skala merupakan salah satu bentuk transformasi yang merubah ukuran

dari objek yang ditentukan, baik membesar ataupun mengecil. Perubahan ukuran

tersebut didasarkan pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang

diubah hanya sumbu x, maka besarnya objek akan berubah sesuai dengan sumbu x

baru yang telah ditentukan, begitu pula jika diubah terhadap sumbu dan zy, maka

objek akan menguikuti perubahan sesuai sumbu y maupun z baru yang telah

ditentukan.

Perubahan skala diperoleh dari mengalikan nilai koordinat objek dengan

skala tertentu sesuai dengan sumbu masing - masing. Bentuk dari matriks skala

adalah:

Transformasi skala dapat dilakukan dengan cara memanggil fungsi:

glScalef(Sx, Sy, Sz)

glScaled(Sx, Sy, Sz)

Dimana Sx, Sy, dan Sz merupakan parameter dari masing – masing sumbu

( Sx merupakan parameter pada sumbu x, Sy merupakan parameter pada sumbu

y, dan Sz merupakan parameter pada sumbu z)


Source code Scale

D. Tutorial Urutan Transformasi

Transformasi dapat dilakukan pada level vertex, level surface, maupun

level obyek bergantung dimana transformasi diletakkan dalam program. Operasi

transformasi merupakan operasi yang tidak bersifat komutatif, artinya, urutan

transformasi juga sangat berpengaruh pada hasilnya. ilustrasi akibat urutan

transformasi yang berbeda, yaitu hasil operasi “rotasi kemudian di translasi”

berbeda dengan operasi “translasi baru dirotasi”.


Program obyeknya sudah berupa obyek 3D berupa kubus. Perhatikan

bagaimana kubus dibentuk dari vertex dan surface. Selain dengan mendefinisikan

obyeknya sendiri, GLUT telah menyediakan beberapa fungsi untuk menggambar

standard obyek, yaitu kubus, bola, dan poci teh.

Perhatikan apa yang terjadi bila glTranslate() dan glRotate() di fungsi

mydisplay() ditukar posisinya atau diletakkan didalam salah satu

glBegin()..glEnd()

#include<stdlib.h>

#include<glut.h>

float z_pos = -10.0f; float rot = 0.0f;

void resize(int width, int height)

{

glViewport(0, 0, width, height);


glLoadIdentity();

gluPerspective(45.0,(float)width / (float)height, 1.0,

300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void putaran(int id)

{

rot += 10;

glutPostRedisplay(); // request redisplay

glutTimerFunc(100, putaran, 0); // request next timer event

}

void myKeyboard(unsigned char key, int x, int y)

{

if ((key == '<') || (key == ',')) z_pos -= 0.1f;

if ((key == '>') || (key == '.')) z_pos += 0.1f;

}

void mydisplay(void)

{

glClear(GL_COLOR_BUFFER_BIT);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0.0, 0.0f, z_pos);

glRotatef(rot, 0, 1, 0);


glBegin(GL_QUADS);

// Front Face, red

glColor3f(1.0, 0.0, 0.0);

glVertex3f(-1.0f, -1.0f, 1.0f);

glVertex3f(1.0f, -1.0f, 1.0f);

glVertex3f(1.0f, 1.0f, 1.0f);

glVertex3f(-1.0f, 1.0f, 1.0f);

// Back Face, green

glColor3f(0.0, 1.0, 0.0);

glVertex3f(1.0f, -1.0f, -1.0f);

glVertex3f(1.0f, 1.0f, -1.0f);

glVertex3f(-1.0f, 1.0f, -1.0f);

glVertex3f(-1.0f, -1.0f, -1.0f);

// Top Face, blue

glColor3f(0.0, 0.0, 1.0);

glVertex3f(-1.0f, 1.0f, -1.0f);




// Bottom Face, yellow

glColor3f(1.0, 1.0, 0.0);

glVertex3f(-1.0f, -1.0f, -1.0f);

glVertex3f(1.0f, -1.0f, -1.0f);


glVertex3f(-1.0f, -1.0f, 1.0f);

// Right face, cyan

glColor3f(0.0, 1.0, 1.0);

glVertex3f(1.0f, -1.0f, -1.0f);




// Left Face, magenta

glColor3f(1.0, 0.0, 1.0);

glVertex3f(-1.0f, -1.0f, -1.0f);

glVertex3f(-1.0f, -1.0f, 1.0f);


glVertex3f(-1.0f, 1.0f, -1.0f);

glEnd();

glFlush();

glutSwapBuffers();

}

void init() {

glEnable(GL_DEPTH_TEST);

glClearColor(0.0, 0.0, 0.0, 1.0); // A Background Clear Color


glLoadIdentity();

gluPerspective(45,

(GLdouble)500.0 / (GLdouble)500.0, 0, 100);


return;

}

int main(int argc, char** argv)

{

glutInit(&argc, argv);


//glutInitDisplayMode( GLUT_DOUBLE /*|GLUT_DEPTH* / );

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

glutInitWindowSize(500, 500);

glutInitWindowPosition(0, 0);

glutCreateWindow("Transformasi");

// callbacks

glutDisplayFunc(mydisplay);

glutKeyboardFunc(myKeyboard);

glutTimerFunc(100, putaran, 0);

glutReshapeFunc(resize);

init();

glutMainLoop();

return 0;

}

G. Implementasi Transformasi Objek

Contoh Program :

#include <stdlib.h>

#include <glut.h>

//#include <DrawLine.h>

void drawQuad(){

glBegin(GL_POLYGON);

glVertex2f(77., 70.);












glEnd(); glFlush();

}

void renderScene(void){


// drawkordinat();

glPushMatrix();

glTranslatef(-500, -500, 0);

glColor3f(0, 1, 0);

//blue

drawQuad();

glPopMatrix();

glPushMatrix();


glRotatef(30, 0, 0, 1);

glScalef(0.5, 0.5, 0);

glColor3f(0, 1, 1);

//red

drawQuad();

glPopMatrix();

glPushMatrix();



glScalef(0.5, 0.5, 0);

glColor3f(1, 0, 1);

//yellow

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-150, 0, 0);

glScalef(0.3, 0.3, 0);

glColor3f(1, 1, 1);

//pink

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(450, 400, 0);

glRotatef(45, 0, 0, 1);

glScalef(0.6, 0.6, 0);

glColor3f(1, 0, 1);

//green

drawQuad();

glPopMatrix();

glPushMatrix();


glScalef(0.4, 0.4, 0);

glColor3f(1, 1, 1);

//magenta

drawQuad();

glPopMatrix();

glPushMatrix();


glScalef(0.4, 0.4, 0);

glColor3f(10, 0, 1);

//blue

drawQuad();

glPopMatrix();

glPushMatrix();


glScalef(0.4, 0.4, 0);

glColor3f(1, 0, 0);

//green

drawQuad();

glPopMatrix();

glPushMatrix();


glRotatef(-45, 0, 0, 1);

glColor3f(1, 1, 1);

glPopMatrix();

glFlush();

}

void main(int argc, char **argv){




glutCreateWindow("Implementasi Transformasi");

gluOrtho2D(-640., 640., -640., 640.);


glutDisplayFunc(renderScene);

glutMainLoop();

}

Tugas


BAB V

ANIMASI DAN PEMROGRAMAN

A. TUJUAN

a. Mampu memahami animasi pada openGL

b. Mampu melakukan implementasi animasi objek pada openGL

B. MATERI

a. Animasi Object pada OpenGL

C. Konsep Animasi pada GLUT

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat

sebuah animasi yang dikontrol oleh waktu. Fungsi dari glutPostRedisplaya

dalah mengirimkan perintah untuk mengaktifkan display secara berkala

(looping). Kemudian pada main program perlu menambahkan fungsi untuk

mengaktifkan timer function.

a. Fungsi dasar pembuatan animasi dengan menggunakan TimerFunction

GLUT void APIENTRY glutTimerFunc(unsigned int millis, void

(GLUTCALLBACK *func)(int value), int value);

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah

animasi yang dikontrol olehwaktu.

b. Inisialisasi dalam penggunaan TimerFunction

Fungsi dari glutPostRedisplay adalah mengirim kan perintah untuk

mengaktifkan display secara berkala (looping).

Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan

timer function.


Contoh program

Membuat sebuah baling-baling yang bisa perputar secara clockwise kemudian

unclockwise yang pusatnya berada pada pusat koordinat.

#include <stdlib.h>

#include <glut.h>

int x=0;

int zputer=0;

int zbalik=180;

void Timer(int value){

if (zputer <= 360){

x = 1;

zputer += 1;

}

if (zputer>360){

x = -1;

zbalik -= 1;

}

if (zbalik<0){

x = 1;

zputer = 0;

zbalik = 360;

}

glutPostRedisplay();

glutTimerFunc(5, Timer, 0);

}

void Draw(){

glBegin(GL_TRIANGLES);


glVertex2d(0, 0);

glVertex2d(-100, 200);

glVertex2d(100, 200);

glVertex2d(0, 0);

glVertex2d(-100, -200);

glVertex2d(100, -200);

glEnd();

}

void display()

{


glPopMatrix();

glRotatef(x, 0., 0., 1.);

Draw();

glPushMatrix();

glFlush();

}





glutCreateWindow("JAM ANALOG: Prak Grafkom");

gluOrtho2D(-300., 300., -300., 300.);

glutDisplayFunc(display);


glutMainLoop();


}

Animasi 2D menggunakan OpenGL dapat dilakukan dengan melakukan

perpindahan objek menggunakan glTranslatef, juga dapat dilakukan dengan

melakukan perputaran atau pergerakan objek yang berporos pada sumbu-sumbu

koordinat dari sumbu pembentuk objek tersebut menggunakan glRotatef.

Kemudian waktu yang digunakan dalam pergerakan animasi juga dapat diatur

sesuai keinginan dengan menggunakan glutTimerFunc.


BAB VI

INTERAKSI DENGAN PERANGKAT

A. TUJUAN

a. Mampu memahami interasksi perangkat keras dengan openGL

b. Mampu melakukan implementasi interkasi perangkat keras dengan openGL

B. MATERI

a. Interaksi perangkat keras dengan openGL

Pada bab ini akan membahas tentang bagaimana objek yang kita buat akan

berinteraksi dengan perangkat keras komputer serperti, keyboard dan mouse.

1. KONSEP INPUT KEYBOARD PADA GLUT-KEY BIASA DAN

SPECIAL KEY

a. KONSEP INPUT KEYBOARD (GENERAL BUTTON)

glutKeyboardFunc adalah suatu fungsi callback untuk digunakan

sebagai masukan pada suatu jendela window. Konsepnya pada saat seorang

user atau pengguna memberikan input yaitu menekan pada tombol keyboard,

setiap tombol keyboard yang ditekan akan menghasilkan suatu karakter

ASCII yang akan menghasilkan suatu callback keyboard yang telah

didefinisikan berupa fungsi dengan 3 parameter.

Penggunaan input keyboard pada tombol-tombol biasa atau normal

key (a-z, 1-0), dapat dilakukan dengan menggunakan callback function

berupa glutKeyboardFunc(myKeyboard) dengan dideklarasikan terlebih

dahulu suatu fungsi buatan untuk menampung semua perintah input yang

akan digunakan oleh user. Fungsi buatan tersebut seperti contoh di bawah ini:

void myKeyboard(unsigned char key, int x,int y)

{

// masukkan perintah disini

}

Fungsi tersebut berisi suatu perintah yang akan digunakan dalam

pengoperasian program oleh user. Di dalam fungsi tersebut terdapat 3

parameter dan di dalamnya dideklarasikan suatu perintah yang nantinya akan

digunakan.

void timer(int value){



glutTimerFunc(100, timer, 0);

}

void myKeyboard(unsigned char key, int x, int y)

{

if(key == 'a') glTranslatef(0,5,0); if(key ==

'd') glTranslatef(0,-5,0);

}



glColor3f(1.,0.,0.);

Draw();

glFlush();

}

Sintaks tersebut adalah sintak dasar yang digunakan, untuk bisa

menggunakan input keyboard maka harus diberikan callback function untuk

memanggilnya.



glutTimerFunc(30,timer,0);

Sintaks tersebut harus disertakan pada fungsi main.

Selain itu, pada keyboard juga terdapat method lain yang bisa

digunakan dalam proses input ini, yaitu: Key Press, Key Up, dan Key

Buffering.

a. Key Press

Metode ini akan memberitahukan kita pada command line tombol apa

yang sedang kita tekan. Method ini dapat dinamakan keyPressed dan pada

GLUT akan terdapat 3 parameter, satu untuk tombol yang saat itu ditekan,

dan dua untuk memberitahukan lokasi mouse ketika tombol ditekan.

void keyPressed(unsigned char key, int x, int y){


If(key == ‘a’){

// saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’ ditekan

}

}

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback

function-nya sedikit berbeda dari callback function yang sebelumnya.

glutKeyboardFunc(keyPressed); // memberitahukan pada GLUT

untuk menggunakan method "keyPressed" untuk tombol yang ditekan

b. Key Up

Fungsi Key Up ini adalah fungsi register yang menyimpan nilai

masukan sampai ketika tombol keyboard dilepaskan. Hal ini bisa berguna

untuk pengaturan beberapa nilai ketika suatu tombol pertama kali ditekan, dan

tetap menjaga nilai tersebut sampai tombol tersebut dilapaskan. Method sama

seperti method Key Press tadi yaitu memiliki 3 parameter yang memiliki

fungsi yang sama, hanya berbeda pada penamaannya yaitu, keyUp.

void keyUp(unsigned char key, int x, int y){

If(key == ‘a’){ // saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’ ditekan } }

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback

function-nya sedikit berbeda dari callback function yang sebelumnya.

glutKeyboardFunc(keyUp); // memberitahukan pada GLUT

untuk menggunakan method "keyUp" untuk tombol yang dilepas

c. Key Buffering

Method ini memungkinkan untuk penanganan terhadap tombol yang

ditekan dalam jumlah banyak dalam proyekproyek OpenGL. Seperti yang

diketahui tipe data char sama dengan byte dan dapat mengambila nilai integer

dari 0 sampai 255. Ini dikarenakan tipe data char memiliki ukuran 28 atau 256.

Hal ini memungkinkan kita untuk menangani hingga 256 tombol berbeda pada

keyboard, atau seluruh set karakter ASCII.

Pertama dimulai dengan pendeklarasian sebuah array dari nilai

Boolean yang akan menangani masing-masing method keyboard, true untuk

tombol yang ditekan, dan false saat tombol dilepaskan.

bool* keyStates = new bool[256]; // membuat array dari

nilai boolean dengan ukuran 256 (0-255)


kemudian dilanjutkan dengan pendeklarasian masing-masing method. void keyPressed(unsigned char key, int x, int y) {

keyStates[key] = true;

}

void keyUp(unsigned char key, int x, int y){

keyStates[key] = false;

}

void keyOperations(void){ if(keyStates['a']){

// saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’ ditekan

}

}

Sama seperti sebelumnya fungsi-fungsi tersebut akan dipanggil pada

fungsi main dengan callback function berikut:

void display (void){ keyOperations();

glClearColor(1.0f, 0.0f, 0.0f, 1.0f);

// menjadikan background menjadi warna merah

…

}

2. KONSEP INPUT KEYBOARD SPECIAL KEY

GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang

digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard sehingga

dapat digunakan untuk berinteraksi antara user dengan objek yang ada di

dalam display opengl. Pendeklarasiannya adalah :

void glutSpecialFunc (void (* func) (int key, int x, int y));

callback keyboard khusus dipicu ketika keyboard fungsi atau tombol

special yang dideklarasikan ditekan. Parameter callback kunci adalah

GLUT_KEY_tombol khusus.. Parameter x dan y mengindikasikan koordinat

relatif jendela ketika tombol ditekan. Ketika jendela baru dibuat, tidak ada

callback khusus awalnya terdaftar dan stroke kunci khusus di jendela

diabaikan. Melewati NULL untuk glutSpecialFunc Menonaktifkan generasi

callback khusus. Selama callback khusus, glutGetModifiers dapat dipanggil

untuk menentukan keadaan tombol pengubah ketika keystroke menghasilkan

callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah:

GLUT_KEY_F1 F1 function key













GLUT_KEY_LEFT Left function key

GLUT_KEY_RIGHT Right function key

GLUT_KEY_UP Up function key

GLUT_KEY_DOWN Down function key

GLUT_KEY_PAGE_UP Page Up function key

GLUT_KEY_PAGE_DOWN PageDown function key

GLUT_KEY_HOME Home function key

GLUT_KEY_END End function key

GLUT_KEY_INSERT Insert function key

Tombol-tombol diatas dapat diaktifkan dengan membuat sebuah

fungsi callback yang akan dipanggil oleh glutSpecialFunc ke dalam fungsi

main program, sehingga user dapat berinteraksi dengan objek yang ada

dengan menekan tombol-tombol special keyboard yang telah di deklarasikan

ke dalam fungsi callback tersebut. contoh pembuatan fungsi callback untuk

tombol special keyboard :

void mySpecialKeyboard(int key, int x, int y){

switch(key){

case

GLUT_KEY_LEFT : c+=-4;

d+=0;

break;

case

GLUT_KEY_RIGHT : c+=4;

d+=0;

break;

case

GLUT_KEY_UP : c+=0;

d+=4;

break;

case GLUT_KEY_DOWN : c+=0;

d+=-4;

break;


}

}

Selanjutnya fungsi tersebut akan dipanggil oleh glutDisplayFunc ke

dalam fungsi main, berikut script nya :

glutSpecialFunc(mySpecialKeyboard);

Selain fungsi callback yang mendeklarasikan tombol special

keyboard, untuk dapat berinteraksi fungsi tersebut harus memiliki fungsi

callback lain yang akan dipanggil kedalam fungsi glutDisplayfunc dan fungsi

glutTimerFunc didalam fungsi main program tersebut. fungsi callback di

dalam fungsi glutDisplayFunk merupakan fungsi yang mendklarasikan objek

yang akan berinteraksi dengan tombol keyborad, Sedangkan fungsi

glutTimerFunc berfungsi agar tombol keyboard dapat terus terdeteksi oleh

glut. Contoh program interaksi keyboard lengkap :

#include <stdlib.h>

#include <glut.h>

int c, d;

void triAngles(){


glVertex2i(280, 0);

glVertex2i(250, 60);

glVertex2i(220, 0);

glEnd();

}


switch (key){

case

GLUT_KEY_LEFT: c += -4;

d += 0;

break;

case

GLUT_KEY_RIGHT: c += 4;

d += 0;

break;

case

GLUT_KEY_UP: c += 0; d += 4;

break;

case

GLUT_KEY_DOWN: c += 0;

d += -4;

break;

}

}




}




glPushMatrix();

glTranslatef(c, d, 0);

triAngles();

glPopMatrix();

glFlush();

}





glutCreateWindow("uji keyfunc");

gluOrtho2D(-320., 320., -240., 240.);



glutSpecialFunc(mySpecialKeyboard);

glutMainLoop();

}

Sesuai dengan program dimana setiap tombol arah akan memiliki

nilai variabel c dan d yang berbeda-beda yang akan mengakibatkan gambar

akan bergeser dengan arah yang sesuai nilai variabel tersebut ketika tombol

khusus arah (up, down, left dan right) ditekan.

2. KONSEP MOUSE PADA GLUT

Dalam konsep mouse pada glut ada beberapa fungsi dasar dan

inisialisasi yang digunakan untuk melakukan interaksi mouse. Adapun

penjelasannya adalah sebagai berikut :

1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction

GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK

*func)(int button, int state, int x, int y));

Paramater func adalah fungsi yang akan ditangani dengan event klik mouse.

GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int

y));

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk

mendeteksi gerakan mouse.

2. Inisialisasi dalam penggunaan MouseFunction

void mouse(int button, int state, int x,int y){

if(button==GLUT_LEFT_BUTTON &&

state==GLUT_DOWN)

drawDot(x,480-y);

if(button==GLUT_RIGHT_BUTTON &&

state==GLUT_DOWN)

drawDot2(x,480-y);

if(button==GLUT_MIDDLE_BUTTON &&

state==GLUT_DOWN)

drawDot3(x,480-y);


}

void motion(int x,int y){

}

Dalam penerapan interaksi mouse pada open gl / glut, Fungsi

inisialisasinya adalah sebagai berikut :

1. GLUT_LEFT_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse

kiri. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button

mouse sebelah kiri maka bisa menggunakan fungsi inisialisasi ini.

2. GLUT_RIGHT_BUTTON


kanan. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari

button mouse sebelah kanan maka bisa menggunakan fungsi inisialisasi

ini.

3. GLUT_MIDDLE_BUTTON


tengah. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari

button mouse tengah maka bisa menggunakan fungsi inisialisasi ini.

4. GLUT_DOWN

Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse

ditekan.

5. GLUT_UP

Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol

mouse dilepaskan. Kemudian pada main program perlu menambahkan

fungsi untuk callback fungsi MouseFunction. glutMouseFunc(mouse); glutMotionFunc(motion);

3. Sistim Koordinat interaksi mouse pada glut

Sistim koordinat interaksi mouse pada glut adalah sebagai berikut.

Misalnya ditentukan iinisialisasi awal adalah :

int w = 480, h=480; float

x=0, y=0, z=0; maka :


a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan berubah

apabila terjadi pergeseran mouse.

b. Titik 480,0 berada pada pojok kanan atas.

c. Titik 0, 480 berada pada pojok kiri bawah

d. Titik 480,480 berada pada pojok kanan bawah

CONTOH PROGAM PENERAPAN MOUSE PADA GLUT

#include <stdlib.h>

#include <glut.h>

#include <stdio.h>

void Triangles(){


glVertex2i(0, 0);

glVertex2i(100, -30);


glEnd();

}

void mouseku(int button, int state, int x, int y){

if (button == GLUT_LEFT_BUTTON){

printf("tombol KIRI (%d,%d)\n", x, y);

}

else if (button == GLUT_MIDDLE_BUTTON){

printf("tombol TENGAH (%d,%d)\n", x, y);

}

else{

printf("tombol KANAN (%d,%d)\n", x, y);

}

if (state == GLUT_DOWN){

printf("tombol DITEKAN\n");

}

else{

printf("tombol DILEPAS\n");

}

} void display(){

glClear(GL_COLOR_BUFFER_BIT); glRotatef(10, 0., 0.,

1.);

Triangles();

glFlush();

}




}



glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |

GLUT_RGBA);



glutCreateWindow("mouse");


gluOrtho2D(-320.0, 320.0, -320.0, 320.0);



glutMouseFunc(mouseku);

glutMainLoop();

}

2. Interaksi Drag

#include <stdlib.h>

#include <glut.h>

#include <stdio.h>

void Triangles(){


glVertex2i(0, 0);

glVertex2i(100, -30);


glEnd();

}

void mouseku(int button, int state, int x, int y){

if (button == GLUT_LEFT_BUTTON){

printf("tombol KIRI (%d,%d)\n", x, y);

}

else if (button == GLUT_MIDDLE_BUTTON){

printf("tombol TENGAH (%d, %d)\n", x, y);

}

else{

printf("tombol KANAN (%d,%d)\n", x, y);

}

if (state == GLUT_DOWN){

printf("tombol DITEKAN\n");

}

else{

printf("tombol DILEPAS\n");

}

}

void motionku(int x, int y){

printf("posisi printer mouse (%d, %d)\n", x, y);

}

void display(){

glClear(GL_COLOR_BUFFER_BIT); glRotatef(89,

0., 0., 1.);

Triangles();

glFlush();

}




}



glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |

GLUT_RGBA);



glutCreateWindow("GLUT");



gluOrtho2D(-320.0, 320.0, -320.0, 320.0);


glutMouseFunc(mouseku);

glutMotionFunc(motionku);

glutMainLoop();

}

3. Contoh Implementasi

#include <stdlib.h>

#include <stdio.h>

#include <glut.h>

float x = 1, y = 1, z = 0;

int w = 480, h = 480, flag = 0, flg;

void drawQuad() {

glBegin(GL_POLYGON);

glColor3f(0, 0, 1);

glVertex2f(-20., -20.);

glVertex2f(20., -20.);


glVertex2f(-20., 20.);

glEnd();

}

void mouse(int button, int state, int xmouse,

int ymouse){

if (flg == 0)

{

if (state == GLUT_DOWN)

{

if (button == GLUT_LEFT_BUTTON)

{

flag++; if (flag == 2)

{

flg = 3; x = 3; y = 3;

printf("%d", flg);

}

}

}

}

if (flg == 3)

{

if (state == GLUT_DOWN)

{

if (button == GLUT_LEFT_BUTTON)

{

flag--; if (flag == 0)

{

x = 1; y = 1; flg =

0;

}

}


}

}

}



glClearColor(1, 1, 1, 1);

glPushMatrix();

glScalef(x, y, z);

drawQuad();

glPopMatrix();

glFlush();

}




}




glutInitWindowSize(w, h);

glutCreateWindow("Interaksi Mouse");

gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2);


glutMouseFunc(mouse);


glutMainLoop();

4. }


BAB VII

OBJEK 3D

A. TUJUAN

a. Mampu memahami konsep Objek 3D wireframe pada openGL

b. Mampu membuat objek 3d wirefirme pada openGL

c. Mampu melakukan implemntasi transformasi pada objek 3d dengan

OpenGL

B. MATERI

a. Pembuatan Objek 3D wireframe

b. Transformasi Objek 3D wireframe

a. Primitive 3D

Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive

yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara

matematik.

a. Sphere

glutWireSphere(5, 20, 20);

b. Cube

glutWireCube(25);

c. Cone

glutWireCone(alas, tinggi, 20, 20);


d. Dodecahedron

glutWireDodecahedron();

e. Teapot glutWireTeapot(15);

f. Torus glutWireTorus(luar, dalam, 20, 20);

Setiap primitive 3D memiliki parameter nilai yang mengekspresikan

letak dan bentuk primitive objek tersebut.

b. Transformasi Objek 3 Dimensi

Metode transformasi objek tiga dimensi sangat berbeda dengan objek

dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu

acuan untuk memperoleh posisi koordinat baru. a. Translasi (Perpindahan)

Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan

suatu titik dari titik P=(x,y,z) ke posisi P=(x‟,y‟,z‟) (Hearn, 1994) dengan

menggunakan operasi matriks :

Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk koordinat x, y, dan

z.


Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor

tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor

tersebut.

Contoh Program dalam Open GL

1. Contoh Penerapan “Cube” pada GLUT

Cube menggunakan fungsi

void glutWireCube(GLdouble size);

untuk menentukan ukuran panjang sisi.

#include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut = 0, sx = 0, sy = 0, sz = 0;

void cube(){

glColor3d(0, 0, 1);

glutWireCube(10);

}

void display(){


glLoadIdentity();

glTranslatef(0, 0, -40);

glRotatef(sudut, sx, sy, sz);

cube();

glutSwapBuffers();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();

gluPerspective(45., (GLdouble)w / (GLdouble)h,1., 300.);


}

void myKeyboard(unsigned char key, int x, int y){


Note:

Dengan interaksi keyboard “y”, maka objek akan berotasi pada sumbu y

saja.

2. Contoh Penerapan “WireSphere” pada GLUT

WireSphere menggunakan fungsi

void glutWireSphere(GLdouble radius,GLint slices,

GLintstacks);

untuk membuat bola berpusat pada asal pemodelan sistem koordinat.

#include<stdlib.h>

#include<glut.h>

float w = 480, h = 480;

float sudut = 0, sx = 0, sy = 0, sz = 0, z = -320;

void sphere(){

glColor3d(1, 1, 1);

glutWireSphere(100, 150,100);

}

void display(){


glLoadIdentity();

glTranslatef(0, 0, z);


sphere();

glutSwapBuffers();

}

void resize(int w1, int h1){

if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}

void update(int value){


glutTimerFunc(50, update, 0);

}



glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);



glutCreateWindow("Objek 3D");


init();



glutMainLoop();

}


glViewport(0, 0, w1, h1);


glLoadIdentity();

gluPerspective(45.0, (float)w1 / (float)h1, 1.0,

300.0);


glLoadIdentity();

}


if (key == 'y'){

sy = 1;

sudut += 10;

}

}




}



glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |

GLUT_RGBA);





init();



glutMainLoop();

}

3. Contoh Penerapan “WireCone” pada GLUT

WireCone menggunakan fungsi void

glutWireCone(GLdouble base, GLdouble height,GLintslices, GLint

stacks);

untuk membuat ukuran benda ditentukan dari dasar jari-jari alasnya.

#include<stdlib.h>

#include<glut.h>

float w = 480, h = 480;

float sudut = 0, sx = 0, sy = 0, sz = 0, zz = -70;

int t = 20;

void WireCone(){

glColor3d(0, 1, 1);

glutWireCone(20, t, 50, 50);

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0, 0, zz);


WireCone();

glutSwapBuffers();


}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();



}


if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}




}



glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);





init();



glutMainLoop();

}

Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x saja.

Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja

4. Contoh Penerapan “Torus” pada GLUT

Torus menggunakan fungsi

void glutWireTorus(GLdouble innerRadius, GLdouble

outerRadius,GLint nsides, GLint rings); .

untuk merender 12 sisi yang berpusat pada asal, dan dengan radius sama

dengan kuadrat dari 3.

#include <stdlib.h>

#include <glut.h>

float w = 480, h = 480;

float

sudut = 0, sx = 0, sy = 0, sz = 0, dalam = 20, luar = 50, sides

= 50, rings = 50;

void torus(){

glColor3d(0, 1, 1);

glutWireTorus(dalam, luar, sides, rings);

}


void display(){


glLoadIdentity();

glTranslatef(0, 0, -200);


torus();

glutSwapBuffers();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();

gluPerspective(45., (GLdouble)w / (GLdouble)h, 1., 300.);


}


if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}




}



glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |

GLUT_RGBA);





init();



glutMainLoop();

}

Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x

saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja.

Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja.

5. Contoh Penerapan “Dose” pada GLUT

Dode menggunakan fungsi

void glutWireDodecahedron(void);

untuk merenders padat atau wireframe 12-sisi biasa padat. Berpusat di

sekitar asal dan dengan radius sama dengan akar kuadrat dari 3


#include <stdlib.h>

#include <glut.h>

float w = 480, h = 480;

float sudut = 0, sx = 0, sy = 0, sz = 0, t = -7;

void wireDode(){

glColor3d(0, 1, 0);

glutWireDodecahedron();

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0, 0, t);


wireDode();

glutSwapBuffers();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();

gluPerspective(45., (GLdouble)w / (GLdouble)h,1.,

300.);


}


if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}




}



glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);





init();



glutMainLoop();

}

Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x saja.

Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja. Dengan

interaksi keyboard “z”, objek akan bergerak pada sumbu z saja.


6. Contoh Penerapan “TetraHedron” pada GLUT

TetraHedron menggunakan fungsi

glutWiredTetrahedronvoid (void);

untuk merenders padat atau wireframe 4-sisi biasa padat. Berpusat di

sekitar asal dan dengan radius sama dengan akar kuadrat dari 3.

#include <stdlib.h>

#include <glut.h>

float w=480,h=480;


void WireTetrahedron(){

glColor3d(1, 0, 1);

glutWireTetrahedron();

}

void display(){


glLoadIdentity();



WireTetrahedron();

glutSwapBuffers();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();



}


if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}




}








init();



glutMainLoop();

}


Note :


saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y

saja. Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z

saja.

7. Contoh Penerapan “OctaHedron” pada GLUT

OctaHedron menggunakan fungsi

void glutWireOctahedron(void);

#include <stdlib.h>

#include <glut.h>

float w = 480, h = 480;


void WireOctahedron(){

glColor3d(1, 0, 1);

glutWireOctahedron();

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);

glLoadIdentity();



WireOctahedron();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0, 0, w1, h1);


glLoadIdentity();

gluPerspective(45.0, (float)w1 / (float)h1,1.0, 300.0);


glLoadIdentity();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();



}


if (key == 'x'){

sx = 1;

sy = 0;

sz = 0;

sudut += 10;

}

}





}



glutInitDisplayMode(GLUT_DOUBLE |GLUT_DEPTH | GLUT_RGBA);





init();



glutMainLoop();

}

Note :


saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja.


8. Contoh Penerapan “Teapot” pada GLUT

Teapot menggunakan fungsi

void glutWireTeapot(GLdouble size);

Untuk merender dengan teapot dengan source code sebagai berikut :

#include<stdlib.h>

#include<glut.h>

float w = 480, h = 480;

float sudut = 0, sx = 0, sy = 0, sz = 0, t = -100, tepot = 10;

void teapot(){

glColor3d(1, 1, 1);

glutWireTeapot(tepot);

}

void display(){


glLoadIdentity();



teapot();

glutSwapBuffers();

}

void init(){

glClearColor(0.0, 0.0, 0.0, 1.0);



glLoadIdentity();

gluPerspective(45., (GLdouble)w / (GLdouble)h, 1., 300.);


}


if (key == 'x'){

sx = 1;

sy = 0;


sz = 0;

sudut += 10;

}

}


switch (key){

case GLUT_KEY_UP:

tepot += 1;

break;

case GLUT_KEY_DOWN:

tepot -= 1;

break;

}

}




}








init();



glutMainLoop();

}

Note :


saja. Dengan interaksi keyboard “y”, objek akan beritasi pada sumbu y saja.



Bab VIII

Objek Solid dan Lighting

A. TUJUAN

a. Mampu memahami konsep Objek 3D solid pada openGL

b. Mampu membuat objek 3d solid pada openGL

c. Mampu melakukan implemntasi transformasi pada objek 3d dengan

OpenGL

d. Mampu memahami konsep lighting pada openGL

e. Mampu melakukan implementasi lighting objek 3d dengan opnGL

B. MATERI

a. Pembuatan Objek 3D Solid

b. Transformasi Objek 3D Solid

c. Lighting Objek 3d Solid

Visualisasi tentu saja tidak akan terjadi bila tidak ada cahaya.

Pencahayaan merupakan esensi dari visualisasi dan merupakan topik yang

sangat kompleks. Hingga tahap ini lingkungan diberi pencahayaan default

atau standar dengan cahaya lingkungan (ambient) yang sama pada setiap titik.

Kondisi default atau standar dapat dicapai kapan saja dengan mematikan status

Lighting menjadi disabled dengan glDisable(GL_LIGHT0).

OpenGL akan melakukan komputas\i warna setiap pixel di display

akhir, ditampilkan adegan itu dilakukan di frame buffer. Bagian dari komputasi

ini tergantung pada pencahayaan yang digunakan dalam adegan dan hal

tersebut berkenaan dengan bagaimana suatu benda dalam adegan yang

memantulkan atau menyerap cahaya. Sebagai contoh saja misalnya sebuah

lautan memiliki warna yang berbeda pada cerah maupun pada saat hari

mendung. Adanya sinar matahari atau awan menentukan apakah laut termelihat

sebagai pirus terang atau abu-abu keruh kehijauan. Pada kenyataannya,

sebagian besar objek bahkan yang tidak terlihat tiga dimensi sampai

mereka diterangi cahaya. Pada gambar 2 menunjukkan dua versi dari

adegan yang persis sama

yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan.

Seperti ditunjukkan pada Gambar diatas, wilayah gelap tampak tidak

berbeda dari bulatan dua dimensi . hal Ini menunjukkan betapa pentingnya

interaksi antara obyek dan cahaya adalah dalam menciptakan adegan tiga

dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan


tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan

adalah proses pemberian cahaya pada suatu obyek, dikenal dengan istilah

lighting atau iluminasi. Pada OpenGL terdapat sebuah perbedaan penting

antara warna dan pencahayaan yang perlu pahami. Ketika menggunakan

pencahayaan atau tekstur pemetaan dengan efek pencahayaan dihidupkan,

warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang

bersinar di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex

adalah efek pengaturan warna dan warna yang berbeda dengan bahan warna.

Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan

obyek dalam sebuah adegan untuk menciptakan berbagai macam efek.

Dalam pokok bahasan pada bab pencahayaan akan dimulai dengan sebuah

pencahayaan yang penting pada permukaan tersembunyi penghapusan.

Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan dalam

suatu adegan, membahas model konseptual OpenGL pencahayaan, dan

menggambarkan secara rinci cara mengatur pencahayaan dengan banyak

parameter untuk mendapatkan efek tertentu. Pada akhir bab, perhitungan

matematis yang menentukan bagaimana warna mempengaruhi pencahayaan

disajikan

A. Cahaya Ambient, Diffuse, dan Specular

Pencahayaan ambient adalah cahaya yang sudah berserakan begitu

banyak disebabkan oleh lingkungan dan arahnya tidak mungkin ditentukan

atau tampaknya datang dari segala penjuru. Backlighting pada sebuah

ruangan memiliki komponen ambient besar, karena sebagian besar cahaya

yang mencapai mata yang memantul dari banyak permukaan. Sebuah lampu

sorot kecil di luar rumah memiliki komponen ambient, sebagian besar cahaya

dalam arah yang sama, dan karena diluar, sangat sedikit cahaya mencapai mata

setelah memantul dari benda-benda lain. Ketika cahaya ambient menyerang

permukaan, maka akan tersebar merata di segala penjuru.

Komponen cahaya diffuse adalah komponen yang berasal dari satu

arah, jadi akan terang kalau hal tersebut terjadi tepat diatas sebuah

permukaan dibandingkan jika hampir tidak terjadi di atas permukaan. Setelah

mengenai permukaan, akan tersebar merata di segala penjuru, sehingga tampak

sama-sama terang, tak peduli di mana mata berada. Setiap cahaya yang

datang dari posisi atau arah tertentu mungkin memiliki komponen diffuse.


Cahaya specular datang dari arah tertentu, dan cenderung terpental

pada permukaan dalam arah yang diinginkan. sinar laser berkualitas tinggi

memantul pada cermin dan menghasilkan hampir 100 persen refleksi

specular. Logam atau plastik mengkilap memiliki komponen specular tinggi,

dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga dianggap

sebagai shininess.

Meskipun sumber cahaya memberikan satu distribusi frekuensi,

komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai contoh,

jika memiliki cahaya putih di sebuah ruangan dengan dinding merah, cahaya

yang tersebar cenderung menjadi warna merah, meskipun cahaya secara

langsung objek putih yang mencolok. OpenGL memungkinkan untuk

mengatur nilai merah, hijau, dan biru untuk setiap komponen cahaya secara

bebas.

Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga

pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya sendiri.

parameter variabel untuk memilih material warna jenis apa yang

diaktifkan pilihannya antara lain seprti tabel dibawah


B. Implementasi Pencahayaan (lighting) pada OpenGL

Object 3D (Solid) Bentuk Solid

Fungsi Solid merupakan implementasi dari object 3D yang berpusat

pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z

positif dan negatif sumbumasing-masing dan meridian utama persimpangan

sumbu X positif.

Berikut adalah list untuk bangun 3D:

a. Kubus Solid void glutSolidCube(GLdouble size);

b. Fungsi glutSolidSphere membuat bola berpusat pada asal pemodelan

sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan

negatif sumbumasing-masing dan meridian utama persimpangan sumbu

X positif.

void glutSolidSphere(GLdouble radius,GLint slices,

GLint stacks);

c. Kerucut Solid.

void glutSolidCone(GLdouble base, GLdouble height,GLint

slices, GLint stacks);

d. Torus Solid.

void glutSolidTorus(GLdouble innerRadius, GLdouble

outerRadius, Glintnsides, GLint rings);


e. Dodecahedron Solid

void glutSolidDodecahedron(void);

f. Tetra Hedron solid.

glutSolidTetrahedron void (void);

g. Oktahedron solid.

void glutSolidOctahedron(void);

h. Icosahedron solid.

void glutSolidIcosahedron(void);

i. Poci teh solid

void glutSolidTeapot(GLdouble size);

C. Contoh Program

Proyeksi cube

#include <glut.h>

void cube()

{

//menggambar kubus dan transformasitarnslasi ke titik 0.5 0.5

0.5 dan skala 1 1 1

glPushMatrix();

glTranslated(0.5, 0.5, 0.5);//cube

glScaled(1.0, 1.0, 1.0);

glutSolidCube(1.0);

glPopMatrix();

}

void setMaterial()

{

//set properties of surfaces material

GLfloat mat_ambient[] =

{

0.7f, 0.7f, 0.7f, 1.0f

};

// ada 4 jenis

GLfloat mat_diffuse[] =

{

0.6f, 0.6f, 0.6f, 1.0f

};

GLfloat mat_specular[] =

{

1.0f, 1.0f, 1.0f, 1.0f

};

GLfloat mat_shininess[] = { 50.0f };

glMaterialfv(GL_FRONT, GL_AMBIENT, mat_ambient);

glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);

glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);

glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);

}

void setLighting()

{

//set light sources

GLfloat lightIntensity[] =


{

0.7f, 0.7f, 0.7f, 1.0f

};//mensettingpencahayaan

GLfloat light_position[] =

{

2.0f, 6.0f, 3.0f, 0.0f

};

glLightfv(GL_LIGHT0, GL_DIFFUSE, lightIntensity);

glLightfv(GL_LIGHT0, GL_POSITION, light_position);

}

void setViewport()

{


glLoadIdentity();

double winHt = 1.0;

//half height of thewindow

glOrtho(-winHt * 64 / 48, winHt * 64 / 48, -winHt, winHt,

0.1, 100.0);

}

void setCamera()

{

// set the camera


glLoadIdentity();

gluLookAt(3.3, 3.3, 3.0, 0, 0.25, 0, 0.0, 1.0, 0.0);

}

void displayObject()

{

setMaterial();

setLighting();

setViewport();

setCamera();

//startDrawing


cube();//memanggil fungsi menggambar kubus

glFlush();//mengirim smua objek untuk dirender

}

void main(int argc, char **argv)

{


glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);



glutCreateWindow("simple 3d scene");

glutDisplayFunc(displayObject);//fungsidari display object

yang menggabungkankubus lighting material dan kamera

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glShadeModel(GL_SMOOTH);


glEnable(GL_NORMALIZE);

glClearColor(1.0f, 1.0f, 1.0f, 0.0f);

glViewport(0, 0, 640, 480);

glutMainLoop();

}


Impelemntasi bumi, bulan, matahari :

#include <stdlib.h>

#include <glut.h>

#include <math.h>

int shapeindex;

GLdouble cx, cy, cz; // Posisi kamera

GLdouble ry, rx; // Rotasi kamera terhadap sumbu y dan x

GLfloat bumi_y, bulan_y;

void init(void) {

glClearColor(0.0, 0.0, 0.0, 0.0);

glShadeModel(GL_SMOOTH);


glLoadIdentity();

glFrustum(-1, 1, -1, 1, 1.8, 20);


glLoadIdentity();


glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0); // Aktifkan 3 sumber cahaya

bumi_y = 1;

bulan_y = 1;

}

void display(void) {

GLfloat light_position[] = { -1.0, 0.0, 0.0, 1.0 };

GLfloat light_ambient[] = { 5.0, 5.0, 0.0, 0.0 };

GLfloat light_diffuse[] = { 0.5, 0.5, 0.5, 0.0 };

GLfloat light_specular[] = { 0.5, 0.5, 0.5, 0.0 };

GLfloat matahari_ambient[] = { 1.0, 1.0, 0.0, 0.0 };

GLfloat matahari_diffuse[] = { 0.0, 0.0, 0.0, 0.0 };

GLfloat matahari_specular[] = { 0.0, 0.0, 0.0, 0.0 };

GLfloat matahari_shininess[] = { 15.0 };

GLfloat bumi_ambient[] = { 0.0, 0.0, 2.0, 0.0 };

GLfloat bumi_diffuse[] = { 0.0, 0.0, 1.0, 0.0 };

GLfloat bumi_specular[] = { 0.0, 0.0, 0.3, 0.0 };

GLfloat bumi_shininess[] = { 15.0 };

GLfloat bulan_ambient[] = { 0.0, 0.0, 0.2, 0.0 };

GLfloat bulan_diffuse[] = { 1.0, 1.0, 1.0, 0.0 };

GLfloat bulan_specular[] = { 0.2, 0.2, 0.2, 0.0 };

GLfloat bulan_shininess[] = { 1.0 };

// Bersihkan layar


glLoadIdentity();

gluLookAt(cx, cy, cz, 0, 0, 0, 0, 1, 0);

glRotatef(ry, 0.0, 1.0, 0.0);

glRotatef(rx, 1.0, 0.0, 0.0);


glPushMatrix();

// gambar matahari

glMaterialfv(GL_FRONT, GL_AMBIENT, matahari_ambient);

glMaterialfv(GL_FRONT, GL_DIFFUSE, matahari_diffuse);

glMaterialfv(GL_FRONT, GL_SPECULAR, matahari_specular);

glMaterialfv(GL_FRONT, GL_SHININESS, matahari_shininess);

glPushMatrix();

glutSolidSphere(0.4, 50, 50);

glPopMatrix();

//gambar bumi

glMaterialfv(GL_FRONT, GL_AMBIENT, bumi_ambient);

glMaterialfv(GL_FRONT, GL_DIFFUSE, bumi_diffuse);

glMaterialfv(GL_FRONT, GL_SPECULAR, bumi_specular);

glMaterialfv(GL_FRONT, GL_SHININESS, bumi_shininess);

glPushMatrix();

glRotatef(bumi_y, 0.0, 1.0, 0.0);

glTranslatef(2.3, 0.0, 0.0);


glLightfv(GL_LIGHT0, GL_POSITION, light_position);

glLightfv(GL_LIGHT0, GL_AMBIENT, light_ambient);

glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);

glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);

glPopMatrix();

//gambar bulan

glMaterialfv(GL_FRONT, GL_AMBIENT, bulan_ambient);

glMaterialfv(GL_FRONT, GL_DIFFUSE, bulan_diffuse);

glMaterialfv(GL_FRONT, GL_SPECULAR, bulan_specular);

glMaterialfv(GL_FRONT, GL_SHININESS, bulan_shininess);

glRotatef(bumi_y, 0.0, 1.0, 0.0);


glRotatef(bulan_y, 0.0, 0.1, 0.0);



glPopMatrix();

glutSwapBuffers();

}

void animate(void) {

bumi_y += 1;

bulan_y += 1;


}

// Handle special key-press

void specialkey(int key, int x, int y) {

switch (key) {

case GLUT_KEY_UP:

rx += 1;

break;

case GLUT_KEY_DOWN:

rx -= 1;

break;

case GLUT_KEY_RIGHT:


ry += 1;

break;

case GLUT_KEY_LEFT:

ry -= 1;

break;

default:

break;

}

// Gambar kembali window


}

void keyboard(unsigned char key, int x, int y) {

switch (key) {

case 'f': // Kamera lihat dari depan

case 'F':

cx = 0; cy = 0; cz = 5;

break;

case 'n': // Kamera lihat dari samping kanan

case 'N':

cx = 5; cy = 0; cz = 0;

break;

case 'l': // Kamera lihat dari depan-atas-kanan

case 'L':

cx = 5; cy = 3; cz = 2;

break;

default:

break;

}

// Gambar kembali window


}

int main(int argc, char **argv)

{


glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);



glutCreateWindow("Kehidupan");

init();

shapeindex = 1;

cx = 0; cy = 6; cz = 6;


glutKeyboardFunc(keyboard);

glutSpecialFunc(specialkey);

glutIdleFunc(animate);

glutMainLoop();


return 0;

}

lab multimedia dan pengolahan...

Documents