LAPORAN GRAFIKA KOMPUTER ANIMASI

(1)

LAPORAN MODUL III

PRAKTIKUM GRAFIKA KOMPUTER

“

Transformasi dan Animasi Objek 2D

”

Disusun untuk Memenuhi Matakuliah Praktikum Grafika Komputer

Yang Dibimbing oleh Bapak Heru Wahyu Herwanto

Disusun Oleh :

Ananda Putri Syaviri (130533608243)

PTI Off B 2013

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

(2)

PRAKTIKUM MODUL-3

Transformasi dan Animasi Objek 2D

A. TUJUAN



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. JOBSHEET PRAKTIKUM

1.

Transformasi Object 2D

1)

Script dasar transformasi objek 2D

Source Code

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

void drawLine() { glLineWidth(10);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUADS);

glVertex2d(50,50); glVertex2d(100,50);

glVertex2d(-50,150); glVertex2d(-50,200);

glVertex2d(-100,150); glVertex2d(-50,150); glEnd();

glFlush(); }

void main(int argc,char **argv){ glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Praktikum Modul 3");

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

glutDisplayFunc(drawLine); glutMainLoop();

}

(3)

Penjelasan :

-

Script diatas digunakan untuk mengatur posisi windows, ukuran windows dan system

koordinat yang digunakan. Script diatas merupakan script dasar untuk membangun

sebuah windows. Dimana glutInitWindowPosition(100, 100); berfungsi untuk

menentukan posisi windows dalam layar. glutInitWindowSize(480, 480); berfungsi

untuk mengatur ukuran (panjang dan lebar) jendela windows. Kemudian

gluOrtho2D(-320., gluOrtho2D(-320., -240., 240.); bertujuan untuk mengatur panjang sistem koordinat jendela

windows dengan format (kiri, kanan, bawah, atas). Sebagai contoh untuk

pembentukan objek kotak diatas, pada fungsi main, dituliskan script-script dasar

untuk membangun sebuah jendela windows.

2)

Translasi

Source Code

void drawQuad() {

glClear(GL_COLOR_BUFFER_BI T);

glBegin(GL_QUADS);

glTranslatef(50,0,0);

glVertex2f(0.,0.);

glVertex2f(0.,10.);

glVertex2f(20.,10.);

glVertex2f(20.,0.);

glEnd();

glFlush();

}

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

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_D EPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(100 ,100);

glutInitWindowSize(480,480 );

glutCreateWindow("Praktiku m Modul 3");

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

glutDisplayFunc(drawQuad);

(4)

glutMainLoop(); }

Hasil

Penjelasan :

-

Program diatas membuat bentuk persegi dengan menambahkan fungsi

glTranslatef(50,0,0);. Fungsi glTranslatef(50,0,0);tersebut digunakan untuk melakukan

perpindahan objek dengan x=50, y=0, dan z=0. Hal ini akan mempengaruhi posisi

objek yang dibangun. Pada program ini mencoba meletakkan fungsi glTranslatef pada

beberapa tempat, namun ada beberapa tempat yang tidak akan mempengaruhi hsil

program.Pada program diatas jika menempatkan glTranslatef pada beberapa tempat

akan mempengaruhi posisi objek sesuai parameter x,y,z yang digunakan.

3)

Membuat bendera Indonesia dengan Translasi Objek

Source Code

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glEnd(); }

void render(){

glTranslatef(-10,0,0);

glColor3f(1,0,0);

drawQuad();

glTranslatef(0,-50,0);

glColor3f(1,1,1);

drawQuad();

(5)

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

glutDisplayFunc(render); glutMainLoop();

}

Hasil

Penjelasan :

-

Program diatas adalah program untuk membentuk sebuah bendera dengan

menggunakan titik koordinat

glVertex2f(0.,0.);

glVertex2f(0.,50.);

untuk pemanggilan fungsi drawQuad diletakkan double agar dapat membentuk 2

persegi dengan warna yang dideklarasikan berbeda,(merah dan putih) pada fungsi

render. Kemudian agar posisi 2 persegi berdekatan, menggunakan fungsi translatef

glTranslatef(0,-10,0); Dimana maksud dari syntax tersebut adalah objek persegi

