laporan-3-grafkom

LAPORAN PRAKTIKUM

GRAFIKA KOMPUTER

MODUL III

“TRANSFORMASI DAN ANIMASI OBJEK 2D”

Yang dibina oleh Bapak Irawan Dwi Wahyono,

Oleh :

Bagus Nariotomo

130533608136

S1 PTI 2013 E

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA

18 Februari 2015

A. TUJUAN PRAKTIKUM

Memahami fungsi-fungsi transformasi (translasi, rotasi, skala).

Memahami dan dapat membuat multi objek menggunakan fungsi transformasi.

Memahami prinsip-prinsip pembuatan animasi objek 2D.

Membuat animasi objek 2D.

B. PERANGKAT YANG DIGUNAKAN

Laptop / PC

Program Aplikasi Visual Studio dan OpenGL

C. DASAR TEORI

1. TRANSFORMASI OBJEK 2D

Transformasi Objek 2D, terbagi menjadi 3 jenis perubahan, yaitu translasi

(perubahan posisi), rotasi (perputaran) dan skala (perubahan ukuran).

1) Fungsi dasar untuk Translasi (perubahan Posisi) objek

GLAPI void APIENTRY glTranslated(GLdouble x, GLdouble y,

GLdouble z);

GLAPI void APIENTRY glTranslatef(GLfloat x, GLfloat y, GLfloat

z);

2) Fungsi dasar untuk Rotasi objek

GLAPI void APIENTRY glRotated(GLdouble angle, GLdouble x,

GLdouble y, GLdouble z);

GLAPI void APIENTRY glRotatef(GLfloat angle, GLfloat x, GLfloat

y, GLfloat z);

3) Fungsi dasar untuk skala (perubahan ukuran) objek

void APIENTRY glScaled( GLdouble x, GLdouble y, GLdouble z );

GLAPI void APIENTRY glScalef( GLfloat x, GLfloat y, GLfloat

z );

2. ANIMASI OBJECT 2D

1) Fungsi dasar pembuatan animasi dengan menggunakan TimerFunction

GLUTAPI void APIENTRY glutTimerFunc(unsigned int millis, void

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

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah

animasi yang dikontrol oleh waktu.

2) Inisialisasi dalam penggunaan Timer Function

void Timer(int value){

glutPostRedisplay();

glutTimerFunc(unsigned millis, GLUT function(callback), int

value);}

Fungsi dari glutPostRedisplay adalah mengirimkan perintah untuk

mengaktifkan display secara berkala (looping). Kemudian pada main program

perlu menambahkan fungsi untuk mengaktifkan timer function.

glutTimerFunc(unsigned millis, GLUT function(callback), int

value);

D. JOBSHEET PRAKTIKUM1. TRANSFORMASI OBJECT 2D

1) Berikut adalah script dasar untuk kegiatan praktikum transformasi objek 2DglutInitWindowPosition(100,100);glutInitWindowSize(480,480);

dangluOrtho2D(-320.,320.,-320.,320.);

Script

#include <stdlib.h>#include <glut.h>

void renderScene(){/*...*/

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

glutInit(&argc, argv);glutInitDisplayMode(GLUT_DEPTH|GLUT_SINGLE|GLUT_RGBA);

glutInitWindowPosition(100,100);glutInitWindowSize(480,480);gluOrtho2D(-320.,320.,-320.,320.);

glutCreateWindow("Bagus Nariotomo");glutDisplayFunc(renderScene);glutMainLoop();

}

Tampilan

Keterangan :

