Anda di halaman 1dari 113

LAPORAN PRAKTIKUM

GRAFIKA KOMPUTER
SEMESTER GANJIL TAHUN AKADEMIK 2020/2021

Disusun oleh :
Nama : Febryan Alfaridzi
NIM : 1818057
Prodi : Teknik Informatika S-1
Kelompok :

PROGRAM STUDI TEKNIK INFORMATIKA S-1


FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2020
LEMBAR PERSETUJUAN
PRAKTIKUM GRAFIKA KOMPUTER
SEMESTER GENAP TAHUN AKADEMIK 2020/2021

Disusun Oleh
NAMA : Febryan Alfaridzi
NIM : 1818057
JURUSAN : Teknik Informatika S-1

Mengetahui Menyetujui
Ka. Lab. Database Dosen Pembimbing

(Febriana Santi W, S.Kom, M.Kom) (Karina Aulia Sari, ST, M.eng)


NIP. 1031000425 NIP. 1031000426

PROGRAM STUDI TEKNIK INFORMATIKA S-1


FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2020
KATA PENGANTAR

Segala puji bagi Allah SWT semata karena dengan rahmat dan hidayah-Nya
lah penulis dapat menyelesaikan Laporan Praktikum Grafika Komputer tepat pada
waktunya.
Terwujudnya laporan ini, tentunya tidak lepas dari bantuan-bantuan yang
telah penulis terima. Pada kesempatan ini, penulis menyampaikan terima kasih
kepada yang terhormat:
1. Ibu Karina Aulia Sari, ST, M.eng selaku dosen pembimbing Praktikum
Grafika Komputer.
2. Ibu Febriana Santi W, S.kom, M.kom selaku dosen mata kuliah Grafika
Komputer.
3. Renaldi Primaswara Prasetya, S.Kom, M.Kom selaku dosen mata kuliah
Grafika Komputer.
4. Ibu Febriana Santi W, S.kom, M.kom selaku Ketua Pelaksana Praktikum
Grafika Komputer Jurusan Teknik Informatika ITN Malang.
5. Instruktur Lab. Database Teknik Informatika yang telah memberi petunjuk
kepada penulis selama pelaksanaan praktikum.
6. Rekan-rekan yang telah membantu dalam pelaksanaan dan penyelesaian
laporan ini.
Harapan penulis laporan praktikum ini bermanfaat bagi penulis sendiri
maupun pembaca.

Malang, .................2020

Penulis
DAFTAR ISI
KATA PENGANTAR ................................................................................................ 3
DAFTAR ISI .............................................................................................................. 4
DAFTAR GAMBAR.................................................................................................. 7
DAFTAR TABEL ...................................................................................................... 9
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 1 PENGENALAN
OPENGL .................................................................................................................. 10
1.1 Tujuan ............................................................................................................ 10
1.2 Alat dan Bahan .............................................................................................. 10
1.3 Landasan Teori .............................................................................................. 10
1.4 Langkah - Langkah Tugas ............................................................................. 15
1.5 Kesimpulan .................................................................................................... 17
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 2 TRANSFORMASI
2D ............................................................................................................................. 18
2.1 Tujuan ............................................................................................................ 18
2.2 Alat dan Bahan .............................................................................................. 18
2.3 Landasan Teori .............................................................................................. 18
2.4 Langkah - Langkah Tugas ............................................................................. 20
2.5 Kesimpulan .................................................................................................... 23
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 3 ALGORITMA
PEMBUATAN OBJEK ............................................................................................ 24
3.1 Tujuan ............................................................................................................ 24
3.2 Alat dan Bahan .............................................................................................. 24
3.3 Landasan Teori .............................................................................................. 24
3.4 Langkah - Langkah Tugas ............................................................................. 26
3.5 Kesimpulan .................................................................................................... 36
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 4 LINGKARAN ......... 37
4.1 Tujuan ............................................................................................................ 37
4.2 Alat dan Bahan .............................................................................................. 37
4.3 Landasan Teori .............................................................................................. 37
4.4 Langkah - Langkah Tugas ............................................................................. 38
4.5 Kesimpulan .................................................................................................... 43
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 5 OBJEK PRIMITIF .. 44
5.1 Tujuan ............................................................................................................ 44
5.2 Alat dan Bahan .............................................................................................. 44
5.3 Landasan Teori .............................................................................................. 44
5.4 Langkah - Langkah Tugas ............................................................................. 45
5.5 Kesimpulan .................................................................................................... 50
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 6 CLIPPING ............... 51
6.1 Tujuan ............................................................................................................ 51
6.2 Alat dan Bahan .............................................................................................. 51
6.3 Landasan Teori .............................................................................................. 51
6.4 Langkah - Langkah Tugas ............................................................................. 53
6.5 Kesimpulan .................................................................................................... 58
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 7 ALGORITMA LIANG
BARSKY DAN CLIPPING POLYGON ................................................................. 59
7.1 Tujuan ............................................................................................................ 59
7.2 Alat dan Bahan .............................................................................................. 59
7.3 Landasan Teori .............................................................................................. 59
7.4 Langkah – Langkah Tugas ............................................................................ 61
7.5 Kesimpulan .................................................................................................... 67
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 8 OBJEK 3D DAN
PEMBENTUKAN OBJECT 3D DENGAN FUNGSI OPENGL ............................ 68
8.1 Tujuan ............................................................................................................ 68
8.2 Alat dan Bahan .............................................................................................. 68
8.3 Landasan Teori .............................................................................................. 68
8.4 Langkah - Langkah Tugas ............................................................................. 74
8.5 Kesimpulan .................................................................................................... 80
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 9 TRANSFORMASI 3D
DAN INTERAKSI DENGAN PERANGKAT ........................................................ 81
9.1 Tujuan ............................................................................................................ 81
9.2 Alat dan Bahan .............................................................................................. 81
9.3 Landasan Teori .............................................................................................. 81
9.4 Langkah - Langkah Tugas ............................................................................. 91
9.5 Kesimpulan .................................................................................................... 96
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 10 OBJEK SOLID DAN
LIGHTING ............................................................................................................... 97
10.1 Tujuan ............................................................................................................ 97
10.2 Alat dan Bahan .............................................................................................. 97
10.3 Landasan Teori .............................................................................................. 97
10.4 Langkah - Langkah Tugas ........................................................................... 105
10.5 Kesimpulan .................................................................................................. 109
BAB 11 PENUTUP ................................................................................................ 110
11.1 Kesimpulan .................................................................................................. 110
11.2 Saran ............................................................................................................ 111
DAFTAR PUSTAKA ............................................................................................. 112
DAFTAR GAMBAR
Gambar 1.1 Cek versi Visual Studio ........................................................................ 15
Gambar 1.2 Siapkan file glut .................................................................................... 16
Gambar 1.3 Folder untuk C Header File.................................................................. 16
Gambar 1.4 Folder untuk dll File ............................................................................. 16
Gambar 1.5 Folder untuk Library File ..................................................................... 17
Gambar 2.1 Contoh refleksi pada gambar 2D .......................................................... 18
Gambar 2.2 Contoh penggunaan shear pada gambar 2D ......................................... 19
Gambar 2.3 Tampilan hasil running program gabungan refleksi dan shear ............ 21
Gambar 3.1 Grafik .................................................................................................... 27
Gambar 3.2 Grafik .................................................................................................... 29
Gambar 3.3 Tampilan Running DDA....................................................................... 31
Gambar 3.4 Tampilan Running Bresenham ............................................................. 34
Gambar 4.1 Ilustrasi Penggambaran Lingkaran ....................................................... 38
Gambar 4.2 Hasil Ilustrasi Penggambaran Lingkaran .............................................. 40
Gambar 4.3 Tampilan Running Lingkaran ............................................................... 42
Gambar 5.1 Elemen – elemen pembentuk Objek Grafis .......................................... 45
Gambar 5.2 Bentuk dasar objek primitif .................................................................. 45
Gambar 5.3 Tampilan Hasil Running ....................................................................... 49
Gambar 6.1 Susunan Region Code ........................................................................... 52
Gambar 6.2 Region Code Daerah Viewport ............................................................. 52
Gambar 6.3 Menentukan Titik Potong ..................................................................... 53
Gambar 6.4 Persamaan xp1, xp2, yp1, dan yp2 ....................................................... 53
Gambar 6.5 Hasil Running Program ........................................................................ 56
Gambar 6.6 Hasil running program Clipping........................................................... 56
Gambar 7.1 Tampilan Grafik ................................................................................... 62
Gambar 7.2 Tampilan Hasil Running Program ........................................................ 65
Gambar 8.2 Polygon ................................................................................................. 70
Gambar 8.3 Objek 3D yang tersusun dari kumpulan Polygon ................................. 70
Gambar 8.4 Sistem Koordinat 3D ............................................................................ 71
Gambar 8.5 Sistem Koordinat 3 Dimensi................................................................. 71
Gambar 8.6 Sphere ................................................................................................... 72
Gambar 8.7 Cube ...................................................................................................... 72
Gambar 8.8 Cone ...................................................................................................... 72
Gambar 8.9 Dodecahedron ...................................................................................... 73
Gambar 8.10 Teapot ................................................................................................. 73
Gambar 8.11 Torus ................................................................................................... 73
Gambar 8.12 Tampilan hasil .................................................................................... 76
Gambar 8.13 Tampilan Hasil ................................................................................... 78
Gambar 9.1 Tampilan objek 3 dimensi .................................................................... 93
Gambar 9.2 Tampilan rotasi ..................................................................................... 93
Gambar 9.3 Tampilan translasi................................................................................. 94
Gambar 9.4 Tampilan scalling ................................................................................. 94
Gambar 10.1 dua versi adegan sebuah bola ............................................................. 98
Gambar 10.2 Menggunakan pencahayaan ................................................................ 99
Gambar 10.3 Cahaya Diffuse.................................................................................. 100
Gambar 10.4 Cahaya Specular ............................................................................... 100
Gambar 10.5 Cahaya Emmisive.............................................................................. 101
Gambar 10.6 Tampilan Hasil Running ................................................................... 105
Gambar 10.6 Tampilan Hasil running .................................................................... 107
DAFTAR TABEL
Tabel 1.1 Library untuk OpenGL ............................................................................. 11
Tabel 1.2 Tabel Fungsi / Prosedur ............................................................................ 12
Tabel 1.3 Fungsi / Prosedur yang sering digunakan dalam membut sebuah object . 12
Tabel 1.4 Fungsi dasar dalam membuat titik............................................................ 13
Tabel 1.5 Fungsi menggunakan library Primitive Object ........................................ 14
Tabel 2.1 Fungsi OpenGL ........................................................................................ 22
Tabel 3.1 Perhitungan ............................................................................................... 27
Tabel 3.2 Perhitungan ............................................................................................... 29
Tabel 3.3 Fungsi OpenGL ........................................................................................ 35
Table 4.1 Tabel Perhitungan..................................................................................... 39
Tabel 4.2 Fungsi OpenGL ........................................................................................ 42
Tabel 5.1 Fungsi OpenGL ........................................................................................ 49
Tabel 6.1 Fungsi OpenGL ........................................................................................ 57
Tabel 8.1 Fungsi OpenGL: ....................................................................................... 78
Tabel 9.1 Fungsi OpenGL ........................................................................................ 95
Tabel 10.1 Pilihan material warna .......................................................................... 101
Tabel 10.2 Fungsi OpenGL .................................................................................... 108
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 1
PENGENALAN OPENGL

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Pengenalan OpenGL
TUGAS : Membuat Video Tutorial Menginstal OpenGL

1.1 Tujuan
1. Praktikkan mampu mengerti tentang OpenGL
2. Praktikkan dapat memahami GL Utility Toolkit
3. Pratikkan dapat mengerti cara kerja OpenGL

1.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

1.3 Landasan Teori


