LAPORAN TUGAS 1

ALGORITMA PEMBANGKITAN GARIS DIGITAL DIFFERENTIAL ANALYZER

(DDA) DAN GARIS BRESENHAM
Laporan ini bertujuan untuk memenuhi tugas dalam perkuliahan Grafika Komputer
Dosen Pengampu: I Gede Arta Wibawa, S.T., M.Kom.

Oleh:
KELOMPOK 4
I MADE PRADNYANANDANA SUWITRA (1508605033)
ALFINA FEBRILIA ARANTIKA (1508605036)
NYOMAN IMA SATI MUSTIKA (1508605038)
I MADE YOGA PRIANTA (1508605055)

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS UDAYANA
BUKIT JIMBARAN
2017
 BAB I

PENDAHULUAN

Pada laporan ini akan source code yang ditampilkan hanya source code yang menjadi poin
penting dalam membuat titik maupun garis. Karena pada OpenGL dan WebGL terdapat program
defaultnya. Berikut merupakan tampilan default pada OpenGL.

//#include <glut.h>
#include <windows.h>
#include <gl/gl.h>
//#include <glu.h>

//Function Declarations
LRESULT CALLBACK WndProc (HWND hWnd, UINT message,
WPARAM wParam, LPARAM lParam);
void EnableOpenGL (HWND hWnd, HDC *hDC, HGLRC *hRC);
void DisableOpenGL (HWND hWnd, HDC hDC, HGLRC hRC);

//WinMain
int WINAPI WinMain (HINSTANCE hInstance,
HINSTANCE hPrevInstance,
LPSTR lpCmdLine,
int iCmdShow)
{
WNDCLASS wc;
HWND hWnd;
HDC hDC;
HGLRC hRC;
MSG msg;
BOOL bQuit = FALSE;
float theta = 0.0f;

/* register window class */

wc.style = CS_OWNDC;
wc.lpfnWndProc = WndProc;
wc.cbClsExtra = 0;
wc.cbWndExtra = 0;
wc.hInstance = hInstance;
wc.hIcon = LoadIcon (NULL, IDI_APPLICATION);
wc.hCursor = LoadCursor (NULL, IDC_ARROW);
wc.hbrBackground = (HBRUSH) GetStockObject (BLACK_BRUSH);
wc.lpszMenuName = NULL;
wc.lpszClassName = "GLSample";
RegisterClass (&wc);

/* create main window */

hWnd = CreateWindow (
"GLSample", "OpenGL Sample",
WS_CAPTION | WS_POPUPWINDOW | WS_VISIBLE,
0, 0, 1350, 750,
NULL, NULL, hInstance, NULL);
 /* enable OpenGL for the window */
EnableOpenGL (hWnd, &hDC, &hRC);

/* program main loop */

while (!bQuit)
{
/* check for messages */
if (PeekMessage (&msg, NULL, 0, 0, PM_REMOVE))
{
/* handle or dispatch messages */
if (msg.message == WM_QUIT)
{
bQuit = TRUE;
}
else
{
TranslateMessage (&msg);
DispatchMessage (&msg);
}
}
else
{
//Tempat meletakkan kodingan inti dari program
}

/* shutdown OpenGL */
DisableOpenGL (hWnd, hDC, hRC);

/* destroy the window explicitly */

DestroyWindow (hWnd);

return msg.wParam;
}

//Window Procedure
LRESULT CALLBACK WndProc (HWND hWnd, UINT message,
WPARAM wParam, LPARAM lParam)
{
switch (message)
{
case WM_CREATE:
return 0;
case WM_CLOSE:
PostQuitMessage (0);
return 0;

case WM_DESTROY:
return 0;

case WM_KEYDOWN:
switch (wParam)
{
case VK_ESCAPE:
PostQuitMessage(0);
return 0;
}
 return 0;

default:
return DefWindowProc (hWnd, message, wParam, lParam);
}
}

//Enable OpenGL
void EnableOpenGL (HWND hWnd, HDC *hDC, HGLRC *hRC)
{
PIXELFORMATDESCRIPTOR pfd;
int iFormat;

/* get the device context (DC) */

*hDC = GetDC (hWnd);

/* set the pixel format for the DC */

ZeroMemory (&pfd, sizeof (pfd));
pfd.nSize = sizeof (pfd);
pfd.nVersion = 1;
pfd.dwFlags = PFD_DRAW_TO_WINDOW |
PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER;
pfd.iPixelType = PFD_TYPE_RGBA;
pfd.cColorBits = 24;
pfd.cDepthBits = 16;
pfd.iLayerType = PFD_MAIN_PLANE;
iFormat = ChoosePixelFormat (*hDC, &pfd);
SetPixelFormat (*hDC, iFormat, &pfd);

/* create and enable the render context (RC) */

*hRC = wglCreateContext( *hDC );
wglMakeCurrent( *hDC, *hRC );

//Disable OpenGL
void DisableOpenGL (HWND hWnd, HDC hDC, HGLRC hRC)
{
wglMakeCurrent (NULL, NULL);
wglDeleteContext (hRC);
ReleaseDC (hWnd, hDC);
}

Tampilan default pada WebGL

/*================Creating a canvas=================*/
var canvas = document.getElementById('CanvasTitik');
gl = canvas.getContext('experimental-webgl');

/*==========Defining and storing the geometry=======*/

//tempat meletakkan kodingan//
var vertices =
[
 -0.5,0.5,
0.5,-0.5,
-0.5,-0.5,
0.5,0.5,
];

// Create an empty buffer object to store the vertex buffer

var vertex_buffer = gl.createBuffer();

//Bind appropriate array buffer to it

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);

// Unbind the buffer

gl.bindBuffer(gl.ARRAY_BUFFER, null);

/*=========================Shaders========================*/

// vertex shader source code

var vertCode =
'attribute vec3 coordinates;' +

'void main(void) {' +

' gl_Position = vec4(coordinates, 1.0);' +
'gl_PointSize = 10.0;'+
'}';

// Create a vertex shader object

var vertShader = gl.createShader(gl.VERTEX_SHADER);

// Attach vertex shader source code

gl.shaderSource(vertShader, vertCode);

// Compile the vertex shader

gl.compileShader(vertShader);

// fragment shader source code

var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0.7, 0.5, 1.0, 10);' +
'}';

