PRAKTIKUM GRAFIKA KOMPUTER PERTEMUAN 3

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
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 = 2 x + x_inc = 2 + 1 = 3 x + x_inc = 3 + 1 = 4
y + y_inc = 5 + 0,28 = y + y_inc = 5,28 + 0,28 = y + y_inc = 5,56 + 0,28 =
5,28 5,56 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 + 0,28 = y + y_inc = 6,12 + 0,28 y + y_inc = 6,4 + 0,28 =
6,12 = 6,4 6,68
titik (5,6) titik (6,6) titik (7,7)
Next Step (5; 6,12) Next Step (6; 6,4) Next Step (7; 6,68)

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

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
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 = 2 x = xk + 1 = 2 + 1 = 3 x = xk + 1 = 3 + 1 = 4
y = yk = 5 = 5 y = yk + 1 = 5 + 1 = 6 y = yk = 6 = 6
pk = pk + 2dy = -3 + 4 = pk = pk + 2dy - 2dx = 1 + pk = pk + 2dy = -9 + 4 =
1 4 - 14 = -9 -5

K4 = (P4 = -5) K5 = (P5 = -1) K6 = (P6 = 3)

x = xk + 1 = 4 + 1 = 5 x = xk + 1 = 5 + 1 = 6 x = xk + 1 = 6 + 1 = 7
y = yk = 6 = 6 y = yk = 6 y = yk + 1 = 6 + 1 = 7
pk = pk + 2dy = -5 + 4 = pk = pk + 2dy = -1 + 4 = pk = pk + 2dy - 2dx = 3 +
-1 3 4 - 14 = -7

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

Interasi Pk x y Pk + 1

0 - 1 5 -3

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

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

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

4 -5 4+1=5 6 -5 + 4 = -1

5 -1 5+1=6 6 -1 + 4 = 3

6 3 6+1=7 6+1=7 3 + 4 - 14 = -7

7 -7 7+1=8 7 -7 + 4 = -3

g. Grafik

8
7
6
5
4
3
2
1
0
1 2 3 4 5 6 7 8
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.1 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
glBegin(GL Polygon merupakan suatu fungsi glBegin(GL_POLYGO
_POLYGO yang mirip dengan polyline, tetapi N);
N) menghasilkan kurva tertutup
dengan blok warna (fill).
initGL Inisialisasi openGL awal yang glutInit
harus dilakukan
glClearColo Menandakan warna apa yang glClearColor(1.0, 1.0,
r digunakan sebagai background. 1.0, 0.0);
glVertex2i( Yaitu suatu fungsi untuk glVertex2i(pntX[i],
x,y) menggambar titik pada koordinat pntY[i]);
x dan y, dengan nilai satuan
berupa integer.
glEnd(); Untuk mengakhiri penggambaran glEnd();
sebuah garis
glFlush(); Renderring glFlush();

glColor3f() Untuk memberi warna suatu glColor3f(0.0f, 0.0f,

objek. 0.0f);

# define Primitif objek ini adalah suatu glBegin(GL_LINE_ST

GL_LINES primitive objek guna menciptakan RIP);
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("1818057");
display();
glutDisplayFunc(drawMyLine);
glutMainLoop();
return 0;
}
 Tampilan Hasil :

Gambar 3.2 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.2 Fungsi OpenGL

No Fungsi Pengertian Contoh Penggunaan
glBegin(GL Polygon merupakan suatu fungsi glBegin(GL_POLYGO
_POLYGO yang mirip dengan polyline, tetapi N);
N) menghasilkan kurva tertutup
dengan blok warna (fill).
glClearColo Menandakan warna apa yang glClearColor(1.0, 1.0,
r digunakan sebagai background. 1.0, 0.0);
GL_LINE_ Menarik sekelompok verteks yang glutMainLoop();
LOOP terhubung menjadi segmen garis
dari titik pertama sampai terakhir,
kemudian kembali ke verteks
yang pertama.
 glVertex2i( Yaitu suatu fungsi untuk glVertex2i(pntX[i],
x,y) menggambar titik pada koordinat pntY[i]);
x dan y, dengan nilai satuan
berupa integer.
glEnd(); Untuk mengakhiri penggambaran glEnd();
sebuah garis
glFlush(); Renderring glFlush();

glColor3f() Untuk memberi warna suatu glColor3f(0.0f, 0.0f,

objek. 0.0f);

# define Primitif objek ini dipergunakan glBegin(GL_POINTS);

GL_POINT untuk menciptakan suatu titik.
S

2.5 Kesimpulan
1. 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).
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. Pada praktikum ini saya dapat membuat seuah program DDA dan Bresenham.

Nilai Asisten Lab