Tugas Asistensi

LAPORAN MODUL II

PRAKTIKUM GRAFIKA KOMPUTER

“PRIMITIVE OBJECTS DAN OBJEK 2 DIMENSI”

Disusun untuk Memenuhi Matakuliah Praktikum Grafika Komputer

Yang Dibimbing oleh Bapak Heru Wahyu Herwanto

Disusun Oleh :

Faradila Emma Fikrisa (130533608264)

PTI OFF B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA

Februari 2015

MODUL II

Primitive Objects dan Objek 2 Dimensi

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. LATIHAN

1. PRIMITIVE OBJECT

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

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.

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

void drawDot(){ glBegin(GL_POINTS); glVertex2i(10,5); glVertex2i(50,50); glVertex2i(0,0); glEnd(); glFlush();}

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

Keterangan :Pada latihan ini, dengan

memanfaatkan fungsi GL_POINTS

yaitu membuat titik. Dengan

menggunakan fungsi glVertex yang

merupakan fungsi dasar membuat titik

dengan koordinat maka pada latihan ini,

satuan yang digunakan adalah integer.

GL_POINTS diletakkan kedalam void

drawDot() dimana koordinat x0 dan y0

nya (10,5) x1, dan y1 (50,50), koordinat

x2, y2 nya (0,0). glFlush sendiri

berfungsi untuk menampilkan objek kedalam window. Pada void main, terdapat

pembuatan window bernama Pemrogramman Grafis GLUT dengan posisi koordinat x

=100, y=100. Ukuran windownya sendiri adalah 320x320 , kemudian terdapat

pemanggilan fungsi drawDot yang telah dideklarasikan sebelumnya.

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

Pindah-pindahkan glPointSize pada posisi a, b, dan c. Sajikan Screen shot hasil a, b, c dan simpulkan.

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

glutCreateWindow("Pemrograman Grafis GLUT"); glutDisplayFunc(drawDot); glutMainLoop();}

Keterangan :

Seperti latihan sebelumnya yang menggunakan fungsi GL_POINTS dan terdapat fungsi

drawDot (), pada latihan ini terdapat penambahan glPointSize yaitu mengatur ukuran point (titik)

yang akan ditampilkan pada window. Jika diletakkan pada posisi b yaitu baris selanjutnya dari

void drawDot() maka hasil tampilannya adalah seperti gambar diatas yaitu titik yang muncul

berukuran 15.

Sedangkan jika glPointSize diletakkan sebelum baris atau diluar fungsi void drawDot maka akan terjadi eror ketika eksekusi program, karena fungsi tersebut tidak memiliki pendeklarasian, karena berada diluar void drawDot().


//glPointSize(15);void drawDot(){ glPointSize(15); glBegin(GL_POINTS); glVertex2i(50,0); //glPointSize(15); glVertex2i(50,50); glVertex2i(0,0); glEnd(); glFlush();}




Keterangan :Jika fungsi glPointSize diletakkan pada baris setelah pendeklarasian glVertex2i(x0,y0),

maka hasil tampilan dari gambar adalah seperti pada latihan 2 sebelumnya. Hal tersebut karena

glPointSize diletakkan setelah adanya penetuan koordinat titik atau didalam GL_POINTS,

sehingga tidak bias mengubah ukuran apapun.

Kesimpulannya adalah, idealnya glPointSize diletakkan didalam void drawDot() sebelum titik

digambar (GL_POINTS). Karena jika diletakkan diluar fungsi drawDot maka akan error

program, jika didalam GL_POINTS tidak akan berfungsi apa-apa karena titik sudah mulai

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.


//glPointSize(15);void drawDot(){ //glPointSize(15); glBegin(GL_POINTS); glVertex2i(50,0); glPointSize(15); glVertex2i(50,50); glVertex2i(0,0); glEnd(); glFlush();}




Keterangan :


void drawLine(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINE_STRIP); glVertex2d(50,200); glVertex2d(60,100); glVertex2d(70,100); glEnd(); glFlush();}

void main(int argc, char **argv) { glutInit(&argc, argv); glutInitWindowPosition(100,100); glutInitWindowSize(320,320);

glutCreateWindow("Pemrogramman Grafis GLUT"); gluOrtho2D(-320,320,-240,240); glutDisplayFunc(drawLine); glutMainLoop();}