// Create fragment shader object

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

// Attach fragment shader source code

gl.shaderSource(fragShader, fragCode);

// Compile the fragmentt shader

gl.compileShader(fragShader);

// Create a shader program object to store

// the combined shader program
 var shaderProgram = gl.createProgram();

// Attach a vertex shader

gl.attachShader(shaderProgram, vertShader);

// Attach a fragment shader

gl.attachShader(shaderProgram, fragShader);

// Link both programs

gl.linkProgram(shaderProgram);

// Use the combined shader program object

gl.useProgram(shaderProgram);

/*======== Associating shaders to buffer objects ========*/

// Bind vertex buffer object

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Get the attribute location

var coord = gl.getAttribLocation(shaderProgram, "coordinates");

// Point an attribute to the currently bound VBO

gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);

// Enable the attribute

gl.enableVertexAttribArray(coord);

/*============= Drawing the primitive ===============*/

// Clear the canvas

gl.clearColor(1, 1, 1, 1);

// Enable the depth test

gl.enable(gl.DEPTH_TEST);

// Clear the color buffer bit

gl.clear(gl.COLOR_BUFFER_BIT);

// Set the view port

gl.viewport(0,0,canvas.width,canvas.height);

// Draw the triangle/poin/line

gl.drawArrays(gl.POINTS, 0, 4);

1.1 Algoritma Pembangkitan Garis Digital Differential Analyzer (DDA)

Algoritma DDA bekerja bekerja atas dasar penambahan nilai x dan nilai y. Pada garis
lurus, turunan pertama dari x dan y adalah konstanta. Sehingga untuk memperoleh suatu
tampilan dengan ketelitian tinggi, suatu garis dapat dibangkitkan dengan menambah nilai x
dan y masing-masing sebesar x dan y, dengan besaran dengan nilai yang sangat kecil.
Kondisi ideal ini sukar dicapai, karenanya pendekatan yang mungkin dilakukan adalah
 berdasarkan piksel-piksel yang bisa dialamati/dicapai atau melalui penambahan atau
