Selasa, PTI 19 C XaphyraAuraShavaA - 190533646844 [PDF]

Citation preview

LAPORAN PRAKTIKUM V GRAFIKA KOMPUTER MODUL 3 TRANSFORMASI DAN ANIMASI OBJEK 2D



Disusun untuk memenuhi Matakuliah Praktikum Grafika Komputer Dibimbing oleh Ahmad Mursyidun Nidhom, S.Pd., M.Pd.



Disusun oleh : Xaphyra Aura Shava Aulia



190533646844



S1 PTI ’19 OFF C



UNIVERSITAS NEGERI MALANG FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA SEPTEMBER 2020



Modul 3 Transformasi dan Animasi Objek 2D A. KOMPETENSI DASAR 



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







Memahami dan dapat membuat animasi objek 2D







Memahami prinsip-prinsip pembuatan animasi 2D







Membuat animasi objek 2D



B. TUGAS PRAKTIKUM TUGAS PRAKTIKUM I Ubahlah warna bouncing ball dengan background yang berwarna hijau dan bola memiliki gradiasi warna ! Nama Program



: Bouncing Ball



Compiler



: Microsoft Visual C++ 2008 Express Edition



Source Code



:



#include #include #include #define PI 3.14159265f char title [] = "Bouncing Ball(2D)"; int windowWidth = 640; int windowHeight = 480; int windowPosX = 50; int windowPosY = 50; GLfloat ballRadius = 0.5f; GLfloat ballX = 0.0f; GLfloat ballY = 0.0f; GLfloat ballXMax, ballXMin,ballYMax, ballYMin; GLfloat xSpeed = 0.02f; GLfloat ySpeed = 0.007f; int refreshMillis = 30; GLdouble clipAreaXLeft, clipAreaXRight, clipAreaYBottom, clipAreaYTop; void initGL() { glClearColor(0.0, 1.0, 0.0, 0.0); } void display() { glClear(GL_COLOR_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(ballX, ballY, 0.0f);



glBegin(GL_TRIANGLE_FAN); glColor3f(0.1f, 0.0f, 0.1f); glVertex2f(0.0f, 0.0f); int numSegments = 100; GLfloat angle; for(int i = 0; i ballXMax) { ballX = ballXMax; xSpeed = -xSpeed; } else if (ballX < ballXMin) { ballX = ballXMin; xSpeed = -xSpeed; } if (ballY > ballYMax) { ballY = ballYMax; ySpeed = -ySpeed; } else if (ballY < ballYMin) { ballY = ballYMin; ySpeed = -ySpeed; } } void reshape(GLsizei width, GLsizei height){ if (height == 0) height=1; GLfloat aspect = (GLfloat)width / (GLfloat)height; glViewport (0, 0, width, height); glMatrixMode (GL_PROJECTION); glLoadIdentity(); if (width >= height) { clipAreaXLeft = -1.0*aspect; clipAreaXRight = 1.0*aspect; clipAreaYBottom = -1.0; clipAreaYTop = 1.0; } else { clipAreaXLeft = -1.0; clipAreaXRight = 1.0; clipAreaYBottom = -1.0/ aspect; clipAreaYTop = 1.0 / aspect; } gluOrtho2D(clipAreaXLeft, clipAreaXRight, clipAreaYBottom, clipAreaYTop); ballXMin = clipAreaXLeft + ballRadius; ballXMax = clipAreaXRight - ballRadius; ballYMin = clipAreaYBottom + ballRadius; ballYMax = clipAreaYTop - ballRadius; }



void Timer(int value) { glutPostRedisplay(); glutTimerFunc(refreshMillis, Timer, 0); } int main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE); glutInitWindowSize(windowWidth,windowHeight); glutInitWindowPosition(windowPosX,windowPosY); glutCreateWindow("Xaphyra Aura : Bouncing Ball"); glutDisplayFunc(display); glutReshapeFunc(reshape); glutTimerFunc(0, Timer, 0); initGL(); glutMainLoop(); return 0; }



Output



:



Penjelasan



:



