Scribd
Upload
2 views2 pages

Lab 5

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views2 pages

Lab 5

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Lab-5: Line Drawing - Digital Differential Analyzer)

Write a program using WebGL to implement digital differential analyzer line drawing algorithm.

Step 1 − The program should accept two points, the starting point (x1, y1) and the ending
point (x2, y2) as an input. To accomplish this, you have to create four input boxes as
shown in the screenshot below.

Step 2 − Create a button with click event. When the user clicks the draw button, the
program will execute a function called drawLine.

Step 3 − The drawLine function should follow the DDA algorithm explained in chapter
4.

DDA(float x0, float x1, float y0, float y1) {


float x, y;
float xinc, yinc;
int numsteps;
numsteps = Round(x1) – Round(x0);
xinc = (x1 – x0) / numsteps;
yinc = (y1 – y0) / numsteps;
x = x0;
y = y0;
ColorPixel(Round(x),Round(y));

for (int i=0; i<numsteps; i++) {


x += xinc;
y += yinc;
ColorPixel(Round(x),Round(y));
}
}
Step 4 − Create and compile Shader programs
We write vertex shader and fragment shader programs, compile them, and create a
combined program by linking these two programs.
Step 5 − Associate the shader programs with buffer objects
We associate the buffer objects and the combined shader program.
Step 6 − Drawing the required object
Exercise:

Modify the sample program provided (dda.html) so that it can handle the following scenarios:

If m < 1 : If m > 1 : If m = 1 :
xinc = 1 xinc = (1 / m) xinc = 1
yinc = m yinc = 1 yinc = 1

Reference

Interactive Computer Graphics: A Top Down Approach with WebGL

You might also like