Jika latihan sebelumnya adalah membuat titik dengan GL_POINTS maka pada

latihan ini, adalah membuat garis dengan GL_LINE_STRIP. Untuk membuat garis

tentunya tetap membutuhkan glVertex untuk menentukan koordinat x0, y0 nya dalam

posisi 50, 200, x1, y1 dalam posisi 60, 100, x2, y2 dalam posisi 70, 100. Setelah

koordinatnya diketahui maka porgram akan mulai membuat garis dengan titik-titik

koordinat yang telah tersebut diatas, dan akan menghasilkan gambar yang tesebut

diatas.

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.


void drawLine(){ glClear(GL_COLOR_BUFFER_BIT); glLineWidth(10); glBegin(GL_LINES); glVertex2d(20,110); glVertex2d(30,180); glVertex2d(50,130); glEnd(); glFlush();}void main(int argc, char **argv){ glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("Pemrogramman Grafis Glut"); gluOrtho2D(-320.,320.,-240.,240.); glutDisplayFunc(drawLine); glutMainLoop();}

Keterangan :Dengan tetap menggunakan

GL_LINES, maka pada latihan ini

terdapat penambahan fungsi

glLineWidth yaitu untuk

menambahkan ketebalan dari garis

yang akan kita tampilkan. Nilai dari

koordinat glVertex yang kita gunakan

adalah x0, y0 (20,110), x1, y1 (30,180)

, x2,y2 (50,130). Setelah ditambahkan

fungsi glLineWidth pada baris setelah void drawLine maka ukuran tebal garis yang

ditampilkan adalah 10


void drawLine(){ glClear(GL_COLOR_BUFFER_BIT); //glLineWidth(10); glBegin(GL_LINES); glVertex2d(20,110); glVertex2d(30,180); glLineWidth(10); glVertex2d(50,130); //glLineWidth(10); glEnd(); glFlush();}void main(int argc, char **argv){ glutInit(&argc, argv);


Keterangan :

Dengan menggunakan koordinat glVertex yang sama, maka fungsi glLineWidth

yang diletakkan pada posisi b (setelah baris glVertex (x1,y1)), dan posisi c (setelah

baris glVertex (x2,y2)) tidak memberikan perubahan yang berarti karena diletakkan

didalam baris GL_LINES, yaitu keadaan dimana garis mulai dibuat. Sama halnya

dengan pembuatan titik sebelumnya, Jadi untuk mengubah ketebalan garis, maka

glLineWidth harus diletakkan sebelum fungsi GL_LINES.


void drawLine(){ glClear(GL_COLOR_BUFFER_BIT); //glLineWidth(10); glBegin(GL_LINES); glVertex2d(20,110); glVertex2d(30,180); //glLineWidth(10); glVertex2d(50,130); glLineWidth(10); glEnd(); glFlush();}void main(int argc, char **argv){ glutInit(&argc, argv);


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.

Keterangan :Latihan ini menggunakan fungsi

GL_LINE_STRIP, yaitu membuat poliline atau banyak garis. Di dalam fungsi void drawPoliline() terdapat pendeklarasian GL_LINE_STRIP dengan diikuti glVertex x0-x3, y0-y3. Yang jika kita ingin membuat bangun simetris yang terbuka, maka kita


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINE_STRIP); glVertex2d(0,150); glVertex2d(150,150); glVertex2d(150,0); glVertex2d(0,0); glEnd(); glFlush();}


glutCreateWindow("Pemrogramman Grafis GLUT"); gluOrtho2D(-320,320,-240,240); glutDisplayFunc(drawPoliline); glutMainLoop();}

hanya perlu memberikan nilai 0 pada koordinatnya, misalnya pada latihan ini nilai dari x3 dan y3 adalah 0.

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.

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

Keterangan :Dengan menggunakan koordinat glVertex yang sama dengan latihan sebelumnya

(simetris terbuka) maka untuk membuat bangun yang simetris fungsi yang sebelumnya adalah

GL_LINE_STRIP diganti dengan GL_LINE_LOOP yang artinya akan membuat koordinat

