LAPORAN PRAKTIKUM

GRAFIKA KOMPUTER

FATHAN AKMAL
0701172102

PROGRAM STUDI ILMU KOMPUTER

FAKULTAS SAINS DAN TEKNOLOGI
UIN SUMATERA UTARA MEDAN
2019
 KATA PENGANTAR

Assalamu’alaikum Warahmatullahi Wabarakatuh.

Dengan menyebut nama Allah Yang Maha Pengasih lagi Maha Penyayang, puji syukur
kami panjatkan kehadirat Allah SWT, yang telah melimpahkan Rahmat, Hidayah, dan Inayah-
Nya sehingga saya sanggup menyelesaikan Laporan Praktikum Grafika dengan tepat pada
waktunya.
Penyusunan laporan semaksimal mungkin sayaupayakan dan didukung banyak sekali
pihak, sehingga sanggup memperlancar dalam penyusunannya. Untuk itu tidak lupa saya
mengucapkan terima kasih kepada semua pihak yang telah membantu saya dalam
menyelesaikan laporan paraktikum visual ini.
Namun tidak lepas dari semua itu, saya menyadari sepenuhnya bahwa masih terdapat
kekurangan baik dari segi penyusunan bahasa dan aspek lainnya. Oleh karena itu saya
membuka selebar-lebarnya pintu bagi para pembaca yang ingin memberi saran maupun kritik
demi memperbaiki laporan praktikum grafika ini.
Akhirnya penulis sangat mengharapkan biar dari laporan sederhana ini sanggup diambil
keuntungannya dan besar keinginan saya sanggup menginspirasi bagi para pembaca.
Wassalamu’alaikum Warahmatullahi Wabarakatuh.

Medan, 31 Desember 2019

Fathan Akmal

2
 DAFTAR ISI

KATA PENGANTAR ..................................................................................................2

DAFTAR ISI ................................................................................................................3
DAFTAR GAMBAR ...................................................................................................4

Modul 1 :Output Primitif ..............................................................................................5

Modul 2 : Grafik 2 Dimensi ........................................................................................11
Modul 3 : Grafik 3 Dimensi ........................................................................................15
Modul 4 :Transformasi 2D ke 3D ...............................................................................23
Modul 5 : Shading Open GL.......................................................................................29
Project Mobil ..............................................................................................................36

3
 DAFTAR GAMBAR

Gambar 1.1 : Output titik ..............................................................................................8

Gambar 1.2 : Output Garis ............................................................................................9
Gambar 2.1 : Output Segitiga .....................................................................................13
Gambar 3.1 : Output Prisma .......................................................................................21
Gambar 4.1 : Output Lampion ....................................................................................27
Gambar 5.1 : Output Teapot .......................................................................................34
Gambar Output Mobil .................................................................................................39

4
 MODUL 1
OUTPUT PRIMITIF

Dasar teori
Output primitif adalah bentuk geometri dasar yang dapat digunakan untuk membentuk
obyek yang lebih komplek. Dengan memasukkan output primitif tersebut sebagai stuktur yang
lebih kompleks. Setiap output primitif mempunyai data koordinat dan informasi lain tentang
bagaimana cara object ditampilkan pada layar. Titik dan garis lurus adalah bentuk geometri
paling sederhana dan komponen gambar.
Borland C++ Builder menyediakan Canvas yang dapat digunakan untuk menampilkan
gambar maupun tulisan ke layar. Kelas Canvas pada umumnya merupakan atribut dari kelas
Lain. Beberapa kelas yang mempuntai atribut Canvas antara lain TPaintBox, TShape.

A. Macam-macam Output primitif ialah :

1. Titik(Pixel)
Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar titik maka kita
dapat menggambar obyek apapun. Termasuk bentuk geometri dibawah merupakan bentuk –
bentuk yang pada dasarnya berasal dari titik-titik. Operasi titik ini sering digunakan pada
pengolahan citra (Image processing). Setiap titik pada monitor memiliki parameter : koordinat
dan warna.

Kode untuk menggambar titik :

 Canvas-> Pixels[x][y] = warna
 Dengan x : koordinat mendatar
y : koordinat vertikal
 Warna : warna pixel
 Contoh : Canvas->Pixel [100][100] = clRed

2. Garis(line)
Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier dari titik awal
sampai titik akhir.

5
 Kode untuk membuat garis :
 Canvas->MoveTo(x0, y0);
 Canvas->MoveTo(x1, y1);
…
 Canvas->LineTo(xn, yn)

B. Atribut Output Primitif

