LAPORAN GRAFKOM 2 PRIMITIVE OBJECT and

(1)

LAPORAN PRAKTIKUM MODUL 2

GRAFIKA KOMPUTER

PRIMITIVE OBJECT dan OBJEK 2 DIMENSI

Disusun Oleh:

Ananda Putri Syaviri (130533608243)

PTI OFF B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIKINFORMATIKA

Februari-2015

MODUL 2

(2)

A. KOMPETENSI DASAR

 Memahami jenis-jenis primitive objects.

 Memahami dan dapat membuat objek primitif.

 Memahami penerapan Objek primitif menjadi bangun 2 dimensi dasar.

 Memahami dan dapat membuat fungsi untuk bangun 2 dimensi dasar.

B. PETUNJUK

C. DASAR TEORI

1. Sistem koordonat OpenGL

2. Fungsi gluOrtho2D(left,right,bottom,top)-> gluOrtho2D(-320,320,-240,240)  Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan.

 Pahami Tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.

 Kerjakan tugas-tugas dengan baik, sabar, dan jujur.

(3)

3. Fungsi dasar menggambar titik adalah glVertex?() a. glVertex2i(x,y)

Menggambar titik pada koordinat x dan y, dengan nilai satuan berupa integer. Contoh glVertex2i(10,10);

b. glVertex2f(x,y)

Menggambar titik pada koordinat x dan y, dengan nilai satuan berupa float. Contoh glVertex2f(10.0,10.0);

c. glVertex2d(x,y)

Menggambar titik pada koordinat x dan y, dengan nilai satuan berupa double. Contoh glVertex2d(10.0,10.0);

4. Objek primitif

a. Titik : GL_POINTS b. Garis : GL_LINES

c. Poliline : GL_LINE_STRIP d. Poligon (no fill) : GL_LINE_LOOP e. Triangle : GL_TRIANGLES

Triangle atau segitiga adalah tiga buah titik yang terhubung menjadi suatu segitiga dengan blok di tengahnya.

f. Quads : GL_QUADS

(4)

g. Polygon : GL_POLYGON

Polygon merupakan suatu fungsi yang mirip dengan polyline, tetapi menghasilkan kurva tertutup dengan blok warna (fill).

h. Color

Untuk memberi warna pada objek, seperti titik atau garis, dapat dilakukan dengan menggunakan fungsi: glColor3f(red,green,blue); Di mana red, green, blue berada pada 0 sampai dengan 1, yang menunjukkan skala pencerahan dari masing-masing skala.

C. Latihan

1. PRIMITIVE OBJECT

1) Berikut adalah script dasar pada fungsi Main() untuk kegiatan praktikum primitive objek

Sintaks :

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

void renderScene(void) {

glClear(GL_COLOR_BUFFER_BIT); glEnd();

glFlush(); }

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

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);

(5)

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

glutMainLoop(); }

Screen shoot :

Penjelasan :

- Program diatas menggunakan ukuran windows sebesar 640, 480 dan menggunakan ukuran posisi windows sebesar 100,100. Kemudian program diatas menggunakan fungsi gluOrtho ynag berfungsi untuk mendefinisikan besarnya system koordinta yang digunakan pada program diatas. Kemudian menggunakan fungsi GL_COLOR_BUFFER_BIT yang berfungsi untuk membuat tampilan windows berwarna hitam, sehingga objek yang dibuat akan terlihat. Karena objek yang dibuat standarnya berwarna putih, sehingga jika tidak menggunakan fungsi ini maka akan menyatu dengan background windows yang berwarna putih. Kemudian pada program diatas tidak terlihat apa apa karena objek berukuran sangat kecil, sehingga tidak tampak pada windows. Karena 1px sangatlat kecil.

2) Buatlah project baru pada Visual Studio dengan nama prak1-Points. Dan tambahkan fungsi callback untuk glutDisplayFunc(drawDot); . Tampilkan hasilnya berupa screenshot. Jelaskan Proses Rendering.

Sintaks :

(6)

void drawDot() {

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POINTS);

glVertex2i(50,0); glVertex2i(50,50); glVertex2i(0,0); glEnd();

glFlush(); }

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240.); glutDisplayFunc(drawDot);

glutMainLoop(); }

Screenshoot :

Penjelasan :