pengurangan nilai x dan y dengan suatu besaran dan membulatkannya ke nilai integer
terdekat.
Langkah-langkah Algoritma DDA adalah:
1. Tentukan dua titik untuk membentuk garis.
2. Beri nama dua titik tersebut dengan titik awal (x1, y0) dan titik akhir (x1, y0).
3. Hitung x= x1-x0 dan y= y1-y0.
4. Tentukan langkah (step) jarak maksimum jumlah penambahan nilai x dan nilai y dengan
cara:
a. Jika nilai |x|= lebih besar nilai |y|, maka step = |x|.
b. Jika tidak, maka step |y|.
5. Hitung penambahan koordinat piksel dengan cara x_tambah = x/step dan y_tambah=
y/step.
6. Tentukan koordinat berikutnya (x k+1 , y k+1 ) dengan (x+x_tambah, y+y_tambah).
7. Posisi piksel pada layar ditentukan dengan pembulatan nilai koordinat tersebut.
8. Ulangi langkah 6 dan 7 untuk menentukan posisi piksel selanjutnya sampai nilai x=x1 dan
y=y1.

1.2 Algoritma Pembangkitan Garis Bresenham

Tujuan dari algoritma Bressenham ini adalah untuk menghindari pembulatan nilai seperti
pada algoritma DDA. Pada algoritma bressenham, nilai y kedua dan seterusnya, dihitung dari
nilai y sebelumnya, sehingga hanya titik y pertama yang perlu dilakukan operasi secara
lengkap. Perbaikan algoritma ini ternyata tidak menghasilkan perbaikan yang cukup
siginifikan. Perbaikan berikutnya dilakukan dengan cara menghilangkan operasi bilangan real
dengan operasi bilangan integer. Operasi bilangan integer jauh lebih cepat dibandingkan
dengan operasi bilangan riel, terutama pada penambahan dan pengurangan.
Langkah-langkah Algoritma Bresenham adalah:
1. Masukkan dua titik akhir dan simpan titik akhir sebelah kiri dalam (x0, y0).
2. Isikan (x0, y0) ke dalam frame buffer yang akan melukis titik pertama.
3. Hitung konstanta Dx, Dy, 2Dy, dan 2Dy-2Dx, dan dapatkan nilai awal untuk parameter
keputusan sebagai p 0 =2Dy-Dx
4. Pada masing-masing x k sepanjang garis, dimulai dengan k=o, lakukan tes berikut: Jika
p k <0, dan titik berikutnya yang akan dilukis adalah (x k+1 , y k ) dan
p k+1 =p k +2Dy.
Selain itu, titik berikutnya yang dilukis adalah (x k+1 , y k+1 ) dan
p k+1 =p k +2Dy-2Dx
5. Ulang langkah 4 sebanyak Dx kali.
 BAB II

PEMBAHASAN

1. Membuat 4 titik beda warna

a. Source Code pada Desktop

else
{
//code start here
glClearColor (255, 255, 255, 0.0f);
glClear (GL_COLOR_BUFFER_BIT);
glViewport(0,0, 600, 400);

glPointSize(10.0);
glBegin (GL_POINTS);

//membuat 4 titik
glColor3f (255, 0, 0); glVertex2f (0.25, 0.25);
glColor3f (0, 255, 0); glVertex2f (0.25, 0.75);
glColor3f (0, 0, 255); glVertex2f (0.75, 0.25);
glColor3f (0, 0, 0); glVertex2f (0.75, 0.75);

glEnd ();
SwapBuffers (hDC);
glFlush();
}

Tampilan program
 Penjelasan source code :

Dalam membuat titik kode utama yang dibuat adalah kode untuk menempatkan titik
pada bidang. Untuk menempatkan titik dapat dilakuak dengan sintaks glVertex2f(x,
y). x dan y adalah koordinat titik. Selain itu terdapat juga sintaks untuk mewarnai
titik yaitu glColor3f(a, b, c). a, b, c adalah kode warna RGB (Red, Green, dan Blue)
yang masing-masing bernilai antara 0-255. Untuk mengatur ukuran titik
ditambahkan sintaks glPointSize(). Selain warna titik, warna background juga dapat
diubah dengan melaukan perubahan pada nilai glClearColor().

b. Source pada Web

Tampilan main program.

<html>
<head>
<title>Tugas Grafkom</title>
</head>
<style>
canvas{
margin:1px;
float:left;
border:1px solid red;}
</style>
<body>
<h1>Membuat 4 Titik</h1>
<canvas width = "400" height = "400" id =
"CanvasTitik"></canvas>
<script type="text/javascript"
src="js/4titik.js"></script>
</body>
</html>

Tampilan javascript

var vertices =
[
-0.5,0.5,
0.5,-0.5,
0.5,-0.5,
0.5,0.5,
];
 Tampilan program :

