Laporan 3 [PDF]

Citation preview

LAPORAN PRAKTIKUM 3 GRAFIKA KOMPUTER MODUL 3 “Transformasi dan Animasi Objek 2D”



Akhmad Syaiful Arief 130533608124 OFF E



UNIVERSITAS NEGERI MALANG FAKULTAS TEKNIK ELEKTRO PENDIDIKAN TEKNIK INFORMATIKA 2015



A. TUJUAN 1. Agar mahasiswa Memahami fungsi-fungsi transformasi. 2. Agar mahasiswa Memahami dan dapat membuat multi objek menggunakan fungsi transformasi . 3. Agar mahasiswa Memahami prinsip-prinsip pembuatan animasi 2d. 4. Agar mahasiswa dapat membuat animasi objek 2d. B. JOBSHEET PRAKTIKUM 1. Latihan 1 Berikut adalah script dasar untuk kegiatan praktikum transformasi objek 2D // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(drawQuad); glutMainLoop(); return 0; }



Penjelasan Tidak menampilkan apapun, karena hanya menampilkan fungsi main 2. Latihan 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. // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void drawQuad(){ glTranslatef(50.,0.,0.); //d glBegin(GL_QUADS); //glTranslatef(50.,0.,0.); //a glVertex2f(0.0,0.0); glVertex2f(0.0,10.0); //glTranslatef(50.,0.,0.); //b glVertex2f(20.0,10.0); glVertex2f(20.0,0.0); //glTranslatef(50.,0.,0.); //c glEnd(); glFlush(); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(drawQuad); glutMainLoop();



}



return 0;



Tampilan Posisi a,b,c



Posisi d sebelum dimaximazi



Posisi d sesudah maximazi



Penejelasan Pada latihan ini kita membuat sebuah animasi 2d dengan perintah glTranslatef(50.,0.,0.); dan posisi yang benar pada posisi “d” tepat berada diatas glBegin, pada posisi ini objek bergerak kenan setelah dimimize atau dimaximize, pada posisi lainnya atau posisi a,b,c tidak berpengaruh apa-apa, juga tidak eror pada programnya, tetapi objek yang ditampilkan tidak bergerak atau tidak ada perubahan. 3. Latihan 3 Tetap pada projek yang sedang aktif, hilangkan semua fungsi glTranslatef(x, y,z) dari a, b, c, d sehingga fungsi menjadi: // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void drawQuad(){ glBegin(GL_QUADS); glVertex2f(0.0,0.0); glVertex2f(0.0,10.0); glVertex2f(20.0,10.0); glVertex2f(20.0,0.0); glEnd(); glFlush(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0,0.0,0.0); //warna merah drawQuad(); glTranslatef(0.,-10.,0.); glColor3f(1.0,1,1.0); //warna putih drawQuad(); glEnd(); glFlush(); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(render); glutMainLoop(); return 0; }



Tampilan



Penjelasan Pada latihan ini membuat animasi 2d dengan menggunakan perintah glBegin(GL_QUADS); untuk membuat kotak dan membuat dua objek menjadi satu dan membentuk bendera merah putih dan objek menjadi bergerak kebawah setelah diminimize atau maximize, dan digunakan untuk translasi persegi panjang untuk pergeseran objek -10 dari sumbu y. glTranslatef(0.,-10.,0.); Perintah diatas untuk menjadi bentuk seperti bendera tersebut, pada perintah ini digunakan untuk memberi warna merah pada objek glColor3f(1.0,0.0,0.0); dan berikutnya warna putih glColor3f(1.0,1,1.0); 4. Latihan 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. // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void drawQuad(){ glBegin(GL_QUADS); glVertex2f(0.0,0.0); glVertex2f(0.0,80.0); glVertex2f(40.0,80.0); glVertex2f(40.0,0.0); glEnd(); glFlush(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0,0.0,0.0); drawQuad(); glRotatef(45.,0.,0.,1.); glColor3f(1.0,1,0); drawQuad(); glEnd(); glFlush(); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(render);



glutMainLoop(); return 0; }



Tampilan glRotatef(45.,1.,0.,0.);



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



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



Penjelasan Pada pembuatan rotasi pada parameter awalnya merupakan besar sudut yang akan dibuat, berikutnya pergerakan objek terhadap sumbu x, lalu pergerakan objek terhadap sumbu y, dan pada sumbu z atau kedalaman. Bergerak kebawah berdasarkan sumbu x, karena parameter x diisi glRotatef(45.,1.,0.,0.); Bergerak kesamping berdasarkan sumbu y, karena parameter y diisi glRotatef(45.,0.,1.,0.); dan pada parameter z berputar seperti jam dinding glRotatef(45.,0.,0.,1.); 5. Latihan 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. // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void drawQuad(){ glBegin(GL_QUADS); glVertex2f(0.0,0.0); glVertex2f(0.0,80.0); glVertex2f(40.0,80.0); glVertex2f(40.0,0.0);



glEnd(); glFlush(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); glScalef(1.0,1.0,1.0); //x(1.3,1.0,1.0) y(1.0,1.3,1.0) z(1.0,1.0,1.3) drawQuad(); glEnd(); glFlush(); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(render); glutMainLoop(); return 0; }



Tampilan Scale pada X



Scale pada Y



Scale pada Z