panjang warna putih akan diberpindah sejauh -10 pada sumbu y (nilai minus pada

sumbu y membuat objek bergeser kebawah). Dan sebaliknya untuk persegi panjang

warna merah akan bergeserr sejauh -50 pada sumbu y, bergeser keatas.

4)

Rotasi

(6)

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glEnd(); }

void render(){

glRotatef(45,1,0,0);

glColor3f(1,0,0);

drawQuad();

glColor3f(1,1,1);

drawQuad();

glFlush(); }

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

}

Hasil

Penjelasan :

-

Program diatas menggunakan fungsi Rotatef dengan sudut 45 pada sumbu x=1, y=0,

z=0, sehingga menghasilkan warna putih tertindih oleh bendera warna merah. Karena

berotasi pada sumbu x, maka hasilnya seperti pada gambar.

(7)

Source Code

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glEnd(); }

void render(){

glScalef(45,20,0);

glColor3f(1,0,0);

drawQuad();

glScalef(45,20,0);

glColor3f(1,1,1);

drawQuad();

glFlush(); }

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

}

Hasil

Penjelasan :

-

Program diatas menggunakan fungsi Scalef untuk mengubah skala bangun. Pada

(8)

2.

ANIMASI OBJECT 2D

1)

Rotasi terhadap sumbu z unclockwise

Source Code

void Persegi() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,75.);

glEnd(); }

void display(void){

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

Persegi();

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

Persegi();

glFlush(); }

void timer (int value)

{

glutPostRedisplay();

glutTimerFunc(60,timer,0);

}

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

glutCreateWindow("Latihan animasi prak 3");

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

glutDisplayFunc(display); glutTimerFunc(50,timer,10) ;

glutMainLoop(); }

Hasil

(9)

-

Program diatas menggunakan fungsi Rotatef sehingga terlihat seperti berputar

(berlawanan arah jarum jam). Menggunakan fungsi timer sebagai Inisialisasi dalam

penggunaan Timer Function yakni Set unsign millis=50. Yang digunakan untuk

mengatur kecepatan rotasi objek.

2)

Rotasi terhadap sumbu y Clockwise

Source Code

#include <stdlib.h> //Load library

#include <glut.h> //Load library glut

void Persegi (void) {

glBegin(GL_QUADS); glVertex2f(0.,0.); glVertex2f(0.,40.); glVertex2f(100.,40.); glVertex2f(100.,0.); glEnd();

glFlush(); }

void display () {

glClear(GL_COLOR_BUFFER_BIT); glRotatef(45,0,0,1);

Persegi();

/* ... */

glFlush(); }

void timer (int value) {

glutTimerFunc(100,timer,0); }

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

glutInit (&argc, argv);

/* ... */

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("Latihan Animasi 2D");

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

glutDisplayFunc(display); glutTimerFunc(100,timer,0); glutMainLoop();

(10)

Penjelasan

-

Program diatas menggunakan fungsi Rotatef untuk membuat objek berputar dengan

parameter 45,0,0,1 maka objek akan berputar sebesar 45 derajat pada sumbu y

clockwise(arah putar jarum jam). Artinya karena menggunakan parameter x= 0, y=0

maka objek akan berputar tepat ditengah koordinat sumbu x dan y.

3)

Rotasi terhadap sumbu x Clockwise

Source Code

void Persegi (void) {

glFlush(); }

void display () {

glClear(GL_COLOR_BUFFER_BIT); glRotatef(45,0,1,0);

Persegi();

/* ... */

glFlush(); }

/* ... */

glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("Latihan Animasi 2D");

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

glutDisplayFunc(display); glutTimerFunc(200,timer,0); glutMainLoop();

(11)

Hasil

Penjelasan

-

Program diatas hampir sama dengan latihan sebelumnya, hanya saja perbedaannya

adalah merotasi objek pada sumbu x clockwise. Rotasinya dapat menggunakan

glutTimerFunc(200,timer,0);fungsi ini digunakan untuk mengatur kecepatan rotasi

objek. Kemudian karena menggunakan fungsi rotate dengan parameter 45, 0, 1, 0,