Pada umumnya, setiap parameter yang memberi pengaruh pada output primitif ditampilkan
sesuai dengan parameter atribut.
1. Atribut Garis
Atribut dasar untuk garis lurus adalah style (tipe garis), width (tebal) dan color(warna).
Dalam beberapa paket aplikasi grafik, garis dapat ditampilkan dengan mengunakan Pen.

2. Atribut Kurva
Parameter untuk atribut kurva sama dengan atribut segmen garis. Kurva dapat ditampilkan
dengan berbagai warna, tebal, dot-dash(Style garis) dan pilihan pen atau brush. Selain itu untuk
pengisian suatu bidang tertentu termasuk memilih warna antara solid dan pattern tertentu dan
memilih warna pattern yang ada.

C. Algoritma Pembentukan Garis:

Digital Diferential Analyzer (DDA) adalah algoritma pembentukan garis berdasarkan
perhitungan y atau x, Garis dibuat menggunakan dua ujung garis, yaitu titik awal (x1, y1)
dan titik akhir (x2, y2). Setiap koordinat titik (xk, yk) yang membentuk garis diperoleh dari
perhitungan, kemudian hasil perhitungan dikonversikan menjadi nilai integer.

Langkah-langkah pembentukan garis berdasarkan algoritma DDA adalah:

1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
2. Tentukan salah satu sebagai titik awal (x1, y1) dan titik akhir (x2, y2).
3. Hitung dx = x2 – x1 dan dy = y2 – y1
4. Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x atau nilai y, dengan
ketentuan:
a. bila |dx| > |dy| maka step = |dx|
b. bila tidak, maka step = |dy|
5. Hitung penambahan koordinat pixel dengan persamaan:

6
 a. x_inc = dx / step
b. y_inc = dy / step
6. Koordinat selanjutnya (x+x_inc, y+y_inc)
7. Plot pixel pada layar, nilai koordinat hasil perhitungan dibulatkan
8. .Ulangi nomor 6 dan 7 untuk menentukan posisi pixel berikutnya sampai x = x1 atau
y = y1.

Percobaan 1 :
Program yang akan dirancang berfungsi untuk mengetahui cara membuat titik di Visual
secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft Visual Studio. Untuk
memahami pembuatan titik, diperlukan glut.h, glut32.dll,glut32 dan buka visual studio pilih
New Project, pilih Win32 Colsole Application. Pastikan Precompiled Header dan Security
Development Lifecycle (SDL) Checks tidak diceklis. Ceklis Empty Project.

Analisis Coding:
//buat titik
#include <GL/glut.h>

voidtampil() {
glClear(GL_COLOR_BUFFER_BIT);

// TITIK
glPointSize(10);
glBegin(GL_POINTS);
glVertex2i(75, 75);
glVertex2i(-75, 75);
glVertex2i(-75, -75);
glVertex2i(75, -75);
glEnd();
glFlush();
}

main() {
glutInitWindowSize(320, 240);

7
glutCreateWindow("Percobaan 2");
gluOrtho2D(-320, 320, -240, 240);
glutDisplayFunc(tampil);
glutMainLoop();
}

Hasil Output:

Gambar 1.1 Output titik

Percobaan 2 :
Program yang akan dirancang berfungsi untuk mengetahui cara membuat garis di
Visual secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft Visual Studio.
Untuk memahami pembuatan garis, diperlukan glut.h, glut32.dll,glut32 dan buka visual studio
pilih New Project, pilih Win32 Colsole Application. Pastikan Precompiled Header dan Security
Development Lifecycle (SDL) Checks tidak diceklis. Ceklis Empty Project.

Analisis Coding:
#include <GL/glut.h>
voidtampil() {
glClear(GL_COLOR_BUFFER_BIT);

// GARIS
glLineWidth(2);

8
glBegin(GL_LINES);
glVertex2i(75, 75);
glVertex2i(-75, 75);
glVertex2i(-75, -75);
glVertex2i(75, -75);
glEnd();
glFlush();
}

main() {
glutInitWindowSize(320, 240);
glutCreateWindow("percobaan3");
gluOrtho2D(-320, 320, -240, 240);
glutDisplayFunc(tampil);
glutMainLoop();
}

Hasil Output:

Gambar 1.2 Output Garis

9
 LEMBAR PENGESAHAN

Judul : Output Primitif

Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

10
 MODUL 2
GRAFIK 2 DIMENSI

Dasar Teori

Objek grafik 2 dimensi adalah sekumpulan titik-titik 2 dimensi yang dihubungkan

