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

PRODI PENDIDIKAN TEKNIK INFORMATIKA

MARET 2015

(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(100,50); glVertex2d(100,100); glVertex2d(100,100); glVertex2d(50,100); glVertex2d(50,100); glVertex2d(50,50); glVertex2d(-50,150); glVertex2d(-50,200); glVertex2d(-50,200); glVertex2d(-100,200);

glVertex2d(-100,200); glVertex2d(-100,150); 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();

}

Hasil

(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

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

void drawQuad() {

glClear(GL_COLOR_BUFFER_BI T);

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_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

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

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glVertex2f(105.,50.);

glVertex2f(105.,0.);

glEnd(); }

void render(){

glClear(GL_COLOR_BUFFER_BI T);

glTranslatef(-10,0,0);

glColor3f(1,0,0);

drawQuad();

glTranslatef(0,-50,0);

glColor3f(1,1,1);

drawQuad();

glFlush(); }

(5)

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(render); glutMainLoop();

}

Hasil

Penjelasan :

-

Program diatas adalah program untuk membentuk sebuah bendera dengan

menggunakan titik koordinat

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glVertex2f(105.,50.);

glVertex2f(105.,0.);

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)

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

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glVertex2f(105.,50.);

glVertex2f(105.,0.);

glEnd(); }

void render(){

glClear(GL_COLOR_BUFFER_BI T);

glRotatef(45,1,0,0);

glColor3f(1,0,0);

drawQuad();

glRotatef(45,1,0,0);

glColor3f(1,1,1);

drawQuad();

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(render); glutMainLoop();

}

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

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

void drawQuad() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glVertex2f(105.,50.);

glVertex2f(105.,0.);

glEnd(); }

void render(){

glClear(GL_COLOR_BUFFER_BI T);

glScalef(45,20,0);

glColor3f(1,0,0);

drawQuad();

glScalef(45,20,0);

glColor3f(1,1,1);

drawQuad();

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(render); glutMainLoop();

}

Hasil

Penjelasan :

Program diatas menggunakan fungsi Scalef untuk mengubah skala bangun. Pada

program diatas menggunakan skala x = 45, y=20, z=20

sesuai dengan koordinat

x,y,dan z. Sehingga hasilnya akan tampak seperti gambar diatas.

(8)

2. ANIMASI OBJECT 2D

1)

Rotasi terhadap sumbu z unclockwise

Source Code

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

void Persegi() {

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,75.);

glVertex2f(105.,75.);

glVertex2f(105.,0.);

glEnd(); }

void display(void){

glClear(GL_COLOR_BUFFER_BI T);

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

Persegi();

glRotatef(45,10,2,10);

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

Persegi();

glFlush(); }

void timer (int value)

{

glutPostRedisplay();

glutTimerFunc(60,timer,0);

}

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

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

glutInitWindowPosition(100 ,100);

glutInitWindowSize(640,480 );

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

glutPostRedisplay();

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

}

Hasil

(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

#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,1,0);

Persegi();

/* ... */

glFlush(); }