- Program diatas menggunakan points untuk membuat sebuah objek. Dengan menggunakan 3 vertex2i maka dapat menampilkan 3 titik dengan koordinat x,y sebagai parameter dari masing- masing vertex2i yang dibangun. Program ini menggunakan pengaturan ukuran posisi windows dan ukuran size windows yang sama dengan latihan1.

3) Buatlah project baru pada Visual Studio dengan nama prak1-PointsSize. Dan tambahkan fungsi glPointSize(int size); untuk mengubah ukuran objek Points (perhatian : ganti int size dengan nilai int yang diinginkan, sehingga fungsi menjadi glPointSize(5);).

(7)

Sintaks:

void drawDot() {

glPointSize(5);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POINTS);

glVertex2i(50,0); glPointSize(5); glVertex2i(50,50); glVertex2i(0,0); glEnd();

glFlush(); }

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(100,100); glutInitWindowSize(640,480);

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240.); glutDisplayFunc(drawDot);

glutMainLoop(); }

(8)

Penjelasan:

- Program diatas menggunakan fungsi glPointSize untuk mengubah ketebalan titik yang dibuat, dengan menggunakan parameter yang diinginkan. Pada program ini menggunkan parameter 5 sehingga tampak hasilnya seperti pada screenshoot diatas. Semakin besar nilai parameter maka semakin tebal titik yang dihasilkan. Program ini sama seperti program latihan 2 hanya saja mempertebal titik yang dibuat.

4) Buatlah project baru pada Visual Studio dengan nama prak1-Lines. Dan tambahkan fungsi callback untuk glutDisplayFunc(drawLine); . Tampilkan hasilnya berupa screenshot. Dan Jelaskan Proses Rendering untuk vertexnya.

Sintaks :

void drawLine() {

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINES);

glVertex2d(0,0); glVertex2d(150,150); glEnd();

glFlush(); }

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240.); glutDisplayFunc(drawLine);

glutMainLoop(); }

(9)

Penjelasan:

- Pada program ini menggunakan fungsi drawLine untuk mendeklarasikan titik koordinat yang digunakan dengan fungsi GL_LINES. Yang terdiri dari 2 vertex, 2 sistem koordinat, untuk koordinat pertama berada diantara titik 0 dan 0 , sehingga titik tersebut berada tepat ditengah koordinat, dan titik 150,150 sehingga titik yang kedua berada di kanan atas koordinta, kemudian karena menggunakan GL_LINES , maka akan secara otomatis membentuk sebuah garis yang menghubungkan antara 2 titik.

5) Buatlah project baru pada Visual Studio dengan nama prak1-LineWidth. Dan tambahkan fungsi glLineWidth(int size); untuk mengubah ukuran objek Points. Pindah-pindahkan glLineWidth pada a,b, dan c. Sajikan Screen shot hasil a,b,c dan simpulkan.

Sintaks :

void drawLine() {

glLineWidth(10);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINES);

glVertex2d(0,0); glVertex2d(150,150); glEnd();

(10)

}

glutMainLoop(); }

Screenshoot:

Penjelasan:

- Program diatas sama seperti program sebelumnya, hanya saja terdapat perbedaan , yaiutu penggunaan fungsi glLineWidth dengan nilai parameter yang dapat ditentukan sesuai keinginan, yang berfungsi mengubaha ketebalan garis. Tidak hanya titik, garis juga dapat diubah ketebalannya dengan fungsi LineWidth.

6) Buatlah project baru pada Visual Studio dengan nama prak1-LineStrip. Buatlah agar hasil yang ditampilkan membentuk bangun simetris terbuka. Sajikan screenshotnya. Dan Jelaskan proses rendering vertexnya.

Sintaks:

void drawPoliline() {

(11)

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINE_STRIP);

glVertex2d(150,150); glVertex2d(-150,150); glLineWidth(10); glVertex2d(-150,-150); glVertex2d(150,-150); glLineWidth(10);

glEnd(); glFlush(); }

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240.); glutDisplayFunc(drawPoliline);

glutMainLoop(); }

Screenshoot:

Penjelasan :

(12)

7) Buatlah project baru pada Visual Studio dengan nama prak1-Poligon. Buatlah agar hasil yang ditampilkan membentuk bangun simetris. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

void drawLine()

(13)

Screenshoot:

Penjelasan:

- Program diatas menggunakan fungsi GL_LINE_LOOP yang berfungsi menghubungkan garis secara simetris. Di program ini menggunakan 8 vertex yang saling menghubungkan antara titik satu dan yang lainnya. Kemudian dengan adanya fungsi gl_line_loop maka garis simetris dalam kotak dihubungkan. Sama seperti program yang sebelumnya , pengaturan windows dan posisi windows disamakan , kemudian diberikan ketebalan garis juga , dengan nilai parameter 10.

8) Buatlah project baru pada Visual Studio dengan nama prak1-Triangle. Buatlah agar hasil yang ditampilkan membentuk 2 segitiga yang terpisah. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

glBegin(GL_TRIANGLES); glVertex2d(x0,y0); glVertex2d(x1,y1); glVertex2d(x2,y2); glVertex2d(x3,y3); glVertex2d(x4,y4); glVertex2d(x5,y5); glEnd();

Sintaks:

void drawLine() {

glLineWidth(10);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES);

glVertex2d(0,0); // segitiga atas

(14)

glLineWidth(10); glVertex2d(90,90); glVertex2d(-90,90);

glVertex2d(100,-100); // segitiga bawah

glVertex2d(0,-100); glLineWidth(10); glVertex2d(100,0); glVertex2d(0,-100); glLineWidth(10); glVertex2d(100,-100); glVertex2d(100,0); glLineWidth(10);

glutMainLoop(); }

ScreenShoot:

Penjelasan:

(15)

segitiga dapat terbentuk. Untuk segitiga yang dibawah menggunakan koordinat 100,-100 ; 0,-100 ; 100,0 ; 0,-100 ; 100,-100 ; 100,0. Untuk ketebalan yang digunakan adalah 10, karena menggunakan fungsi triangle sehingga ketebalan tersebut akan memenuhi bidang segitiga ynag telah dibuat.

9) Buatlah project baru pada Visual Studio dengan nama prak1-TriangleStrip. Buatlah agar hasil yang ditampilkan membentuk Bangun Bebas. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

glBegin(GL_TRIANGLE_STRIP);

void drawLine() {

glLineWidth(10);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES);

glVertex2d(0,0); // segitiga atas

glVertex2d(90,90);

glVertex2d(100,-100); // segitiga bawah

glVertex2d(0,-100);

(16)

glutMainLoop(); }

ScreenShoot:

Penjelasan:

- Program diatas menggunakan fungsi triangle strip , yang fungsinya membentuk bangun lain yang terdiri dari beberapa segitiga. Seperti pada contoh diatas, tetap menggunakan koordinat seperti pada program sebelumnya, kemudian secara otomatis dengan fungsi triangle strip maka terbentuklah trapesium sejajar yang terdiri dari 2 segitiga.

10) Buatlah project baru pada Visual Studio dengan nama prak1-TriangleFan. Buatlah agar hasil yang ditampilkan membentuk Bangun Bebas. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

glBegin(GL_TRIANGLE_FAN); glVertex2d(x0,y0);

glVertex2d(x1,y1); glVertex2d(x2,y2); glVertex2d(x3,y3); glVertex2d(x4,y4); glVertex2d(x5,y5); glEnd();

(17)

void drawLine() {

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLE_FAN);

glVertex2d(0,0); glVertex2d(90,90); glVertex2d(90,0); glVertex2d(-90,90); glVertex2d(0,0); glVertex2d(90,-90);

glutMainLoop(); }

Screenshoot:

Penjelasan:

(18)

diinginkan. Tidak hanya dapat berbentuk seperti diatas, tetapi juga dapat dibentuk kebawah tentu dengan koordinta yang tepat agar dapat terbentuk seperti baling kipas. Karena program diatas menggunakan koordinat pada kuadran 1 dan 2 maka balik kipas akan sejajar. Jika koordinat yang digunakan pada kuadarn 1-4, 1-3, 2-3, 2-4 , maka baling yang dihasilkan tidaklah sejajar tetapi bersebrangan atau bertolak belakang.

11) Buatlah project baru pada Visual Studio dengan nama prak1-Quads. Buatlah agar hasil yang ditampilkan membentuk 2 Bangun Segi Empat Terpisah. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

glBegin(GL_QUADS);

(19)

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