A. GLUT (GL Utility Toolkit)
OpenGL adalah suatu library grafis standard yang digunakan untuk
mengembangkan aplikasi yang menghasilkan grafis Komputer 2D atau 3D.
OpenGL bersifat open source, multi platform dan multi language. Saat ini
semua Bahasa pemrograman mendukung OpenGL. OpenGL bisa bekerja
dalam lingkungan Windows, Unix, SGI, Linux dll.
OpenGL bersifat Open-Source, multi-platform dan multi-language
serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun
objek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman
aplikasi (application programming interface (API) yang tidak tergantung
pada piranti dan platform yang digunakan, sehingga OpenGL dapat berjalan
pada sistem operasi Windows, UNIX dan sistem operasi lainnya.
OpenGL pada awalnya didesain untuk digunakan pada bahasa
pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga
digunakan dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada,
Visual Basic, Delphi, maupun Fortran. Namun OpenGL di-package secara
berbeda-beda sesuai dengan bahasa pemrograman yang digunakan.
Untuk pemrograman OpenGL menggunakan Windows diperlukan
beberapa library tambahan, sebagai berikut :
Tabel 1.1 Library untuk OpenGL
Nama Library Cara Instalasi
Copykan file glut.h di dalam folder c:\Program
Glut.h
Files\Microsoft Visual Studio\VC\Include\

Glut32. Copykan file glut32.lib di dalam folder


lib c:\Program Files\Microsoft Visual Studio\VC\lib
Copykan file glut32.dll di dalam folder
Glut32.
c:\Windows\System32 atau untuk win64 ke file
dll
syswow64

B. Cara Kerja OpenGL


OpenGL lebih mengarah pada prosedural dari pada sebuah deskriptif
API (Aplication Programming Interfaces) grafis. Untuk mendeskripsikan
scene dan bagaimana penampilannya, sebenarnya programer lebih tau untuk
menentukan hal-hal yang dibutuhkan untuk menghasilkan efek yang di
inginkan.Langkah tersebut termasuk memanggil banyak perintah openGL,
perintah tersebut digunakan untuk menggambarkan grafis primitif seperti
titik,garis dan poligon dalam tiga dimensi. Sebagai tambahan, openGL
mendukung lighting, shading, texture mapping, blending, transparancy,dan
banyak kemampuan efek khusus lainnya.

C. Inisialisasi Awal
Inti dari tahapan ini adalah mengatur view port dan persepektif untuk
penampilan obyek ke dalam layar monitor, viewport adalah besarnya layar
monitor (image) yang dipakai untuk menampilkan obyek, sedangkan
persepektif yang dimaksud adalah pengaturan sumbu z dalam penampilan
obyek 3 dimensi, sehingga user dapat melihat obyek seolah-olah dalam
bidang 3 dimensi (X-Y-Z), selain itu penggambaran obyek yang dilakukan
oleh programmer juga dapat menggunaan koordinat 3 dimensi. Selain ke
dua tujuan di atas pada tahap ini juga dilakukan koneksi awal dengan library
openGL, koneksi ini dilakukan supaya fungsi-fungsi yang di sediakan
openGL dapat digunakan.
Fungsi/prosedur yang digunakan :
Tabel 1.2 Tabel Fungsi / Prosedur
Fungsi / Prosedur Penjelasan
LoadGlut(glut32.dll) ‘if you no
Pemanggilan library openGL
include gl in system’

InitGL Inisialisasi openGL awal yang harus


dilakukan
glViewport Untuk pengaturan viewport
glMatrixMode untuk mengatur display objek

Tabel 1.3 Fungsi / Prosedur yang sering digunakan dalam membut sebuah
object
Fungsi / prosedur Penjelasan
GL_QUADS Untuk menggambar segi empat
GL_LINES Penggambarkan sebuah garis
glVertex3f Untuk menentukan titik 3 dimensi
glLineWidth suatu fungsi yang berfungsi untuk
mengatur
tebalnya garis
glPointSize suatu fungsi yang berfungsi untuk
mengatur
besarnya suatu objek
gluOrtho2D yaitu suatu fungsi untuk mengatur
proyeksi hasil eksekusi dan
mendefinisikan besarnya sistem
koordinat dengan urutan kirikanan dan
bawah-atas
glClearColor Menandakan warna apa yang
digunakan sebagai background. Warna
dinyatakan dalam bentuk RGBA, angka
pertama memwakil warna merah, kedua
hijau, ketiga biru, dan keempat adalah
alpha atau tingkat transparansi. Tiap
warna berkisar antara 0
hngga 1.
glClear Untuk menghapus window dan
memberikan warna yang telah kita
definisakn sebelumnya
dengan menggunakan glClearColor
glPushMatrix Menyimpan koordinat Matrik yang ada
glPopMatrix Berguna untuk memanggil suatu fungsi
yang
telah disimpan pada glPushMatrix
glBegin(GL_Lines) Untuk memmulai menggambar dalam
bentuk
garis. Setiap pasangan verteks sebagai
segmen garis independent
glEnd Untuk mengakhiri penggambaran
sebuah
Garis
SwapBuffers(hDC) fungsi hampir sama dengan glFLush()

glflush() Rendiring

Tabel 1.4 Fungsi dasar dalam membuat titik


Fungsi / Prosedur Penjelasan Contoh
glVertex2i(x,y) Yaitu suatu fungsi untuk glVertex2i(10
,10)
menggambar titik pada
koordinat x dan y, dengan nilai
satuan berupa integer.
glVertex2f(x,y) Yaitu suatu fungsi untuk glVertex2f(10
.0,10.0)
menggambar titik pada
koordinat x dan y, dengan nilai
satuan berupa float
glVertex2d(x,y) Yaitu suatu fungsi untuk glVertex2d(10
.0,10.0)
menggambar titik pada
koordinat x dan y, dengan nilai
satuan berupa double.

Tabel 1.5 Fungsi menggunakan library Primitive Object


Fungsi / Prosedur Penjelasan
# define GL_POINTS Primitif objek ini dipergunakan
untuk
menciptakan suatu titik.
# define GL_LINES Primitif objek ini adalah suatu
primitive objek
guna menciptakan suatu garis.
# define GL_LINE_LOOP Menarik sekelompok verteks yang
terhubung menjadi segmen garis
dari titik pertama sampai terakhir,
kemudian kembali ke verteks
yang pertama.
# define GL_LINE_STRIP Menggambar sekelompok verteks
yang terhubung menjadi segitiga.
Sebuah segitiga baru didefinisikan
untuk setiap titik yang diberikan
setelah dua verteks pertama dan
seterusnya.
# define GL_TRIANGLES Triangle atau segitiga adalah tiga
buah titik
yang terhubung menjadi suatu
segitiga dengan blok di tengahnya.
#define GL_TRIANGLES_STRIP Pada triangles strip jumlah vertex
yang
dipergunakan adalah 3 buah vertex.
#define GL_TRIANGLES_FAN Triangles fan adalah pembuatan
suatu objek dengan menggunakan
segitiga dimana hanya
menggunakan 1 titik pusat saja.
# define GL_QUADS Quad atau segempat adalah
empat buah titik yang terhubung
menjadi quat segi empat
dengan blok di tengahnya.
#define GL_QUADS _STRIP Pada quads strip 4 buah vertex
merupakan 1
kelompok.
# define GL_POLYGON Polygon merupakan suatu fungsi
yang mirip
dengan polyline, tetapi
menghasilkan kurva tertutup dengan
blok warna (fill).

1.4 Langkah - Langkah Tugas


1. Cek versi Visual Studio

Gambar 1.1 Cek versi Visual Studio


2. Siapkan file glut yang akan digunakan

Gambar 1.2 Siapkan file glut


3. Pindahkan C Header File ke dalam folder C:\Program Files (x86)\Microsoft
Visual Studio 12.0\VC\include

Gambar 1.3 Folder untuk C Header File


4. Pindahkan dll File ke dalam folder C:\Windows\SysWOW64 apabila
menggunakan Sistem operasi 64 bit dan C:\Windows\System32 apabila
menggunakan Sistem operasi 32 bit

Gambar 1.4 Folder untuk dll File


5. Pindahkan Library File ke dalam folder C:\Program Files (x86)\Microsoft
Visual Studio 12.0\VC\lib

Gambar 1.5 Folder untuk Library File

1.5 Kesimpulan
1. OpenGL adalah suatu library grafis standard open source dan digunakan
untuk mengembangkan aplikasi yang menghasilkan grafis Komputer 2D
atau 3D.
2. OpenGL merupakan suatu antarmuka pemrograman aplikasi (application
programming interface (API) yang tidak tergantung pada piranti dan
platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem
operasi Windows, UNIX dan sistem operasi lainnya
3. OpenGL bersifat Open-Source, multi-platform dan multi-language serta
digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek
3 dimensi.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 2
TRANSFORMASI 2D

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Transformasi 2
TUGAS : Membuat Program Gabungan Refleksi dan Shear

2.1 Tujuan
1. Praktikkan mampu mengerti transformasi 2D
2. Praktikkan dapat memahami transformasi shear
3. Praktikan mampu memahami tentang refleksi

2.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

2.3 Landasan Teori


Refleksi dalam transformasi geometri ini dapat dikatakan pencerminan.
Refleksi adalah transformasi yang membuat mirror (pencerminan) dari image
suatu objek. Image mirror untuk refleksi 2D dibuat relatif terhadap sumbu dari
refleksi dengan memutar 180 derajat terhadap refleksi. Sumbu refleksi dapat
dipilih pada bidang x,y. Dan refleksi ini sama dengan kita memutar 180 derajat
pada bidang xy dan dengan koordinat menggunakan titik pusat koordinat
sebagai pivot point.

Gambar 2.1 Contoh refleksi pada gambar 2D


Shear merupakan bentuk transformasi yang membuat distorsi dari bentuk
suatu objek, seperti menggeser sisi tertentu..Shear adalah suatu proses untuk
mentransformasikan objek dengan cara “membebani” objek tersebut kearah
tertentu, sehingga dihasilkan suatu objek yang distorsi. Dua macam shear yang
umum adalah shear menurut sumbu x dan shear menurut sumbu y. Dengan
kata lain shear yaitu menarik titik – titik koordinat tertentu pada objek kesuatu
arah berdasarkan sumbu x atau y.

Terhadap sumbu x :
Terhadap sumbu
: y

Gambar 2.2 Contoh penggunaan shear pada gambar 2D


Persegi panjang ABCD dengan koordinat A(1, 1), B(4, 1), C(4, 6), D(1, 6)
digusur:
1. Menurut arah sumbu X (invariant sumbu X) dengan faktor skala k = 2
menjadi persegi panjang A2B2C2D2 dengan koordinat A2(3, 1),
B2(6, 1), C2(16, 6), D2(13, 6)
2. Menurut arah sumbu Y (invariant sumbu Y) dengan faktor skala k = 2
menjadi persegi panjang A3B3C3D3 dengan koordinat A3(1, 3),
B3(4, 9), C3(4, 14), D3(1, 8)
Pengaruh nilai k:
1. Untuk gusuran menurut arah sumbu X → k positif arahnya ke kanan, k
negatif arahnya ke kiri
2. Untuk gusuran menurut arah sumbu Y → k positif arahnya ke atas, k
negatif arahnya ke bawah

2.4 Langkah - Langkah Tugas


Source code
Header.h :
#include<stdio.h>
#include<math.h>
#include<iostream>
#include<vector>
#include<glut.h>

using namespace std;

int pntX1, pntY1, choice = 0, edges;


vector<int> pntX;
vector<int> pntY;
char reflectionAxis, shearingAxis;
int shearingX, shearingY;
void drawPolygon()
{
glBegin(GL_POLYGON);
glColor3f(1.0, 0.0, 0.0);
for (int i = 0; i < edges; i++)
{
glVertex2i(pntX[i], pntY[i]);
}
glEnd();
glFlush();
}

void drawPolygonMirrorReflection(char reflectionAxis)


{
glBegin(GL_POLYGON);
glColor3f(0.0, 0.0, 1.0);
for (int i = 0; i < edges; i++)
{
glVertex2i((pntX[i]), (pntY[i] * -1));
}

glEnd();
glFlush();
}

void myInit(void)
{
glClearColor(1.0, 1.0, 1.0, 0.0);
glColor3f(0.0f, 0.0f, 0.0f);
glPointSize(4.0);
gluOrtho2D(-10.0, 10.0, -10.0, 10.0);
}

void myDisplay()
{
drawPolygon();
drawPolygonMirrorReflection(reflectionAxis);
}

Source.cpp :
#include "Header.h"

void main(int argc, char** argv)


{

cout << "masukan jumlah titik : ";


cin >> edges;
for (int i = 0; i < edges; i++)
{
cout << "masukan koordinat :" << i + 1 << ":";
cin >> pntX1 >> pntY1;
pntX.push_back(pntX1);
pntY.push_back(pntY1);
}
cout << reflectionAxis;

glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(640, 480);
glutInitWindowPosition(100, 150);
glutCreateWindow("1818057");
glutDisplayFunc(myDisplay);
myInit();
glutMainLoop();
}

Tampilan hasil :

Gambar 2.3 Tampilan hasil running program gabungan refleksi dan shear
Analisa :
Gambar 2.3 diatas merupakan tampilan hasil dari transformasi shear.
Bayangan terletak di bawah object. Transformasi shear hanya memiliki 2
koordinat yaitu sumbu x dan sumbu y.
Tabel 2.1 Fungsi OpenGL

No Fungsi Pengertian Contoh Penggunaan


1 glBegin Memulian glBegin()
menggambar
dalam bentuk garis
2 GL_POLYGON Fungsi yang mirip (GL_POLYGON);

dengan
polylinetapu
menghasilkan
kurba tertutup
dengan blok
warna (fill)
3 glColor4f Memberi warna titik 3 glColor3f(0.0, 0.0,
1.0);
dimensi
4 glVertex2i Fungsi untuk glVertex2i(10,10);

menggambarkan titik
pada koordinat x dan
y dengan nilai satuan
integer
5 glEnd Mengakhiri glEnd();

penggambaran
sebuah
Garis
6 glFlush Rendering glFlush();

7 glPointSize Mengatur besarnya glPointSize(4.0);

suatu objek
8 gluOrtho2D Mengatur proyeksi gluOrtho2D(-10.0,
10.0, -
hasil eksekusi dan
10.0, 10.0);
mendefinisikan
besarnya sistem
koordinat dengan
urutan kiri – kanan
dan
bawah - atas
9 glClearColor Menandakan warna apa glClearColor(1.0,
1.0, 1.0,
yang digunakan
0.0);

2.5 Kesimpulan
1. Shear adalah suatu proses untuk mentransformasikan objek dengan cara
“membebani” objek tersebut kearah tertentu, sehingga dihasilkan suatu
objek yang distorsi.
2. Transformasi dapat diartikan sebagai suatu metode yang dapat digunakan
untuk memanipulasi lokasi sebuah titik.
3. Komposisi transformasi adalah menggabungkan beberapa tranformasi,
sehingga dapat menghasilkan bentuk transformasi yang lebih kompleks.
.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 3
ALGORITMA PEMBUATAN OBJEK

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Algoritma Pembentukan Objek
TUGAS : Membuat grafik dengan algoritma DDA dan Bressenham

3.1 Tujuan
1. Praktikan mampu mengetahui Algoritma Pembentukan Objek
2. Praktikan mampu membuat grafik dengan algoritma DDA dan Bressenham
di Microsoft Visual Studio 2013
3. Praktikan mampu mengatahui algoritma DDA dan Bressenham

3.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

3.3 Landasan Teori


A. Algoritma Digital Differential Analyzer (DDA)
Prinsip algoritma ini adalah mengambil nilai integer terdekat dengan
jalur garis berdasarkan atas sebuah titik yang telah ditentukan sebelumnya
(titik awal garis Algoritma pembentukan garis DDA). Prinsip algorima ini
adalah mengambil nilai integer terdekat dengan jalur garis berdasarkan aas
sebuah titik yang telah ditentukan sebelumnya (titik awal dan titik akhir).
Langkah – langkah pembentukan garis berdasarkan algoritma
Digital Differential Analyzer (DDA) :
1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
2. Tentukan salah satu titik sebagai awal(x1,y1) dan titik akhir(x2,y2).
3. Hitung |dx|=x2-x1, dan |dy|= y2-y1.
4. Tentukan langkah, yaitu dengan cara jarak maksimum jumlah
penambahan nilai x maupun nilai y, dengan cara:
a. Bila nilai |dx| lebih besar dari |dy|, maka nilai variabel langkah =
|dx|.

b. Begitu juga sebaliknya, bila nilai |dy| lebih besar dari |dx|, maka
nilai variabel langkah = |dy|.
5. Hitung penambahan koordinat pixel yaitu
x_increment=dx/langkah, dan y_increment=dy/langkah
6. Koordinat selanjutnya (x+x_increment, y+y_increment)

7. Posisi pixel pada layar ditentukan dengan pembulatan nilai koordinat


tersebut

8. Ulangi nomor 6 dan 7 untuk menentukan posisi pixel


selanjutnya,sampai x=x1 dan y=y1.

B. Algoritma Bressenham
Algoritma Garis Bresenham adalah suatu algoritma yang menentukan
titik-titik dalam dimensi yang membentuk pendekatan dekat dengan garis
lurus antara dua titik yang diberikan. Pendekatan ini biasa digunakan untuk
menggambar garis pada layar komputer, karena hanya menggunakan
integer penambahan, pengurangan dan pergeseran. Algoritma ini
merupakan salah satu algoritma paling awal yang dikembangkan di bidang
komputer grafis.
Langkah-langkah pembentukan garis berdasarkan algoritm Bressenham
adalah:
1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
2. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1,y1).
3. Hitung dx, dy, dan 2dy - 2dx
4. Hitung parameter : pk = 2dy – dx
5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,
a. bila pk < 0 maka titik selanjutnya adalah: (xk+1, yk) dan pk + 2dy
b. bila pk > 0, titik selanjutnya adalah: (xk+1, yk+1) dan pk + 2dy –
2dx
6. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya, sampai x =
x1 atau y = y1.
3.4 Langkah - Langkah Tugas
1. NIM : 1818057
1818057 = NIM Depan = 5 , NIM Belakang = 7
2. Perhitungan
a. Koordinat titik awal (1,5) Koordinat titik akhir (8,7)
b. Menentukan titik
X1 = 1 Y1 = 5
X2 = 8 Y2 = 7
c. Hitung |dx| dan |dy|
|dx| = |x2 – x1| = (8 – 1) = 7
|dy| = |y2 – y1| = (7 – 5) = 2
d. Nilai |dx| lebih besar dari |dy| maka langkahnya = 7
e. Menghitung x_inc dan y_inc
x_inc = dx / langkah = 7/7 = 1
y_inc = dy / langkah = 2/7 = 0,28
Iterasi 1 (1,5) Iterasi 2 (2; 5,28) Iterasi 3 (3; 5,56)
x + x_inc = 1 + 1 x + x_inc = 2 + 1 = 3 x + x_inc = 3 + 1 = 4
= 2 y + y_inc = 5 y + y_inc = 5,28 + y + y_inc = 5,56 +
+ 0,28 = 5,28 0,28 = 5,56 0,28 = 5,84
titik (2,5) titik (3,6) titik (4,6)
Next Step (2; 5,28) Next Step (3; 5,56) Next Step (4; 5,84)

Iterasi 4 (4; 5,84) Iterasi 5 (5; 6,12) Iterasi 6 (6; 6,4)


x + x_inc = 4 + 1 = 5 x + x_inc = 5 + 1 = 6 x + x_inc = 6 + 1 = 7
y + y_inc = 5,84 + y + y_inc = 6,12 + y + y_inc = 6,4 + 0,28
0,28 = 6,12 0,28 = 6,68
titik (5,6) = 6,4 titik (7,7)
Next Step (5; 6,12) titik (6,6) Next Step (7; 6,68)
Next Step (6; 6,4)
Iterasi 7 (7; 6,68)
x + x_inc = 7 + 1 = 8
y + y_inc = 6,68 +
0,28
= 6,96
titik (8,7)
3. Tabel Perhitungan
Tabel 3.1 Perhitungan

Iterasi x_inc y_inc x y

0 - - 1 5

1 2 5,28 2 5

2 3 5,56 3 6

3 4 5,84 4 6

4 5 6,12 5 6

5 6 6,40 6 7

6 7 6,68 7 7

7 8 6,96 8 7

4. Grafik

8
7
6
5
4
3
2
1
0
1 2 3 4 5 6 7 8

Gambar 3.1 Grafik


1. NIM : 1818057
1818057 = NIM Depan = 5 , NIM Belakang = 7
2. Perhitungan
a. Koordinat titik awal (1,5) Koordinat titik akhir (8,7)
b. Menentukan Titik
X1 = 1 Y1 = 5
X2 = 8 Y2 = 7
c. Hitung |dx| dan |dy|
|dx| = |x2 – x1| = (8 – 1) = 7
|dy| = |y2 – y1| = (7 – 5) = 2
2dy – 2dx = 2(2) – 2(7) = -10
d. Menghitung pk = 2dy – dx = 2(2) – 7 = -3
e. Jika pk > 0, maka nilai pk+1, x dan y selanjutnya adalah
K1 = (P1 = -3) K2 = (P2 = 1) K3 = (P3 = -9)
x = xk + 1 = 1 + 1 = x = xk + 1 = 2 + 1 = 3 x = xk + 1 = 3 + 1 = 4
2
y = yk = 5 = 5 y = yk + 1 = 5 + 1 = 6 y = yk = 6 = 6
pk = pk + 2dy = -3 + pk = pk + 2dy - 2dx = pk = pk + 2dy = -9 + 4
4= 1+ =
1 4 - 14 = -9 -5
K4 = (P4 = -5) K5 = (P5 = -1) K6 = (P6 = 3)
x = xk + 1 = 4 + 1 = x = xk + 1 = 5 + 1 = 6 x = xk + 1 = 6 + 1 = 7
5
y = yk = 6 = 6 y = yk = 6 y = yk + 1 = 6 + 1 = 7
pk = pk + 2dy = -5 + pk = pk + 2dy = -1 + pk = pk + 2dy - 2dx = 3
4= 4= +
-1 3 4 - 14 = -7

K7 = (P7 = -7)
x = xk + 1 = 7 + 1 =
8
y = yk = 7
pk = pk + 2dy = -7 +
4=
-3
3. Tabel Perhitungan
Tabel 3.2 Perhitungan

Interasi Pk x y Pk + 1

0 - 1 5 -3

1 - 1+1=2 5 -3 + 4 = 1
3

2 1 2+1=3 5+1 1 + 4 - 14 = -9
=6

3 - 3+1=4 6 -9 + 4 = -5
9
4 - 4+1=5 6 -5 + 4 = -1
5
5 - 5+1=6 6 -1 + 4 = 3
1
6 3 6+1=7 6+1 3 + 4 - 14 = -7
=7
7 - 7+1=8 7 -7 + 4 = -3
7

4. Grafik

8
7
6
5
4
3
2
1
0
1 2 3 4 5 6 7 8

Gambar 3.2 Grafik


Source Code
Program DDA
DDA.cpp
#include <stdlib.h>
#include <glut.h>
#include <iostream>

using namespace std;

void init();
void display(void);
void dda(void);
int window_x;
int window_y;
int window_width = 720;
int window_height = 480;
char *judul_window = "1818057";

void init()
{
glClearColor(0.0, 0.0, 0.0, 0.0);
glColor3f(255., 8.0, 1.0);
glPointSize(5.0);
glLoadIdentity();
gluOrtho2D(.0, 20.0, 0.0, 20.0);
}
void dda(void) {
int x1, y1, x2, y2;
float x, y, dx, dy, steps, x_inc, y_inc; x1 = 1;
y1 = 5;
x2 = 8;
y2 = 7;
x = x1; y = y1;
dx = x2 - x1; dy = y2 - y1;

if (dx > dy) {


steps = dx;
}
else steps = dy;

x_inc = dx / steps;
y_inc = dy / steps;

glBegin(GL_LINE_STRIP);
glVertex2i(x, y);

do {
x += x_inc;
y += y_inc;
glVertex2i(round(x), round(y));
} while (x < x2);

glEnd();
glFlush();
}
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
dda();
glutSwapBuffers();
}

