Line and Circle Drawing Algorithms

1. Line and Circle Drawing Algorithms

2. Learning Objectives • Coordinate reference frames • Two-dimensional world reference • Point functions • Line functions • Line drawing algorithms • Curve functions • Circle algorithms • Other algorithms

3. Learning Objectives • Understand Point and Line geometric primitives. • Understand line drawing algorithm. • Understand circle drawing algorithms.

4. Graphics Output Primitives • Graphics output primitives • Functions used to describe the various picture components • Examples: car, house, flower, … • Geometric primitives • Functions used to describe points, lines, triangles, circles, …

5. Coordinate Reference Frames • Cartesian coordinate system • Can be 2D or 3D • Objects are associated with a set of coordinates • World coordinates are associated with a scene • Object description • Coordinates of vertices • Color • Coordinate extents (min and max for each (x,y,z) in object – also called the bounding box • In 2D – bounding rectangle

6. Coordinate Reference Frames

7. Coordinate Reference Frames • Screen coordinates • Location of object on a monitor • Start from upper left corner (origin (0,0)) • Pixel coordinates • Scan line number (y) • Column number (x) • Other origin  lower left corner (0,0) • Pixel coordinate references the center of the pixel • setPixel (x, y) • getPixel (x, y, color) • Depth value is 0 in 2D

8. Coordinate Reference Frames • Relative coordinates • Current position • Offset from the current position • Example • Current position (2,3) • Relative coordinates (4, -1) • Absolute coordinates (6, 2)

9. 2D World Reference

10. 2D World Reference • gluOrtho2D (xMin, xMax, yMin, yMax) • References display window as a rectangle with the minimum and maximum values listed • Absolute coordinates within these ranges will be displayed gl.glMatrixMode(GL.GL_PROJECTION); // set current matrix to projection matrix gl.glLoadIdentity(); // sets projection matrix to identity glu.gluOrtho2D(0.0, 200.0, 0.0, 150.0); // set coordinate values // with vertices (0,0) for lower left corner // and (200, 150) for upper right corner

11. 2D World Reference • OpenGL matrices • Control how images are rendered • Three matrices 4 x 4 • Stored differently than in maths – lines and columns are inversed (transposed matrices) • Projection matrix describes how the the vertex coordinates are displayed on the screen, based on field of view and near and far planes • Modelview matrix is applied to each vertex coordinate and modifies their locations • Texture matrix is used to manipulate how textures are drawn on objects – default set to identity

12. 2D World Reference • Orthographic projection is standard in the projection matrix • glMatrixMode(GL.GL_PROJECTION)select the projection matrix • glLoadIdentity()set this matrix to the identity matrix • glOrtho2D(0, 200, 0, 150)sets the coordinate values on display between (0,0) and (200, 150)

13. Point Functions • Point • Coordinates • Color - gl.glColor3f(1.0f, 0.0f, 0.0f ); RGB • Size – one screen pixel by default (gl.glPointSize) • gl.Begin (GL.GL_POINTS) gl.glVertex2i (50, 100); gl.glVertex2i (75, 150);gl.glEnd(); • Coordinates can also be set in an int []:int point1 [] = {50, 100};… gl.glVertex2iv (point1); • Point class can also be used (Point(x, y), getX(), getY(), setLocation(50, 100), …).

14. Line Functions • Line • Defined by two endpoint coordinates(one line segment)gl.glBegin( GL.GL_LINES ); gl.glVertex2i( 180, 15 ); gl.glVertex2i( 10, 145 );gl.glEnd(); • If several vertices, a line is drawn between the first and second, then a separate one between the third and the fourth, etc. (isolated vertices are not drawn).

15. Line Functions • Polyline • Defined by line connecting all the pointsgl.glBegin( GL.GL_LINE_STRIP ); gl.glVertex2i( 180, 15 ); gl.glVertex2i( 10, 145 ); gl.glVertex2i( 100, 20 ); gl.glVertex2i( 30, 150 );gl.glEnd(); • Draws a line between vertex 1 and vertex 2then between vertex 2 and vertex 3then between vertex 3 and vertex 4.

16. Line Functions • Polyline • Adds a line between the last vertex and the first onegl.glBegin( GL.GL_LINE_LOOP ); gl.glVertex2i( 180, 15 ); gl.glVertex2i( 10, 145 ); gl.glVertex2i( 100, 20 ); gl.glVertex2i( 30, 150 );gl.glEnd(); • Draws a line between vertex 1 and vertex 2then between vertex 2 and vertex 3then between vertex 3 and vertex 4then between vertex 4 and vertex 1.

17. Line Drawing Algorithms • Line drawn as pixels • Graphics system • Projects the endpoints to their pixel locations in the frame buffer (screen coordinates as integers) • Finds a path of pixels between the two • Loads the color • Plots the line on the monitor from frame buffer (video controller) • Rounding causes all lines except horizontal or vertical to be displayed as jigsaw appearance (low resolution) • Improvement: high resolution, or adjust pixel intensities on the line path.

18. Line Drawing Algorithms • Line equation • Slope-intercept form y = m . x + bslope mY-intercept b • Slope • Y-intercept

19. Line Drawing Algorithms • DDA (Digital Differential Analyzer) • Scan conversion line algorithm • Line sampled at regular intervals of x, then corresponding y is calculated • From left to right

20. Line Drawing Algorithms void lineDDA (int x0, int y0, int xEnd, int yEnd) { int dx = xEnd - x0, dy = yEnd - y0, steps, k; float xIncrement, yIncrement, x = x0, y = y0; if (fabs (dx) > fabs (dy)) steps = fabs (dx); else steps = fabs (dy); xIncrement = float (dx) / float (steps); yIncrement = float (dy) / float (steps); setPixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += xIncrement; y += yIncrement; setPixel (round (x), round (y)); } }