glVertex yang telah dideklarasikan menjadi berulang. Jadi, jika sebelumnya dengan koordinat


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINE_LOOP); glVertex2d(0,0); glVertex2d(0,150); glVertex2d(150,150); glVertex2d(150,0); glEnd(); glFlush();}



yang sama akan membentuk simetris terbuka, maka dengan fungsi GL_LINE_LOOP ini akan

membuat bangun simetris.

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

Keterangan :


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); //segitiga atas glVertex2d(50,100); glVertex2d(75,180); glVertex2d(30,175); //segitiga bawah glVertex2d(0,0); glVertex2d(-80,0); glVertex2d(-105,-175); glEnd(); glFlush();}

void main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(640,640);


Untuk membuat sebuah segitiga, maka yang diperlukan adalah mengubah fungsi glBegin

nya menjadi GL_TRIANGLES. Sedangkan untuk membuat dua buah segitiga, maka

membutuhkan 6 koordinat glVertex, 3 koordinat untuk segitiga yang berada di atas, dan 3

koordinat untuk segitiga yang ada dibawah. Untuk membuat segitiga berada di posisi bawah dan

atas, maka yang harus kita lakukan adalah memberikan nilai positif untuk segitiga atas, dan

bernilai negative untuk segitiga bawah, hal tersebut dapat dirancang dengan melihat system

koordinat.

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);glVertex2d(x0,y0);glVertex2d(x1,y1);glVertex2d(x2,y2);glVertex2d(x3,y3);

glVertex2d(x4,y4); glVertex2d(x5,y5); glEnd();


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLE_STRIP); glVertex2d(90,150); glVertex2d(150,150); glVertex2d(50,200);

glVertex2d(0,0); glVertex2d(-150,0); glVertex2d(-100, -105); glEnd(); glFlush();}



Keterangan :

Dengan menggunakan fungsi

void drawPoliline() maka,

latihan ini akan membuat

bangun bebas yang dasarnya

merupakan bentuk segitiga

karena menggunakan

GL_TRIANGLE_STRIP

dengan 6 koordinat glVertex

sehingga bangun bebas yang

ditampilkan terdiri dari 2

segitiga dengan masing-masing

3 koordinat. Dengan nilai

koordinat x0, y0 sebesar 90,150. x1, y1 = 150, 150, x3, y3 = 50,200 dan seterusnya.

Kemudian fungsi void drawPoliline ini dipanggil pada fungsi void main setelah

baris gluOrtho.

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


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLE_STRIP); glVertex2d(90,150); glVertex2d(150,150); glVertex2d(50,200);

glVertex2d(0,0); glVertex2d(-150,0); glVertex2d(-100, -105); glEnd(); glFlush();}



glVertex2d(x3,y3);

glVertex2d(x4,y4);

glVertex2d(x5,y5);

glEnd();

Keterangan :

Dengan menggunakan fungsi void drawPoliline() maka, latihan ini akan membuat

bangun bebas yang dasarnya merupakan bentuk segitiga karena menggunakan

GL_TRIANGLE_FAN dengan 6 koordinat glVertex sehingga bangun bebas yang ditampilkan

terdiri dari 2 segitiga dengan masing-masing 3 koordinat. Dengan nilai koordinat x0, y0 sebesar

150,100. x1, y1 = 100, 200, x3, y3 = 50,155 dan seterusnya.


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLE_FAN); glVertex2d(150,100); glVertex2d(100,200); glVertex2d(50,155);

glVertex2d(0,0); glVertex2d(-100,-150); glVertex2d(-125,0); glEnd(); glFlush();}


glutCreateWindow("Pemrogramman Grafis GLUT"); gluOrtho2D(-320,320,-240,240); glutDisplayFunc(drawPoliline); glutMainLoop();

Kemudian fungsi void drawPoliline ini dipanggil pada fungsi void main setelah baris

gluOrtho.

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


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUADS); glVertex2d(-60,-60); glVertex2d(-250,-60); glVertex2d(-250,-200); glVertex2d(-60,-200);

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

glEnd(); glFlush();}


Keterangan :

Fungsi Quads adalah membuat empat buah titik yang terhubung menjadi suatu segiempat