void main(int argc, char **argv)


{

glutInit(&argc, argv);
window_x = (glutGet(GLUT_SCREEN_WIDTH) - window_width) / 2;
window_y = (glutGet(GLUT_SCREEN_HEIGHT) - window_height) /
2;

glutInitWindowSize(window_width, window_height);
glutInitWindowPosition(window_x, window_y);

glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE);
glutCreateWindow(judul_window);
init();
glutDisplayFunc(display);
glutMainLoop();
}

Tampilan Hasil :

Gambar 3.3 Tampilan Running DDA


Analisa :
Program diatas terdapat #include yang berfungsi untuk memanggil
library. Didalam Header terdapat variable edges yang memiliki fungsi untuk
menyimpan data yang di input. Terdapat void main, tipe data integer dan char.
Pada void init diatas digunakan untuk menampilkan programnya.
Tabel 3.1 Fungsi OpenGL
No Fungsi Pengertian Contoh Penggunaan
1 glBegin(GL Polygon merupakan suatu fungsi glBegin(GL_POLYGO
_POLYGO N) N);
yang mirip dengan polyline, tetapi
menghasilkan kurva tertutup
dengan blok warna (fill).
2 initGL Inisialisasi openGL awal yang glutInit
harus dilakukan
3 glClearCo Menandakan warna apa yang glClearColor(1.0,
lo r digunakan sebagai background. 1
.0,
1.0, 0.0);
4 glVertex2 Yaitu suatu fungsi untuk glVertex2i(pn
i( x,y) menggambar titik pada koordinat tX[i],
x dan y, dengan nilai satuan pntY[i]);
berupa integer.
5 glEnd(); Untuk mengakhiri penggambaran glEnd();
sebuah garis
6 glFlush(); Renderring glFlush();
7 glColor3f( Untuk memberi warna suatu glColor3f(0. 0.
) objek. 0f, 0.0f); 0f
,
8 #define Primitif objek ini adalah suatu glBegin(GL_LINE_ST
GL_LINES primitive objek guna RIP);
menciptakan suatu garis

Bresenham.cpp
#include <stdlib.h>
#include <glut.h>
#include <iostream>

void setPixel(GLint xCoordinate, GLint yCoordinate)


{
glBegin(GL_POINTS);
glVertex2i(xCoordinate,
yCoordinate); glEnd();
glFlush();

}
void LineBres(GLint x1, GLint y1, GLint xEnd,
GLint yEnd)//rumus
{

GLint dx = (xEnd -
x1); GLint dy =
(yEnd - y1); GLint
p = 2 * dy - dx;
GLint twoDy = 2 +
dy;
GLint twoDyMinusDx = 2 * (dy -
dx); GLint x, y;
if (x1 > xEnd) {
x = xEnd;
y =
yEnd
;
xEnd
= x;
}
else
{
x = x1;
y = y1;
}
setPixel(x
, y);
while
(x<xEnd)
{
x++;
if (p < 0) p +=
twoDy; else
{
y++;
p += twoDyMinusDx;
}
setPixel(x, y);
}
}

void drawMyLine()
{

glColor3f(1.0, 0.0,
0.0);
glPointSize(4.0);
GLint x1 =
1; GLint
y1 = 5;
GLint xEnd
= 8; GLint
yEnd = 7;
LineBres(x1, y1, xEnd, yEnd);
}
void display()
{

glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0, 50.0, 0.0,
50.0);
}

int main(int argc, char** argv)


{
glutInitWindowSize(400, 400);
glutInitWindowPosition(0
, 0);
glutCreateWindow("181805
7"); display();
glutDisplayFunc(drawMyLi
ne); glutMainLoop();
return 0;
}

Tampilan hasil :

Gambar 3.4 Tampilan Running Bresenham


Analisa :
Program diatas terdapat source code #include yang berfungsi untuk
memanggil library. Didalam Header terdapat variable edges yang berfungsi
untuk menyimpan data yang di inputkan. Terdapat void main bernama
setPixce, fungsi tersebut untuk menetukan titik koordinat x dan y,didalamnya
terdapat GL_POINT yaitu untuk menampilkan program tersebut dalam bentuk
titik-titik koordinat.
Tabel 3.3 Fungsi OpenGL
No Fungsi Pengertian Contoh
Penggunaan
1 glBegin(GL Polygon merupakan suatu fungsi glBegin(GL_POLY
_POLYGO N) yang mirip dengan polyline, tetapi GO N);
menghasilkan kurva tertutup
dengan blok warna (fill).
2 glClearColo Menandakan warna apa yang glClearColor(1.
r digunakan sebagai background. 0, 1.0,
1.0, 0.0);
3 GL_LINE_ Menarik sekelompok verteks yang glutMainLoop();
LOOP terhubung menjadi segmen garis
dari titik pertama sampai terakhir,
kemudian kembali ke verteks
yang pertama.

4 glVertex2i( Yaitu suatu fungsi untuk glVertex2i(pntX


x,y) menggambar titik pada koordinat [i], pntY[i]);
x dan y, dengan nilai satuan
berupa integer.
5 glEnd(); Untuk mengakhiri penggambaran glEnd();
sebuah garis
6 glFlush(); Renderring glFlush();
7 glColor3f() Untuk memberi warna suatu glColor3f(0.0f,
objek. 0.0f,
0.0f);
8 # define Primitif objek ini dipergunakan glBegin(GL_POIN
GL_POINT S untuk menciptakan suatu titik. TS);
3.5 Kesimpulan
1. Prinsip algoritma DDA adalah mengambil nilai integer terdekat dengan jalur
garis berdasarkan atas sebuah titik yang telah ditentukan sebelumnya (titik
awal garis Algoritma pembentukan garis DDA).
2. Algoritma Garis Bresenham adalah suatu algoritma yang menentukan titik-
titik dalam dimensi yang membentuk pendekatan dekat dengan garis lurus
antara dua titik yang diberikan.
3. Prinsip algorima DDA adalah mengambil nilai integer terdekat dengan jalur
garis berdasarkan aas sebuah titik yang telah ditentukan sebelumnya (titik
awal dan titik akhir).

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 4
LINGKARAN

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Lingkaran
TUGAS : Membuat Perhitungan Lingkaran dan Program Lingkaran

4.1 Tujuan
1. Praktikan mampu memahami inisialisasi lingkaran
2. Praktikan mampu memahami object lingkaran
3. Praktikan mampu memahami dasar menampilkan susunan lingkaran

4.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

4.3 Landasan Teori


A. Lingkaran
Lingkaran adalah kumpulan dari titik-titik yang memiliki jarak dari
titik pusat yang sama untuk semua titik. Lingkaran dibuat dengan
menggambarkan seperempat lingkaran, karena bagian lain dapat dibuat
sebagai bagian yang simetris. Penambahan x dapat dilakukan dari 0 ke r
sebesar unit step, yaitu menambahkan ± y untuk setiap step. Pada dasarnya,
mirip dengan penggambaran garis, algoritma penggambaran lingkaran pun
berusaha mencari solusi optimal sedemikian rupa sehingga lingkaran yang
dibentuk adalah sesempurna mungkin. Gambar di bawah ini memberikan
ilustrasi penggambaran lingkaran.
Gambar 4.1 Ilustrasi Penggambaran Lingkaran
Algoritma Pembentuk Lingkaran Midpoint.
1. Tentuan radius r dengan titik pusat lingkaran (xc,yc) kemudian
diperoleh: (x0,y0) = (0.r)
2. Hitung nilai dari parameter P0 = 5 / (4 - r) atau P0 = 1 - r
3. Tentukan nilai k = 0, untuk setiap posisi xk berlaku sebagai berikut :
a. Jika Pk < 0, maka titik selanjutnya adalah (xk+1 , yk) dan parameter
selanjutnya Pk+1 = Pk + 2(xk+1) + 1
b. Jika Pk > 0, maka titik selanjutnya adalah (xk+1 , yk - 1) dan
parameter selanjutnya Pk+1 = Pk + 2(xk+1) + 1 – 2(yk+1)
4. Tentukan titik simetris pada ketujuh oktan yang lain
5. Ulangi langkah ke 3 sampai 5, sehingga x>=y

4.4 Langkah - Langkah Tugas


NIM = 1818057 = NIM Depan = 5, NIM Akhir = 7
a. Perhitungan
Titik pusat (x0,y0) = (5,0) r = 7
1. Diketahui (x0,y0) = (0,7)
2. Hitung P0
P0 = 1 – r = 1 – 7 = -6
3. Cari x, y dan pk+1 untuk iterasi 1
x = xk + 1 = 0 + 1 = 1
y = yk = 7
Pk+1 = Pk + 2(xk+1) + 1 = 2(1) + 1 = -3
Iterasi 2
x = xk+1 = 1 + 1 = 2
y = yk = 7
Pk+1 = Pk + 2(xk+1) + 1 = -3 + 2(2) + 1 = 2
Iterasi 3
x = xk+1 = 2 + 1 = 3
y = yk-1 = 7 - 1 = 6
Pk+1 = Pk + 2(xk+1) + 1 – 2(yk+1) = 2 + 2(3) + 1 – 2(8) = 9 – 16 = -7
Iterasi 4
x = xk+1 = 3 + 1 = 4
y = yk = 6
Pk+1 = Pk + 2(xk+1) + 1 = -7 + 2(4) + 1 = 2
Iterasi 5
x = xk+1 = 4 + 1 = 5
y = yk-1 = 6 – 1 = 5
Pk+1 = Pk + 2(xk+1) + 1 – 2(yk+1) = 2 + 2(5) + 1 – 2(7) = -1

b. Tabel perhitungan
Table 4.1 Tabel Perhitungan
Iterasi x y pk titik
0 0 7 -6 -
1 1 7 -3 (1,7) (1,-7) (-1,7) (-1,-7) (7,1) (7,-1) (-7,1) (-7,-1)
2 2 7 2 (2,7) (2,-7) (-2,7) (-2,-7) (7,2) (7,-2) (-7,2) (-7,-2)
3 3 6 -7 (3,6) (3,-6) (-3,6) (-3,-6) (6,3) (6,-3) (-6,3) (-6,-3)
4 4 6 2 (4,6) (4,-6) (-4,6) (-4,-6) (6,4) (6,-4) (-6,4) (-6,-4)
5 5 5 -1 (5,5) (5,-5) (-5,5) (-5,-5) (5,5) (5,-5) (-5,5) (-5,-5)
c. Grafik

Gambar 4.2 Hasil Ilustrasi Penggambaran Lingkaran

Source code
Program Lingkaran
Lingkaran.cpp
#include <stdio.h>
#include <iostream>
#include <glut.h>
#define round
using namespace std;

int pntX1, pntY1, r;

void plot(int x, int y){


glBegin(GL_POINTS);
glVertex2i(round(x + pntX1), round(y + pntY1));
glEnd();
}

void myInit(void){
glClearColor(0.0, 0.0, 0.0, 0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(24, -16, -24, 16);
}

void midPointCircleAlgo()
{
int x = 0;
int y = r;
float decision = 1 - r;

plot(x, y);

while (y > x){


if (decision < 0){
x++;
decision += 2 * x + 1;
}
else{
y--;
x++;
decision += 2 * (x - y) + 1;
}
plot(x, y);
plot(x, -y);
plot(-x, y);
plot(-x, -y);
plot(y, x);
plot(y, -x);
plot(-y, x);
plot(-y, -x);
}
}

void myDisplay(void){
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 0.0, 0.0);
glPointSize(5.0);
midPointCircleAlgo();
glFlush();
}

void main(int argc, char** argv)