Penjelasan source code :

Pada pembuatan titik dalam WebGL dibutuhkan kode dalam HTML dan Javascript.
Dalam kode HTML ditampilkan sebuah kanvas yang akan menjadi bidang untuk
penempatan titik. Sedangkan dalam kode Javascript ditentukan penempatan titik
dalam koordinat bidang dalam sebuah variabel array vertices.

2. Membuat garis dengan algoritma DDA

a. Tampilan pada Desktop

else
{
//code start here

glClearColor (0.0f, 0.0f, 0.0f, 0.0f);

glClear (GL_COLOR_BUFFER_BIT);
glViewport(0,0, 350, 250); //posisi garis saat dirun, kalo coba
ganti" sendiri pasti tau yang mana berubah :D

glPointSize(3.0);//besarnya ukuran titik

glBegin (GL_POINTS);

float step;
float x1 = 0.4 , x2 = 0.6 , y1 = 0.8 , y2 = 0.9;
float deltaX = x2-x1;
float deltaY = y2-y1;

if(deltaX<0)
{
deltaX = deltaX*-1;//dikali -1 jika nilai dibawah nol maka
dia akan berada pada diagram minus
}
if(deltaY<0)
{
deltaY = deltaY*-1;
}
if(deltaX>=deltaY)
{
step = deltaX;
}
else
{
step = deltaY;
}

float stepX = deltaX/(step*100);//masih belum tau kenapa dikali

100
float stepY = deltaY/(step*100);
glColor3f (1.0f, 1.0f, 1.0f);

while(x1<=x2)
{
glVertex2f (x1, y1);
x1 = x1 + stepX;
y1 = y1 + stepY;
}
glEnd ();
SwapBuffers (hDC);
glFlush();
}

Tampilan program

Penjelasan Source Code :

Dalam pembuatan garis dengan algoritma DDA (Digital Differential Analyzer) hal
pertama yang dilakukan adalah mencari jarak antara x dan juga jarak antar y dari
titik yang ditentukan. Setelah itu cari langkahnya (Step). Jika jarak antara x lebih
 besar dari jarak antara y maka step adalah jarak antara x. Jika jarak antara x lebih
kecil dari jarak antara y maka step adalah jarak antara y. Setelah mendapatkan
step hitung step dari masing masing titik. Step ini dihitung dengan cara jarak
antara x atau jarak antara y di bagi dengan step dikali 100. Kemudian tampilkan
titik dengan menggunakan perulangan while dimana setiap terjadi perulangan x
dan y akan bertambah sesuai dengan nilai step dari masing masing titik.

b. Tampilan pada Web

Tampilan main program

<html>
<head>
<title>Tugas Grafkom</title>
</head>
<style>
canvas{
margin:1px;
float:left;
border:1px solid red;
}

</style>
<body>
<h1>Algoritma DDA</h1>
<canvas width = "400" height = "400" id =
"CanvasDDA"></canvas>
<script type="text/javascript" src="js/dda.js"></script>
</body>
</html>

Tampilan javascript
koordinat = [];
jum = 0;