dengan blok di tengahnya. Dengan meletakkan fungsi ini kedalam void drawPoliline () maka

akan menampilkan sebuah segi empat dengan koordinat titik glVertex sebanyak 8 koordinat,

dengan 4 koordinat untuk masing-masing bangun. Bangun yang pertama bernilai -60,-60 untuk

x0, y0. Nilai x1, y1 = -250,-60, x2, y2 = -250,-200. Nilai x3, y3 = -60,-200 bernilai negatif untuk

meletakkan posisinya disebelah bawah

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.

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

Keterangan :

Untuk membuat bangun bebas, dengan bentuk dasar sebuah segi empat maka

digunakanlah sebuah fungsi GL_QUAD_STRIP dengan koordinat titik glVertex sebanyak 8

koordinat, dengan 4 koordinat untuk masing-masing bangun. Bangun yang pertama bernilai -

100,-100 untuk x0, y0. Nilai x1, y1 = -100,-100, x2, y2 = -250,-200. Nilai x3, y3 = -100,-200

bernilai negatif untuk meletakkan posisinya disebelah bawah


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUAD_STRIP); glVertex2d(-100,-100); glVertex2d(-100,-100); glVertex2d(-250,-200); glVertex2d(-100,-200);





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


void drawPoliline(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2d(-60,-60); glVertex2d(-250,-60); glVertex2d(-250,-200); glVertex2d(-60,-200);





Keterangan :

Polygon merupakan suatu fungsi yang mirip dengan polyline, tetapi menghasilkan kurva

tertutup dengan blok warna (fill). Dengan menggunakan 8 koordinat glVertex yang telah ditentukan

nilainya maka akan membentuk suatu bangun bebas tergantung dari kreasi masing-masing. Fungsi yang

digunakan dalam latihan ini adalah GL_POLYGON didalam void drawPoliline yang nantinya akan

dipanggil dalam fungsi void main.

2. OBJECT 2DUntuk 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:

a. Buatlah project baru pada Visual Studio. Buatlah agar tampilan obyek 2 dimensi berbentuk

persegi panjang 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.

Keterangan :

Dengan mendeklarasikan void segiEmpat artinya membuat fungsi bernama segiEmpat

dengan parameter (int posx (koordinat x), int posy (koordinat y), int w (ukuran width), int h

(ukuran height)) dengan didalamnya terdapat glBegin(GL_QUADS) yang artinya membuat

bangun segiempat dengan pendeklarasian nilai rumus per sisinya. kemudian pada fungsi void

renderScene yang nantinya akan menampilkan objek kedalam window, maka terdapat

pendeklarasian glColor3f(1., 1., 0.); yang membuat warnanya menjadi Warna kuning dan

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

void segiEmpat(int posx,int posy,int w,int h){ glBegin(GL_QUADS); glVertex2i(posx, posy); glVertex2i(w + posx , posy); glVertex2i(w + posx, posy + h); glVertex2i(posx, posy + h); glEnd();}

void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); //kuning glColor3f(1.,1.,0.); segiEmpat(-120,-100,150,100); glColor3f(1.,1.,1.); segiEmpat(50,75,200,150); //cyan glColor3f(0.,1.,1.); segiEmpat(-120,-200,120,60); glFlush();}

void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100, 100); glutInitWindowSize(640, 480); glutCreateWindow("Pemrogramman Grafis GLUT"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutMainLoop();}

memanggil fungsi segiEmpat(-120, -100 ,150,100); nilai parameter posisi x=-120, y=-100,

ukuran w=150, h=100

Pada void main terdapat pendeklarasian pembuatan window baru dengan posisi objek

adalah x=100, y=100, ukuran window w=640, h=480, nilai parameter gluOrthonya sendiri adalah

koordinat xy pada left =-320, right=320, bottom =-320, top=320, di baris selanjutnya adalah

pemanggilan void renderScene untuk memanggil objek agar tampil kedalam window

Keterangan :

Dengan mendeklarasikan void

segiEmpat artinya membuat fungsi bernama

segiEmpat dengan parameter (int posx

(koordinat x), int posy (koordinat y), int w

(ukuran width), int h (ukuran height)) dengan