yang artinya objek akan berotasi sebesar 45 derajat pada sumbu x=0, y=1, z=0,

sehingga hasilnya akan tampak seperti pada gambar.

4) Timer Translasi

Source Code

#include<stdlib.h>//Load library

#include<glut.h> //Load library glut

int x=1;

void Draw (void) {

glBegin(GL_QUADS); glVertex2f(0.,0.); glVertex2f(0.,40.);

glVertex2f(80.,40.); glVertex2f(80.,0.); glEnd();

glFlush(); }

void renderScene () {

(12)

glPushMatrix(); if(x<200) {

x+=4;

glTranslatef(x,0,0); Draw();

}

glPopMatrix(); glFlush();

}

/* ... */

glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("LATIHAN ANIMASI 2D");

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

glutDisplayFunc(renderScene); glutTimerFunc(100,timer,0); glutMainLoop();

}

Hasil

Penjelasan

-

Pada program diatas, menggunakan perkondisian if

int x=0;

void timer(int value){ if(x<200){

x+=4; }

(13)

menggunakan glutPostRedisplay(); sehingga objek akan bergerak secara terus

menerus hingga menghilang karena sudah mencapai batas perkondisian.

5)

Timer Translasi terhadap sumbu y

Source Code

int y=0;

void Draw (void) {

glFlush(); }

glClear(GL_COLOR_BUFFER_BIT); glPushMatrix();

if(y>-200) {

y+=4;

glTranslatef(0,-y,0); Draw();

}

/* ... */

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

}

(14)

Penjelasan

-

Program diatas hampir sama dengan program sebelumnya , hanya saja perbedaanya

terletak pada pergerakan objek yang bergerak ke bawah. Pada script menggunakan

inisialisasi nilai sumbu y yang negative, yang artinya, pergerakan objek akan berjalan

ke titik koordinat sumbu y negative (bawah) Pada script menambahkan penggunaan

fungsi

glPopMatrix();

yang akan memanggil fungsi yang disimpan dalam

glPushMatrix

6)

Timer Translasi terhadap sumbu z

Source Code

#include<stdlib.h>//Load library

int z=1;

void Draw (void) {

glBegin(GL_QUADS); glVertex2f(0.,0.); glVertex2f(0.,20.); glVertex2f(80.,20.);

glVertex2f(80.,0.); glEnd();

glFlush(); }

glClear(GL_COLOR_BUFFER_BIT); glPushMatrix();

(15)

z+=4;

glTranslatef(0,0,z); Draw();

}

void main (int argc, char **argv)

{

/* ... */

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

}

Hasil

Penjelasan

-

Pada program datas juga menggunakan prinsip yang sama dengan program

sebelumnya. Program diatas menggunakan titik z untuk membentuk objek.

Menggunakan perkondisian if jika inisialisasi z < 200 maka z ditambah 4. Pada hasil

tidak terlihat karena pada intinya dalam system koordinat yang ditampilkan hanya

titik x dan y, sedangkan titik z tidak ditampilkan , sehinnga tidak muncul objek

appun, tidak jarang juga jika menggunakan parameter sumbu x,y,z , nilai z selalu

menggunakan nilai 0.

C. TUGAS ASISTENSI

1. Tugas Asistensi 1

Source Code

(16)

void drawQuads(){ glBegin(GL_QUADS); glVertex2f(-45.0,-10.0); glVertex2f (45.0,-10.0); glVertex2d (45.0,30.0); glVertex2d (-45.0,30.0); glEnd (); }

void drawQuads2(){ glBegin(GL_QUADS); glVertex2f(150.0,180.0); glVertex2f (180.0,180.0); glVertex2d (180.0,240.0); glVertex2d (150.0,240.0); glEnd (); }

void render(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1,0,0); drawQuads (); glTranslatef(0,-40,0); glColor3f(1,1,1); drawQuads (); glColor3f(1,0,0); drawQuads2 (); glRotatef(180,0,-1,0); glColor3f(1,1,1); drawQuads2 (); glTranslatef(30,0,0); glColor3f(1,0,0); drawQuads2 (); glRotatef(180,0,-1,0); glColor3f(1,1,1); drawQuads2 (); glTranslatef(120,-100,0); glColor3f(1,0,0); drawQuads (); glTranslatef (-90,0,0); glColor3f(1,0,0); drawQuads (); glTranslatef (-90,0,0); glColor3f(1,0,0); drawQuads (); glTranslatef(20,-40,0); glColor3f(1,1,1); drawQuads (); glTranslatef(120,0,0); glColor3f(1,1,1); drawQuads (); glFlush (); }