{
cout << "\nMasukkan Koordinat-X : "; cin >> pntX1;
cout << "\nMasukkan Koordinat-Y : "; cin >> pntY1;
cout << "\nMasukkan Radius : "; cin >> r;

glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(640, 480);
glutInitWindowPosition(100, 150);
glutCreateWindow("1818057");
glutDisplayFunc(myDisplay);
myInit();
glutMainLoop();
}
Tampilan Hasil :

Gambar 4.3 Tampilan Running Lingkaran


Analisa :
Pada program diatas, pada void plot di dalamnya terdapat x + pntX1 dan
x + pntY1 untuk menggambarkan titik koordinat, kemudian memasukkan titik
pusat x dan y pada void midPointCircleAlgo. Lalu untuk nilai Pk “2 * x +
1;”dan apabila Pk< 0 maka nilai xk+1 dan yk-1,untuk Pk“2 * x + 1;”. Berulang
ulang
Tabel 4.2 Fungsi OpenGL
No Fungsi Pengertian Contoh Penggunaan
1 glClearColor Menandakan warna apa glClearColor(0.0,
0.0, 0.0, 0.0);
yang digunakan sebagai
background.
2 glVertex2i(x,y) Yaitu suatu fungsi untuk glVertex2i(pntX[i],
pntY[i]);
menggambar titik pada
koordinat x dan y,
dengan nilai satuan
berupa integer.
3 glEnd(); Untuk mengakhiri glEnd();
penggambaran sebuah
garis
4 glFlush(); Renderring glFlush();
5 glColor3f() Untuk member warna glColor3f(1.0, 0.0,
0.0);
suatu objek.
6 glPointSize Suatu fungsi yang glPointSize(5.0);
berfungsi untuk
mengatur besarnya suatu
objek

4.5 Kesimpulan
1. Lingkaran adalah kumpulan dari titik-titik yang memiliki jarak dari titik
pusat yang sama untuk semua titik
2. Lingkaran dapat digambarkan dengan menggunakan persamaan koordinat
rectangular tsb akan tetapi pendekatan ini menimbulkan dua masalah yaitu
Persamaan tersebut mengandung perhitungan akar yang operasinya
memakan waktu dan Timbul gap yang cukup signifikan pada lingkaran
ketika digambarkan.
3. Lingkaran merupakan objek yang simetris sehingga karakteristik ini dapat
dimanfaatkan untuk mengurangi pekerjaan pada saat menggambar
lingkaran.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 5
OBJEK PRIMITIF

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Pembentukan Obyek Garis
: Buat sesuai gambar obyek primitive dan beri isi nama
TUGAS
window menjadi Nama + NIM

5.1 Tujuan
1. Praktikan mampu memahami pembuatan primitif objek openGL
2. Praktikan mampu menerapkan primitif objek menggunakan openGL
3. Praktikan mampu membuat gabungan dari obejk primitive menggunakan
openGL

5.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

5.3 Landasan Teori


A. Definisi Objek Primitif
Objek Primitif adalah interpretasi sejumlah set atau deretan titik
pada sebuah bentuk yang digambar pada layar. Pada OpenGL terdapat 10
macam objek primitif yang dapat di modifikasi sesuai keinginan.
Objek Primitif terbentuk dari kumpulan titik titik yang berderet.
Seperti gambar pada dibawah ini yang dimana, pada awalnya kumpulan
titik titik ini membentuk suatu garis. Dari garis ini pun akhirnya dapat
diolah menjadi objek primitif seperti polygon, kurva, lingkaran, dsb yang
membentuk objek 2D. Bentuk objek primitif ini, dapat dikembangkan lagi
menjadi bentuk objek 3D sesuai dengan keinginan.
Gambar 5.1 Elemen – elemen pembentuk Objek Grafis

Gambar 5.2 Bentuk dasar objek primitif

5.4 Langkah - Langkah Tugas


Source code
Program Lingkaran
ObyekGaris.cpp
#include "ObyekGaris.h"

void main()
{
glutInitWindowPosition(100, 100);
glutInitWindowSize(640, 640);
glutCreateWindow("Febryan Alfaridzi 1818057");
gluOrtho2D(-350, 350, -350, 350);
glutDisplayFunc(gabung);
glutMainLoop();
}
ObyekGaris.h
#include <stdio.h>
#include <glut.h>

void drawLine1()
{
glBegin(GL_POLYGON);
glVertex2d(50, 0);
glVertex2d(100, 50);
glVertex2d(100, 100);
glVertex2d(0, 200);
glVertex2d(-100, 100);
glVertex2d(-100, 50);
glVertex2d(-50, 0);
glVertex2d(0, -50);
glVertex2d(0, -100);
glVertex2d(0, -50);
glVertex2d(-50, 0);
glVertex2d(-100, -50);
glVertex2d(-100, -100);
glVertex2d(0, -200);
glVertex2d(100, -100);
glVertex2d(100, -50);
glEnd();
glFlush();
}

void drawLine2()
{
glBegin(GL_POLYGON);
glVertex2d(250, 0);
glVertex2d(300, 50);
glVertex2d(300, 100);
glVertex2d(200, 200);
glVertex2d(100, 100);
glVertex2d(100, 50);
glVertex2d(150, 0);
glVertex2d(100, -50);
glVertex2d(100, -100);
glVertex2d(200, -200);
glVertex2d(300, -100);
glVertex2d(300, -50);
glEnd();
glFlush();
}
void drawLine3()
{
glBegin(GL_POLYGON);
glVertex2d(-150, 0);
glVertex2d(-100, 50);
glVertex2d(-100, 100);
glVertex2d(-200, 200);
glVertex2d(-300, 100);
glVertex2d(-300, 50);
glVertex2d(-250, 0);
glVertex2d(-300, -50);
glVertex2d(-300, -100);
glVertex2d(-200, -200);
glVertex2d(-100, -100);
glVertex2d(-100, -50);
glEnd();
glFlush();
}
void garisatas1()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(0, 100);
glColor3f(1, 0, 0);
glVertex2d(0, 50);
glColor3f(1, 0, 0);
glVertex2d(50, 0);
glColor3f(1, 0, 0);
glVertex2d(100, 50);
glColor3f(1, 0, 0);
glVertex2d(100, 100);
glEnd();
glFlush();
}
void garisatas2()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(200, 100);
glColor3f(1, 0, 0);
glVertex2d(200, 50);
glColor3f(1, 0, 0);
glVertex2d(250, 0);
glEnd();
glFlush();
}
void garisatas3()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(-200, 100);
glColor3f(1, 0, 0);
glVertex2d(-200, 50);
glColor3f(1, 0, 0);
glVertex2d(-150, 0);
glColor3f(1, 0, 0);
glVertex2d(-100, 50);
glVertex2d(-100, 100);
glEnd();
glFlush();
}

void garisbawah1()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(0, -100);
glColor3f(1, 0, 0);
glVertex2d(0, -50);
glColor3f(1, 0, 0);
glVertex2d(-50, 0);
glColor3f(1, 0, 0);
glVertex2d(-100, -50);
glColor3f(1, 0, 0);
glVertex2d(-100, -100);
glEnd();
glFlush();
}

void garisbawah2()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(200, -100);
glColor3f(1, 0, 0);
glVertex2d(200, -50);
glColor3f(1, 0, 0);
glVertex2d(150, 0);
glColor3f(1, 0, 0);
glVertex2d(100, -50);
glColor3f(1, 0, 0);
glVertex2d(100, -100);
glEnd();
glFlush();
}

void garisbawah3()
{
glBegin(GL_LINE_STRIP);
glColor3f(1, 0, 0);
glVertex2d(-200, -100);
glColor3f(1, 0, 0);
glVertex2d(-200, -50);
glColor3f(1, 0, 0);
glVertex2d(-250, 0);

glEnd();
glFlush();
}
void gabung()
{
glClear(GL_COLOR_BUFFER_BIT);
drawLine1();
drawLine2();
drawLine3();
garisatas1();
garisatas2();
garisatas3();
garisbawah1();
garisbawah2();
garisbawah3();

}
Tampilan hasil :

Gambar 5.3 Tampilan Hasil Running


Analisa :
Pada source code untuk gambar 5.3 diatas, di ObyekGaris.h terdapat
#include<stdio.h> yang fungsinya adalah untuk memanggil library yang ada
dalam Microsoft visual studio dan #include<glut.h> yang berfungsi untuk
memanggil library yang ada didalam glut.h.
Tabel 5.1 Fungsi OpenGL
No Fungsi Pengertian Contoh Penggunaan
1 glClear Untuk memnghapus window glClear
(GL_COLOR_BUFFER_BI
dan memberi warna yang
T);
telah didefinisikan
sebelumnya.
2 glBegin Objek primitif yang berfungsi glBegin(GL_POLYGON)
(GL_POLY ;
untuk membuat bentuk dari
GON)
beberapa koordinat dengan
terisi warna.
3 glBegin Objek primitif yang berfungsi glBegin(GL_LINE_STR
(GL_LINE_ IP);
untuk membuat bentuk dari
STRIP)
beberapa koordinat dengan
terisi warna.
4 glVertex2d Untuk memnggabar titik pada glVertex2d(200,
(x,y) 100);
koordinat x dan y dengan
nilai satuan double.
5 glColor3f( Untuk memberi warna suatu glColor3f(0.0, 1.0,
) 1);
objek.
6 glEnd() Untuk mengakhiri gambaran glEnd();

dari suatu objek.


7 glFlush() Untuk melakukan rendering. glFlush();

8 gluOrtho2D Untuk mengatur proyeksi gluOrtho2D(-350,


350, - 350, 350);
hasil eksekusi dan
mendefinisikan besarnya
sistem koordinat.

5.5 Kesimpulan
1. Objek Primitif adalah interpretasi sejumlah set atau deretan titik pada
sebuah bentuk yang digambar pada layar.
2. Obyek primitive adalah sebuah obyek yang merupakan dasar dari
prmbentukan obyek lain yang lebih kompleks dari obyek primitive.
3. Point merupakan sebuah fungsi pada grafika komputer yang menghasilkan
output obyek sebuah titik.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 6
CLIPPING

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Clipping
TUGAS : Menghitung Clipping dan membuat program Clipping

6.1 Tujuan
1. Praktikan mampu implementasi transformasi Clipping
2. Praktikan mampu memahami konsep pada Clipping
3. Praktikan mampu menerapkan algoritma Clipping Metode Cohen-
Sutherland

6.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

6.3 Landasan Teori


A. Clipping
1. Prosedur yang mendefinisikan bagian gambar, baik di dalam
maupun di luar suatu bidang tertentu di sebut dengan algoritma
clipping/clipping.
2. Pada transformasi viewing, perlu ditampilkan bagian gambar yang
terdapat dalam window. Semua yang gambar yang terdapat dalam
window. Semua yang berada di luar window akan dibuang.
3. Clipping dapat diterapkan pada world coordinate, sehingga hanya
isi yang berada dalam window dipetakan ke device coordinat
B. Algoritma Clipping Cohen-Sutherland-Line-Clipping
Algoritma Cohen-Sutherland merupakan metode untuk menentukan
apakah sebuah garis perlu dipotong atau tidak dan menentukan titik
potong garis
1. Area gambar didefinisikan sebagai sebuah area segiempat yang
dibatasi oleh xmin dan xmax, ymin dan ymax.
2. Setiap ujung garis diberi kode 4 bit dan disebut sebagai region
code. Region code ditentukan berdasarkan area dimana ujung garis
tersebut berada ada 9 region dalam algoritma ini.

C. Susunan Region Code

Gambar 6.1 Susunan Region Code

D. Region Code Daerah Viewport

Gambar 6.2 Region Code Daerah Viewport


E. Menentukan Titik Potong

Gambar 6.3 Menentukan Titik Potong


Dengan xp1, xp2, yp1, dan yp2 dihitung menggunakan persamaan

Gambar 6.4 Persamaan xp1, xp2, yp1, dan yp2

6.4 Langkah - Langkah Tugas


1. Hitung Clipping jika diketahui
Xmax = 2 ; Xmin = -2
Ymax = 2 ; Ymin = -2
Garis AB = (5,1) (Sesuai dengan nim)
Nim Ganjil = (-6,-1)
Jawab :
Menentukan Region titik A dan B
Region Kondisi Region kondisi

L=0 5 > -2 L=1 -6 < -2


R=1 5<2 R=0 -6 < 2

B=0 1 > -2 B=0 -1 > -2

T=0 1<2 T=0 -1 < 2


2. Menentukan Titik Potong
A. Titik potong A dengan region 0010, R = 1 berarti yang dicari adalah yp2
Yp2 = y1 + m *(xmax – x1) = 1 + 0,18 * (2 – 5) = 0,46
Sehingga titik potong (2, 0.46)
B. Titik potong B dengan region 0001, L = 1 berarti yang dicari adalah yp1
Yp2 = y1 + m *(xmin – x1) = 1 + 0,18 * (-2 – 5) = 0,28
Sehingga titik potong (-2, 0.28)

Source code
Cohen.cpp
#include <windows.h>
#include<math.h>
#include<stdio.h>
#include<iostream>
#include<glut.h>
void display();
using namespace std;
float xmin = -2;
float ymin = -2;
float xmax = 2;
float ymax = 2;
float xd1 = 5, yd1 = 1, xd2 = -6, yd2 = -1;
void init(void)
{
glClearColor(0.0, 0, 0, 0);
glMatrixMode(GL_PROJECTION);
gluOrtho2D(-20, 20, -20, 20);
}
int code(float x, float y)
{
int c = 0;
if (y>ymax)c = 8;
if (y<ymin)c = 4;
if (x>xmax)c = c | 2;
if (x<xmin)c = c | 1;
return c;
}
void cohen_Line(float x1, float y1, float x2, float y2)
{
int c1 = code(x1, y1);
int c2 = code(x2, y2);
float m = (y2 - y1) / (x2 - x1);
while ((c1 | c2)>0)
{
if ((c1 & c2)>0)
{
exit(0);
}
float xi = x1; float yi = y1;
int c = c1;
if (c == 0)
{
c = c2;
xi = x2;
yi = y2;
}
float x, y;
if ((c & 8)>0)
{
y = ymax;
x = xi + 1.0 / m*(ymax - yi);
}
else
if ((c & 4)>0)
{
y = ymin;
x = xi + 1.0 / m*(ymin - yi);
}
else
if ((c & 2)>0)
{
x = xmax;
y = yi + m*(xmax - xi);
}
else
if ((c & 1)>0)
{
x = xmin;
y = yi + m*(xmin - xi);
}
if (c == c1)
{
xd1 = x;
yd1 = y;
c1 = code(xd1, yd1);
}
if (c == c2)
{
xd2 = x;
yd2 = y;
c2 = code(xd2, yd2);
}
}
display();
}
void mykey(unsigned char key, int x, int y)
{
if (key == 'c')
{
cout << "terpotong";
cohen_Line(xd1, yd1, xd2, yd2);
glFlush();
}
}
void display()
{
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.0, 1.0, 0.0);
glBegin(GL_LINE_LOOP);
glVertex2i(xmin, ymin);
glVertex2i(xmin, ymax);
glVertex2i(xmax, ymax);
glVertex2i(xmax, ymin);
glEnd();
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_LINES);
glVertex2f(xd1, yd1);
glVertex2f(xd2, yd2);
glEnd();
glFlush();
}
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(600, 600);
glutInitWindowPosition(0, 0);
glutCreateWindow("1818041 - Gesha Warilotte Erwinda");
glutDisplayFunc(display);
glutKeyboardFunc(mykey);
init();
glutMainLoop();
return 0;
}

Tampilan Hasil :

Gambar 6.5 Hasil Running Program

Gambar 6.6 Hasil running program Clipping


Analisa :
Terdapat variabel xmin, xmax, ymax, ymin untuk menentukan windows
yang membentuk persegi. Variabel xdl, ydl, xd2, yd2 untuk membentuk sebuah
garis yang akan dilakukan Clipping.dalam void cohen_line terdapat perhitungn
Clipping dengan mengambil nilai xdl, ydl, xd2, yd2.

Tabel 6.1 Fungsi OpenGL