didalamnya terdapat glBegin(GL_QUADS)

yang artinya membuat bangun segiempat

dengan pendeklarasian nilai rumus per sisinya.

kemudian pada fungsi void renderScene yang

nantinya akan menampilkan objek kedalam

window, maka terdapat pendeklarasian glColor3f(1., 0., 1.); yang membuat warnanya menjadi


void trapesium(int posx, int posy, int w, int h){ glBegin(GL_QUADS); glVertex2i(posx, posy); glVertex2i(w+posx+(w/3), posy); glVertex2i(w+posx, posy+h); glVertex2i(posx, posy+h); glEnd(); glFlush();}

void RenderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.,0.,1.);//magenta trapesium (-150,-300,100,100); glColor3f(0.,1.,0.);//green trapesium (-100, 20, 150, 75); glColor3f(0.,0.,1.);//blue trapesium (50, 200, 80, 120); glFlush();}

void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100, 100); glutInitWindowSize(640, 480); glutCreateWindow("Pemrogramman Grafis GLUT"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(RenderScene); glutMainLoop();}

Warna magenta dan memanggil fungsi segiEmpat(-150, -300 ,100,100); nilai parameter posisi

x=-150, y=-300, ukuran w=100, h=100





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.


void SegiEmpat(int posx, int posy, int w, int h){ glBegin(GL_QUADS); glVertex2i(posx+(w/3), posy); glVertex2i(w+posx+(w/3), posy); glVertex2i(w+posx, posy-h); glVertex2i(posx, posy-h); glEnd(); glFlush();}

void RenderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.,0.,1.); //magenta SegiEmpat(-165,-10,150,150); glColor3f(1.,1.,0.);//yellow SegiEmpat(-80, 100, 100, 100); glColor3f(0.,1.,1.);//cyan SegiEmpat(50, 210, 75, 75); glFlush();}


Keterangan

Dengan mendeklarasikan void segiEmpat artinya membuat fungsi bernama segiEmpat dengan

parameter (int posx (koordinat x), int posy

(koordinat y), int w (ukuran width), int h

(ukuran height)) dengan didalamnya terdapat

glBegin(GL_QUADS) yang artinya membuat

bangun segiempat dengan pendeklarasian nilai

rumus per sisinya. kemudian pada fungsi void renderScene yang nantinya akan menampilkan

objek kedalam window, maka terdapat pendeklarasian glColor3f(1., 0., 1.); yang membuat

warnanya menjadi Warna magenta dan memanggil fungsi segiEmpat(-165, -10 ,150,150); nilai

parameter posisi x=-165, y=-10, ukuran w=100, h=100

Pada void main terdapat pendeklarasian pembuatan window baru dengan posisi objek adalah x=100, y=100, ukuran window w=640, h=480, nilai parameter gluOrthonya sendiri adalah koordinat xy pada left =-320, right=320, bottom =-320, top=320, di baris selanjutnya adalah pemanggilan void renderScene untuk memanggil objek agar tampil kedalam window

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.

Keterangan :






pendeklarasian glColor3f(1., 0., 0.); yang membuat warnanya menjadi Warna merah dan


void SegiEmpat(int posx, int posy, int w, int h){ glBegin(GL_QUADS); glVertex2i(posx-(w/3), posy); glVertex2i(w+posx+(w/3), posy); glVertex2i(w+posx, posy+h); glVertex2i(posx, posy+h); glEnd(); glFlush();}

void RenderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.,0.,0.); //merah SegiEmpat(-150,-170,200,200); glColor3f(1.,1.,0.);//kuning SegiEmpat(-120, 50, 150, 100); glColor3f(0.,1.,0.);//hijau SegiEmpat(80, 200, 50, 100); glFlush();}


memanggil fungsi segiEmpat(-150, -170 ,200,200); nilai parameter posisi x=-150, y=-170,

ukuran w=200, h=200





d. Buatlah project baru pada Visual Studio. Buatlah agar tampilan obyek 2 dimensi berbentuk jajaran genjang 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.

Keterangan :






pendeklarasian glColor3f(1., 0., 1.); yang membuat warnanya menjadi Warna magenta dan