glFlush(); }

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

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240); membentuk 2 buah kotak seperti pada gambar.

glVertex2d(50,50);

glVertex2d(100,50); // segitiga atas glVertex2d(100,50);

glVertex2d(-50,150); //segitiga bawah glVertex2d(-50,200);

12) Buatlah project baru pada Visual Studio dengan nama prak1-QuadStrip. Buatlah agar hasil yang ditampilkan membentuk Bangun Bebas. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya.

(20)

glVertex2d(x0,y0); glVertex2d(x1,y1); glVertex2d(x2,y2); glVertex2d(x3,y3); glVertex2d(x4,y4); glVertex2d(x5,y5); glEnd();

Sintaks:

void drawPoliline() { glLineWidth(10);

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUAD_STRIP); glVertex2d(50,50);

glVertex2d(100,50);

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

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

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

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240); glutDisplayFunc(drawPoliline);

glutMainLoop(); }

(21)

Penjelasan:

- Program diatas menggunakan fungsi quads_strip untuk dapat membuat kotak namun dengan bentuk yang bebas, yang artinya bentuk dasar kotak namun dengan koordinat yang ditentukan dapat membentuk gambar lain , seperti pada gambar diatas dapat membentuk sebuah layang- layang dengan koordinat yang telah ditentukan sesuai keinginan, tidak hanya layang- layang, namun bentuk lainnya dapat dibentuk tergantung dari koordinat yang dipakai. Tidak hanya menghubungkan garis secara horizontal maupun vertical , tetapi juga menghubungkan secara diagonal.

13) Buatlah project baru pada Visual Studio dengan nama prak1-Poligon. Buatlah agar hasil yang ditampilkan membentuk Bangun Bebas. Sajikan screenshotnya. Dan jelaskan proses rendering vertexnya

glBegin(GL_POLYGON); glVertex2d(x0,y0); glVertex2d(x1,y1); glVertex2d(x2,y2); glVertex2d(x3,y3); glVertex2d(x4,y4); glVertex2d(x5,y5); glVertex2d(x6,y6); glVertex2d(x7,y7); glEnd();

Sintaks:

void drawPoliline() { glLineWidth(10);

(22)

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

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

glFlush(); }

glutCreateWindow("Praktikum Modul 2"); gluOrtho2D(-320.,320.,-240.,240); glutDisplayFunc(drawPoliline);

glutMainLoop(); }

Screenshoot:

(23)

- Program diatas menggunakan fungsi polygon. Dari koordinat yang digunakan untuk program diatas dapat membentuk sebuah layang-layang dan kotak dengan 8 koordinat(16 vetex).

glVertex2d(50,50); // kotak glVertex2d(100,50); glVertex2d(100,50; glVertex2d(100,100); glVertex2d(100,100); glVertex2d(50,100); glVertex2d(50,100); glVertex2d(50,50);

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

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

2. OBJECT 2D

Untuk membangun sebuah bangun 2 Dimensi dengan efisien, maka diperlukan sebuah fungsi yang memiliki parameter tertentu untuk membangun bangun tersebut. Perhatikan kode program bangun 2D dengan menggunakan fungsi berikut ini:

(24)

Sintaks:

void length(int posx, int posy, int als, int tgg) {

glBegin(GL_QUADS); glVertex2i(posx, posy); glVertex2i(posx+als , posy); glVertex2i(posx+als, posy-tgg); glVertex2i(posx, posy-tgg); glEnd();

}

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

length(0, 0, -250, 100); glColor3f(0., 1., 1.); length(25, 90, -150, -50); glColor3f(1., 1., 0.); length(50, 100, 150, 80); glFlush();

}

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(150, 150);

glutInitWindowSize(640, 440);

glutCreateWindow("Latihan Dua Dimensi"); gluOrtho2D(-640.0, 640.0, -320.0, 320.0); glutDisplayFunc(renderScene);

glutMainLoop(); }

(25)

Penjelasan :