No Fungsi Pengertian Contoh Penggunaan
1 glClear Untuk menghapus glClear
(GL_COLOR_BUFFER_BIT);
window dan
memberi warna
yang telah
didefinisika
sebelumnya.
2 glBegin Objek primitif yang glBegin(GL_LINE_LOOP)
;
(GL_LINE_LOO
berfungsi untuk
P)
membuat bentuk
dari beberapa
koordinat dengan
terisi warna.
3 glBegin Objek primitif yang glBegin(GL_LINES);
(GL_LINES)
berfungsi untuk
membuat bentuk
dari beberapa
koordinat
denganterisi warna.
4 glVertex2f Untuk memnggabar glVertex2f(xd1,
yd1);
(x,y)
titik pada koordinat
x dan y dengan nilai
satuan float.
5 glColor3f() Untuk memberi glColor3f(0.0,
1.0, 1);
warna suatu objek.

6 glEnd() Untuk mengakhiri glEnd();

gambaran dari suatu


objek.

7 glFlush() Untuk melakukan glFlush();

rendering.
8 gluOrtho2D Untuk mengatur gluOrtho2D(-20,
20, -20, 20);
proyeksi hasil
eksekusi dan
mendefinisikan
besarnya sistem
koordinat.

6.5 Kesimpulan
1. Pada transformasi viewing, perlu ditampilkan bagian gambar yang terdapat
dalam window. Semua yang gambar yang terdapat dalam window. Semua
yang berada di luar window akan dibuang.
2. Algoritma Cohen-Sutherland merupakan metode untuk menentukan apakah
sebuah garis perlu dipotong atau tidak dan menentukan titik potong garis.
3. Clipping adalah proses pemotongan objek atau pengguntingan objek
sehingga hanya objek yang berada pada area yang menjadi perhatian saja
yang terlihat.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 7
ALGORITMA LIANG BARSKY DAN CLIPPING
POLYGON

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Algoritma Liang Barsky dan Clipping Polygon
: Membuat perhitungan dan program Algoritma Liang Barsky
TUGAS
dan Clipping Polygon

7.1 Tujuan
1. Praktikan mampu memahami konsep dari Algoritma Liang Barsky dan
Clipping Polygon
2. Praktikan mampu memahami dasar teori dari Algoritma Liang Barsky dan
Clipping Polygon
3. Praktikan mampu menerapkan fungsi dasar Algoritma Liang Barsky dan
Clipping Polygon

7.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

7.3 Landasan Teori


A. Algoritma Liang Barsky
Algoritma Liang-Barsky lebih efisien dibandingkan dengan Cohen
Sutherland karena perhitungan titik potong dihilangkan. Jenis clipping yang
lebih cepat dikembangkan berdasarkan persamaan parametrik dari segmen
garis dapat ditulis dalam bentuk :
x = x1 + u.dx
y = y1 + u.dy
Dimana diketahui :
dx = x2 – x1
dy = y2-y1
Menurut Liang dan Barsky bentuk pertidaksamaan sebagai berikut:
xmin <= x1 + u.dx <= xmax
ymin <= y1 + u.dy <= ymax
Dengan pk, qk, k=1,2,3,4
Dimana parameter p dan q ditentukan sebagai berikut:
xL = 1 (Kiri): p1 = -dx, q1= x1-xmin
xR = 2 (Kanan): p2 = dx, q2= xmax – x1
yB = 3 (Bawah): p3 = -dy, q3= y1-ymin
yT = 4 (Atas): p4 = dy, q4= ymax-y1
Dengan ketentuan :
xL = Xmin xR = Xmax yB = Ymin yT = Ymax
Dicari pk < 0 dan pk > 0 untuk menentukan T1 dan T2
T1 = max (0, qk/pk)
T2 = min (1, qk/pk)
Jika T1 < T2 cari nilai endpoint yang baru
t1 → ( x1 + dx * t1 , y1 + dy * t1) titik awal garis yang baru
t2 → ( x1 + dx * t1 , y1 + dy * t1) titik ujung garis yang baru
y * t1) titik awal garis yang baru
t2 → ( x1 + dx * t1 , y1 + dy * t1) titik ujung garis yang baru

B. CLIPPING POLYGON
Clipping polygon (algoritma Sutherland-Hodman) memiliki
ketentuan yang lebih kompleks daripada clipping line. Clipping dilakukan
terhadap tiap tiap sisi window. Input berupa bentuk poligon, dan output
berupa hasil proses clipping.
Langkah-langkah pembentukan clipping polygon adalah:
1. Tentukan titik yang ingin di clipping.
2. Tentukan Xmax, Xmin, Ymax, dan Ymin
3. Mencari titik potong garis pada setiap sisi
a. Titik potong garis dengan sisi kiri window (x,y)

b. Titik potong garis dengan sisi atas window (x,y)

c. Titik potong garis dengan sisi kanan window (x,y)

d. Titik potong garis dengan sisi bawah window (x,y)

4. Mengumpulkan titik potong garis yang sudah didapatkan


5. Aturan pemotongan garis yang melewati titik T1 (x1,y1) dan T2 (x2,y2)
adalah :
a. Jika T1 titik dalam dan T2 titik dalam, maka output T1,T2
b. Jika T1 titik dalam dan T2 titik luar, maka output T’2,T1
c. Jika T1 titik luar dan T2 titik dalam, maka output T’1, T2
d. Jika T1 titik luar dan T2 titik luar, maka output : Tidak Ada
7.4 Langkah – Langkah Tugas
A. Diketahui titik awal P (0,0) dan titik akhir di Q(8,8) dengan area clipping xL
= 1, xR = 6, yB = 1, dan yT = 6 menggunakan algoritma Liang Barsky
1. Menentukan dx dan dy :
a. Dx = x2 – x1 = 8 – 0 = 8
b. Dy = y2 – y1 = 8 – 0 = 8
2. Menentukan pk, qk, dan qk/pk :
a. P1 = -dx = -8 Q2/P2 = 6/8 = ¾
X1 = x1 = xL = 0 – 1 = -1 c. P3 = -dy = -8
Q1/P1 = (-1)/(-8) = 0,125 Q3 = y1 – yB = 0 – 1 = -1
b. P2 = dx = 8 Q3/P3 = (-1)/(-8) = 0,125
Q2 = xR – x1 = 6 – 0 = 6 d. P4 = dy = 8
Q4 = yT – y1 = 6 – 0 = 6 Q4/P4 = 6/8 = 3/4
3. Mencari P < 0 dan P > 0
a. P < 0 = P1 dan P3
T1 = max (0, Q1/P1, Q3/P3)
= max (0, (-1)/(-8), (-1)/(-8)) = 0
b. P > 0 = P2 dan P4
T2 = min (1, Q2/P2, Q4/P4)
= max (1, 3/4, 3/4) = ¾
4. Diketahui bahwa T1 < T2, maka dicari nilai endpoint baru
a. T1 = 0
X1’ = X1 + (dx * T1)
= 0 + (8 * 0) = 0
Y1’ = Y1 + (dy * T1)
= 0 + (8 * 0) = 0
b. T2 = ¾
X2’ = X1 + (dx * T2)
= 0 + (8 * 3/4) = 6
Y2’ = Y1 + (dy * T2)
= 0 + (8 * 3/4) = 6
5. Nilai (X1’, Y1’) dan (X2’, Y2’)
(X1’, Y1’) = (0,0) (X2’, Y2’) = (6,6)

Tampilan Grafik

Gambar 7.1 Tampilan Grafik


Source code Program Algoritma Liang Barsky
#include<stdio.h>
#include<conio.h>
#include<glut.h>
double xmin = 0, ymin = 0, xmax = 6, ymax = 6;
double xvmin = 20, yvmin = 20, xvmax = 25, yvmax = 25;
int diptest(double p, double q, double *t1, double *t2)
{
double t = q / p;
if (p < 0.0)
{
if (t>*t1) *t1 = t;
if (t>*t2) return(false);
}
else if (p > 0.0)
{
if (t>*t2) *t2 = t;
if (t>*t1) return(false);
}
if (p == 0.0)
{
if (q > 0.0) return(false);
}
return(true);
}
void lblcd(double x0, double y0, double x1, double y1)
{
double dx = x1 - x0, dy = y1 - y0, t1 = 1.0, te = 0.0;
if (diptest(-dx, x0 - xmin, &te, &t1))
if (diptest(dx, xmax - x0, &te, &t1))
if (diptest(-dy, y0 - ymin, &te, &t1))
if (diptest(dy, ymax - y0, &te, &t1))
{
if (t1 > 1.0)
{
x1 = x0 + t1*dx;
y1 = y0 + t1*dy;
}
if (te > 0.0)
{
x0 = x0 + te*dx;
y0 = y0 + te*dy;
}
}
double sx = (xvmax - xvmin) / (xmax = ymin);
double sy = (yvmax - yvmin) / (ymax - ymin);
double xv0 = xvmin + (x0 - xmin)*sx;
double xy0 = yvmin + (x0 - ymin)*sy;
double xv1 = xvmin + (x1 - xmin)*sx;
double xy1 = yvmin + (x1 - xmin)*sy;
glColor3f(1.0, 0.0, 1.0);
glBegin(GL_LINES);
glVertex2d(xv0, xy0);
glVertex2d(xv1, xy1);
glEnd();
glColor3f(0.0, 0.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2f(xvmin, yvmin);
glVertex2f(xvmax, yvmin);
glVertex2f(xvmax, yvmax);
glVertex2f(xvmin, yvmax);
glEnd();
}
void display()
{
double x1 = 0, y1 = 0, x2 = 8, y2 = 8;
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_LINES);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glEnd();
glColor3f(0.0, 0.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2f(xmin, ymin);
glVertex2f(xmax, ymin);
glVertex2f(xmax, ymax);
glVertex2f(xmin, ymax);
glEnd();
glFlush();
}
void myinit()
{
glClearColor(1.0, 1.0, 1.0, 1.0);
glColor3f(1.0, 0.0, 0.0);
glPointSize(1.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-20, 35, -30, 35);
}
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(640, 480);
glutInitWindowPosition(100, 100);
glutCreateWindow("Liang Barsky|Febryan Alfaridzi -
1818057");
glutDisplayFunc(display);
glutIdleFunc(display);
myinit();
glutMainLoop();
}
Tampilan Hasil :

Gambar 7.2 Tampilan Hasil Running Program

B. Lakukan clipping polygon dengan ketentuan Xmax = 2, Xmin = 8, Ymax =


2, Ymin = 8. Untuk titik A (1,10), titik B (14,6), titik C (11,13) dan titik D
(6,2).
1. Menentukan titik potong garis sisi bawah
a. Titik DA = D(6,2) dan A(1,10)
1) Y = Ymin = 8
2) X = X1 + [ (X2 – X1) / (Y2 – Y1) ] * (Ymin – Y1)
= 6 + [ (1-6) / (10-2) ] * (8-2) = 2,25
b. Titik DC = D(6,2) dan C(14,6)
1) Y = Ymin = 8
2) X = X1 + [ (X2 – X1) / (Y2 – Y1) ] * (Ymin – Y1)
= 6 + [ (14-6) / (6-2) ] * (8-2) = 18
Maka diketahui T1 (2,25, 8) dan T2 (18,8)
2. Menentukan titik potong garis sisi kiri
a. Titik AB = A (1,10) dan B(11,13)
1) Titik AB = A (1,10) dan B(11,13)
2) Y = [ (Y2 – Y1) / (X2 – X1) ] * (Xmin – X1) + Y1
= [ (13-10) / (11-1) ] * (8 – 1) + 10 = 12,1
b. Titik AD = A (1,10) dan D(6,2)
1) X = Xmin = 8
2) Y = [ (Y2 – Y1) / (X2 – X1) ] * (Xmin – X1) + Y1
= [ (2-10) / (6-1) ] * (8 – 1) + 10 = -1,2
3. Menentukan titik potong garis sisi atas
a. Titik BA = B(11,13) dan A(1,10)
1) Y = Ymax = 2
2) X = X1 + [ (X2 – X1) / (Y2 – Y1) ] * (Ymax – Y1)
= 11 + [ (1 – 11) / (10 – 13) ] * (2 – 13) = 47,66
b. Titik BC = B(11,13) dan C(14,6)
1) Y = Ymax = 2
2) X = X1 + [ (X2 – X1) / (Y2 – Y1) ] * (Ymax – Y1)
= 11 + [ (14 – 11) / (6 – 13) ] * (2 – 13) = 15,71
Maka diketahui T5 (47,66 , 2) dan T6 (15,71 , 2)
4. Menentukan titik potong garis sisi kanan
a. Titik CB = C(14,6) dan B(11,13)
1) X = Xmax = 2
2) Y = [ (Y2 – Y1) / (X2 – X1) ] * (Xmax – X1) + Y1
= [ (13 – 6) / (11 – 14) ] * (2 – 14) + 6 = 22,33
b. Titik CD = C(14,6) dan D(6,2)
1) X = Xmin = 8
2) Y = [ (Y2 – Y1) / (X2 – X1) ] * (Xmin – X1) + Y1
= [ (2 – 6) / (6 – 14) ] * (8 – 14) + 6 = 3
Maka diketahui T7 (22,33 , 8) dan T8 (3 , 8)
5. Mengumpulkan semua titik potong garis
a. T1 (2,25, 8)
b. T2 (18,8)
c. T3 (8 , 12,1)
d. T4 (8 , -1,2)
e. T5 (47,66 , 2)
f. T6 (15,71 , 2)
g. T7 (22,33 , 8)
h. T8 (3 , 8)

7.5 Kesimpulan
1. Clipping polygon (algoritma Sutherland-Hodman) memiliki ketentuan yang
lebih kompleks daripada clipping line, clipping dilakukan terhadap tiap tiap
sisi window, input berupa bentuk poligon, dan output berupa hasil proses
clipping.
2. Algoritma Liang-Barsky lebih efisien dibandingkan dengan Cohen
Sutherland karena perhitungan titik potong dihilangkan.
3. Ada beberapa algoritam clipping yang ada, namun kita akan membahas
algoritma yang diusulkan oleh Cohen–Sutherland dan Liang-Barsky

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 8
OBJEK 3D DAN PEMBENTUKAN OBJECT 3D DENGAN
FUNGSI OPENGL

NIM : 1818057
NAMA : Febryan Alfaridzi
Objek 3D dan Pembentukan Objek 3D dengan Fungsi
MATERI :
OpenGL
: 1. Membuat object 3D
TUGAS 2. Menggabungkan 2 fungsi object 3D menggunakan
openGL

8.1 Tujuan
1. Praktikan dapat mengerti tentang apa itu Objek 3D
2. Praktikan dapat mengimplementasikan pembuatan Objek 3D
3. Praktikan dapat menggabungkan 2 fungsi Objek 3D menggunakan OpenGL

8.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

8.3 Landasan Teori


A. Pengertian Objek 3 Dimensi
Grafik komputer 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. 3D secara umum
merujuk pada kemampuan dari sebuah video card (link). 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.
Grafik 3D merupakan perkembangan dari grafik 2D. Didalam
grafika komputer, 3D merupakan bentuk grafik yang menggunakan
representasi data geometri tiga dimensi.
Perbedaan paling utama dari objek 2 dimensi dan objek 3 dimensi
yaitu kedalamannya. Yaitu suatu jarak antara pengamat dengan suatu objek
yang dilihat (point of view). Jadi, jika objek 2 dimensi hanya menggunakan
2 ukuran (panjang dan lebar), maka 3 dimensi menggunakan 3 ukuran
meliputi panjang, lebar, kedalaman yang disimbolkan dengan sumbu x, y, z.
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.
Di dalam dunia game, 3D secara umum merujuk pada kemampuan
dari sebuah video card (link). 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.

B. Objek 3 Dimensi
Benda tiga dimensi tersusun dari sekumpulan surface. Surface yaitu
permukaan kulit.

Gambar 8.1 Contoh Permukaan 3 Dimensi