function createVertex()
{
var x1 = -0.2 , y1 = -0.5;
var x2 = 0.5 , y2 =0.6;
var step;

var dx = x2-x1;
var dy = y2-y1;

if(dx<0)
{
 dx = dx * -1;
}

if (dy<0)
{
dy = dy * -1;
}

if(dx <= dy)

{
step = dy;
}
else
{
step = dx;
}

tambahx = dx/(step*100);
tambahy = dy/(step*100);

while(x1<=x2)
{
koordinat.push(x1,y1);

//nilai x dan y betambah

x1 = x1 + tambahx;
y1 = y1 + tambahy;
}

Tampilan Program :

Penjelasa source code :

Dalam webGL program diatas memisahkan bagian dari main program pada html
dengan javascript.
 Dalam tahap awal kita tentukan koordinat untuk kedua titik yang diinginkan untuk
membuat garis. Selanjutnya cari delta x (dx) dan delta y (dy). Jika delta x dan
delta y kurang dari 0 (atau bernilai negatif) maka kita kalikan dengan -1 agar
nilainya absolut (positif).
Selanjutnya pilih nilai delta terbesar untuk menjadi step pada algoritma ini.
tambahx dan tambahy merupakan variabel untuk menempatkan posisi koordinat x
dan y yang akan dibentuk agar membuat garis yang akan dijumlahkan dalam
perulangan while.

3. Membuat garis dengan algoritma bresenham

a. Tampilan pada Desktop

else
{
/* OpenGL animation code goes here */
glClearColor(0.0f,0.0f,0.0f,0.0f);
glClear (GL_COLOR_BUFFER_BIT);
glViewport(0,0,400,250);
glPointSize(5.0);
glBegin(GL_POINTS);

float x1=0.2, y1=0.4, x2=0.6, y2=0.8;

float dx=x2-x1;
float dy=y2-y1;

float duady=2*dy;
float duadydx=2*(dy-dx);
float p=(2*dy)-dx;
float xendpoint,x,y;

if(x1>x2)
{
x=x2;
y=y2;
xendpoint=x1;
}
else
{
x=x1;
y=y1;
xendpoint=x2;
}
glVertex2f(x,y);
while(x<xendpoint)
{
x=x+0.001;
if(p<0)
{
 p=p+duady;
}
else
{
y=y+0.001;
p=p+duadydx;
}
glVertex2f(x,y);
}
glEnd();
SwapBuffers(hDC);
glFlush();
}

Tampilan program

Penjelasan Source Code :

Dalam pembuatan garis dengan algoritma Bresenham. Hal pertama yang dilakukan
adalah mencari jarak antar titik baik pada koordinat x maupun y. Jarak pada
koordinat x disebut dx sedangkan jarak pada koordinat y disebut dy. Selain itu
hitung juga 2dy, 2(dy-dx), dan p = (2dy) dx. Perhitungan ini digunakan sebagai
parameter. Seteleh itu cari titik awal dan juga titik akhir. Jika koordinat x pada titik
A lebih besar dari titik B maka titik awal adalah koordinat x dan y dari titik B serta
titik akhirnya adalah koordinat x pada titik A. Begitu juga sebaliknya. Kemudian
lakukan perulangan dimana batasnya adalah titik akhirnya. Pada perulangan
lakukan pengujian p. Jika p < 0 maka p = p+2dy. Jika tidak p<0 maka y ditambah
0,001 dan p ditambah 2(dy-dx). Setelahnya tampilkan titik.
b. Tampilan pada Web
Tampilan main program

<html>
<head>
<title>Tugas Grafkom</title>
</head>
<style>
canvas{
margin:1px;
float:left;
border:1px solid red;
}

</style>
<body>
<h1>Algoritma Bresenham</h1>
<canvas width = "400" height = "400" id =
"CanvasBresenham"></canvas>
<script type="text/javascript"
src="js/bresenham.js"></script>
</body>
</html>

Tampilan javascript
koordinat = [];
jum = 0;

function createVertex(){
var x1 = -0.6 , y1 = 0.6;
var x2 = 0.6 , y2 = 0;
var x;

//tentukan titik awal dan akhir

var x = x1;
var y = y1;

//hitung dx dan dy
dx = Math.abs(x2-x1);
dy = Math.abs(y2-y1);

//hitung p
var p = (2*dy)-dx;

duady = 2 * dy;
duadydx = 2 * (dy - dx);

//tentukan titik awal dan akhir

if (x1 > x2) {
x = x2;
y = y2;
xend = x1;
}else{
x = x1;
 y = y1;
xend = x2;
}

koordinat.push(x,y);

//perulangan untuk menggambar titik-titik

while(x < xend){
x = x + 0.01;
if(p<0){ //
p += duady;
}
else{
if(y1>y2){
y -= 0.01;
}else{
y += 0.01;
}
p += duadydx;
}
koordinat.push(x,y);
}
}

Tampilan Program :

Penjelasa source code :

Dalam webGL program diatas memisahkan bagian dari main program pada html
dengan javascript.
Dalam program ini, algoritma bresenham di simpan dalam bentuk fungsi
createVertex(). Selanjutnya kita tentukan titik koordinat dari kedua titik yang kita
inginkan agar bisa menjadi garis. Variabel x dan y digunakan untuk menyimpan
titik awal dan xend untuk titik akhirnya. Selanjutnya tentukan dx (delta x) dan dy
(delta y). Var p digunakan untuk menyimpan parameter yang diketahui dengan
2dy - dx;
Setelah itu lakukan perulangan untuk menentukan koordinat dari titik yang baru
agar dapat membentuk garis yang terhubung dari kedua titik yang sudah
ditentukan.