CSCE 441 Lecture 2: Scan Conversion of Lines Jinxiang Chai

OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_LINE_STRIP GL_LINE_LOOP GL_POLYGON GL_LINES GL_POINTS GL_TRIANGLE_STRIP GL_QUAD_STRIP GL_TRIANGLES GL_QUADS GL_TRIANGLE_FAN 2/110 2

OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_LINE_STRIP GL_LINE_LOOP GL_POLYGON GL_LINES GL_POINTS GL_TRIANGLE_STRIP GL_QUAD_STRIP GL_TRIANGLES GL_QUADS GL_TRIANGLE_FAN 3/110 3

Line-drawing using “Paint”

How can we represent and display images?

Displays – Liquid Crystal Displays

Displays – Plasma

Displays – Smart Phone 8/110 8

Displays – Oculus 9/110 9

Image Representation An image is a 2D rectilinear array of Pixels - A width*height array where each entry of the array stores a single pixel - Each pixel stores color information (255,255,255)

Displays – Pixels Pixel: the smallest element of picture - Integer position (i,j) - Color information (r,g,b) y x (0,0)

Image Representation A pixel stores color information Luminance pixels - gray-scale images (intensity images) - 0-1.0 or 0-255 - 8 bits per pixel Red, green, blue pixels (RGB) - Color images - Each channel: 0-1.0 or 0-255 - 24 bits per pixel

Digital Scan Conversion Convert graphics output primitives into a set of pixel values for storage in the frame buffer

Outline How to draw a line? - Digital Differential Analyzer (DDA) - Midpoint algorithm Required readings - HB 6.1 to 6.8

Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

Line-drawing using “Paint”

Special Lines - Horizontal

Special Lines - Horizontal Increment x by 1, keep y constant

Special Lines - Vertical

Special Lines - Vertical Keep x constant, increment y by 1

Special Lines - Diagonal

Special Lines - Diagonal Increment x by 1, increment y by 1

How about Arbitrary Lines? How to draw an arbitrary line?

Arbitrary Lines Slope-intercept equation for a line: m: slope b: y-intercept Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

Arbitrary Lines Slope-intercept equation for a line: How can we compute the equation from (xL,yL), (xH,yH)? m: slope b: y-intercept Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

Arbitrary Lines Slope-intercept equation for a line: How can we compute the equation from (xL,yL), (xH,yH)? m: slope b: y-intercept Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

Arbitrary Lines Assume Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

Arbitrary Lines Assume Other lines by swapping x, y or negating - e.g., reverse the role of x and y if m>1 Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept 30/110 30

Arbitrary Lines Assume Other lines by swapping x, y or negating - e.g., reverse the role of x and y if m>1 - e.g., negate y if Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept 31/110 31

Arbitrary Lines Assume Other lines by swapping x, y or negating A simple idea: Take steps in x and determine where to fill y Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept 32/110 32

Digital Differential Analyzer Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = m xi+1 + b

Digital Differential Analyzer Simple algorithm: - sample unit intervals in one coordinate - find the nearest pixel for each sampled point.

Digital Differential Analyzer (DDA) Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) //sample unit intervals in x coordinate DrawPixel ( xi, Round ( yi ) ) //find the nearest pixel for each sampled point. xi+1 = xi + 1 yi+1 = m ( xi + 1 ) + b

DDA Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = m xi + m + b

DDA Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = m xi + b + m

DDA Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = m xi + b + m

DDA Start from (xL, yL) and draw to (xH, yH) where xL< xH ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = yi + m

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Example

DDA - Problems Floating point operations Rounding Can we do better? ( x0, y0 ) = ( xL, yL ) For ( i = 0; i <= xH-xL; i++ ) DrawPixel ( xi, Round ( yi ) ) xi+1 = xi + 1 yi+1 = yi + m

Outline How to draw a line? - Digital Differential Analyzer (DDA) - Midpoint algorithm

How to Improve It? Question: if we draw the current pixel, where is the next pixel? (xk,yk) (xk+1,yk+1)

How to Improve It? Question: if we draw the current pixel, where is the next pixel? (xk,yk) (xk+1,yk+1) 58/110 58

How to Improve It? Question: if we draw the current pixel, where is the next pixel? (xk,yk) (xk+1,yk+1) 59/110 59