Surface dapat dibuat dari rangkaian Polygon. Polygon adalah bentuk
yang disusun dari serangkaian garis yang terhubung satu dengan yang lain
dan berbentuk kurva tertutup sehingga membentuk sebuah objek gambar.
Titik sudut dari Polygon disebut vertex sedangkan garis penyusun Polygon
disebut edge.

Gambar 8.2 Polygon


Polygon digambar dengan menggambar masing - masing edge
dengan setiap edge merupakan pasangan dari vertexi – vertexi+1 kecuali
untuk edge terakhir merupakan pasangan dari vertexn – vertex1.

Gambar 8.3 Objek 3D yang tersusun dari kumpulan Polygon

C. Sistem Koordinat 3 Dimensi


Secara umum, sistem koordinat tiga dimensi dibedakan menjadi dua,
yaitu sistem koordinat tangan kiri dan sistem koordinat tangan kanan.
Sistem koordinat tangan kanan dapat digambarkan dengan tiga buah jari
pada tangan kanan yang menghadap pengamat yaitu jari tengah sebagai
sumbu z positif, jari telunjuk sebagai sumbu y dan ibu jari sebagai sumbu x.
Sedangkan sistem koordinat tangan kiri dapat digambarkan dengan tiga
buah jari pada tangan kiri dengan punggung tangan menghadap pengamat
dengan jari tengah sebagai sumbu z negatif, jari telunjuk sebagai sumbu y
dan ibu jari sebagai sumbu x
Sistem koordinat tangan kanan banyak digunakan pada
penggambaran geometri. Sebaliknya sistem koordinat tangan kiri banyak
digunakan pada peggambaran pada grafika komputer Sistem koordinat
tangan kiri digunakan agar objek 3 dimensi memiliki nilai z positif (jarak
jauh dekat benda lebih terlihat).
Setiap titik dalam sistem koordinat tiga dimensi dapat ditentukan
posisinya dengan menentukan seberapa jauh, tingggi dan lebar dari objek
aslinya yang dtentukan berdasarkan koordinat-koordinat pada sumbu x, y,
dan z.

Gambar 8.4 Sistem Koordinat 3D

D. Sistem Koordinat 3 Dimensi

Gambar 8.5 Sistem Koordinat 3 Dimensi


E. Pembentukan Object 3D menggunakan fungsi OpenGL
Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive yaitu
bentuk dasar yang dapat dengan mudah didefinisikan secara matematik.
1. Sphere
glutWireSphere(5, 20, 20);

Gambar 8.6 Sphere


2. Cube
glutWireCube(25);

Gambar 8.7 Cube


3. Cone
glutWireCone(alas, tinggi, 20, 20);

Gambar 8.8 Cone


4. Dodecahedron
glutWireDodecahedron();

Gambar 8.9 Dodecahedron


5. Teapot
glutWireTeapot(15);

Gambar 8.10 Teapot


6. Torus
glutWireTorus(luar, dalam, 20, 20)

Gambar 8.11 Torus


Setiap primitive 3D memiliki parameter nilai yang mengekspresikan
letak dan bentuk primitive objek tersebut.
8.4 Langkah - Langkah Tugas
1. Membuat Object 3D selain contoh (Kubus)
Source code :
Source.cpp
#include <iostream>
#include <glut.h>

GLfloat anglePyramid = 0.0f;


GLfloat angleCube = 0.0f;
int refreshMills = 15;

void initGL() {
glClearColor(255.0f, 255.0f, 255.0f, 1.0f);
glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
glShadeModel(GL_SMOOTH);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
}

void display() {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);

glLoadIdentity();
glTranslatef(0.0f, 0.0f, -6.0f);
glRotatef(anglePyramid, 1.0f, 1.0f, 0.0f);
glBegin(GL_POLYGON);
// Alas
glColor3f(0.0f, 255.0f, 255.0f);
glVertex3f(1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(1.0f, -1.0f, 1.0f);
glEnd();
glBegin(GL_TRIANGLES);

// Front
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f(0.0f, 1.0f, 0.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(1.0f, -1.0f, 1.0f);

// Right
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f(0.0f, 1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, 1.0f);
glVertex3f(1.0f, -1.0f, -1.0f);

// Back
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3f(0.0f, 1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, -1.0f);

glVertex3f(-1.0f, -1.0f, -1.0f);

// Left
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f(0.0f, 1.0f, 0.0f);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);

glEnd();

glutSwapBuffers();
anglePyramid += 1.2f;
angleCube -= 0.15f;
}

void timer(int value) {


glutPostRedisplay();
glutTimerFunc(refreshMills, timer, 0);
}

void reshape(GLsizei width, GLsizei height) {


if (height == 0) height = 1;
GLfloat aspect = (GLfloat)width / (GLfloat)height;
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0f, aspect, 0.1f, 100.0f);
}

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


glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE);
glutInitWindowSize(640, 480);
glutInitWindowPosition(50, 50);
glutCreateWindow("Febryan Alfaridzi - 1818057");
glutDisplayFunc(display);
glutReshapeFunc(reshape);
initGL();
glutTimerFunc(0, timer, 0);
glutMainLoop();

return 0;
}
Tampilan Hasil :

Gambar 8.12 Tampilan hasil

Analisa :
Pada source code di atas pertama kita menggunakan library yang akan
di gunakan, lanjut setelah itu mendeklarasikan tiap nilai yang akan digunakan
dengan membuat method yang akan digunakan untuk memanggil fungsi
yang telah di buat sebelumnya, setelah itu jika sudah membuat method,
menentukan titik-titi yang akan di gunakan untuk digabungkan menjadi
beberapa titik sesuai objek yang akan kita buat nantinya, jika sudah baru
masuk ke bagian method menampilkan objek ke layar window.
2. Menggabungkan 2 fungsi object 3d menggunakan openGL
Source code :
Source.cpp
#include <stdlib.h>
#include <glut.h>
float w = 400, h = 400;
float sudut = 0, sx = 10, sy = 6, sz = 0, t = -5;

void display()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();

//solid glPushMatrix();
glTranslatef(-1, 0, t);
glRotatef(sudut, sx, sy, sz);
glColor3d(1, 0, 1);
glutSolidDodecahedron();
glPopMatrix();

//wire glPushMatrix(); glTranslatef(1, 0, t);


glRotatef(sudut, sx, sy, sz);
glColor3d(1, 0, 0);
glutWireIcosahedron();
glutSwapBuffers();
}

void init()

{
glClearColor(1, 1, 1, 1);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h, 1.,
300.);
glMatrixMode(GL_MODELVIEW);
}

void myKeyboard(unsigned char key, int x, int y)


{
if (key == 'x')
{
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
else if (key == 'y')
{
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z')
{
sx = 0;
sy = 0;
sz = 1;
sudut += 10;
}
}

void update(int value)


{

glutPostRedisplay();
glutTimerFunc(50, update, 0);
}

void main(int argc, char** argv)


{
glutInit(&argc, argv);
glutInitDisplayMode(GL_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(200, 200);
glutInitWindowSize(w, h);
glutCreateWindow("Febryan Alfaridzi - 1818057");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

Tampilan Hasil :

Gambar 8.13 Tampilan Hasil

Analisa :
Pada source code diatas pertama kita akan memasukan library yang
akan di gunakan. Selanjutnya mendeklasrasikan tiap variabel yang akan di
gunaka untuk perhitungan untuk membentuk sebuah objek yang di inginkan.
Kemudian memanggil fungsi untuk membuat objek 3D berupa fungsi void
display(), Init(), mykeyboard(), update(), dan main(). Void myInit()
bertujuan untuk mengatur tampilan window. Pada void mykeyboard()
bertujuan untuk menggerakkan objek menggunakan inputan keyboard user.
Void update() bertujuan untuk melakukan refresh secara terus menerus, dan
terakhir pada void main() untuk menjalankan program.
Tabel 8.1 Fungsi OpenGL:
No. Fungsi Pengertian Contoh
Penggunaan
Untuk memulai glBegin(GL_POLYG
1 glBegin
menggambar ON
dalam bentuk garis. );
glColor3f Berfungsi memberikan glColor3f(f,f,f)
2
warna. ;
Untuk mengakhiri glEnd();
3 glEnd
penggambaran sebuah
garis.
4 glFlush Untuk merending suatu glFlush();
objek.
Berfungsi untuk glColor3f(0,0,1)
5 glColor3f
memberikan warna. ;
Untuk mengatur proyeksi gluOrtho2D(-10,
hasil eksekusi hasil dan 10, -10,
6 gluOrtho2D
mendefinisikan besarnya 10);
sistem.
Menentukan letak window glutInitWindowPo
glutInitWindowP
7 sition( 100,
osition dengan patoannya ialah
150);
pada window kiri atas
glutCreateWindo Berfungsi untuk glutCreateWindow
8 w ("181 8085");
memeberi nama pada
tampilan window
program.
Unutuk memanggil fungsi glutDisplayFunc(
lain yang menentukan myDisp lay);
9 glutDisplayFunc konten dari windows telah

dibuat sebelumnya.
Utuk event perulangan, glutMainLoop();
display pada callback akan
10 glutMainLoop
ditampilkan selama
aplikasi
belum ditutup.
Melakukan operasi pop glPopMatrix();
11 glPopMatrix

Melakukan translasi objek glTranslatef(-


12 glTranslatef 10,-25,0);

Melakukan rotasi objek glRotatef(0,01);


13 glRotatef

Membuat sebuah objek 3D glutWireIcosahed


14 glutWireIcosahe wire Iconsahedron ron();
dron()
Membuat sebuah objek 3D glutSolidIcosahe
15 glutSolidIcosah solid Icosahedron dron();
edron()
Melakukan operasi pop glPopMatrix()
16 glPopMatrix
8.5 Kesimpulan
1. Glut merupakan sebuah library yang dapat digunakan untk memuat sebuah
image dari operasi geometri.
2. Pengertian objek primitif gambar dapat dijelaskan dengan beberapa cara,
bila menggunakan raster display, gambar ditentukan oleh satu set intensitas
untuk posisi display pada display.
3. Objek yang solid merupakan objek yang dimana face atau permukaan objek
tersebut dilapisi atau di fill sedangkan pada objek yang wire yang
ditampilkan hanyalah dari objek tersebut.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 9
TRANSFORMASI 3D DAN INTERAKSI DENGAN
PERANGKAT

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Transformasi 3D dan Interaksi dengan perangkat
: Membuat transformasi objek 3D dengan metode translasi
TUGAS
dan rotate menggunakan objek 3D selain teapot

9.1 Tujuan
1. Praktikan dapat mengerti tentang apa itu Transformasi 3D
2. Praktikan dapat mengimplementasikan Transformasi 3D
3. Praktikan dapat mengerti tentang Interaksi dengan perangkat

9.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

9.3 Landasan Teori


A. Transformasi 3D
Metode transformasi objek tiga dimensi sangat berbeda dengan objek
dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu
acuan untuk memperoleh posisi koordinat baru.
1. Translasi (Perpindahan)
Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan
suatu titik dari titik P=(x,y,z) ke posisi P=(x’,y’,z’) (Hearn, 1994) dengan
menggunakan operasi matriks :
Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk
koordinat x, y, dan z.

Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor


tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor
tersebut.

2. Scalling (Perbesaran)
Penskalaan dilakukan dengan mengisi tr = (0,0,0) dan matriks M
diatur seperti beikut.

Perubahan ukuran suatu objek diperoleh dengan mengalikan semua


titik atau atau vertex pada objek dengan faktor skala pada masing-masing
sumbu (parameter Sx untuk sumbu x, Sy untuk sumbu y, dan Sz untuk
sumbu z).
3. Rotasi (Perputaran)
Berbeda dengan rotasi di 2D yang menggunakan titik pusat(0,0)
sebagai pusat perputaran, rotasi 3D menggunakan sumbu koordinat
sebagai pusat perputaran. Dengan demikian ada 3 macam rotasi yang
dapat dilakukan, yaitu:
1) Rotasi terhadap Sumbu X
2) Rotasi terhadap Sumbu Y
3) Rotasi terhadap Sumbu Z
Rotasi terhadap sumbu X, Y, dan Z diperlihakan seperti pada gambar
berikut:

Mengingat ada 3 buah sumbu rotasi maka matriks transformasi yang


digunakan juga bergantung kepada sumbu putar. Adapun isi masing-
masing transformasi sesuai dengan sumbu putar didefinisikan sebagai
berikut.

Berdasarkan penjelasan sebelumnya maka urutan transformasinya


adalah translasi kemudian rotasi. Tidak berlaku sebaliknya. Maka bisa
didefinisikan matriks gabungan untuk transformasi ke koordinat kamera
adalah M = R.T
M adalah matriks transformasi ke koordinat kamera.
R adalah matriks rotasi dan T adalah matriks translasi.
Jadi untuk mendapatkan posisi titik di koordinat kamera rumusnya
adalah : Koord_cam = M.Koord_dunia
Contoh Transformasi Object 3D
#include<stdlib.h>
#include<glut.h>

float w = 480, h = 480;


float sudut = 0, sx = 0, sy = 0, sz = 0, t = -100, tepot
= 10;

void teapot() {
glColor3d(0, 1, 1);
glutWireTeapot(tepot);
}
void display() {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, t);
glRotatef(sudut, sx, sy, sz);
teapot();
glutSwapBuffers();
}
void init() {
glClearColor(1.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,
1.,300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y) {
if (key == 'x') {
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
}
void mySpecialKeyboard(int key, int x, int y) {
switch (key) {
case GLUT_KEY_UP:
tepot += 1;
break;
case GLUT_KEY_DOWN:
tepot -= 1;
break;
}
}
void update(int value) {
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv) {
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutSpecialFunc(mySpecialKeyboard);
glutMainLoop();
}

B. Interaksi dengan Perangkat


1. Konsep Input Keyboard (General Button)
glutKeyboardFunc adalah suatu fungsi callback untuk digunakan
sebagai masukan pada suatu jendela window. Konsepnya pada saat
seorang user atau pengguna memberikan input yaitu menekan pada
tombol keyboard, setiap tombol keyboard yang ditekan akan
menghasilkan suatu karakter ASCII yang akan menghasilkan suatu
callback keyboard yang telah didefinisikan berupa fungsi dengan 3
parameter
Penggunaan input keyboard pada tombol-tombol biasa atau normal
key (a-z, 1-0), dapat dilakukan dengan menggunakan callback function
berupa glutKeyboardFunc(myKeyboard) dengan dideklarasikan terlebih
dahulu suatu fungsi buatan untuk menampung semua perintah input yang
akan digunakan oleh user. Fungsi buatan tersebut seperti contoh di bawah
ini:
void myKeyboard(unsigned char key, int x,int y)
{
// masukkan perintah disini
}

Fungsi tersebut berisi suatu perintah yang akan digunakan dalam


pengoperasian program oleh user. Di dalam fungsi tersebut terdapat 3
parameter dan di dalamnya dideklarasikan suatu perintah yang nantinya
akan digunakan.
void timer(int value){
glutPostRedisplay();
glutTimerFunc(100, timer, 0);
}
void myKeyboard(unsigned char key, int x, int y)
{
if(key == 'a') glTranslatef(0,5,0); if(key ==
'd') glTranslatef(0,-5,0);
}
Sintaks tersebut adalah sintak dasar yang digunakan, untuk bisa
menggunakan input keyboard maka harus diberikan callback function
untuk memanggilnya.
glutKeyboardFunc(myKeyboard);
glutTimerFunc(30,timer,0);

Sintaks tersebut harus disertakan pada fungsi main.


2. Konsep Input Keyboard Special Key
GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang
digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard
sehingga dapat digunakan untuk berinteraksi antara user dengan objek
yang ada di dalam display opengl. Pendeklarasiannya adalah :
void glutSpecialFunc (void (* func) (int key, int x, int
y));

Callback keyboard khusus dipicu ketika keyboard fungsi atau


tombol special yang dideklarasikan ditekan. Parameter callback kunci
adalah GLUT_KEY_tombol khusus.. Parameter x dan y mengindikasikan
koordinat relatif jendela ketika tombol ditekan. Ketika jendela baru
dibuat, tidak ada callback khusus awalnya terdaftar dan stroke kunci
khusus di jendela diabaikan. Melewati NULL untuk glutSpecialFunc
Menonaktifkan generasi callback khusus. Selama callback khusus,
glutGetModifiers dapat dipanggil untuk menentukan keadaan tombol
pengubah ketika keystroke menghasilkan callback terjadi. Nilai-nilai
yang tersedia GLUT_KEY_ * adalah:
GLUT_KEY_F1 F1 Function Key
GLUT_KEY_F2 F2 Function Key
GLUT_KEY_F3 F3 Function Key
GLUT_KEY_F4 F4 Function Key
GLUT_KEY_F5 F5 Function Key
GLUT_KEY_F6 F6 Function Key
GLUT_KEY_F7 F7 Function Key
GLUT_KEY_F8 F8 Function Key
GLUT_KEY_F9 F9 Function Key
GLUT_KEY_F10 F10 Function Key
GLUT_KEY_F11 F11 Function Key
GLUT_KEY_F12 F12 Function Key
GLUT_KEY_LEFT Left Function Key
GLUT_KEY_RIGHT Right Function Key
GLUT_KEY_UP Up Function Key
GLUT_KEY_DOWN Down Function Key
GLUT_KEY_PAGE_UP Page Up Function Key
GLUT_KEY_PAGE_DOWN Page Down Function Key
GLUT_KEY_HOME Home Function Key
GLUT_KEY_END End Function Key
GLUT_KEY_INSERT Insert Function Key

Tombol-tombol diatas dapat diaktifkan dengan membuat sebuah


fungsi callback yang akan dipanggil oleh glutSpecialFunc ke dalam
fungsi main program, sehingga user dapat berinteraksi dengan objek
yang ada dengan menekan tombol-tombol special keyboard yang telah di
deklarasikan ke dalam fungsi callback tersebut. contoh pembuatan fungsi
callback untuk tombol special keyboard :
void mySpecialKeyboard(int key, int x, int y) {
switch (key) {
case GLUT_KEY_UP:
tepot += 1;
break;
case GLUT_KEY_DOWN:
tepot -= 1;
break;
}
}

Selanjutnya fungsi tersebut akan dipanggil oleh glutDisplayFunc ke


dalam fungsi main, berikut script nya :
glutSpecialFunc(mySpecialKeyboard);

Selain fungsi callback yang mendeklarasikan tombol special


keyboard, untuk dapat berinteraksi fungsi tersebut harus memiliki fungsi
callback lain yang akan dipanggil kedalam fungsi glutDisplayfunc dan
fungsi glutTimerFunc didalam fungsi main program tersebut. fungsi
callback di dalam fungsi glutDisplayFunk merupakan fungsi yang
mendklarasikan objek yang akan berinteraksi dengan tombol keyborad,
Sedangkan fungsi glutTimerFunc berfungsi agar tombol keyboard dapat
terus terdeteksi oleh glut.

C. Konsep Mouse Pada GLUT


Dalam konsep mouse pada glut ada beberapa fungsi dasar dan
inisialisasi yang digunakan untuk melakukan interaksi mouse. Adapun
penjelasannya adalah sebagai berikut :
1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK
*func)(int button, int state, int x, int y));