dengan garis lurus, baik berupa polyline, polygon atau kurva. Objek grafik 2 dimensi
didefinisikan sebagai kumpulan titik 2dimensi yang secara komputasi dinyatakan sebagai array
1D, atau linkedlist sesuai dengan struktur data yang digunakan dalam menyatakan kumpulan
titik 2D ini.
Objek grafik dimensi juga adalah gambar 2 dimensi yang sumbu x dan sumbu y, atau
sumbu koordinat cartesius dua dimensi. Dua sumbu yang saling bertegak lurus antar satu
dengan yang lain, yang keduanya terletak dalam satu bidang (bidang xy).
Sedangkan Grafik komputer 2D adalah sebuah generasi gambar digital berbasis
komputer, yang kebanyakan mengambil objek-objek dua dimensi (2D). Model Grafik 2D
merupakan kombinasi dari model geometri (juga disebut sebagai grafik vektor), gambar digital
(raster graphics), fungsi matematika, dan sebagainya. Komponen-komponen ini dapat
dimodifikasi dan dimanipulasi oleh transformasi geometri dua dimensi, seperti translasi, rotasi,
dan dilatasi.
Model-model yang digunakan pada disain grafis 2D biasanya tidak mendukung bentuk-
bentuk tiga-dimensi, atau fenomena yang bersifat tiga dimensi, seperti pencahayaan, bayangan,
pantulan, refraksi, dan sebagainya. Namun demikian, mereka dapat membuat model berlapis-
lapis (layer); nyata, translusen, dan transparan, yang dapat ditumpuk dalam urutan tertentu.
Urutan tersebut biasanya didefinisikan dengan angka (kedalaman lapisan, atau jarak dari si
penglihat).
Macam-Macam objek 2D :
1. Line
2. Circle
3. Arc
4. Polygon
5. Text
6. Section
7. Rectangle
8. Ellips

11
 9. Donut
10. Star
11. Helix

Percobaan 1 :
Program yang akan dirancang berfungsi untuk mengetahui cara membuat Grafik 2
Dimensi di Visual secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft
Visual Studio. Untuk memahami pembuatan Grafik 2 Dimensi, diperlukan glut.h,
glut32.dll,glut32 dan buka visual studio pilih New Project, pilih Win32 Colsole Application.
Pastikan Precompiled Header dan Security Development Lifecycle (SDL) Checks tidak
diceklis. Ceklis Empty Project.

Analisis Coding:
//Buat segitiga
#include<GL/glut.h>
void userdraw()
{
staticint tick=0;
void drawDot(int x, int y) ;
glBegin(GL_LINE_LOOP);
glVertex2i(100,50);
glVertex2i(100,130);
glVertex2i(150,130);
glColor3f(1.0,0.0,0.0);//mewarnai merah pada garis
glEnd();
}

void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();

12
}

int main(intargc, char **argv)