2) Buatlah project baru pada Visual Studio dengan nama prak3-translasi. Fungsi drawQuad adalah callback function glDisplayFunc();. Tambahkan fungsi glTranslatef(50,0,0) pada posisi [a], [b], [c], dan [d]. Tampilkan hasil eksekusi a, b, c, dan d berupa screenshot. Beri kesimpulan dari kegiatan 1 ini.void drawQuad(){ //segi4//[d]glBegin(GL_QUADS);//[a]glVertex2f(0.,0.);glVertex2f(0.,10.);//[b]glVertex2f(20.,10.);glVertex2f(20.,0.);//[c]glEnd();}

Script


void drawQuad(){ //segi4glTranslatef(50,0,0);glBegin(GL_QUADS);//glTranslatef(50,0,0);glVertex2f(0.,0.);glVertex2f(0.,10.);//glTranslatef(50,0,0);glVertex2f(20.,10.);glVertex2f(20.,0.);//glTranslatef(50,0,0);glEnd();glFlush();

}

void main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DEPTH|GLUT_SINGLE|GLUT_RGBA);

glutInitWindowPosition(100,100);glutInitWindowSize(480,480);gluOrtho2D(-320.,320.,-320.,320.);

glutCreateWindow("Bagus Nariotomo");glutDisplayFunc(drawQuad);glutMainLoop();

}

Tampilan

d a b

c Keterangan

3) Tetap pada projek yang sedang aktif, hilangkan semua fungsi glTranslatef(x, y,z) dari a, b, c, d sehingga fungsi menjadi:void drawQuad(){ //segi4glBegin(GL_QUADS);glVertex2f(0.,0.);glVertex2f(0.,10.);glVertex2f(20.,10.);glVertex2f(20.,0.);glEnd();}

Tambahkan fungsi callback untuk glutDisplayFunc(render);void render(){glClear(GL_COLOR_BUFFER_BIT);//glColor3f(r,g,b);drawQuad();//glTranslatef(x,y,z);//glColor3f(r,g,b);drawQuad();glFlush();}

Pada fungsi render tersebut terdapat 2 fungsi drawQuad yang dipanggil, dimana masing-masing merupakan objek terpisah. Terdapat pula fungsi-fungsi yang belum diaktifkan (dalam comment), lakukan perubahan nilai RGB pada 2 warna sehingga menjadi merah untuk fungsi glColor3f pertama dan putih untuk fungsi glColor3f yang kedua. Ubahlah nilai x,y,z pada fungsi glTranslatef(x,y,z) sehingga tampilan menjadi bendera Indonesia. Tampilkan screenshotnya dan program.

ScriptTampilanKeterangan

4) Pada fungsi render tersebut ubahlah fungsi glTranslatef(…) menjadi fungsi glRotatef(45,1,0,0); Ubahlah parameter sudut, x,y,z dan tampilkan screenshot tiap perubahan (x,y,z)yang dilakukan, gambarkan bagaimana rotasi (x,y,z) diberlakukan pada koordinat 3 dimensi glut.void render(){glClear(GL_COLOR_BUFFER_BIT);glRotatef(sudut,x,y,z);/*…*/glFlush();}


5) Pada fungsi render tersebut ubahlah fungsi glRotatef(…) menjadi fungsi glScalef(x,y,z); Ubahlah parameter x,y,z satu per satu dan tampilkan screenshot tiap perubahan (x,y,z) yang dilakukan, gambarkan bagaimana skala (x,y,z) diberlakukan pada koordinat 3 dimensi glut.void render(){glClear(GL_COLOR_BUFFER_BIT);glScale(x,y,z);drawQuad();/*…*/glFlush();}


2. ANIMASI OBJECT 2DBerikut adalah script dasar untuk kegiatan praktikum animasi objek 2D.glutInitWindowSize(640, 480);glutInitWindowPosition(100, 100);

danglutDisplayFunc(display);glutTimerFunc(unsigned millis, GLUT function(callback), int value);

Berikut adalah fungsi untuk glutTimerFunc(int millis, *function, int value);void timer (int value){//tuliskan variable yang berubah nilainya disiniglutPostRedisplay();glutTimerFunc(30,timer,0);}

1) Buatlah project baru pada Visual Studio dengan nama prak3-timerRotasiZ. Gunakan fungsi Quads untuk membuat segi empat. fungsi display sebagai callback function yang di dalamnya berisi transformasi rotasi.

void Persegi(){glBegin(GL_QUADS);glVertex2i(x0,y0);glVertex2i(x1,y1);glVertex2i(x2,y2);glVertex2i(x3,y3);glEnd();}