Paramater func adalah fungsi yang akan ditangani dengan event klik
mouse.
GLUTAPI void APIENTRY glutMotionFunc(void *func(int x,
int y));

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse


untuk mendeteksi gerakan mouse.
2. Inisialisasi dalam menggunakan MouseFunction
void mouse(int button, int state, int x,int y){
if(button==GLUT_LEFT_BUTTON &&
state==GLUT_DOWN)
drawDot(x,480-y);
if(button==GLUT_RIGHT_BUTTON &&
state==GLUT_DOWN)
drawDot2(x,480-y);
if(button==GLUT_MIDDLE_BUTTON &&
state==GLUT_DOWN)
drawDot3(x,480-y);
}
void motion(int x,int y){
}

Dalam penerapan interaksi mouse pada open gl / glut, Fungsi


inisialisasinya adalah sebagai berikut :
a) GLUT_LEFT_BUTTON
Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse
kiri. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari
button mouse sebelah kiri maka bisa menggunakan fungsi inisialisasi
ini.
b) GLUT_RIGHT_BUTTON
Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse
kanan. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari
button mouse sebelah kanan maka bisa menggunakan fungsi
inisialisasi ini.
c) GLUT_MIDDLE_BUTTON
Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse
tengah. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari
button mouse tengah maka bisa menggunakan fungsi inisialisasi ini.
d) GLUT_DOWN
Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol
mouse ditekan
e) GLUT_UP
Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol
mouse dilepaskan. Kemudian pada main program perlu menambahkan
fungsi untuk callback fungsi MouseFunction. glutMouseFunc(mouse);
glutMotionFunc(motion);

Contoh Program Penerapan Mouse pada GLUT


#include <stdlib.h>
#include <glut.h>
#include <stdio.h>
void Triangles(){
glBegin(GL_TRIANGLES);
glVertex2i(0, 0);
glVertex2i(100, -30);
glVertex2i(100, 30);
glEnd();
}
void mouseku(int button, int state, int x, int y){
if (button == GLUT_LEFT_BUTTON){
printf("tombol KIRI (%i,%i)\n", x, y);
}
else if (button == GLUT_MIDDLE_BUTTON){
printf("tombol TENGAH (%f,%f)\n", x, y);
}
else{
printf("tombol KANAN (%d,%d)\n", x, y);
}
if (state == GLUT_DOWN){
printf("tombol DITEKAN\n");
}
else{
printf("tombol DILEPAS\n");
}
} void display(){
glClear(GL_COLOR_BUFFER_BIT);
glRotatef(10, 0., 0., 1.);
Triangles();
glFlush();
}
void Timer(int value){
glutPostRedisplay();
glutTimerFunc(30, Timer, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(320, 320);
glClearColor(0.0, 0.0, 0.0, 1.0); // A Background
Clear
Color
glutCreateWindow("coba");
glutDisplayFunc(display);
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glutTimerFunc(10, Timer, 0);
glutMouseFunc(mouseku);
glutMainLoop();
}

Contoh Interaksi Drag


#include <stdlib.h>
#include <glut.h>
#include <stdio.h>
void Triangles(){
glBegin(GL_TRIANGLES);
glVertex2i(0, 0);
glVertex2i(100, -30);
glVertex2i(100, 30);
glEnd();
}
void mouseku(int button, int state, int x, int y){
if (button == GLUT_LEFT_BUTTON){
printf("tombol KIRI (%d,%d)\n", x, y);
}
else if (button == GLUT_MIDDLE_BUTTON){
printf("tombol TENGAH (%d, %d)\n", x, y);
}
else{
printf("tombol KANAN (%d,%d)\n", x, y);
}
if (state == GLUT_DOWN){
printf("tombol DITEKAN\n");
}
else{
printf("tombol DILEPAS\n");
}
}
void motionku(int x, int y){
printf("posisi printer mouse (%d, %d)\n", x, y);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT); glRotatef(89, 0.,
0.,
1.);
Triangles();
glFlush();
}
void Timer(int value){
glutPostRedisplay();
glutTimerFunc(10, Timer, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(320, 320);
glutCreateWindow("GLUT");
glutDisplayFunc(display);
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glutTimerFunc(10, Timer, 0);
glutMouseFunc(mouseku);
glutMotionFunc(motionku);
glutMainLoop();
}

9.4 Langkah - Langkah Tugas


Membuat transformasi objek 3 dimensi
Source code
main.cpp
#include <stdlib.h>
#include <glut.h>
#include <windows.h>

int w = 800, h = 600, zt = -20, yt = 0, xt = 0;


int x1 = 0, y1 = 0, z1 = 0, sudut = 0;

void renderScene(void) {
static float alpha = 0;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glClearColor(0, 0, 0, 0);
glLoadIdentity();
glTranslatef(xt, yt, zt);
glRotatef(sudut, x1, y1, z1);
glRotatef(alpha, 1, 1, 1);
glColor3f(0, 1, 1);
glutWireCone(2, 4, 25, 25);//fungsi kerucut
glColor3f(1, 0, 0);
glutSwapBuffers();
}

void resize(int w1, int h1) {


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(GLubyte key, GLint x, GLint y) {


//translasi
if (key == 'a' || key == 'A') xt -= 2;
if (key == 'd' || key == 'D') xt += 2;
if (key == 'w' || key == 'W') yt += 2;
if (key == 's' || key == 'S') yt -= 2;
//rotasi
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;
}
}

void mySpecialKeyboard(int key, int x, int y) {


//scalling
switch (key) {
case GLUT_KEY_UP:
zt += 2;
break;
case GLUT_KEY_DOWN:
zt -= 2;
break;
}
}

void timer(int value) {


glutPostRedisplay();
glutTimerFunc(1, timer, 0);
}

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


glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Febryan Alfaridzi 1818057");
gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2);
glutDisplayFunc(renderScene);
glutReshapeFunc(resize);
glutKeyboardFunc(Keyboard);
glutSpecialFunc(mySpecialKeyboard);
glutTimerFunc(1, timer, 0);
glutMainLoop();
}

Tampilan Hasil :

Gambar 9.1 Tampilan objek 3 dimensi

Gambar 9.2 Tampilan rotasi


Gambar 9.3 Tampilan translasi

Gambar 9.4 Tampilan scalling


Analisa :
Objek dapat diubah dengan menekan tombol tertentu dalam keyboard,
misalnya untuk translasi menggunakan huruf “a,d,w,s”, untuk rotasi
menggunakan huruf “x,y”dan Scalling menggunakan tanda panah atas (untuk
memperbesar) dan tanda panah bawah (untuk memperkecil).
Tabel 9.1 Fungsi OpenGL
Fungsi Pengertian Contoh Penggunaan
glKeboardFu Callback function untuk glutKeyboardFunc(myKeybo
nc ard);
memanggil fungsi input
keyboard general button.

glutWireCon Fungsi yang digunakan glutWireCone(2, 4, 25,


e(); 25);//
untuk membuat objek 3
dimensi berbentuk kerucut.

glRotatef() Fungsi ini digunakan untuk glRotatef(alpha, 1, 1,


1);
melakukan transformasi
rotasi pada objek 3
dimensi.

glTranslate Fungsi OpenGL yang glTranslatef(xt, yt,


f(); zt);
digunakan untuk
melakukan transformasi
translasi pada objek 3
dimensi .
9.5 Kesimpulan
1. Metode transformasi objek tiga dimensi sangat berbeda dengan objek dua
dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu
acuan untuk memperoleh posisi koordinat baru.
2. glutKeyboardFunc adalah suatu fungsi callback untuk digunakan sebagai
masukan pada suatu jendela window.
3. GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang
digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard
sehingga dapat digunakan untuk berinteraksi antara user dengan objek yang
ada di dalam display opengl

Nilai Asisten Lab

Ramandani Irma Sari


1818076
PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN : 10
OBJEK SOLID DAN LIGHTING

NIM : 1818057
NAMA : Febryan Alfaridzi
MATERI : Objek Solid dan Lighting
Membuat object 3d dengan fungsi gl_line atau polygon dan
TUGAS :
Menerapkan lighting

10.1 Tujuan
1. Praktikan dapat mengerti tentang apa itu Objek Solid
2. Praktikan dapat mengimplementasikan Objek Solid dan Lighting
3. Praktikan dapat mengerti tentang apa itu Lighting

10.2 Alat dan Bahan


1. Laptop
2. Visual studio 2013
3. OpenGL 3.7.6
4. Modul Grafika Komputer 2020

10.3 Landasan Teori


Visualisasi tentu saja tidak akan terjadi bila tidak ada cahaya.
Pencahayaan merupakan esensi dari visualisasi dan merupakan topik yang
sangat kompleks. Hingga tahap ini lingkungan diberi pencahayaan default
atau standar dengan cahaya lingkungan (ambient) yang sama pada setiap titik.
Kondisi default atau standar dapat dicapai kapan saja dengan mematikan
status Lighting menjadi disabled dengan glDisable(GL_LIGHT0).
Dalam Pencahayaan 2 hal yang menentukan tampilan suatu objek :
1. Sumber Cahaya dan pengaruh lingkungan terhadap cahaya
a. Lokasi Sumber Cahaya
b. Arah pencahayaan dari sumber cahaya (omni, spot)
c. Komponen pengaruh lingkungan terhadap cahaya (Ambient, Diffuse,
Specular)
2. Material dari objek, yang memodelkan bagaimana material bereaksi
terhadap sumber cahaya
a. Material reflektan terhadap komponen cahaya ambient
b. Material reflektan terhadap komponen cahaya diffuse
c. Material reflektan terhadap cahaya specular
d. Material sebagai sumber cahaya (Amitance)
OpenGL akan melakukan komputasi warna setiap pixel di display akhir,
ditampilkan adegan itu dilakukan di frame buffer. Bagian dari komputasi ini
tergantung pada pencahayaan yang digunakan dalam adegan dan hal tersebut
berkenaan dengan bagaimana suatu benda dalam adegan yang memantulkan
atau menyerap cahaya. Sebagai contoh saja misalnya sebuah lautan memiliki
warna yang berbeda pada cerah maupun pada saat hari mendung. Adanya
sinar matahari atau awan menentukan apakah laut termelihat sebagai pirus
terang atau abu-abu keruh kehijauan. Pada kenyataannya, sebagian besar
objek bahkan yang tidak terlihat tiga dimensi sampai mereka diterangi
cahaya. Pada gambar 2 menunjukkan dua versi dari adegan yang persis sama
yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa
pencahayaan.

Gambar 10.1 dua versi adegan sebuah bola


Seperti ditunjukkan pada Gambar diatas, wilayah gelap tampak tidak
berbeda dari bulatan dua dimensi . hal Ini menunjukkan betapa pentingnya
interaksi antara obyek dan cahaya adalah dalam menciptakan adegan tiga
dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan
tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan
adalah proses pemberian cahaya pada suatu obyek, dikenal dengan istilah
lighting atau iluminasi. Pada OpenGL terdapat sebuah perbedaan penting
antara warna dan pencahayaan yang perlu pahami. Ketika menggunakan
pencahayaan atau tekstur pemetaan dengan efek pencahayaan dihidupkan,
warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang
bersinar di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex
adalah efek pengaturan warna dan warna yang berbeda dengan bahan warna.

Gambar 10.2 Menggunakan pencahayaan


Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan
obyek dalam sebuah adegan untuk menciptakan berbagai macam efek.
Dalam pokok bahasan pada bab pencahayaan akan dimulai dengan sebuah
pencahayaan yang penting pada permukaan tersembunyi penghapusan.
Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan dalam
suatu adegan, membahas model konseptual OpenGL pencahayaan, dan
menggambarkan secara rinci cara mengatur pencahayaan dengan banyak
parameter untuk mendapatkan efek tertentu. Pada akhir bab, perhitungan
matematis yang menentukan bagaimana warna mempengaruhi pencahayaan
disajikan.
A. Cahaya Ambient, Diffuse dan Specular
Pencahayaan ambient adalah cahaya yang sudah berserakan begitu
banyak disebabkan oleh lingkungan dan arahnya tidak mungkin
ditentukan atau tampaknya datang dari segala penjuru. Backlighting
pada sebuah ruangan memiliki komponen ambient besar, karena
sebagian besar cahaya yang mencapai mata yang memantul dari banyak
permukaan. Sebuah lampu sorot kecil di luar rumah memiliki
komponen ambient, sebagian besar cahaya dalam arah yang sama, dan
karena diluar, sangat sedikit cahaya mencapai mata setelah memantul
dari benda-benda lain. Ketika cahaya ambient menyerang permukaan,
maka akan tersebar merata di segala penjuru.
Komponen cahaya diffuse adalah komponen yang berasal dari satu
arah, jadi akan terang kalau hal tersebut terjadi tepat diatas sebuah
permukaan dibandingkan jika hampir tidak terjadi di atas permukaan.
Setelah mengenai permukaan, akan tersebar merata di segala penjuru,
sehingga tampak sama-sama terang, tak peduli di mana mata berada.
Setiap cahaya yang datang dari posisi atau arah tertentu mungkin
memiliki komponen diffuse.