{
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("Program yusri");
glClearColor(0.0,0.0,0.0,0.0);gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Hasil Output:

Gambar 2.1 Output Segitiga

13
 LEMBAR PENGESAHAN

Judul : Grafik 2 Dimensi

Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

14
 MODUL 3
GRAFIK 3 DIMENSI

Dasar Teori

3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki panjang, lebar,
dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg berpatokan pada titik
koordinat sumbu x (datar), sumbu y (tegak), dan sumbu z (miring). Representasi dari data
geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika
komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis.
Grafik 3D merupakan perkembangan dari grafik 2D. Didalam grafika komputer, 3D
merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi.
Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan
pada permukaan gambar.
Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D
modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang
mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi
image dari objek tersebut.
Istilah atau Pengertian Grafik 3D adalah sebuah gambar, garis, lengkungan, dan
sebagainya yang memiliki titik-titik yang menghubungkan menjadi sebuah bentuk 3D. Saat ini
video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu
sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam
memainkan game komputer.
Macam-macam objek 3 dimensi:
1. Box
2. Sphare
3. Cyllinder
4. Tube
5. Pyramid
6. Plane

15
Percobaan 1 :
Program yang akan dirancang berfungsi untuk mengetahui cara membuat Grafik 3D di
Visual secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft Visual Studio.
Untuk memahami pembuatan Grafik 3D, diperlukan glut.h, glut32.dll,glut32 dan buka visual
studio pilih New Project, pilih Win32 Colsole Application. Pastikan Precompiled Header dan
Security Development Lifecycle (SDL) Checks tidak diceklis. Ceklis Empty Project.

Analisis Coding:
//buat prisma
#include<GL/glut.h>
#include<math.h>
struct point {
float x,y,z;
};
struct vektor {
float v[4];
};
struct matriks {
float m[4][4];
};
struct face {
int jumtitikons;
int indextitik[40];
};
struct objek {
int jumtitik;
point titik[40];
int jumsisi;
face sisi[30];
};
matriks mat;
float theta=0.5;
vektor point2vektor(objek balok, int i) {
vektor vec;

16
vec.v[0] = balok.titik[i].x;
vec.v[1] = balok.titik[i].y;
vec.v[2] = balok.titik[i].z;
vec.v[3] = 1;
return vec;
}
point vektor2point(vektor vec) {
point pnt;
pnt.x = vec.v[0];
pnt.y = vec.v[1];
pnt.z = vec.v[2];
return pnt;
}
matriks identitas(void) {
int i,j;
matriks mat;
for (i=0;i<4;i++) {
for (j=0;j<4;j++) {
if (i==j)
mat.m[i][j] = 1;
else
mat.m[i][j] = 0;
}}
return mat;
}
matriks translasi(float dx, float dy, float dz) {
matriks trans = identitas();
trans.m[0][3] = dx;
trans.m[1][3] = dx;
trans.m[2][3] = dx;
return trans;
}
matriks rotasiX(float theta) {
matriks rotate = identitas();

17
float cs = cos(theta);
float sn = sin(theta);
rotate.m[1][1] = cs;
rotate.m[1][2] = -sn;
rotate.m[2][1] = sn;
rotate.m[2][2] = cs;
return rotate;
}
matriks rotasiY(float theta) {
matriks rotate = identitas();
float cs = cos(theta);
float sn = sin(theta);
rotate.m[0][0] = cs;
rotate.m[0][2] = sn;
rotate.m[2][0] = -sn;
rotate.m[2][2] = cs;
return rotate;
}
matriks rotasiZ(float theta) {
matriks rotate = identitas();
float cs = cos(theta);
float sn = sin(theta);
rotate.m[0][0] = cs;
rotate.m[0][1] = -sn;
rotate.m[1][0] = sn;
rotate.m[1][2] = cs;
return rotate;
}
vektor kali (matriks mat, vektor b) {
int i,j;
vektor c;
for (i=0;i<4;i++) {
c.v[i] = 0;
for (j=0;j<4;j++) {

18
c.v[i]+= mat.m[i][j] * b.v[j];
} }return c;
}
matriks kalim (matriks a, matriks b) {
int i,j,k;
matriks c;
for (i=0;i<4;i++) {
for (j=0;j<4;j++) {
c.m[i][j] = 0;
for (k=0;k<4;k++) {
c.m[i][j]+=a.m[i][k] * b.m[k][j];
}}}
return c;
}
matriks titling = kalim(rotasiX(theta),rotasiY(-theta));
vektor cross (vektor a, vektor b) {
vektor c;
c.v[0] = a.v[1]*b.v[2]-a.v[2]*b.v[1];
c.v[1] = a.v[2]*b.v[0]-a.v[0]*b.v[2];
c.v[2] = a.v[0]*b.v[1]-a.v[1]*b.v[0];
c.v[3] = 1;
return c;
}
void DrawPolygon(objek obj)
{
int i,j;
float r,g,b;
for(i=0;i<obj.jumsisi;i++)
{
r=1.0f; g=0.0f; b=0.0f;
glBegin(GL_POLYGON);
if (i==0) { r=1.0f; g=0.0f; b=0.0f; }
if (i==1) { r=0.0f; g=1.0f; b=0.0f; }
if (i==2) { r=0.0f; g=0.0f; b=1.0f; }

19
if (i==3) { r=1.0f; g=1.0f; b=0.0f; }
if (i==4) { r=1.0f; g=0.0f; b=1.0f; }
if (i==5) { r=0.0f; g=1.0f; b=1.0f; }
if (i==6) { r=0.5f; g=0.0f; b=1.0f; }
if (i==7) { r=0.5f; g=0.5f; b=0.5f; }
glColor3f(r,g,b);
for(j=0;j<obj.sisi[i].jumtitikons;j++)
{
glVertex3f(obj.titik[obj.sisi[i].indextitik[j]].x,
obj.titik[obj.sisi[i].indextitik[j]].y,
obj.titik[obj.sisi[i].indextitik[j]].z);
}
glEnd();
}}
void gambarprisma() {
int i;
vektor hasil,HslKali;point HslTitik;
mat = titling;
objek prisma = {6,{{0,100,0},{100,0,0},{0,0,100},
{-100,0,0},{0,0,-100},{0,-100,0}}, 9, {{3,{0,1,2}},{3,{0,2,3}},
{3,{0,3,4}},{3,{0,4,1}},{4,{1,4,3,2}},{3,{5,4,1}},{3,{5,2,1}},{3,{5,2,3}},
{3,{5,3,4}}}};
for (i=0;i<8;i++) {
hasil = point2vektor(prisma,i);
HslKali = kali(mat,hasil);
HslTitik = vektor2point(HslKali);
prisma.titik[i] = HslTitik;
}
DrawPolygon(prisma);
}
void UserDraw() {
glClearColor(1.0f,1.0f,1.0f,0.0f);
glClear(GL_COLOR_BUFFER_BIT);
glRotatef(0.1f,0.0f,1.0f,0.0f);

20
gambarprisma();
glutSwapBuffers(); }
void main(int argc,char **argv) {
glutInit(&argc,argv);
glutInitWindowPosition(20,20);
glutInitWindowSize(640,640);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutCreateWindow("Point To Vektor");
glOrtho(-200.0f,200.0f,-200.0f,200.0f,-200.0f,200.0f);
glutIdleFunc(UserDraw);
glutDisplayFunc(UserDraw);
glutMainLoop();
}

Hasil Output:

4.1 Output Prisma

21
 LEMBAR PENGESAHAN

Judul : Grafik 3 Dimensi

Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

22
 MODUL 4
TRANSFORMASI 2D KE 3D

Dasar Teori
Transformasi dua dimensi adalah suatu model atau bentuk atau teknik-teknik
memindahkan atau mengubah nilai posisi objek dalam sistem koordinat dua dimensi.
Pemindahan objek ini dapat diartikan sebagai pemindahan titik.
Ada dua cara yang dapat digunakan untuk mentransformasi gambar yaitu :
1. Transformasi objek
Definisinya adalah mengubah koordinat-koordinat dari tiap-tiap titik di objek dengan
beberapa aturan, meninggalkan underlying system koordinat yang tidak bisa di ubah lagi.
2. Transformasi koordinat
Definisinya adalah system koordinat yang baru di buat sebelumnya merupakan semua
titik objek dalam system yang baru.
Rumus perhitungan untuk setiap transformasi, yaitu :
a. Translasi
Rumus yang digunakan, yaitu :
x′ = x + tx
y′ = y + ty
Keterangan :
x′ : koordinat x yang dibentuk setelah translasi
x : koordinat x awal
tx : besarnya translasi (perpindahan) x
y′ : koordinat y yang dibentuk setelah translasi
y : koordinat y awal
ty : besarnya translasi (perpindahan) y

Percobaan 1 :
Program yang akan dirancang berfungsi untuk mengetahui cara membuat Transportasi
2D ke 3D di Visual secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft
Visual Studio. Untuk memahami pembuatan Transportasi 2D ke 3D diperlukan glut.h,
glut32.dll,glut32 dan buka visual studio pilih New Project, pilih Win32 Colsole Application.

23
Pastikan Precompiled Header dan Security Development Lifecycle (SDL) Checks tidak
diceklis. Ceklis Empty Project.

Analisis Coding :
//buat lampion
#include<stdlib.h>
#include<GL/glut.h>
#include<windows.h>
int w=800, h=600, z=0;
int x1=0, y1=0, z1=0, sudut=0;
void renderScene (void)
{
staticfloat alpha =0;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glClearColor (0, 0, 0, 0);
glLoadIdentity ();
glTranslatef (0, 0, z);
glRotatef (sudut, x1, y1, z1);
glRotatef (alpha,1,1,1);
glColor3f(1, 1, 0);
alpha = alpha +0.5;
//glutWireCube (3);//fungsi kubus
//glutSolidCube(3);//kubus penuh warna
glutWireSphere(2,90,90);//fungsi bola
//glutWireCone(2, 4, 25, 25);//fungsi kerucut
glColor3f(1,0,0);
glutWireTorus (4, 2, 90, 30);//fungsi donat
//glutWireTeapot (4);//fungsi ceret
//glutSolidIcosahedron ();//fungsi delima
//glutWireDodecahedron ();//fungsi bola
//glutWireTetrahedron();//fungsi piramida
glutSwapBuffers ();
}

24
void resize (intw1, inth1) {
glViewport (0, 0, w1, h1);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
gluPerspective (45.0,(float) w1/(float) h1,1.0, 100.0);
glMatrixMode (GL_MODELVIEW);
glLoadIdentity ();
}
void Keyboard (GLubytekey, GLintx, GLinty)
{
if (key == 'a' || key == 'A') z+=2;
if (key == 'd' || key == 'D') z-=2;
if (key == 'x' || key == 'X')
{
x1=1;
y1=0;
z1=0;
sudut +=10;
}
if (key == 'y' || key == 'Y')
{
x1=0;
y1=1;
z1=0;
sudut +=-10;
}
if (key == 'z'|| key == 'Z')
{
x1=0;
y1=0;z1=1;
sudut +=-10;
}
if ( key == 'f'|| key == 'F')

25
 {
glutFullScreen ();
}
{
int foo;
foo = x + y;
if ('q' == key || 'Q' == key || 27 == key)
exit (0);
}
}
void timer (intvalue)
{
glutPostRedisplay ();
glutTimerFunc (1,timer,0);
}
void main (intargc, char **argv)
{
glutInit (&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition (100,100);
glutInitWindowSize (w,h);
glutCreateWindow ("3D Dimas");
gluOrtho2D (-w/2,w/2,-h/2,h/2);
glutDisplayFunc (renderScene);
glutReshapeFunc (resize);
glutKeyboardFunc (Keyboard);
glutTimerFunc (1,timer,0);
glutMainLoop ();
}

Output:

26
Gambar 3.1 Output Lampion

27
 LEMBAR PENGESAHAN

Judul : Transoptasi 2D ke 3D
Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

28
 MODUL 5
SHADING OPEN GL

Dasar Teori
Shading merupakan sebuah teknik gabungan antara pewarnaan dan pencahayaan
terhadap polygon, titik, garis untuk menampilkan efek gelap, terang, halus ataupun kasar pada
bagian tertentu dari permukaan objek.Non-ShadingNon-ShadingNo Edge linesShading.
Shading mengacu pada penggambaran kedalaman suatu ilustrasi dengan mengubah-
ubah tingkat dari kegelapan suatu object (darkness).

Menggambar Shading merupakan suatu proses yang digunakan dalam menggambar

dengan tingkat darkness tertentu pada sebuah kertas dengan memakai media yang lebih padat
atau menampilkan bayangan yang lebih gelap untuk area yang lebih gelap dan memakai media
yang tidak terlalu padat atau menampilkan bayangan yang lebih terang untuk area yang lebih
terang. Ada berbagai macam teknik shading, misalnya cross hatching dimana garis-garis tegak
lurus dengan jarak satu sama lain (kedekatan) yang berbeda-beda digambar pada pola grid
untuk membentuk bayangan area. Semakin dekat garis-garis tersebut, semakin gelap area yang
muncul. Begitu pula sebaliknya, semakin jauh garis-garis tersebut, semakin terang area yang
muncul.

Pola-pola yang terang (misalnya objek yang memiliki area terang dan area berbayang)
akan sangat membantu dalam pembuatan ilusi kedalaman pada kertas dan layar komputer.

Percobaan 1:

Program yang akan dirancang berfungsi untuk mengetahui cara membuat Shading
Opeb Gl di Visual secara benar. Adapun aplikasi yang digunakan adalah aplikasi Microsoft
Visual Studio. Untuk memahami pembuatan Shading Open GL, diperlukan glut.h,
glut32.dll,glut32 dan buka visual studio pilih New Project, pilih Win32 Colsole Application.
Pastikan Precompiled Header dan Security Development Lifecycle (SDL) Checks tidak
diceklis. Ceklis Empty Project.

Analisis Coding :
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <GL/glut.h>

GLenum doubleBuffer;

float rotX = 0.0, rotY = 0.0; int teaList;

29
long patchData[][16] = {
{102,103,104,105,4,5,6,7,8,9,10,11,12,13,14,15},
{12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27},
{24,25,26,27,29,30,31,32,33,34,35,36,37,38,39,40},
{96,96,96,96,97,98,99,100,101,101,101,101,0,1,2,3,},
{0,1,2,3,106,107,108,109,110,111,112,113,114,115,116,117},
{118,118,118,118,124,122,119,121,123,126,125,120,40,39,38,37},
{41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56},
{53,54,55,56,57,58,59,60,61,62,63,64,28,65,66,67},
{68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83},
{80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95}
};

float cpData[][3] = {
{0.2,0,2.7},{0.2,-0.112,2.7},{0.112,-0.2,2.7},{0,-0.2,2.7},
{1.3375,0,2.53125},{1.3375,-0.749,2.53125},{0.749,-1.3375,2.53125},
{0,-1.3375,2.53125},{1.4375,0,2.53125},{1.4375,-0.805,2.53125},
{0.805,-1.4375,2.53125},{0,-1.4375,2.53125},{1.5,0,2.4},{1.5,-0.84,2.4},
{0.84,-1.5,2.4},{0,-1.5,2.4},{1.75,0,1.875},{1.75,-0.98,1.875},
{0.98,-1.75,1.875},{0,-1.75,1.875},{2,0,1.35},{2,-1.12,1.35},
{1.12,-2,1.35},{0,-2,1.35},{2,0,0.9},{2,-1.12,0.9},{1.12,-2,0.9},
{0,-2,0.9},{-2,0,0.9},{2,0,0.45},{2,-1.12,0.45},{1.12,-2,0.45},
{0,-2,0.45},{1.5,0,0.225},{1.5,-0.84,0.225},{0.84,-1.5,0.225},
{0,-1.5,0.225},{1.5,0,0.15},{1.5,-0.84,0.15},{0.84,-1.5,0.15},
{0,-1.5,0.15},{-1.6,0,2.025},{-1.6,-0.3,2.025},{-1.5,-0.3,2.25},
{-1.5,0,2.25},{-2.3,0,2.025},{-2.3,-0.3,2.025},{-2.5,-0.3,2.25},
{-2.5,0,2.25},{-2.7,0,2.025},{-2.7,-0.3,2.025},{-3,-0.3,2.25},
{-3,0,2.25},{-2.7,0,1.8},{-2.7,-0.3,1.8},{-3,-0.3,1.8},{-3,0,1.8},
{-2.7,0,1.575},{-2.7,-0.3,1.575},{-3,-0.3,1.35},{-3,0,1.35},
{-2.5,0,1.125},{-2.5,-0.3,1.125},{-2.65,-0.3,0.9375},{-2.65,0,0.9375},
{-2,-0.3,0.9},{-1.9,-0.3,0.6},{-1.9,0,0.6},{1.7,0,1.425},
{1.7,-0.66,1.425},{1.7,-0.66,0.6},{1.7,0,0.6},{2.6,0,1.425},
{2.6,-0.66,1.425},{3.1,-0.66,0.825},{3.1,0,0.825},{2.3,0,2.1},
{2.3,-0.25,2.1},{2.4,-0.25,2.025},{2.4,0,2.025},{2.7,0,2.4},
{2.7,-0.25,2.4},{3.3,-0.25,2.4},{3.3,0,2.4},{2.8,0,2.475},
{2.8,-0.25,2.475},{3.525,-0.25,2.49375},{3.525,0,2.49375},
{2.9,0,2.475},{2.9,-0.15,2.475},{3.45,-0.15,2.5125},{3.45,0,2.5125},
{2.8,0,2.4},{2.8,-0.15,2.4},{3.2,-0.15,2.4},{3.2,0,2.4},{0,0,3.15},
{0.8,0,3.15},{0.8,-0.45,3.15},{0.45,-0.8,3.15},{0,-0.8,3.15},
{0,0,2.85},{1.4,0,2.4},{1.4,-0.784,2.4},{0.784,-1.4,2.4},{0,-1.4,2.4},
{0.4,0,2.55},{0.4,-0.224,2.55},{0.224,-0.4,2.55},{0,-0.4,2.55},
{1.3,0,2.55},{1.3,-0.728,2.55},{0.728,-1.3,2.55},{0,-1.3,2.55},
{1.3,0,2.4},{1.3,-0.728,2.4},{0.728,-1.3,2.4},{0,-1.3,2.4},{0,0,0},
{1.425,-0.798,0},{1.5,0,0.075},{1.425,0,0},{0.798,-1.425,0},
{0,-1.5,0.075},{0,-1.425,0},{1.5,-0.84,0.075},{0.84,-1.5,0.075}
};

void Teapot(long grid)

{

30
 float p[4][4][3], q[4][4][3], r[4][4][3], s[4][4][3];
long i, j, k, l;

teaList = 1;
glNewList(teaList, GL_COMPILE);
glPushMatrix();
glRotatef(270.0, 1.0, 0.0, 0.0);
for (i = 0; i < 10; i++) {
for (j = 0; j < 4; j++) {
for (k = 0; k < 4; k++) {
for (l = 0; l < 3; l++) {
p[j][k][l] = cpData[patchData[i][j*4+k]][l];
q[j][k][l] = cpData[patchData[i][j*4+(3-k)]][l];
if (l == 1) {
q[j][k][l] *= -1.0;
}
if (i < 6) {
r[j][k][l] = cpData[patchData[i][j*4+(3-k)]][l];
if (l == 0) {
r[j][k][l] *= -1.0;
}
s[j][k][l] = cpData[patchData[i][j*4+k]][l];
if (l == 0) {
s[j][k][l] *= -1.0;
}
if (l == 1) {
s[j][k][l] *= -1.0;
}
}
}
}
}
glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &p[0][0][0]);
glEnable(GL_MAP2_VERTEX_3);
glMapGrid2f(grid, 0.0, 1.0, grid, 0.0, 1.0);
glEvalMesh2(GL_FILL, 0, grid, 0, grid);
glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &q[0][0][0]);
glEvalMesh2(GL_FILL, 0, grid, 0, grid); if (i < 6)
{
glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &r[0][0][0]);
glEvalMesh2(GL_FILL, 0, grid, 0, grid);
glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &s[0][0][0]);
glEvalMesh2(GL_FILL, 0, grid, 0, grid);
}
}
glDisable(GL_MAP2_VERTEX_3);
glPopMatrix();
glEndList();
}