memanggil fungsi segiEmpat(-165, -10 ,150,150); nilai parameter posisi x=-165, y=-10, ukuran

w=150, h=150 Pada void main terdapat pendeklarasian pembuatan window baru dengan posisi

objek adalah x=100, y=100, ukuran window w=640, h=480, nilai parameter gluOrthonya sendiri

adalah koordinat xy pada left =-320, right=320, bottom =-320, top=320, di baris selanjutnya

adalah pemanggilan void renderScene untuk memanggil objek agar tampil kedalam window


void SegiEmpat(int posx, int posy, int w, int h){ glBegin(GL_QUADS); glVertex2i(posx+(w/3), posy); glVertex2i(w+posx+(w/3), posy); glVertex2i(w+posx, posy-h); glVertex2i(posx, posy-h); glEnd(); glFlush();}

void RenderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.,0.,1.); //magenta SegiEmpat(-165,-10,150,150); glColor3f(1.,1.,0.);//yellow SegiEmpat(-80, 100, 100, 100); glColor3f(0.,1.,1.);//cyan SegiEmpat(50, 210, 75, 75); glFlush();}


C. 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.

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

3. Buatlah Fungsi untuk lingkaran dengan menentukan struktur vertex dan paramater yang

digunakan dalam fungsinya

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.

Jawab :

Keterangan :

Dengan mendeklarasikan void sisi artinya membuat fungsi bernama sisi dengan

parameter (int x (koordinat x), int y (koordinat y), int t (ukuran width), int l (ukuran height))

dengan didalamnya terdapat glBegin(GL_QUADS) yang artinya membuat bangun segiempat

dengan pendeklarasian nilai rumus per sisinya. kemudian pada fungsi void renderScene yang

nantinya akan menampilkan objek kedalam window, maka terdapat pendeklarasian glColor3f(1.,

0., 1.); yang membuat warnanya menjadi Warna Magenta dan memanggil fungsi sisi(-150,

30 ,100,100); nilai parameter posisi x=-150, y=30, ukuran w=100, h=100 Pada void main

terdapat pendeklarasian pembuatan window baru dengan posisi objek adalah x=100, y=100,

ukuran window w=640, h=480, nilai parameter gluOrthonya sendiri adalah koordinat xy pada

left =-320, right=320, bottom =-320, top=320, di baris selanjutnya adalah pemanggilan void

renderScene untuk memanggil objek agar tampil kedalam window

2.


void sisi(int x, int y, int t, int l) // Membuat fungsi bernama sisi dengan parameter (int x (koordinat x), int y (koordinat y), //int t (ukuran width), int l (ukuran height)){ glBegin(GL_QUADS); glVertex2i(x, y); glVertex2i(t + x , l + y); glVertex2i(x, y + (2*l)); glVertex2i(x - t, l+y ); glEnd();}

void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1., 0., 1.);//Warna Magenta sisi(-150, 30 ,100,100); //memanggil fungsi sisi dg nilai parameter posisi x=-150, y=30, ukuran w=100, h=100

glColor3f(1., 0., 0.);//Warna Red sisi(0, -160 ,150,150); //memanggil fungsi sisi dg nilai parameter posisi x=0, y=-160, ukuran w=150, h=150

glColor3f(0., 1., 0.);//Warna Green sisi(0, 150, 40, 40);//memanggil fungsi sisi dg nilai parameter posisi x=0, y=150, ukuran w=40, h=40

glFlush();}


void sisi(int x, int y, int t, int l) // Membuat fungsi bernama sisi dengan parameter (int x (koordinat x), int y (koordinat y), //int t (ukuran width), int l (ukuran height)){ glBegin(GL_QUADS); // memulai membuat fungsi Quads yaitu empat buah titik yang terhubung menjadi suatu segiempat dengan ruang kosong ditengahnya glVertex2i(x, y); glVertex2i(t + x , l + y); glVertex2i(x, y + (t+l)); glVertex2i(x - t, l+y ); glEnd();}

void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1., 1., 1.);//Warna Putih sisi(-150, 0,85,155); // memanggil fungsi sisi dg nilai parameter posisi x=-150, y=0, ukuran w=85, h=155