void timer (int value) {

glutPostRedisplay();

glutTimerFunc(200,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(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();

}

void timer (int value) {

glutPostRedisplay();

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(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; }

yang artinya, jika nilai xlebih kecil dari 200 maka x ditambah dengan 4, yang

digunakan untuk perpindahan objek hingga akhir windows(fungsinya dalam mengatur

jarak jalan segiempat tersebut). Sedangkan untuk menampilkan fungsi looping

(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

#include <stdlib.h> //Load library

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

int y=0;

void Draw (void) {

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

glFlush(); }

void renderScene () {

glClear(GL_COLOR_BUFFER_BIT); glPushMatrix();

if(y>-200) {

y+=4;

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

}

glPopMatrix(); glFlush();

}

void timer (int value) {

glutPostRedisplay();

glutTimerFunc(150,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(renderScene); glutTimerFunc(150,timer,0); glutMainLoop();

}

Hasil

(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

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

int z=1;

void Draw (void) {

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

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

glFlush(); }

void renderScene () {

glClear(GL_COLOR_BUFFER_BIT); glPushMatrix();

if(z<200) {

(15)

z+=4;

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

}

glPopMatrix(); glFlush();

}

void timer (int value) {

glutPostRedisplay();

glutTimerFunc(150,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(renderScene); glutTimerFunc(150,timer,0); glutMainLoop();

}

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

void main(int argc,char **argv){ glutInit(&argc,argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |GLUT_RGBA); glutInitWindowPosition(150,250); glutInitWindowSize(640,480); glutCreateWindow("ASISTENSI 1"); gluOrtho2D(-640,640,-480,480); glutDisplayFunc(render); glutMainLoop(); }

Hasil

Penjelasan

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

void timer (int value) {

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

void main (int argc, char **argv)

(18)

{

glutInit(&argc, argv); 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 :

-

Program diatas menggunakan fungsi GL_QUADS untuk membentuk guide arah objek

bergerak. Menggunakan fungsi kotak untuk membentuk objeknya. Menggunakan

fungsi timer dengan perkondisian jika nilai x kurang dari 200 maka x ditambah 10,

hal ini yang mengakibatkan trerjadinya pergerakan objek. Menggunakan fungsi

Translatef juga. Kemudian perkondisian selanjutnya dideklarasikan jika x kurang dari

400 maka x ditambah 10 dengan menerapkan fungsi glTranslatef (-10,10,0). Kondisi

selanjutnya jika kurang dari 600 maka sama menggunakan fungsi glTranslatef pada

kondisi x<400. Untuk kondisi selanjutnya juga sama pendeklarasiannya, hingga jika

nilai x = 790 maka x=0. Menggunakan timer 500 untuk kecepatan geraknya.

(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

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

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

glutPostRedisplay();

glutTimerFunc(1000,timer,0); }

void main (int argc, char **argv)

{

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

glutInitWindowPosition(150, 150);

glutInitWindowSize(640, 480);

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

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

}

Hasil

Penjelasan

-

Pada program diatas menngunakan fungsi matematika untuk perhitungan arah jam.

Terdapat banyak fungsi yang menggambarkan objek-objek yang akan dibentuk untuk

menyusun jam analog ini. Menggunakan perulangan for untuk membuat jam

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

glColor3f(0.987,0.123,0.567); // pink bintang(); glPopMatrix(); glFlush(); glPushMatrix(); glScalef(1.1,1.1,0); glTranslatef(200,300,0); glColor3f(1,1,0); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(45,0,0,1); glScalef(0.1,0.1,0); glTranslatef(3000,20,0); glColor3f(1.,0.,1.); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(60,0,0,1); glScalef(0.3,0.3,0); glTranslatef(999,99,0); glColor3f(0.,1.,0.); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(10,0,0,1); glScalef(-0.5,-0.5,0); glTranslatef(444,333,0); glColor3f(0,0,1); bintang(); glPopMatrix(); glPushMatrix(); glTranslatef(-320,-320,0); glRotatef(-30,0,0,1); glScalef(0.6,0.6,0); glColor3f(0,1,1); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(90,0,0,1); glScalef(0.1212,0.21,0); glTranslatef(-999,120,0); glColor3f(0,1,0); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(180,1,1,0); glScalef(-0.1,-0.1,0); glTranslatef(10,2222,0); glColor3f(0.,0.,1.); bintang(); glPopMatrix(); glPushMatrix(); glRotatef(90,0,0,1); glScalef(0.4,-0.4,0); glTranslatef(100,90,0); glColor3f(0.,1.,1.);

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

glPopMatrix(); glFlush();

}

void main (int argc, char **argv)

{

glutInit(&argc, argv);

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

glutInitWindowSize(640, 480);

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 :

Universitas Negeri Malang.

(1)

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

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

(2)

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;

glutPostRedisplay();

glutTimerFunc(1000,timer,0); }

void main (int argc, char

**argv) {

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

glutInitWindowPosition(150, 150);

glutInitWindowSize(640, 480);

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

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

}

Hasil

Penjelasan

-

Pada program diatas menngunakan fungsi matematika untuk perhitungan arah jam.

Terdapat banyak fungsi yang menggambarkan objek-objek yang akan dibentuk untuk

menyusun jam analog ini. Menggunakan perulangan for untuk membuat jam

(3)

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>

glVertex2f(-175,0); //j

glEnd(); glFlush(); }

(4)

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

glPopMatrix(); glFlush();

}

void main (int argc, char

**argv) {

glutInit(&argc, argv);

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

glutInitWindowSize(640, 480);

glutCreateWindow("ASISTENSI 4");

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

glutDisplayFunc(renderScene); glutMainLoop();

(5)