Pada program diatas membuat sebuah program “Bouncing ball”. Program ini menggunakan fungsi timer dan gradasi warna. Timer digunakan untuk mengatur jalannya bola. Gradasi warna digunakan untuk membrikan warna pada tampilan bola sehingga bola tampak lebih baik dengan gradasi warna. #include #include #include



Header digunakan yaitu merupakan header yang digunakan untuk pemrograan grafis menggunakan OpenGL-Glut. digunakan untuk perhitungan matematika seperti pada pembuatan lingkaran (bola). char title [] = "Bouncing Ball(2D)"; int windowWidth = 640; int windowHeight = 480; int windowPosX = 50; int windowPosY = 50;



Syntax diatas merupakan deklarasi variabel global yang digunakan untuk pemberian judul dari program dan mendeklarasikan nilai dari posisi ukuran windows. Deklarasi dari variabel-variabel tersebut nantinya akan dipanggil pada fungsi main, sehingga untuk mengatur judul/nama window, windows position maupun windows size dapat dilakukan dengan memanggil variabel tersebut yang dapat dilihat pada kode program :



glutInitWindowSize(windowWidth,windowHeight); glutInitWindowPosition(windowPosX,windowPosY); glutCreateWindow(title);



Selain variabel diatas terdapat variabel lain yang dideklarasikan antara lain ballRadius, ballX,ballY, ballXMax , ballXMin dan lain sebagainya. Untuk



membuat lingkaran disini digunakan GL_TRIANGLE_FAN. ballX += xSpeed; dan ballY += ySpeed; merupakan variabel untuk mengontrol animasi yang dimasukkan/



diolah pada sintaks pengkondisian (if). Untuk mengatur kecepatan atau waktu berputar pada kode program void Timer(int value). Untuk mengatur perbandingan aspect dari clipping area to dicocokkan dengan viewport maka dilakukan pengkondisian cliparea.



TUGAS PRAKTIKUM II Buktikan apakah tranformasi translasi.rotasi = rotasi.translasi. Sajikan dalam screenshoot tampilan dan program ! Nama Program



: Transformasi translasi.rotasi = rotasi.tranlasi



Compiler



: Microsoft Visual C++ 2008 Express Edition



Source Code



:



#include #include GLfloat angle =0.0f; void initGL(){ glClearColor (1.0f, 1.0f, 1.0f, 0.05f); } void idle(){ glutPostRedisplay(); } void display () { glClear(GL_COLOR_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix();



glPushMatrix(); glTranslatef(-0.5f, -0.5f, 0.0f); glRotatef(angle, 0.0f, 0.0f, 1.0f); glBegin(GL_QUADS); glColor3f(0.0f, 0.5f, 0.5f); glVertex2f(-0.2f, -0.2f); glColor3f(2.0f, 0.5f, 1.0f); glVertex2f(0.2f, -0.2f); glColor3f(0.0f, 0.5f, 1.0f); glVertex2f(0.2f, 0.2f); glColor4f(1.0f, 1.0f, 1.0f, 0.0f); glVertex2f(-0.2f, 0.2f); glEnd(); glPopMatrix(); glutSwapBuffers(); angle += 0.2; } void reshape(GLsizei width, GLsizei height){ if (height == 0) height=1; GLfloat aspect = (GLfloat)width / (GLfloat)height; glViewport (0, 0, width, height); glMatrixMode (GL_PROJECTION);



}



glLoadIdentity(); if (width >= height) { gluOrtho2D(-1.0 *aspect, 1.0 *aspect, -1.0, 1.0); } else { gluOrtho2D(-1.0, 1.0, -1.0/aspect, 1.0 / aspect); }



int main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE); glutInitWindowSize(500,500); glutInitWindowPosition(50,50); glutCreateWindow("Xaphyra Aura : Translasi Rotasi"); glutDisplayFunc(display); glutReshapeFunc(reshape); glutIdleFunc(idle); initGL(); glutMainLoop(); return 0; }



Output Translate-Rotate



Rotate-Translate



:



Penjelasan



: Program kali ini untuk mengetahu apakah transformasi translasi.rotasi