Penjelasan Pada perintah scale digunakan untuk memperbesar ukuran sesuai dengan perintah yang diberikan, pada (1.3,1.0,1.0) perbesaran terdapat pada sumbu x karena yang diberikan parameter pada sumbu x, berikutnya pada (1.0,1.3,1.0) perbesaran terdapat pada sumbu y karena yang diberikan parameter pada sumbu y. Dan pada (1.0,1.0,1.3) sumbu z tidak memberikan efek perubahan apa-apa PRAKTIKUM ANIMASI OBJEK 2D



Berikut adalah script dasar untuk kegiatan praktikum animasi objek 2D.



dan glutDisplayFunc(display); glutTimerFunc(unsigned millis, GLUTfunction(callback), int value); Berikut adalah fungsi untuk glutTimerFunc(int millis, *function, int value);



1. Latihan 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. // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void Persegi(){//segi 4 glBegin(GL_QUADS); glVertex2i(0.,0.); glVertex2i(0.,70.); glVertex2i(160.,70.); glVertex2i(160.,0.); glEnd(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(10,0,0,1); Persegi(); glFlush(); } void Timer(int value){ glutPostRedisplay(); //glutTimerFunc(unsigned millis,GLUT function(callback),int value); glutTimerFunc(value,Timer,value); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(render); glutTimerFunc(1000,Timer,10); glutMainLoop(); return 0; }



Tampilan



Penjelasan Membuat persegi panjang dengan menggunakan fungsi Persegi yang dirotasi sebesar 10 derajat terhadap sumbu z. Disini kita menggunakan fungsi timer yang digunakan untuk membuat animasi yang dikontrol oleh waktu. Di dalam fungsi timer terdapat glutPostRedisplay yang berfungsi mengirimkan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu ditambahkan fungsi untuk mengaktifkan timer function, yakni fungsi glutTimerFunc(100,Timer,10); dimana 100 merupakan nilai dari parameter unsign millis, Timer merupakan GLUT function (callback) dan 10 merupakan nilai dari variabel value. 2. Latihan 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! // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void Persegi(){//segi 4 glBegin(GL_QUADS); glVertex2i(0.,0.); glVertex2i(0.,70.); glVertex2i(160.,70.); glVertex2i(160.,0.); glEnd(); } void display(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(10,0,1,0); Persegi(); glFlush(); } void Timer(int value){ glutPostRedisplay(); //glutTimerFunc(unsigned millis,GLUT function(callback),int value); glutTimerFunc(value,Timer,value); } int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0);



glutDisplayFunc(display); glutTimerFunc(1000,Timer,10); glutMainLoop(); return 0; }



Tampilan



Penjelasan



Membuat persegi panjang dengan menggunakan fungsi Persegi yang dirotasi sebesar 10 derajat terhadap sumbu y. Disini kita menggunakan fungsi timer yang digunakan untuk membuat animasi yang dikontrol oleh waktu. Di dalam fungsi timer terdapat glutPostRedisplay yang berfungsi mengirimkan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu ditambahkan fungsi untuk mengaktifkan timer function, yakni fungsi glutTimerFunc(1000,Timer,10); dimana 1000 merupakan nilai dari parameter unsign millis, Timer merupakan GLUT function (callback) dan 10 merupakan nilai dari variabel value. Dalam program ini, nilai dari parameter unsign millis diubah menjadi lebih besar dari sebelumnya yakni sebesar 1000 ms yang menyebabkan animasi akan bergerak lebih cepat dari sebelumnya. 3. Latihan 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! // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include void Persegi(){//segi 4 glBegin(GL_QUADS); glVertex2i(0.,0.); glVertex2i(0.,70.); glVertex2i(160.,70.); glVertex2i(160.,0.); glEnd(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(10,1,0,0); Persegi(); glFlush(); } void Timer(int value){ glutPostRedisplay(); //glutTimerFunc(unsigned millis,GLUT function(callback),int value); glutTimerFunc(value,Timer,value);



} int main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("GLUT : AKhmad Syaiful Arief"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(render); glutTimerFunc(100,Timer,8); glutMainLoop(); return 0; }



Tampilan



Penjelasan



Membuat persegi panjang dengan menggunakan fungsi Persegi yang dirotasi sebesar 10 derajat terhadap sumbu x. Disini kita menggunakan fungsi timer yang digunakan untuk membuat animasi yang dikontrol oleh waktu. Di dalam fungsi timer terdapat glutPostRedisplay yang berfungsi mengirimkan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu ditambahkan fungsi untuk mengaktifkan timer function, yakni fungsi glutTimerFunc(500,Timer,10); dimana 500 merupakan nilai dari parameter unsign millis, Timer merupakan GLUT function (callback) dan 10 merupakan nilai dari variabel value. Dalam program ini, nilai dari parameter unsign millis diubah menjadi lebih kecil dari sebelumnya yakni sebesar 500 ms yang menyebabkan animasi akan bergerak lebih lambat dari sebelumnya. 4. Latihan 4 Buatlah project baru pada Visual Studio dengan nama prak3-timerTranslasiX. Gunakan fungsi drawQuad untuk membuat segi empat. // jobsheet_mod1.cpp : Defines the entry point for the console application. #include #include "stdafx.h" #include int x; void kotak(){ glBegin(GL_QUADS); glVertex2d(0,50); glVertex2d(0,0); glVertex2d(50,0); glVertex2d(50,50); glEnd(); } void timer (int value){ if (x