How to Improve It? xk+1 = xk+1 yk+1 = yk or yk+1 Question: if we draw the current pixel, where is the next pixel? Next column: E or NE direction; why?

Midpoint Algorithm Given a point just drawn, determine whether we move E or NE on next step xk+1 = xk+1 yk+1 = yk or yk+1

Midpoint Algorithm Given a point just drawn, determine whether we move E or NE on next step Is the line above or below midpoint ? Below: move E Above: move NE

Above/Below the Line?

Issues How to evaluate if the midpoint is above or below the line? How to incrementally evaluate this? How to avoid floating point operations?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties y=mx+b (x,y) on the line y<mx+b (x,y) below the line y>mx+b (x,y) above the line 66/110 66

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties y=mx+b (x,y) on the line y<mx+b (x,y) below the line y>mx+b (x,y) above the line But this still requires floating point operations! 67/110 67

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line

Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line Note that e is an integer because 75/110 75

Midpoint Algorithm – Implicit Forms

Midpoint Algorithm – Implicit Forms

Midpoint Algorithm – Implicit Forms

Midpoint Algorithm – Implicit Forms

Midpoint Algorithm – Implicit Forms

Midpoint Algorithm – Implicit Forms

Two Issues How to evaluate if the midpoint is above or below the line? How to incrementally evaluate this?

Above/Below the Line?

Midpoint Algorithm What about starting value? What is the middle point? (xL,yL)

Midpoint Algorithm What about starting value? What is the middle point? (xL,yL) (xL+1,yL+1/2)

Midpoint Algorithm What about starting value? What is the middle point? (xL,yL) (xL+1,yL+1/2)

What about starting value? Midpoint Algorithm What about starting value?

What about starting value? Midpoint Algorithm What about starting value? 88/110 88

What about starting value? Midpoint Algorithm What about starting value? is on the line!

What about starting value? Midpoint Algorithm What about starting value?

What about starting value? Midpoint Algorithm What about starting value? Multiplying coefficients by 2 doesn’t change sign of f

Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of Find value of if E chosen Find value of if NE chosen

Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of Find value of if E chosen Next mid point (x,y)

Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of Find value of if E chosen Find value of if NE chosen (x,y) 94/110 94

Midpoint Algorithm If E was chosen, find

Midpoint Algorithm If E was chosen, find

Midpoint Algorithm If NE was chosen, find

Midpoint Algorithm If NE was chosen, find

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d //initial value draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d //initial value draw(x,y) while ( x < xH) // iterate until reaching the end point if ( sum < 0 ) sum += 2d y++ x++ sum += 2c

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d //initial value draw(x,y) while ( x < xH) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d //initial value draw(x,y) while ( x < xH) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c - Update the current pixel - Update the function value of midpoint 103/110 103

Midpoint Algorithm – Summary x=xL y=yL d=xH - xL c=yL - yH sum=2c+d //initial value draw(x,y) while ( x < xH) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c - Draw the pixel based on the function value of midpoint 104/110 104

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c Dx =6 dy = 2 d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm – Example x=xL y=yL d=xH - xL c=yL - yH sum=2c+d draw(x,y) while ( x < xH) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c d =6 c = -2

Midpoint Algorithm Only integer operations Exactly the same as the more commonly found Bresenham’s line drawing algorithm Extends to other types of shapes (circles)

Midpoint Algorithm: Circle

Midpoint Algorithm: Circle

Midpoint Algorithm: Circle

Midpoint Algorithm: Circle Two issues: What are two possible solutions? What is the evaluation function?

Midpoint Algorithm: Circle

Midpoint Algorithm: Circle (xk+1,yk) (xk+1,yk-1) Two issues: What are two possible solutions? What is the evaluation function?

Midpoint Algorithm: Circle (xk+1,yk) Midpoint: (xk+1,yk-1/2) (xk+1,yk-1) Two issues: What are two possible solutions? What is the evaluation function?

Midpoint Algorithm: Circle (xk+1,yk) Midpoint: (xk+1,yk-1/2) (xk+1,yk-1) Two issues: What are two possible solutions? What is the evaluation function?

Circle, Ellipse, etc Need implicit forms - circle: - ellipse: Equations for incremental calculations Initial positions More details in section 6.4-6.6 of the textbook

Next Lecture How to draw a polygon? - section 6.10- 6.13