glColor3f(0., 1., 1.);//Warna Cyan sisi(150, 0, 20, 40); // memanggil fungsi sisi dg nilai parameter posisi x=150, y=0, ukuran w=20, h=40

glColor3f(1., 1., 0.);//Warna Yellow sisi(0,-150,70,140); // memanggil fungsi sisi dg nilai parameter posisi x=0, y=-150, ukuran w=70, h=140 glFlush(); //mengubah tampilan layar menjadi hitam}

void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100, 100); //posisi objek x=100, y=100 glutInitWindowSize(640, 480); //ukuran window w=640, h=480 glutCreateWindow("Faradila Emma Fikrisa (Layang-layang)"); gluOrtho2D(-320.,320.,-320.,320.); //posisi koordinat xy pada left =-320, right=320, bottom =-320, top=320 glutDisplayFunc(renderScene); //memanggil fungsi void renderscene untuk menampilkan objek pada window, sesuai posisi dan ukuran yang diinginkan glutMainLoop(); }

Output Gambar :

Keterangan :

Dengan mendeklarasikan void sisi artinya membuat fungsi bernama sisi dengan parameter (int x

(koordinat x), int y (koordinat y), int t (ukuran width), int l (ukuran height)) dengan didalamnya

terdapat glBegin(GL_QUADS) yang artinya membuat bangun segiempat dengan pendeklarasian

nilai rumus per sisinya. kemudian pada fungsi void renderScene yang nantinya akan

menampilkan objek kedalam window, maka terdapat pendeklarasian glColor3f(1., 1., 1.); yang

membuat warnanya menjadi Warna Magenta dan memanggil fungsi sisi(-150, 0 ,85,155); nilai

parameter posisi x=-150, y=0, ukuran w=85, h=155





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

const double PI = 3.141592653589793; //mendeklarasikan nilai konstanta dari phi int a;

void lingkaran(int xt, int yt, int r, int jumlah_titik) // Membuat fungsi bernama lingkaran dengan parameter (int xt (koordinat x tengah), int yt (koordinat y tengah), //int r (ukuran jari-jari), int jumlah titik ){ glBegin(GL_POLYGON); for (a=0;a<=360;a++) //fungsi perulangan, nilai awal a = 0, jika kondisi //a kurang dari sama dengan 360, maka akan dilakukan perulangan secara increment { float sudut=a*(2*PI/jumlah_titik); float x=xt+r*cos(sudut); float y=yt+r*sin(sudut); glVertex2f(x,y); } glEnd(); }

void renderScene(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0, 1.0, 0.0); //Warna hijau lingkaran(0, 150, 30,70); //memanggil fungsi lingkaran dengan nilai parameter posisi xt =0, yt=150, r=30, dan jumlah titik=70 glColor3f(0.0, 1.0, 1.0); //Warna cyan lingkaran(0, 40, 30,70); //memanggil fungsi lingkaran dengan nilai parameter posisi xt =0, yt=40, r=30, dan jumlah titik=70 glColor3f(0.0, 0.0, 1.0); //Warna biru lingkaran(0, -150, 90,90); //memanggil fungsi lingkaran dengan nilai parameter posisi xt =0, yt=-150, r=90, dan jumlah titik=90 glFlush(); }

void main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowSize(640, 480); //ukuran window w=640, h=480 glutInitWindowPosition(100, 100); //posisi objek x=100, y=100 glutCreateWindow("Faradila Emma Fikrisa (Lingkaran)"); //membuat window baru gluOrtho2D(-320., 320., -240., 240.);//posisi koordinat xy pada left =-320, right=320, bottom =-320, top=320glutDisplayFunc(renderScene); //memanggil fungsi void renderscene untuk menampilkan objek pada window, sesuai posisi dan ukuran yang diinginkan glutMainLoop();}

Output Gambar :

Keterangan :

Di baris awal program terdapat const double PI = 3.141592653589793; dimana tuuannya adalah

mendeklarasikan nilai konstanta dari phi. Dengan mendeklarasikan void lingkaran maka akan

membuat fungsi bernama lingkaran dengan parameter (int xt (koordinat x tengah), int yt

(koordinat y tengah), int r (ukuran jari-jari), int jumlah titik ) dengan didalamnya terdapat