Fungsi display sebagai callback function yang di dalamnya berisi transformasi translasi. Ubah variabel agar dapar berputar pada sumbu z unclockwise.void display (){glClear(GL_COLOR_BUFFER_BIT);glRotatef(angle,x,y,z);Persegi();glFlush();}

Tambahkan fungsi timer sebagai Inisialisasi dalam penggunaan Timer Function. Terakhir panggil fungsi timer pada main program. Set unsign millis=100. Jelaskan apa yang terjadi! Tampilkan source codenya. Berikan kesimpulan!ScriptTampilanKeterangan

2) Modifikasi kode program pada latihan 1, kemudian atur objek untuk berotasi terhadap sumbu y clockwise. Ubahlah parameter unsign millis menjadi lebih besar dari sebelumnya. Tampilkan source codenya. Berikan kesimpulan!ScriptTampilanKeterangan

3) Modifikasi kode program pada latihan 2, kemudian atur objek untuk berotasi terhadap sumbu x clockwise. Ubahlah parameter unsign millis menjadi lebih kecil dari sebelumnya. Tampilkan source codenya. Berikan kesimpulan!ScriptTampilanKeterangan

4) Buatlah project baru pada Visual Studio dengan nama prak3-timerTranslasiX. Gunakan fungsi drawQuad untuk membuat segi empat. void draw(){glBegin(GL_QUADS);glVertex2i(x0,y0);glVertex2i(x1,y1);glVertex2i(x2,y2);glVertex2i(x3,y3);glEnd();}

Fungsi display sebagai callback function yang di dalamnya berisi transformasi translasi. Untuk membuat animasi, tambahkan fungsi counter berikut:if (x<200){x += 4; }void renderScene(){glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef(x,0,0);Draw();glPopMatrix();glFlush();}

Ubahlah statement di atas sehingga segi empat dapat berjalan mengikuti sumbu xpositif.Tampilkan source codenya. Berikan kesimpulan!Note: Inisialisasikan terlebih dahulu variabel x, y, z.ScriptTampilanKeterangan

5) Modifikasi program pada latihan 4. Ubahlah parameternya sehingga segi empat dapat berjalan ke arah sumbu y negatif. Tampilkan source codenya. Berikan kesimpulan!ScriptTampilanKeterangan

6) Modifikasi program pada latihan 5. Ubahlah parameternya sehingga segi empat dapat berjalan ke arah sumbu z positif. Tampilkan sorce codenya. Berikan kesimpulan!ScriptTampilanKeterangan

E. TUGAS ASISTENSI1) Buatlah tampilan dimana akan menghasilkan tampilan seperti di bawah ini.

Sajikan screenshot hasil dan program.Note : hanya menggunakan satu fungsi bangun 2D, modifikasi menggunakan fungsi tranlasi, rotasi, dan skala.

Script


void drawQuad(){ //segi4glBegin(GL_QUADS);glVertex2f(0.,0.);glVertex2f(0.,10.);glVertex2f(20.,10.); glVertex2f(20.,0.);glEnd();

}

void renderScene(void){glClear(GL_COLOR_BUFFER_BIT);glColor3f(0,0,0);//warna background//hidung kanan putihglScalef(1.5,1.5,0);glColor3f(1.,1.,1.);drawQuad();//hidung kanan merahglTranslatef(0,10,0);glColor3f(1.,0.,0.);drawQuad();//hidung kiri merahglTranslatef(-20,0,0);glColor3f(1.,0.,0.);drawQuad();//hidung kanan putihglTranslatef(0,-10,0);glColor3f(1.,1.,1.);drawQuad();//mata kiri putihglRotatef(180,1,1,0);glTranslatef(30,-30,0);glColor3f(1.,1.,1.);drawQuad();//mata kiri merahglTranslatef(0,10,0);glColor3f(1.,0.,0.);drawQuad();//mata kanan merahglTranslatef(0,70,0);glColor3f(1.,0.,0.);drawQuad();//mata kanan putihglTranslatef(0,10,0);glColor3f(1.,1.,1.);drawQuad();//mulut merah 1glRotatef(180,1,1,0);glTranslatef(-20,-50,0);glColor3f(1.,0.,0.);drawQuad();//mulut merah 2glTranslatef(-20,0,0);glColor3f(1.,0.,0.);drawQuad();//mulut merah 3glTranslatef(-20,0,0);glColor3f(1.,0.,0.);drawQuad();//mulut merah 4glTranslatef(-20,0,0);

glColor3f(1.,0.,0.);drawQuad();//gigi kiri putihglTranslatef(10,-10,0);glColor3f(1.,1.,1.);drawQuad();//gigi kanan putihglTranslatef(40,0,0);glColor3f(1.,1.,1.);drawQuad();

glFlush();}