(17)

-

Pada program diatas menggunakan fungsi GL_QUADS untuk membangun objek segi

empat. Saya menggunakan 2 fungsi drawQuads, yang akan membangun 2 buah objek

dengan warna berbeda. Menggunakan fungsi Translatef juga untuk posisi objek yang

beragam. Menggunakan Rotatef untuk mengubah posisi objek. Menggunakan

glColor3f untuk pewarnaan objek.

2. Tugas Asistensi 2

Source Code

#include<stdlib.h>

#include<glut.h>

int x,y;

void guide() { glBegin (GL_QUADS); glVertex2i(-1, 250); //a glVertex2i(1, 250); //b glVertex2i(1, -250); //c glVertex2i(-1, -250); //d glVertex2i(250, -1); //a glVertex2i(250, 1); //b glVertex2i(-250, 1); //c glVertex2i(-250, -1); //d glEnd(); }

void kotak() { glBegin (GL_QUADS); glVertex2i(-20, 240); //a glVertex2i(20, 240); //b glVertex2i(20, 200); //c glVertex2i(-20, 200); //d glEnd(); }

if (x<200) {

x += 10;

glTranslatef (10,-10,0);

}

elseif (x <400) {

x += 10;

glTranslatef (-10,-10,0);

}

elseif (x < 600) {

x += 10; glTranslatef (-10,10,0);

}

elseif (x < 800) {

x += 10; glTranslatef (10,10,0);

}

elseif (x = 790) { x=0; } glutPostRedisplay(); glutTimerFunc(500,timer,0); }

void render() { glClear(GL_COLOR_BUFFER_BI T); glPushMatrix(); //guide(); glTranslatef(10,-10,0); kotak(); glPopMatrix(); glFlush(); }

(18)

{

glutInitDisplayMode(GLUT_DE PTH | GLUT_SINGLE |

GLUT_RGBA);

glutInitWindowPosition(150, 150);

glutInitWindowSize(640, 480);

glutCreateWindow("ASISTENSI 2)");

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

glutDisplayFunc(render); glutTimerFunc(500,timer,0); glutMainLoop();

}

Hasil

Penjelasan :

(19)

3. Tugas Asistensi 3

Source Code

#include<stdlib.h>

#include<glut.h>

#include<math.h>

#define PI 3.1415926535

float sudut = 0; int i,n;

void lingkaran(int radius, int jumlah_titik, int xtengah, int

ytengah) { glBegin(GL_POLYGON); for (i=0;i<=360;i++) { float sudut=i*(2*PI/jumlah_titik); float x=xtengah+radius*cos(sudut); float y=ytengah+radius*sin(sudut); glVertex2f(x,y);

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

//Jarum kecil

void kecil() { glBegin(GL_QUADS); glColor3f(1.,1.,0.);//kuning glVertex2f(5.,125.); glVertex2f(5.,0.); glVertex2f(-5.,0.); glVertex2f(-5.,125.); glEnd(); } //Jarum panjang

void panjang() { glBegin(GL_QUADS); glColor3f(1.,1.,1.);//putih glVertex2f(5.,175.); glVertex2f(5.,0.); glVertex2f(-5.,0.); glVertex2f(-5.,175.); glEnd(); }

void detik() { glBegin(GL_QUADS); glColor3f(0.,1.,0.); glVertex2f(5.,200.); glVertex2f(5.,0.); glVertex2f(-5.,0.); glVertex2f(-5.,200.); glEnd(); } //titik jam

void angka(float jarak, float x, float y)

{

glPointSize(10); glBegin(GL_POINTS); glColor3f(0.,0.,0.);

for(n=0;n<360;n+=90)

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

glEnd(); }

// titik menit

void menit(float jarak, float x, float y)

{

glPointSize(4); glBegin(GL_POINTS); glColor3f(0.,0.,0.);

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

//warna lingkaran

(20)

lingkaran(260,100,0,0); angka(230.,0.,0.); menit(230.,0.,0.); glPopMatrix();

//panah detik

glPushMatrix();

glRotatef(sudut,0,0,1); detik();

glPopMatrix();

//panah menit

glPushMatrix();

glRotatef(sudut/60,0,0,1); panjang();

glPopMatrix();

//panah jam

glPushMatrix();

glRotatef(sudut/720,0,0,1); kecil();

glPopMatrix(); glColor3f(0,0,0);

lingkaran(10,50,0,1); glFlush(); }

void timer(int value) {

sudut-=6;

{

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(150, 150);

glutCreateWindow("ASISTENSI 3"); gluOrtho2D(-640.,640.,-320.,320.);

}

Hasil

Penjelasan

(21)

bergerak/berputar secara nyata. Pendeklarasian pembentukan panah jam dari jam

menit, detik dengan warna berbeda dan panjang yang berbeda. Menggunakan fungsi

timer untuk pergerakan panah. Mendeklarasikan titik titik yang digunakan sebagai

titik menit dari jam analog.

4. Tugas Asistensi 4

Source Code

#include<glut.h>

void bintang() { glBegin(GL_POLYGON); glVertex2f(0,0);//a glVertex2f(50,150);//b glVertex2f(100,0);//c glVertex2f(250,0);//d glVertex2f(130,-100);//e glVertex2f(200,-250);//f glVertex2f(50,-150);//g glVertex2f(-100,-250);//h glVertex2f(-25,-100);//i

glVertex2f(-175,0); //j

glEnd(); glFlush(); }

void renderScene(void) { glClear(GL_COLOR_BUFFER_BIT) ; //garis diagonal glPushMatrix(); glRotatef(135,0,0,1); glColor3f(0,0.6,1); glPopMatrix(); //kumpulan bintang glPushMatrix(); glTranslatef(-100,-190,0); glRotatef(180,0,0,1); glScalef(1.4,1.4,0);

(22)

bintang(); glPopMatrix();

glPushMatrix();

glTranslatef(100,90,0); glRotatef(90,30,0,1); glScalef(0.2,-0.5,0); glColor3f(1,1,0); bintang(); glPopMatrix();

glPushMatrix();

glTranslatef(-300,-90,0); glRotatef(180,0,0,1); glScalef(0.3,0.3,0); glColor3f(1.,0.,0.); bintang();

}

{

glutInitDisplayMode(GLUT_DEPT H | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(150, 150);

glutCreateWindow("ASISTENSI 4");

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

glutDisplayFunc(renderScene); glutMainLoop();

(23)

Hasil

Penjelasan

-

Program diatas merupakan program yang menampilkan 10 bintang dengan

menggunakan fungsi Translatef, Rotatef, skala yang dikombinasikan pada program

ini. Dengan ukuran yang beragam dan warna ynag berbeda , dapat dibedakan mana

bintang yang menggunakan fungsi Translatef , Rotatef dan skala. untuk pembuatan

satu bintang menerapkan ketiga fungsi tersebut, sehingga skala , rotasi dan translasi

per satu bintang berbeda dengan bintang yang lainnya. Menggunakan fungsi

glPlushMatrix dan glPopMatrix.

D. KESIMPULAN



Fungsi Translatef digunakan untuk merubah posisi objek.



Fungsi Translatef menggunakan parameter (x,y,z).



Fungsi Rotated digunakan untuk merotasi/memutar objek dengan besarnya sudut

yang diinginkan. Menggunakan parameter (besar sudut, x, y,z).



Fungsi Scalef digunakan untuk merubah ukuran objek, memperkecil maupun

memperbesar.



Penginisialisasian penggunaan timer untuk pergerakan objek menggunakan fungsi

glutPostRedisplay, glutTimerFunc(unsigned millis, Glut function(callback), int

value).



Fungsi dari glutPostRedisplay adalah untuk mengirimkan perintah mengaktifkan

display secara berkala (looping).

(24)



Asisten Praktikum. 2015.

Modul 3 Transformasi dan Animasi Objek 2D.

Malang :