Gambar 10.3 Cahaya Diffuse


Cahaya specular datang dari arah tertentu, dan cenderung terpental
pada permukaan dalam arah yang diinginkan. sinar laser berkualitas
tinggi memantul pada cermin dan menghasilkan hampir 100 persen
refleksi specular. Logam atau plastik mengkilap memiliki komponen
specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity
dapat juga dianggap sebagai shininess.

Gambar 10.4 Cahaya Specular


Meskipun sumber cahaya memberikan satu distribusi frekuensi,
komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai
contoh, jika memiliki cahaya putih di sebuah ruangan dengan dinding
merah, cahaya yang tersebar cenderung menjadi warna merah, meskipun
cahaya secara langsung objek putih yang mencolok. OpenGL
memungkinkan untuk mengatur nilai merah, hijau, dan biru untuk setiap
komponen cahaya secara bebas.
Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga
pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya
sendiri.

Gambar 10.5 Cahaya Emmisive


Parameter variabel untuk memilih material warna jenis apa yang
diaktifkan pilihannya antara lain seprti tabel dibawah.
Tabel 10.1 Pilihan material warna
Parameter Name Default Value Meaning
Ambient color of
GL_AMBIENT (0.2, 0.2, 0.2, 1.0)
material
Diffuse color of
GL_DIFFUSE (0.8, 0.8, 0.8, 1.0)
material
GL_AMBIENT_AND Ambient and diffuse
(0.0, 0.0, 0.0, 1.0)
DIFFUSE color of material
Specular color of
GL_SPECULAR
material
GL_SHININESS 0.0 Specular exponent
GL_EMISSION (0.0, 0.0, 0.0, 1.0) Emissive color of
material
Ambient, diffuse and
GL_COLOR_INDEXES (0,1,1)
specular color indices

B. Implementasi Pencahayaan (Lighting) pada OpenGL


Object 3D (Solid) Bentuk Solid
Fungsi Solid merupakan implementasi dari object 3D yang berpusat
pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola
berada di Z positif dan negatif sumbu masing-masing dan meridian utama
persimpangan sumbu X positif.
Berikut adalah list untuk bangun 3D :
a. Kubus Solid void glutSolidCube(GLdouble size);
b. Fungsi glutSolidSphere membuat bola berpusat pada asal pemodelan
sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan
negatif sumbumasing-masing dan meridian utama persimpangan
sumbu X positif.
void glutSolidSphere(GLdouble radius,GLint slices,
GLint stacks);

c. Kerucut Solid.
void glutSolidCone(GLdouble base, GLdouble
height,GLint slices, GLint stacks);

d. Torus Solid.
void glutSolidTorus(GLdouble innerRadius, GLdouble
outerRadius, Glintnsides, GLint rings);

e. Dodecahedron Solid.
void glutSolidDodecahedron(void);

f. Tetra Hedron solid.


glutSolidTetrahedron void (void);

g. Oktahedron solid.
void glutSolidOctahedron(void);

h. Icosahedron solid.
void glutSolidIcosahedron(void);
i. Poci teh solid
void glutSolidTeapot(GLdouble size);

Contoh Program
Proyeksi Cube
#include <glut.h>
void cube()
{
//menggambar kubus dan transformasitarnslasi ke
titik 0.5 0.5 0.5 dan skala 1 1 1 glPushMatrix();
glTranslated(0.5, 0.5, 0.5); //cube
glScaled(1.0, 1.0, 1.0);
glutSolidCube(1.0);
glPopMatrix();
}

void setMaterial()
{
//set properties of surfaces material

//ambient atau permukaan yang memantulkan


sumber cahaya
GLfloat mat_ambient[] =
{
0.7f, 0.7f, 0.7f, 1.0f
};
// ada 4 jenis

//diffuser atau permukaan yang menghasilkan


pantulan terbesar
GLfloat mat_diffuse[] =
{
0.6f, 0.6f, 0.6f, 1.0f
};

//specular atau permukaan yang menghasilkan


pantulan yang sempurna
GLfloat mat_specular[] =
{
1.0f, 1.0f, 1.0f, 1.0f
};
GLfloat mat_shininess[] = { 50.0f };
glMaterialfv(GL_FRONT, GL_AMBIENT, mat_ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);
}

void setLighting()
{
//set light sources
GLfloat lightIntensity[] =
{
0.7f, 0.7f, 0.7f, 1.0f
};//mensettingpencahayaan
GLfloat light_position[] =
{
2.0f, 6.0f, 3.0f, 0.0f
};
glLightfv(GL_LIGHT0, GL_DIFFUSE, lightIntensity);
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
}

void setViewport()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
double winHt = 1.0;
//half height of thewindow
glOrtho(-winHt * 64 / 48, winHt * 64 / 48, -winHt,
winHt, 0.1, 100.0);
}

void setCamera()
{
// set the camera glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(3.3, 3.3, 3.0, 0, 0.25, 0, 0.0, 1.0, 0.0);
}

void displayObject()
{
setMaterial();
setLighting();
setViewport();
setCamera();
//startDrawing
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
cube(); //memanggil fungsi menggambar kubus
glFlush();//mengirim smua objek untuk dirender
}

void main(int argc, char **argv)


{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB |
GLUT_DEPTH);
glutInitWindowSize(640, 480);
glutInitWindowPosition(100, 100);
glutCreateWindow("simple 3d scene");
glutDisplayFunc(displayObject);//fungsi dari
display object yang menggabungkan kubus lighting
material dan kamera
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glShadeModel(GL_SMOOTH);
glEnable(GL_DEPTH_TEST);
glEnable(GL_NORMALIZE);
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
glViewport(0, 0, 640, 480);
glutMainLoop();
}
Hasil Source Code :

Gambar 10.6 Tampilan Hasil Running

10.4 Langkah - Langkah Tugas


Source code :
Source.cpp
#include "stdlib.h"
#include "glut.h"

int w = 350, h = 350;


int sudut = 0, o = 0, p = 0, q = 0;
int a, b;

void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
GLfloat LightPosition[] = { 10.0f, 20.0f, 30.0f, 0.0f
};
LightPosition[0] = a;
LightPosition[1] = b;
glLightfv(GL_LIGHT0, GL_POSITION, LightPosition);
glRotatef(sudut, o, p, q);
glEnable(GL_COLOR_MATERIAL);

//kubus atas
glPushMatrix();
glEnable(GL_COLOR_MATERIAL);
glTranslatef(0, 0, -100);
glRotatef(50, 0, 1, 0);
glColor3f(1, 1, 0);
glutSolidCube(20);
glDisable(GL_COLOR_MATERIAL);
glPopMatrix();

//balok bawah
glPushMatrix();
glEnable(GL_COLOR_MATERIAL);
glColor3f(0, 1, 0);
glTranslatef(0, 0, -100);
glRotatef(50, 0, 1, 0);
glutWireCube(35);
glDisable(GL_COLOR_MATERIAL);
glPopMatrix();
glutSwapBuffers();
}

void resize(int w1, int h1){


glViewport(0, 0, 400, 400);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(60.0, (float)w1 / (float)h1, 1.0,
200.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

void mouse(int button, int state, int x, int y){


a = x - (w / 2);
b = (h / 2) - y;
}

void motion(int x, int y){


a = x - (w / 2);
b = (h / 2) - y;
}

void myKeyboard(unsigned char key, int x, int y){


if (key == 'a') {
o = 1;
p = 0;
q = 0;
sudut += 10;
}

else if (key == 'd'){


o = 0;
p = 1;
q = 0;
sudut += 10;
}

else if (key == 's'){


o = 0;
p = 0;
q = 1;
sudut += 10;
}
}

void timer(int value){


glutPostRedisplay();
glutTimerFunc(50, timer, 0);
}
void init(){
GLfloat LightAmbient[] = { 1.0f, 1.0f, 1.0f, 1.0f };
GLfloat LightDiffuse[] = { 0.7f, 0.7f, 0.7f, 1.0f };
GLfloat LightSpecular[] = { 0.5f, 10.0f, 20.0f, 10.0f
};
GLfloat Shine[] = { 80 };
glShadeModel(GL_SMOOTH);
glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
glMaterialfv(GL_FRONT, GL_SPECULAR, LightSpecular);
glMaterialfv(GL_FRONT, GL_SHININESS, Shine);
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
return;
}

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


glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Lightning 1818057");
init();
glutDisplayFunc(renderScene);
glutReshapeFunc(resize);
glutMouseFunc(mouse);
glutMotionFunc(motion);
glutKeyboardFunc(myKeyboard);
glutTimerFunc(1, timer, 0);
glutMainLoop();
}

Tampilan Hasil :

Gambar 10.6 Tampilan Hasil running


Analisa :
Source code header.h tersebut pada float w, h = 600 untuk menentukan
besar windows, pada void renderscene, berisi kode yang berisi fungsi
lightning dan objek yang akan dikenai penvahayaan seperti lightning
positition utnuk melihat posisi awal lightning tersebut, untuk objek tersendiri
menggunakan glutSolidCube(20); untuk kubus solid yang memiliki surface
dan glutWireCube(35); yang hanya kubus berupa garis, saat program
dijalankan lighting akan terlihat jelas bagian gelap dan terangnya kemdian
saat mouse diklik ke dalam windows dan di geser maka arah lightning akan
berubah karena ini disebabkan oleh fungsi dalam void mouse, perpindahan
dan perputaran juga bisa dilakukan dengan menekan tombol keyboar a, s, d.
Tabel 10.2 Fungsi OpenGL
No Fungsi Pengertian Contoh Penggunaan

Untuk memnghapus window glClear


1 glClear dan memberi warna yang telah (GL_COLOR_BUFFER
didefinisikan sebelumnya. _BIT);

Untuk memnggabar titik pada


glVertex2f
2 koordinat x dan y dengan nilai glVertex2f(xd1,
(x,y) yd1);
satuan float.
glColor3f( Untuk memberi warna suatu glColor3f(0.0,
3 1.0, 1);
) objek.
Untuk mengakhiri gambaran
4 glEnd() glEnd();
dari suatu objek.
glFlush();
5 glFlush() Untuk melakukan rendering.
10.5 Kesimpulan
1. Pencahayaan ambient adalah cahaya yang sudah berserakan begitu banyak
disebabkan oleh lingkungan dan arahnya tidak mungkin ditentukan atau
tampaknya datang dari segala penjuru.
2. Komponen cahaya diffuse adalah komponen yang berasal dari satu arah,
jadi akan terang kalau hal tersebut terjadi tepat diatas sebuah permukaan
dibandingkan jika hampir tidak terjadi di atas permukaan.
3. Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga
pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya
sendiri.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
BAB 11
PENUTUP

11.1 Kesimpulan
1. OpenGL adalah suatu library grafis standard open source dan digunakan
untuk mengembangkan aplikasi yang menghasilkan grafis Komputer 2D
atau 3D.
2. Shear adalah suatu proses untuk mentransformasikan objek dengan cara
“membebani” objek tersebut kearah tertentu, sehingga dihasilkan suatu
objek yang distorsi.
3. Prinsip algoritma DDA adalah mengambil nilai integer terdekat dengan
jalur garis berdasarkan atas sebuah titik yang telah ditentukan
sebelumnya (titik awal garis Algoritma pembentukan garis DDA).
4. Lingkaran merupakan objek yang simetris sehingga karakteristik ini
dapat dimanfaatkan untuk mengurangi pekerjaan pada saat menggambar
lingkaran.
5. Obyek primitive adalah sebuah obyek yang merupakan dasar dari
prmbentukan obyek lain yang lebih kompleks dari obyek primitive.
6. Clipping adalah proses pemotongan objek atau pengguntingan objek
sehingga hanya objek yang berada pada area yang menjadi perhatian saja
yang terlihat.
7. Clipping polygon (algoritma Sutherland-Hodman) memiliki ketentuan
yang lebih kompleks daripada clipping line, clipping dilakukan terhadap
tiap tiap sisi window, input berupa bentuk poligon, dan output berupa
hasil proses clipping.
8. Objek yang solid merupakan objek yang dimana face atau permukaan
objek tersebut dilapisi atau di fill sedangkan pada objek yang wire yang
ditampilkan hanyalah dari objek tersebut.
9. GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang
digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard
sehingga dapat digunakan untuk berinteraksi antara user dengan objek
yang ada di dalam display opengl.
10. Pencahayaan ambient adalah cahaya yang sudah berserakan begitu
banyak disebabkan oleh lingkungan dan arahnya tidak mungkin
ditentukan atau tampaknya datang dari segala penjuru.

11.2 Saran
1. Perlu penambahan jam untuk praktikum karena dengan waktu 1 jam saja
tidak semua praktikkan akan langsung mampu menangkap apa yang telah
di jelaskan.
2. Alangkah baiknya diadakan sesi pertanyaan wajib untuk setiap orang
agar praktikkan dapat berbagi informasi dari setiap pertanyaan yang ada.
3. Alangkah baiknya praktikkan diharuskan membagikan hasil
praktikumnya setelah selesai praktikum untuk memastikan semua
praktikkan mengikuti kegiatan praktikum seperti yang semestinya.

Nilai Asisten Lab

Ramandani Irma Sari


1818076
DAFTAR PUSTAKA

Tim Grafika Komputer. 2019. Modul Praktikum Grafika Komputer. Malang :


Laboratorium Database Institut Teknologi Malang.
admin, n.d. PENGERTIAN GRAFIKA KOMPUTER. [Online]
Available at: https://www.temukanpengertian.com/2013/08/pengertian-grafika-
komputer.html
Fajar, A., 2016. Objek 3 dimensi. [Online]
Available at: https://www.lintasmateri.com/2016/05/objek-3-dimensi.html
fitho, 2020. Pengertian Grafika Komputer, Sejarah, Aplikasi, Model Dasar.
[Online]
Available at: https://www.ilmupengetahuan.co.id/pengertian-grafika-komputer/
Nurtantyana, R., 2014. Pengenalan OpenGL & GLUT. [Online]
Available at: https://www.akunerio.com/pengenalan-opengl-glut/
Saputra, K., 2013. ANIMASI 3D CUBE MENGGUNAKAN VISUAL STUDIO.
[Online]
Available at: https://prezi.com/nmeedq_9zkx1/animasi-3d-cube-menggunakan-
visual-studio/
Susantokun, 2020. Materi Clipping Grafika Komputer. [Online]
Available at: https://www.susantokun.com/materi-clipping-grafika-komputer/
LABORATORIUM DATABASE
INSTITUT TEKNOLOGI NASIONAL
Kampus II : Jl. Raya Karanglo Km. 2 Malang

LEMBAR ASISTENSI PRAKTIKUM GRAFIKA KOMPUTER


SEMESTER GANJIL TAHUN AKADEMIK 2020/2021
Nama : Febryan Alfaridzi
NIM : 1818057
Kelompok :

Asistensi
No. Tanggal Paraf
Konsep Program Hasil Akhir
Pengenal OpenGL
Transformasi 2D dan 3D
Instruktur

Pembentukan Garis dan Lingkaran


15 Desember 2020 Objek Primitif
1 21 Desember 2020 Line dan Polygon Cliping Fix Fix
23 Desember 2020 Pembentukan Objek 3D
Interaksi dengan Perangkat
Objek Solid dan Lighting
Dosen

Batas Akhir : 30 Desember 2020

Malang, Desember 2019


Asisten,
Dosen Pembimbing,

(Ramandani Irma Sari) (Karina Aulia Sari, ST, M.eng)


NIM : 1818057 NIP. 1031000426

Anda mungkin juga menyukai