21. Line Drawing Algorithms • Advantage • Does not calculate coordinates based on the complete equation (uses offset method) • Disadvantage • Round-off errors are accumulated, thus line diverges more and more from straight line • Round-off operations take time • Perform integer arithmetic by storing float as integers in numerator and denominator and performing integer artithmetic.

22. Line Drawing Algorithms • Bresenham’s line drawing • Efficient line drawing algorithm using only incremental integer calculations • Can be adapted to draw circles and other curves • Principle • Vertical axes show scan line positions • Horizontal axes show pixel columns • At each step, determine the best next pixel based on the sign of an integer parameter whose value is proportional to the difference between the vertical separations of the two pixel positions from the actual line.

23. Line Drawing Algorithms

24. Line Drawing Algorithms

25. Line Drawing Algorithms • Bresenham’s line drawing algorithm (positive slope less than 1)dlower = y – ykdupper = (yk + 1) – ydlower – dupper = 2m(xk+1) – 2yk + 2b –1decision parameter: pk= Δx (dlower – dupper ) pk = 2Δy xk- 2Δx yk + c sign of pk is the same as sign of dlower – dupper

26. Line Drawing Algorithms • Bresenham’s line drawing algorithm (positive slope less than 1 • Input the two line endpoints and store the left endpoint in (x0, y0). • Set the color for the frame-buffer position (x0, y0) – i.e. plot the first point. • Calculate the constant 2Δy –Δx, and set the starting value for the decision parameter as p0 = 2Δy –Δx. • At each xk along the line, from k=0, perform the following test:if pk<0, next point to plot is (xk + 1, yk) and pk+1 = pk + 2Δyotherwise, next point to plot is (xk + 1, yk + 1 ) and pk+1 = pk + 2Δy- 2Δx • Repeat step 4 Δx - 1 times.

27. Curve Functions • Such primitive functions as to display circles and ellipses are not provided in OpenGL core library. • GLU has primitives to display spheres, cylinders, rational B-splines, including simple Bezier curves. • GLUT has some of these primitives too. • Circles and ellipses can also be generated by approximating them using a polyline. • Can also be generated by writing own circle or ellipsis display algorithm.

28. Curve Functions

29. Circle Algorithms • Properties of circles:

30. Circle Algorithms • Polar coordinates • Symmetry of circles • All these methods have long execution time

31. Curve Functions

32. Curve Functions

33. Circle Algorithms • Principle of the midpoint algorithm • Reason from octants of a circle centered in (0,0), then find the remaining octants by symmetry, then translate to (xc, yc). • The circle function is the decision parameter. • Calculate the circle function for the midpoint between two pixels.

34. Circle Algorithms • Midpoint circle drawing algorithm • Input radius r and circle center (xc, yc), then set the coordinates for the first point on the circumference of a circle centered on the origin as (xo, y0) = (0, r). • Calculate the initial value of the decision parameter as p0 = 5/4 – r (1 – r if an integer) • At each xk, from k=0, perform the following test:if pk<0, next point to plot along the circle centered on (0,0) is (xk + 1, yk) and pk+1 = pk + 2 xk+1 + 1otherwise, next point to plot is (xk+ 1, yk - 1) and pk+1 = pk + 2 xk+1 + 1 - 2 yk+1where 2 xk+1 = 2 xk + 2, and 2 yk+1 = 2 yk - 2

35. Circle Algorithms • Midpoint circle drawing algorithm • Determine symmetry points in the other seven octants. • Move each calculated pixel position (x, y) onto the circular path centered at (xc, yc) and plot the coordinate values:x = x + xc, y = y + yc • Repeat steps 3 through 5 until x >= y.

36. Curve Functions • Ellipsis can be drawn similarly using a modified midpoint algorithm. • Similar algorithms can be used to display polynomials, exponential functions, trigonometric functions, conics, probability distributions, etc.

37. Curve Functions

38. Curve Functions

39. Curve Functions