void main(int argc, char **argv){glutInit (&argc, argv);glutInitDisplayMode(GLUT_DEPTH|GLUT_SINGLE|GLUT_RGBA);

glutInitWindowPosition (100,100);glutInitWindowSize (480,480);glutCreateWindow ("Bagus Nariotomo");

gluOrtho2D(-120.,150.,-150.,90.);//(kanan,kiri,atas,bawah)glutDisplayFunc (renderScene);glutMainLoop ();

}

//rujukan : http://aliphoemarley.blogspot.com/2011/10/transformasi-objek-opengl.html

Tampilan

Keterangan

2) Buatlah suatu bangun persegi, kemudian terletak tepat di tengah pop up windows. Kemudian bangun bergerak berputar dengan lintasan belah ketupat dengan gerakan yang simetris. Sajikan sintaks dan screenshootnya.

Script


int x=0;

void kotak() {glBegin (GL_QUADS);glColor3f(0,0,1);glVertex2i(30,240);glVertex2i(30,280);glVertex2i(-30,280);glVertex2i(-30,240);glEnd();

}

void renderScene(void){glClear(GL_COLOR_BUFFER_BIT);glClearColor(1,1,1,1);glRotatef(x,0,0,1);kotak();glFlush();

}

void timer (int value){if (x=360){

x-=1;}glutPostRedisplay();glutTimerFunc(10,timer,0);

}

void main(int argc, char **argv){glutInit(&argc, argv);glutInitWindowPosition (100,100);glutInitWindowSize (480,480);glutCreateWindow ("Bagus Nariotomo");

gluOrtho2D(-280.0,280.0,-280.0,280.0);glutDisplayFunc(renderScene);glutTimerFunc(1,timer,0);

glutMainLoop();}

//rujukan : http://aliphoemarley.blogspot.com/2011/10/membuat-baling-baling-dengan-animasi-di.html

Tampilan

Keterangan

3) Buatlah sebuah bentuk jam analog sederhana dengan minimal empat tempat petunjuk angka dan menggunakan 3 jarum. Jarum jam berbutar sesuai dengan timer per detik waktu nyata. Sajikan sintaks dan screenshootnya.Script

#include <stdlib.h>#include <glut.h>#include <math.h>

#define PI 3.1415926535float sudut = 0;int i,n;

void lingkaran(int radius, int jumlah_titik, int x_tengah, int y_tengah) {

glBegin(GL_POLYGON);for (i=0;i<=360;i++){

float sudut=i*(2*PI/jumlah_titik); float x=x_tengah+radius*cos(sudut); float y=y_tengah+radius*sin(sudut);

glVertex2f(x,y);}glEnd();

}

void Jam(){glBegin(GL_POLYGON);glColor3f(1,1,0);glVertex2i(0,200);glVertex2i(10,180);glVertex2i(5,180);glVertex2i(5,0);glVertex2i(-5,0);glVertex2i(-5,180);

glVertex2i(-10,180);glVertex2i(0,200);glEnd();

}void Menit(){

glBegin(GL_POLYGON);glColor3f(0,1,0);glVertex2i(0,220);glVertex2i(10,200);glVertex2i(5,200);glVertex2i(5,0);glVertex2i(-5,0);glVertex2i(-5,200);glVertex2i(-10,200);glVertex2i(0,220);glEnd();

}void Detik(){

glBegin(GL_POLYGON);glColor3f(0,0,1);glVertex2i(0,240);glVertex2i(10,210);glVertex2i(5,210);glVertex2i(5,0);glVertex2i(-5,0);glVertex2i(-5,210);glVertex2i(-10,210);glVertex2i(0,240);glEnd();

}