GL_POLYGON yang memiliki fungsi perulangan, nilai awal a = 0, jika kondisi a kurang dari

sama dengan 360, maka akan dilakukan perulangan secara increment. kemudian pada fungsi void


pendeklarasian glColor3f(0., 1., 0.); yang membuat warnanya menjadi Warna hijau dan

memanggil fungsi sisi(0, 150 ,30,70); nilai parameter posisi x=0, y=150, ukuran w=30, h=70





4.


void bidang(int x, int y, int t, int l) // Membuat fungsi bernama bidang dengan parameter (int x (koordinat

x), int y (koordinat y), //int t (ukuran width), int l (ukuran height))

{glBegin(GL_QUADS);// memulai membuat fungsi Quads yaitu empat buah titik yang

terhubung menjadi suatu segiempat dengan ruang kosong ditengahnya glVertex2i(x-(t/3), y); glVertex2i(t+x+(t/3), y); glVertex2i(t+x, y+l); glVertex2i(x, y+l); glEnd();

glFlush(); //mengubah tampilan layar menjadi hitam}

void RenderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glColor3f(1.,0.,0.);//Warna Merahbidang(-180, 130, 170, 180); // memanggil fungsi bidang dg

nilai parameter posisi x=-180, y=130, ukuran w=170, h=180glColor3f(1.,1.,0.); //Warna kuningbidang(-150, 0, 170, 100); // memanggil fungsi bidang dg nilai

parameter posisi x=-150, y=0, ukuran w=170, h=100glColor3f(0.,1.,0.); //Warna Hijaubidang(-150,-150,75,110); //// memanggil fungsi bidang dg

nilai parameter posisi x=-150, y=-150, ukuran w=75, h=110

glFlush();}

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

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);glutInitWindowPosition(100, 100); //posisi objek x=100, y=100glutInitWindowSize(640, 480); //ukuran window w=640, h=480glutCreateWindow("Faradila Emma Fikrisa (Trapesium)");gluOrtho2D(-320.,320.,-320.,320.); //posisi koordinat xy pada left

=-320, right=320, bottom =-320, top=320glutDisplayFunc(RenderScene); //memanggil fungsi void renderscene

untuk menampilkan objek pada window, sesuai posisi dan ukuran yang diinginkan

glutMainLoop();}

Keterangan :

Dengan mendeklarasikan void sisi artinya membuat fungsi bernama sisi dengan parameter (int x

(koordinat x), int y (koordinat y), int t (ukuran width), int l (ukuran height)) dengan didalamnya

terdapat glBegin(GL_QUADS) yang artinya membuat bangun segiempat dengan pendeklarasian

nilai rumus per sisinya. kemudian pada fungsi void renderScene yang nantinya akan

menampilkan objek kedalam window, maka terdapat pendeklarasian glColor3f(1., 0., 0.); yang

membuat warnanya menjadi Warna merah dan memanggil fungsi sisi(-180, 130 ,170,180); nilai

parameter posisi x=-180, y=130, ukuran w=170, h=180





D. KESIMPULAN

GL_POINTS berfungsi untuk membuat titik.

GL_LINES berfungsi untuk membuat garis

GL_TRIANGLES berfungsi untuk membuat segitiga

GL_QUADS berfungsi untuk membuat segi empat

GL_POLYGON berfungsi untuk membuat polygon

glPointSize() untuk memperbesar ukuran titik

glLineWidth() untuk mempertebal ukuran garis

GL_TRIANGLE_STRIP dan GL_TRIANGLE_FAN berfungsi untuk menggabungkan

bentuk dasar segitiga namun menghasilkan bentuk yang berbeda.

Didalam 1 fungsi (Misalnya void ddrawPoliline), dapat digunakan untuk membuat

bangun yang sama lebih dari satu dengan posisi, ukuran, dan warna yang berbeda.

E. DAFTAR PUSTAKA

Tim Asisten Dosen. 2015. Modul II ““PRIMITIVE OBJECTS DAN OBJEK 2 DIMENSI””.

Universitas Negeri Malang

Tugas Asistensi

Documents

Transcript of Tugas Asistensi