- Pada program diatas saya membuat 3 buah persegi panjang dengan system koordinat yang berbeda. Dengan menggunakan fungsi posx posy, yang dideklarasikan pada fungsi length beserta alas dan tinggi sebagai panjang sisi kanan-kiri, atas-bawah. Kemudian pada fungsi renderScene, dideklarasikan warna yang digunakan pada bagun dua dimensi beserta titik koordinat untuk membangun dua dimensi tersebut. Untuk bangun pertama dibentuk pada koordinat x= 0 , y=0, alas=-250, tinggi=100 dengan warna 001 yaitu biru. Untuk bangun kedua dengan koordinat x=25, y=90, alas=-150, tinggi=-50 dengan warna 011 yaitu cyan (toska) dan untuk bangun ketiga dibentuk pada koordinat x=50, y=100, alas=150, tinggi= 80 degan warna 110 yaitu kuning. Dengan gluOrtho 2D ( system koordinat ) yang digunakan yaitu -640,640,-320,320 dan ukuran windows 640,440 posisi windows 150,150.

b. Buatlah project baru pada Visual Studio. Buatlah agar tampilan obyek 2 dimensi berbentuk Trapesium siku seperti di bawah ini gunakan primitif dan struktur vertex yang paling efisien. Tulis program dan Tampilkan hasilnya berupa screenshot yang berupa tampilan 3 bangun dengan posisi, dimensi, dan warna yang berbeda.

Sintaks:

(26)

{

glBegin(GL_QUADS); glVertex2i(posx, posy);

glVertex2i(posx + alas1, posy);

glVertex2i(posx + alas1 - alass/3, posy + tinggi); glVertex2i(posx+alass-alas1, posy+tinggi); glEnd();

}

trapesium(0, 0, 130, 130, 50); glColor3f(0., 1., 0.);

trapesium(-150, -90, 100, 100, 75); glColor3f(1., 0., 1.);

trapesium(50, 75, 80,80, 40); glFlush();

}

glutCreateWindow("LATIHAN DUA DIMENSI"); gluOrtho2D(-640.0, 640.0, -320.0, 320.0); glutDisplayFunc(renderScene);

glutMainLoop(); }

Screenshoot:

(27)

- Pada program diatas , saya membuat 3 buah bangun trapezium denga 3 variasi warna berbeda , diantaranya hijau, biru dan magenta(pink). Sama seperi pada bangun persegi panjang menggunakan fungsi posx, posy, namun pendeklarasian rumus vertex berbeda dengan persegi panjang, rumus yang digunakan berbeda, sesuai dengan rumus hitung trapezium. Pada fungsi trapezium menggunakan posx, posy sebagai x dan y, kemudian terdapat alas1, alas (alas2) dan tinggi. Untuk bangun pertama dibentuk pada koordinat x=0, y=0, alas 1=130, alas2(alas)=130, dan tinggi 50 dengan warna 001 yaitu biru. Bangun kedua dibentuk pada koordinat x=-150, y=-90, alas1=100, alas(alas2)=100 dan tinggi 75 dengan warna 010 yaitu hijau. Dan bangun ketiga dibentuk pada koordinat x=50, y=75, alas1=80, alas(alas2)=80 dan tinggi 40 dengan warna 101 yaitu magenta.

c. Buatlah project baru pada Visual Studio. Buatlah agar tampilan obyek 2 dimensi berbentuk Trapesium sama kaki seperti di bawah ini, gunakan primitif dan struktur vertex yang paling efisien. Tulis program dan Tampilkan hasilnya berupa screenshot yang berupa tampilan 3 bangun dengan posisi, dimensi, dan warna yang berbeda.

Sintaks:

void trapesium1(int posx, int posy, int alas, int alas2, int tinggi) {

glBegin(GL_QUADS); glVertex2i(posx, posy);

glVertex2i(posx + alas2, posy);

glVertex2i(posx + alas2 - alas/3, posy + tinggi); glVertex2i(posx-alas2/2+alas, posy+tinggi); glColor3f(0., 1., 0.);

trapesium1(75, -150, 120, 170, 100); glColor3f(0., 0., 1.);

trapesium1(-170, -140, 100, 120, 90); glColor3f(1., 0., 0.);

trapesium1(-140, 70, 70,100, 50); glFlush();

}

(28)

glutMainLoop(); }

Screenshoot:

Penjelasan:

- Pada program diatas saya membuat 3 buah bangun trapezium sama kaki dengan 3 warna varian berbeda dan koordinat yang berbeda. Sama dengan program sebelumnya yaitu trapesium sejajar, namun untuk pendeklarasian fungsi posx, posy berbeda sesuai dengan rumus perhitungan trapesium sama kaki. Perbedaannya pada perhitungan vertex terakhir untuk rumus pembentukan trapesium sama kaki. Pada fungsi renderscene dideklarasikan koordinat dan warna yang membentuk trapesium sama kaki. Untuk bangun pertama dibentuk pada koordinta x=75, y=-150, alas=120, alas2=170 dan tinggi 100 dengan warna 010 yaitu hijau. Untuk bangun kedua dibentuk pada koordinat x=-170, y=-140, alas=100, alas2=120 dan tinggi= 90 denan warna 001 yaitu biru. Dan untuk bangun ketida dibentuk pada koordinat x=-140, y=70, alas= 70, alas2=100 dan tinggi 50 dengan warna 100 yaitu merah.

(29)

Sintaks :

void jg(int posx, int posy, float alas, int tinggi) {

glBegin(GL_QUADS); glVertex2i(posx, posy); glVertex2i(posx+alas , posy);

glVertex2i(posx+alas-alas/3, posy-tinggi); glVertex2i(posx-alas/3, posy-tinggi); glEnd();

}

jg(-300, 150, 130, 85); glColor3f(0., 0., 1.); jg(50, 150, 120, 70); glColor3f(0, 1., 1.); jg(0, 0, 250, 150); glFlush();

}

glutMainLoop(); }

(30)

Penjelasan:

- Pada program diatas , menggunakan fungsi yang berbeda tentunya dengan program sebelumnya, sesuai dengan rumus perhitungan jajar genjang. Untuk pendeklarasian system koordinat yang digunakan untuk membangun gambar 2 dimensi ini terdapat pada fungsi renderScene. Untuk bangun pertama dibentuk dalam koordinat x=-300, y=150, alas= 130 dan tinggi=85 dengan warna 110 yaitu kuning. Kemudian untuk bangun kedua dibentuk pada koordinat x=50, y=150, alas=120 dan tinggi=70 dengan warna biru. Dan kemudian pada bangun ketiga , dibentuk pada koordinat x= 0, y=0, alas=250, tinggi=50 degan warna 011 yaitu cyan (toska).

D. TUGAS ASISTENSI

1. Buatlah sebuah fungsi untuk membuat tampilan objek 2 dimensi berbentuk belah ketupat seperti di bawah ini, gunakan primitif dan struktur vertex yang paling efisien. Tulis program dan Tampilkan hasilnya berupa screenshot yang berupa tampilan 3 bangun dengan posisi, dimensi, dan warna yang berbeda.

Sintaks:

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

void bk (int posx, int posy, int s) {

(31)

glVertex2i (w+posx,posy);

void renderScene (void) {

glClear(GL_COLOR_BUFFER_BIT); /* ....*/

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

bk(-400,150,300);//kiri-kanan,atas-bawah,kecil-besar

glColor3f(1.,0.,1.); bk(0,120,250); glColor3f(0.,1.,1.); bk(250,100,200); }

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

glutInit (&argc, argv); /* ... */

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(150,150);

glutCreateWindow("Ananda Putri Syaviri"); gluOrtho2D(-640.,640.,-320.,320.); glutDisplayFunc(renderScene);

(32)

berdasarkan fungsi posx, posy dari prinsip objek dua dimensi, dideklarasikan untuk menampilkan bangun pada program ini.

2. Buatlah sebuah fungsi untuk membuat tampilan objek 2 dimensi berbentuk layang-layang seperti di bawah ini, gunakan primitif dan struktur vertex yang paling efisien. Tulis program dan Tampilkan hasilnya berupa screenshot yang berupa tampilan 3 bangun dengan posisi, dimensi, dan warna yang berbeda

Sintaks :

void renderScene (void) {

(33)

glutMainLoop(); }

Screenshoot:

Penjelasan:

- Pada program diatas, sama dengan program sebelumnya menggunakan prinsip objke dua dimensi sehingga menggunakan fungsi posx, posy dalam menentukan titik koordinat. Pada program ini , pendeklarasian fungsi posx dan posy berbeda dengan pendeklarasian belah ketupat. Disesuaikan dengan rumus perhitunan layang- layang, sehingga fungsi belah ketupat dan layang- layang tidak sama. Program ini membentuk 3buah layang- layang dengan 3 varian warna yaitu , merah kuning biru dengan titik koordinat berbeda.

3. Buatlah Fungsi untuk lingkaran dengan menentukan struktur vertex dan paramater yang digunakan dalam fungsinya!

Sintaks :

#include <stdlib.h> //Load library

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

#include <math.h> //Load library aritmatik

void lingkar (int posx, int posy, int r) {

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

float sudut=i*(2*3.14/360); float x=posx+r*cos(sudut); float y=posy+r*sin(sudut); glVertex2f(x,y);

}

(34)

}