31
static void Init(void)
{
float position[] = {0.0, 3.0, 3.0, 0.0};
float local_view[] = {0.0};
float ambient[] = {0.1745, 0.01175, 0.01175};
float diffuse[] = {0.61424, 0.04136, 0.04136};
float specular[] = {0.727811, 0.626959, 0.626959};

glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LESS);

glLightfv(GL_LIGHT0, GL_POSITION, position);

glLightModelfv(GL_LIGHT_MODEL_LOCAL_VIEWER, local_view);

glFrontFace(GL_CW);
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glEnable(GL_AUTO_NORMAL);
glEnable(GL_NORMALIZE);

glMaterialfv(GL_FRONT, GL_AMBIENT, ambient);

glMaterialfv(GL_FRONT, GL_DIFFUSE, diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, specular);
glMaterialf(GL_FRONT, GL_SHININESS, 0.6*128.0);

glClearColor(0.5, 0.5, 0.5, 1.0);

glColor3f(1.0, 1.0, 1.0);

Teapot(14);
}

static void Reshape(int w, int h)

{

glViewport(0, 0, (GLint)w, (GLint)h);

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-6.0, 6.0, -6.0, 6.0, -1.0, 10.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

static void Key(unsigned char key, int x, int y)

{

switch (key) {
case 27:
exit(0);
}

32
}

static void SpecialKey(int key, int x, int y)

{

switch (key) {
case GLUT_KEY_UP:
rotX -= 20.0;
glutPostRedisplay();
break;
case GLUT_KEY_DOWN:
rotX += 20.0;
glutPostRedisplay();
break;
case GLUT_KEY_LEFT:
rotY -= 20.0;
glutPostRedisplay();
break;
case GLUT_KEY_RIGHT:
rotY += 20.0;
glutPostRedisplay();
break;
}
}

static void Draw(void)

{

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

glPushMatrix();

glTranslatef(0.0, 0.0, -5.0);

glRotatef(rotY, 0.0,1.0,0.0);
glRotatef(rotX, 1.0,0.0,0.0);

glCallList(teaList);

glPopMatrix();

if (doubleBuffer){
glutSwapBuffers();
} else {
glFlush();
}
}

static void Args(int argc, char **argv) {

GLint i;

33
 doubleBuffer = GL_FALSE;

for (i = 1; i < argc; i++) {

if (strcmp(argv[i], "-sb") == 0) {
doubleBuffer = GL_FALSE;
} else if (strcmp(argv[i], "-db") == 0) {
doubleBuffer = GL_TRUE; }
}
}

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

GLenum type;

glutInit(&argc, argv);
Args(argc, argv);

type = GLUT_RGB | GLUT_DEPTH;

type |= (doubleBuffer) ? GLUT_DOUBLE : GLUT_SINGLE;
glutInitDisplayMode(type);
glutInitWindowSize(300, 300);
glutCreateWindow("TeaPot");

Init();

glutReshapeFunc(Reshape);
glutKeyboardFunc(Key);
glutSpecialFunc(SpecialKey);
glutDisplayFunc(Draw);
glutMainLoop();
}

Hasil Output :

5.1 Output Teapo

34
 LEMBAR PENGESAHAN

Judul : Shading Open GL

Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

35
 PROJECT MOBIL

Analisis Coding :

36
37
38
Hasil Output :

Gambar : Output Mobil

39
 LEMBAR PENGESAHAN

Judul : Project Mobil

Nama : Fathan Akmal
NIM : 0701172102
Program Studi : Ilmu Komputer

Medan, 31 Desember 2019

Menyetujui,

Koordinator Asisten Asisten

( ) ( )

Mengetahui,

Dosen Penanggung Jawab

( Sriani, M.Kom )

40
41