sama dengan rotasi.translasi maka dilakukan percobaan, buat sebuah objek. Dalam percobaan ini kami membuat objek persegi yang dibuat dengan menggunakan fungsi GL_QUADS yang berisi 4 titik vertex. Kemudian di deklarasikan pula void resize untuk mengatasi perubahan ukuran pada window. Selain



itu



digunakan



glutSwapBuffer,



juga



glViewport,



glPushMatrix, glTranslatef,



glPopMatrix, glRotatef



dan



sebagainya. glTranslatef dan glRotatef ini lah yang akan menjadi



pembuktian apakah transformasi translasi.rotasi sama dengan rotasi.translasi Setelah dilakukan percobaan, transformasi translasi.rotasi tidak sama dengan rotasi.translasi. Translasi rotasi berarti objek tersebut berputar tetapi tetap pada tempatnya. Berbeda dengan rotasi translasi yang berputar mengelilingi window.



Seperti



yang



diketahui



bahwa



translasi



merupakan



pergerakan/perpindahan semua titik dari objek pada suatu jalur lurus sehingga menempati posisi baru sedangkan rotasi adalah mereposisi semua titik dari objek sepanjang jalur lingkaran dengan pusatnya pada titik 0. Pada sintak program untuk membedakan apakah itu translasi rotasi atau rotasi translasi adalah pada peletakan glTranslatef dan glRotatef seperti kode program dibawah ini : Rotate-Translate Letak glTranslatef berada diatas glRotatef.



Translate- Rotate Letak glRotatef berada diatas glTranslatef



TUGAS PRAKTIKUM III Buatlah sebuah baling-baling yang bisa berputar secara clockwise dan unclockwise yang pusatnya berada pada pusat koordinat ! Nama Program



: Baling-baling Berputar



Compiler



: Microsoft Visual C++ 2008 Express Edition



Source Code



:



#include #include int x=0; int z=0; int z2=180; void Triangles(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); glColor3f(2.0f, 0.5f, 1.0f); glVertex2f(0.,0.); glVertex2f(20.,40.); glVertex2f(-20.,40.); glColor3f(0.5f, 1.0f, 1.0f); glVertex2f(0.,0.); glVertex2f(-20.,-40.); glVertex2f(20.,-40.); glEnd(); glFlush(); } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glClearColor(1,1,1,1); glRotatef(x,0,0,1); Triangles(); glFlush(); } void timer (int value){ if (z 360){ x = -1; z2 -=1; } if (z2 < 0) { x = 1; z = 0; z2 = 360; } glutPostRedisplay(); glutTimerFunc(5,timer,0); }



void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition (150,150); glutInitWindowSize (450,450); glutCreateWindow ("Xaphyra Aura : Baling-baling Berputar"); gluOrtho2D(-50.,50.,-50.,50.); glutDisplayFunc(renderScene); glutTimerFunc(1,timer,0); glutMainLoop(); }



Output



:



Penjelasan



:



Program ini adalah program baling-baling yang bisa berputar secara clockwise dan unclockwise yang pusatnya berada pada pusat koordinat. Dibuat dengan menggunakan header #include #include . Dengan menggunakan void Triangels untuk fungsi dari segitiga, glVertex untuk mengatur ukuran segitiga dan glColor3f atau glColor2f untuk mengatur warna pada segitiga. Setelah itu jika dibuat akan menjadi segitiga (baling-baling) diinginkan. Untuk perputaran pada balinh baling 360 dengan menggunakan ketentaun void timer (int value){ if (z 360){ x = -1; z2 -=1; } if (z2 < 0) { x = 1; z = 0; z2 = 360; } glutPostRedisplay(); glutTimerFunc(5,timer,0);



TUGAS PRAKTIKUM IV Ubah animasi bergerak menjadi animasi bergerak secara horizontal ! Nama Program



: Animasi Gerak Horizontal



Compiler



: Microsoft Visual C++ 2008 Express Edition



Source Code



:



#include #include void Draw () { glBegin(GL_TRIANGLES); glColor3f(0.0f, 0.0f, 1.0f); glVertex2i(-300. , 25.); glColor3f(0.5f, 1.0f, 1.0f); glVertex2i(-150. , 25.); glVertex2i(-200. , 100.); }



glEnd();



int x=0; void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); if(x