void renderScene () {

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

lingkar(-70,20,50);//kiri-kanan,atas-bawah,besar-kecil

glColor3f(1.,1.,0.); lingkar(300,250,100); glColor3f(0.,1.,1.); lingkar(170,120,80); glColor3f(1.,0.,1.); lingkar(-170,120,105); glColor3f(0.,1.,0.); lingkar(190,-110,180); glColor3f(1.,0.,0.); lingkar(50,-60,50); }

glutInit (&argc, argv); /* ... */

glutMainLoop(); }

Screenshoot:

Penjelasan:

(35)

besar-kecil. Untuk pendeklarasian fungsi posx dan posy sama seperti program sebelumnya dan menyesuaikan dengan rumus perhitungan lingkaran.

4. Buatlah sebuah fungsi untuk membuat tampilan objek 2 dimensi berbentuk, gunakan primitif dan struktur vertex yang paling efisien. Tulis program dan Tampilkan hasilnya berupa screenshot yang berupa tampilan bangun warna.

Sintaks:

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

const double PI = 3.141592653589793; int i;

//lingkaran

void lingkar(int rad, int jmltitik, int x_teng, int y_teng) { glBegin(GL_POLYGON);

for (i=0;i<=360;i++){ glBegin(GL_QUADS); glVertex2d(10,60); glVertex2d(60,10); glVertex2d(110,90); glVertex2d(90,110); glEnd();

}

//menampilkan bangun void Draw() {

glClear(GL_COLOR_BUFFER_BIT); glColor3f(1,0,1);

(36)

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

glutCreateWindow("Ananda Putri Syaviri"); gluOrtho2D(-640., 640., -320., 320.); glutDisplayFunc(Draw);

glutMainLoop(); return 0; }

Screenshoot:

Penjelasan:

- Program diatas membentuk 3 objek yang berbeda, yaitu: lingkaran, trapesium sejajar dan kotak(persegi panjang). Untuk pendeklarasian masing- masing objek , menggunakan fungsi voidbk untuk kotak, void tpsm untuk trapesium dan void lingkar untuk lingkaran. Kemudian untuk menmapilkan objek menggunakan fungsi void draw. Void bk, lingkar dan tpsm berisi pendeklarasian pembentukan objek dengan fungsi primitive objek atau objek dua dimensi. Untuk void draw berisi koordinat dari masing- masing objek yang akan dibentuk beserta warna yang digunakan.

D. KESIMPULAN

- Header math.h adalah header yang digunakan untuk operasi aritmatika yang digunakan pada glut.

- Fungsi glColor3f digunakan untuk membuat tampilan warna objek menjadi bervariasi atau bergradasi, dengan kata lain satu warna dapat dibentuk menjadi beberapa warna.

(37)

- Fungsi glVertex2f digunakan untuk menggambar titik koordinat dengan nilai satuan float.

- Fungsi glVertex2d digunakan untuk menggambar titik koordinat dengan nilai satuan double.

- Terdapat beberapa fungsi yang membantu untuk membentuk sebuah objek primitive yaitu, GL_POINTS(membuat objek dengan titik), GL_LINES(dengan garis), GL_LINE_STRIP(dengan polyline/banyak garis), GL_LINE_LOOP(dengan polygon/no fill), GL_TRIANGLE(dengan tiga buah titik yang terhubung menjadi sebuah segitiga, GL_QUADS(dengan empat buah titik yang terhubung menjadi sebuah segiempat dengan blok ditengahnya, dan GL_POLYGON(dengan polygon/fill).

- Bedanya GL_POLYGON dan GL_LINE_LOOP adalah jika line loop tidak menghasilkan blok warna, polygon menghasilkan blok warna(fill).

E. DAFTAR PUSTAKA