void angka(float jarak, float x, float y) {glPointSize(10);glBegin(GL_POINTS);glColor3f(1,0,1);for(n=0;n<360;n+=30)

glVertex2f(jarak*(float)sin(n*PI/180.0)+x,jarak*(float)cos(n*PI/180.0)+y);

glEnd();}

void menit(float jarak, float x, float y) {glPointSize(2);

glBegin(GL_POINTS);glColor3f(1,1,1);for(n=0;n<360;n+=6)

glVertex2f(jarak*(float)sin(n*PI/180.0)+x,jarak*(float)cos(n*PI/180.0)+y);

glEnd();}

void renderScene(void){glClear(GL_COLOR_BUFFER_BIT);glClearColor(1,1,1,1);glPushMatrix();glColor3f(0,0,0);lingkaran(250,100,0,0);

angka(230.,0.,0.);menit(230.,0.,0.);glPopMatrix();

glPushMatrix();glRotatef(sudut,0,0,1);Detik();glPopMatrix();

glPushMatrix();glRotatef(sudut/60,0,0,1);Menit();glPopMatrix();

glPushMatrix();glRotatef(sudut/720,0,0,1);Jam();glPopMatrix();

glColor3f(1,0,0);lingkaran(20,100,0,0);

glFlush();}

void timer(int value){sudut-=6;glutPostRedisplay();glutTimerFunc(100,timer,0);

}

void main (int argc, char **argv){glutInit(&argc, argv);glutInitWindowPosition(100,100);glutInitWindowSize(300,300);glutCreateWindow("Bagus Nariotomo");

gluOrtho2D(-300.,300.,-300.,300.);glutDisplayFunc(renderScene);glutTimerFunc(1,timer,0);glutMainLoop();

}

//rujukan : http://aliphoemarley.blogspot.com/2011/10/membuat-jam-analog-menggunakan-opengl.html

Tampilan

Keterangan

4) Buatlah bintang-bintang kecil dengan berbagai macam warna dan ukuran, yang bertebaran sepanjang salah satu diagonal window (harus ada translasi, rotasi, dan skala). Jumlah minimal bintang-bintang adalah 10. Sajikan sintaks dan screenshootnya.Script


void bintang(){glBegin(GL_POLYGON);glVertex2f(0,0);glVertex2f(50,150);glVertex2f(100,0);glVertex2f(250,0);glVertex2f(130,-100);glVertex2f(200,-250);glVertex2f(50,-150);glVertex2f(-100,-250);glVertex2f(-25,-100);glVertex2f(-175,0);glEnd();glFlush();

}

void renderScene(void){glClear(GL_COLOR_BUFFER_BIT);//garis diagonalglPushMatrix();glRotatef(135,0,0,1);glColor3f(0,0.6,1);glPopMatrix();

//kumpulan bintangglPushMatrix();

glScalef(0.5,0.5,0);glTranslatef(680,680,0);glColor3f(0,0,1); //birubintang();glPopMatrix();

glPushMatrix();glRotatef(45,0,0,1);glScalef(0.2,0.2,0);glTranslatef(3000,20,0);glColor3f(0,1,0); //hijaubintang();glPopMatrix();

glPushMatrix();glRotatef(60,0,0,1);glScalef(0.3,0.3,0);glTranslatef(999,99,0);glColor3f(0,1,1); //cyanbintang();glPopMatrix();

glPushMatrix();glRotatef(10,0,0,1);glScalef(-0.5,-0.5,0);glTranslatef(444,333,0);glColor3f(1,0,0); //merahbintang();glPopMatrix();

glPushMatrix();glTranslatef(-300,-300,0);glRotatef(-30,0,0,1);glScalef(0.6,0.6,0);glColor3f(1,0,1);//magentabintang();glPopMatrix();

glPushMatrix();glRotatef(90,0,0,1);glScalef(0.1212,0.21,0);glTranslatef(-999,120,0);glColor3f(1,1,0); //kuningbintang();glPopMatrix();

glPushMatrix();glRotatef(180,1,1,0);glScalef(-0.1,-0.1,0);glTranslatef(10,2222,0);glColor3f(0,0,1); //birubintang();glPopMatrix();

glPushMatrix();glRotatef(90,0,0,1);glScalef(0.4,-0.4,0);glTranslatef(100,90,0);glColor3f(1,1,1); //putihbintang();glPopMatrix();

glPushMatrix();glTranslatef(100,90,0);glRotatef(90,0,0,1);glScalef(0.3,-0.3,0);glColor3f(0.29,0.1,0.5); //ungubintang();glPopMatrix();

glPushMatrix();glTranslatef(-300,-90,0);glRotatef(180,0,0,1);glScalef(0.1,0.1,0);glColor3f(1,1,0); //merahbintang();glPopMatrix();

glFlush();}

void main(int argc,char **argv){glutInit(&argc,argv);glutInitWindowPosition(100,100);glutInitWindowSize(480,480);glutCreateWindow("Bagus Nariotomo");

gluOrtho2D(-480.,480.,-480.,480.);glutDisplayFunc(renderScene);glutMainLoop();

}

//rujukan : https://fatimatuspendtium.wordpress.com/author/fatimatuspendtium/

Tampilan

Keterangan

F. KESIMPULAN Teknik Transformasi dua dimensi yaitu suatu model atau bentuk atau teknik

memindahkan atau mengubah nilai posisi objek dalam sistem koordinat dua dimensi.

Tujuan transformasi adalah :o Merubah atau menyesuaikan komposisi pemandangan.

o Memudahkan membuat objek yang simetris.o Melihat objek dari sudut pandang yang berbeda.o Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini

biasa dipakai untuk animasi. Transformasi objek 2D dibagi 3 kriteria yaitu, translasi, rotasi, dan skala. Translasi merupakan bentuk transformasi yang memindahkan posisi suatu

objek, baik pada sumbu x, sumbu y, maupun sumbu z. Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisi

suatu benda. Skalasi merupakan bentuk tarnsformasi yang dapat mengubah ukuran (besar-

kecil) suatu objek. Fungsi yang digunakan dalam translasi adalah glTranslatef (x, y, z) dan

glTranslated (x, y, z). Fungsi yang digunakan untuk melakukan rotasi adalah glRotatef(Ѳ, x, y, z) dan

glRotated(Ѳ, x, y, z). Fungsi yang digunakan untuk melakukan skalasi ialah glScalef(x, y, z) dan

glScaled(x, y, z).

G. DAFTAR RUJUKAN- Asisten Praktikum Universitas Negeri Malang. 2015. “Modul III Praktikum

Grafika Komputer tentang Transformasi dan Animasi Objek 2D”. Malang : Universitas Negeri Malang.

- (http://aliphoemarley.blogspot.com/2011/10/transformasi-objek-opengl.html), diakses pada 24 Februari 2015

- (http://aliphoemarley.blogspot.com/2011/10/membuat-baling-baling-dengan-animasi-di.html), diakses pada 24 Februari 2015

- (http://aliphoemarley.blogspot.com/2011/10/membuat-jam-analog-menggunakan-opengl.html), diakses pada 24 Februari 2015

- (https://fatimatuspendtium.wordpress.com/author/fatimatuspendtium/), diakses pada 24 Februari 2015

- (http://rosyidah-binti.blogspot.com/2013/04/transformasi-objek.html), diakses pada 04 Maret 2015

- (http://repository.upnyk.ac.id/222/1/A-19_Transformasi2D_dengan_opengl_revisi_0.pdf), diakses pada 04 Maret 2015

https://fatimatuspendtium.wordpress.com/author/fatimatuspendtium/

laporan-3-grafkom

Documents