Introduction to Computer Graphics PPT2: Graphics Output Primitives EEL 5771-001 Introduction to Computer Graphics PPT2: Graphics Output Primitives By Arunbalaji Prithiviraj (U80066848)

Outline Coordinate Frames Line Drawing Algorithms Circle Algorithms Ellipse Algorithms Pixel Addressing Area Fill Methods Plane Equations OpenGL Area Fill Vertex Arrays Pixel Array Character Handling

Coordinate Frames

Screen coordinates represents the pixel positions in the frame buffer. Coordinate Frames Coordinate frames can be any convenient Cartesian coordinate system, called the world-coordinate reference frame, which could be either two dimensional or three-dimensional. For instance, we define a straight-line segment with two endpoint positions, and a polygon is specified with a set of positions for its vertices. Screen coordinates represents the pixel positions in the frame buffer. For example, we could specify an integer range for screen positions with the coordinate origin at the lower-left of a screen area, or we could use non integer Cartesian values for a picture description.

Graphics programing: Points Plotting points give a coordinate positions in the world reference frame. for a random-scan CRT, deflect and activate the electron beam for a raster scan CRT, set a bit or byte at the appropriate location in the frame buffer. Attributes: Size, Color glPointSize(p); glBegin(GL_POINTS); glVertex2d(x1, y1); glVertex2d(x2, y2); glVertex2d(x3, y3); glEnd()

Graphics programing: Lines Plotting Lines specify the end points coordinates of each line segment analog devices (random-scan CRTs, etc.) digital devices (raster-scan CRTs, plasma panels, pen plotters) use pixels near the true line, resulting in the “jaggies” Attributes: Color, Thickness, Type glLineWidth(p); glBegin(GL_LINES); glVertex2d(x1, y1); glVertex2d(x2, y2); glVertex2d(x3, y3); glVertex2d(x4, y4); glEnd()

Line drawing algorithm

Line Drawing Algorithms The math behind a simple line drawing algorithm Y intercept slope

Line Drawing Algorithms : Digital differential analyzer (DDA) line equation: y = m. x + b X,Y interval DDA (digital differential analyzer)

Line Drawing Algorithms : Digital differential analyzer (DDA) Algorithm is an incremental scan conversion method. Based on calculating either or If |m|<1,

Line Drawing Algorithms : Digital differential analyzer (DDA) If |m|>1, If

Line Drawing Algorithms : Bresenham’s algorithm Uses only integer calculations for efficiency Given a pixel which is known, there are really only two possibilities for the next one. faster than simple DDA incremental integer calculations adaptable to circles, other curves

Line Drawing Algorithms : Bresenham’s algorithm By testing the sign of an integer parameter, whose value is proportional to the difference between the separation of two pixel positions from the actual line path.

Line Drawing Algorithms : Bresenham’s algorithm

Line Drawing Algorithms : Bresenham’s algorithm

Line Drawing Algorithms : Bresenham’s algorithm y yk yk+1 xk+1 } d2 d1

Line Drawing Algorithms : Bresenham’s algorithm d1 = y - yk = m (xk + 1) + b - yk d2 = (yk + 1) - y = yk + 1 - m (xk + 1) –b d1 - d2 = 2 m (xk + 1) - 2 yk + 2b -1

Line Drawing Algorithms : Bresenham’s algorithm Pk = ΔX ( d1 - d2) = 2 ΔY . xk - 2 ΔX . yk + c c = constant = 2 ΔY + ΔX (2b -1)

Line Drawing Algorithms : Bresenham’s algorithm Let's get rid of multiplications Pk+1 = 2 ΔY . xk+1 - 2 ΔX .y + c Pk+1 - Pk = 2 ΔY (xk+1 - xk) -2 ΔX (yk+1 - yk) (get rid of the constant) Pk+1 = Pk + 2 ΔY - 2 ΔX (yk+1 - yk) Pk+1 = Pk + 2ΔY      or      = Pk + 2(ΔY – ΔX( with (yk+1 - yk) = 0 or 1 depending on Pk sign

Line Drawing Algorithms : Bresenham’s algorithm   P0 =ΔX (d1-d2) =ΔX[2m(x0+1)-2y0+2b-1] =ΔX[2(mx0+b-y0)+2m-1] P0=2ΔY -ΔX

Line Drawing Algorithms : Bresenham’s algorithm Example: Digitize the line with endpoint (20,10) and (30,18) ΔX=10 ΔY= 8 P0=2ΔY –Δx=6 2ΔY =16 2(ΔY – ΔX)=-4 P0=2ΔY –ΔX Pk+1 = Pk + 2ΔY      or      = Pk + 2(ΔY – ΔX(

Line Drawing Algorithms : Bresenham’s algorithm example

Problem of Clipping Bad idea to rasterize outside of framebuffer bounds Also, don’t waste time scan converting pixels outside window

Clipping: The Real World The Sutherland-Hodgeman algorithm (clipping polygons to a region one plane at a time) generalizes to 3-D The problem: clipping a line segment to an arbitrary plane is relatively expensive Projection matrix; homogeneous divide Clip in 2-D screen coordinates Clip against hither and yon planes Transform into screen coordinates

Circle algorithm

y = rSin (r = radius of circle) Circle Algorithms Polar form x = rCos y = rSin (r = radius of circle)  P=(rCos, rSin) rSin) rCos) x y r

Circle Algorithms : Drawing a circle The equation of a circle We could solve for y in terms of x

Circle Generating Algorithms The spacing between plotted pixel positions is not uniform.

Circle Generating Algorithms Computation can be reduced by considering the symmetry of circles

Midpoint circle Algorithms As in the line algorithm, we sample at unit intervals and determine the closet pixel position to the circle path at each step.

Midpoint circle Algorithms Points are generated from 90º to 45º, moves will be made only in the +x and –y direction. positive x direction over this octant and use a decision parameter

Midpoint circle Algorithms We define a circle function:

Midpoint circle Algorithms Consider the coordinates of the point halfway between pixel T and pixel S Midpoint

Midpoint circle Algorithms

Example i pi xi+1, yi+1 2xi+1 2yi+1 -9 (1, 10) 2 20 1 -6 (2, 10) 4 -1 r = 10 p0 = 1 – r = -9 (if r is integer round p0 = 5/4 – r to integer) Initial point (x0, y0) = (0, 10) 10  9 8 7 6 5 4 3 2 1 i pi xi+1, yi+1 2xi+1 2yi+1 -9 (1, 10) 2 20 1 -6 (2, 10) 4 -1 (3, 10) 6 3 (4, 9) 8 18 -3 (5, 9) 10 5 (6, 8) 12 16 (7, 7)

Bresenham’s Circle Algorithm Consider only 45° ≤  ≤ 90 General Principle The circle function: and

Bresenham’s Circle Algorithm p1 p3 yi D(si) D(ti) yi - 1 p2 r xi xi + 1 37

Bresenham’s Circle Algorithm Define: D(si) = distance of p3 from circle D(ti) = distance of p2 from circle i.e. D(si) = (xi + 1)2 + yi2 – r2 [always +ve] D(ti) = (xi + 1)2 + (yi – 1)2 – r2 [always -ve] Decision Parameter pi = D(si) + D(ti) so if pi < 0 then the circle is closer to p3 (point above) if pi ≥ 0 then the circle is closer to p2 (point below)

Bresenham’s Circle Algorithm x0 = 0 y0 = r p0 = [12 + r2 – r2] + [12 + (r-1)2 – r2] = 3 – 2r if pi < 0 then yi+1 = yi pi+1 = pi + 4xi + 6 else if pi ≥ 0 then yi+1 = yi – 1 pi+1 = pi + 4(xi – yi) + 10 Stop when xi ≥ yi and determine symmetry points in the other octants xi+1 = xi + 1

Bresenham’s Circle Algorithm : Example p0 = 3 – 2r = -17 Initial point (x0, y0) = (0, 10) i pi xi, yi -17 (0, 10) 1 -11 (1, 10) 2 -1 (2, 10) 3 13 (3, 10) 4 -5 (4, 9) 5 15 (5, 9) 6 9 (6, 8) 7 (7,7) 10  9 8 7 6 5 4 3 2 1

Advantages of Bresenham circle Only involves integer addition, subtraction and multiplication There is no need for squares, square roots and trigonometric functions

Ellipse algorithm

Ellipse Algorithm

Ellipse Algorithm

Example: Midpoint Ellipse Algorithm

Example: Midpoint Ellipse Algorithm

Pixel addressing

Setting frame-buffer values After generating a line or circle using scan conversion, we need to know where is the specified pixels are stored in the frame buffer. Frame buffer is stored in memory as an addressable array and stored row by row. Pixels are labeled from (0, 0) the lower left corner to (xmax,ymax) the top right corner.

Row by Row mapping

Setting frame-buffer values (cont.) For a bilevel system (1 bit per pixel),the Frame-Buffer bit address for pixel position (x, y) is calculated as: addr(x, y) = addr (0,0) + y (xmax +1) + x addr(x + 1, y) = addr(x, y) + 1 addr(x + 1, y + 1) = addr(x, y) + xmax + 2

Setting frame-buffer values (cont.) Example: Find the address of the pixel (6,5), where the address of (0,0) =500, xmax=12, and ymax = 10. addr(x, y) = addr (0,0) + y(xmax +1) + x addr(6, 5) = 500 + 5(12 + 1) + 6 = 571 addr(7, 5) = addr(6, 5) + 1 = 572 addr(7, 6) = addr(6, 5) + xmax + 2 = 585

Pixel addressing and object geometry When an object is scan converted into the frame buffer, the input description is transformed to pixel coordinates. So, the displayed image may not correspond exactly with the relative dimensions of the input object. To preserve the specified geometry of world objects, we need to compensate for the mapping of mathematical input points to finite pixel area, we use one of the two ways:

Pixel addressing and object geometry (cont.) Adjust the dimensions of displayed objects to account for the amount of overlap of pixel areas with the object boundaries. (i.e. a rectangle with 40 cm width, will be displayed in 40 pixel) 2) Map world coordinates onto screen positions between pixels, so that we align objects boundaries with pixel boundaries instead of pixel centers.

Pixel addressing and object geometry (cont.) Screen Grid Coordinates: An alternative to addressing display positions in terms of pixel centers is to reference screen coordinates with respect to the grid of horizontal and vertical pixel boundary lines spaced one unit a part.

Pixel addressing and object geometry (cont.) Screen coordinate position is then the pair of integer values identifying a grid intersection position between two pixels. For example, the mathematical line path for a polyline with screen endpoints (0, 0), (5, 2), and (1,4) is shown beside.

Pixel addressing and object geometry (cont.) With the coordinate origin at the lower left of the screen, each pixel area can be referenced by the integer grid coordinates of its lower left corner. The following figure illustrates this convention for an 8 by 8 section of a raster, with a single illuminated pixel at screen coordinate position (4, 5).

Pixel addressing and object geometry (cont.) In general, we identify the area occupied by a pixel with screen coordinates ( x, y) as the unit square with diagonally opposite corners at (x, y) and ( x + 1, y + 1 ). This pixel addressing scheme has several advantages: It avoids half-integer pixel boundary It facilitates precise object representations. Simplifies the processing involved in many scan conversion algorithms and in other raster procedures

Pixel addressing and object geometry (cont.) Notes: 1)      The previous algorithms for drawing line, circle, …etc are still valid when applied to input positions expressed as screen grid coordinates. 2)      The decision parameter Pk is a measure of screen grid separation differences rather than separation differences from pixel centers.

Pixel addressing and object geometry (cont.) A circle of radius 5 and center position (10, 10), for instance, would be displayed by the midpoint circle algorithm using screen grid coordinate positions. But the plotted circle has a diameter of 11, To plot the circle with the defined diameter of 10, we can modify the circle algorithm to shorten each pixel scan line and each pixel column.

Pixel addressing and object geometry (cont.)

Pixel addressing and object geometry (cont.)

Area Fill Methods

Point and Line primitives 3 1 GL_POINTS: sequence of points GL_LINES: sequence of line segments GL_LINE_STRIP: polyline GL_LINE_LOOP: closed polyline 2 4 8 2 4 5 1 3 6 7 2 4 1 5 3 2 4 3 1 5

Area fill primitives 1 Point, line and curve, fill area Usually polygons 2D shapes and boundary 3D objects

Area fill primitives 2 Approximation of curved surface: Surface mesh or Surface tesselation Face or facet (planar), patch (curved)

Polygon Polygon: Planar shape, defined by a sequence of three or more vertices, connected by line segments (edges or sides) Standard or simple polygon: no crossing edges bowtie polygon

Regular polygon Vertices uniformly distributed over a circle: r

Convex vs. concave 1 Convex: All interior angles < 180 graden, and All line segments between 2 interior points in polygon, and All points at the same side of line through edge, and From each interior point complete boundary visible Concave: not convex

Convex vs. concave 2 Puzzle: Given a planar polygon in 3D, with vertices Pi, with i = 1, … , N. Give a recipe to determine if the polygon is convex or concave.

Convex vs. concave 3 Puzzle: Given a planar polygon in 3D, with vertices Pi, with i = 1, … , N. Give a recipe to determine if the polygon is convex or concave. Solution: (multiple solutions possible)

Splitting concave polygons

Convex polygon  triangles Repeat Pick three succeeding points; Join the outside ones with a line; Remove the middle point Until three points are left over

OpenGL Area Fill glBegin(GL_POLYGON); // Specify what to draw, // a polygon // Geometric info via vertices: glVertex*(); // 1 glVertex*(); // 2 ... // ... glEnd; glVertex[234][isfd] [234]: 2D, 3D, 4D [isfd]: integer, short, float, double For instance: glVertex2i(100, 25);

GL_POLYGON: convex polygon OpenGL Area Fill 3 4 GL_POLYGON: convex polygon Concave polygons give unpredictable results. 1 5 3 2 5 4 1

GL_TRIANGLES: sequence of triangles OpenGL Area Fill GL_TRIANGLES: sequence of triangles GL_TRIANGLE_STRIP: GL_TRIANGLE_FAN: 3 6 5 9 1 7 3 4 7 2 8 5 1 2 4 8 6 6 5 1 4 2 3

GL_QUADS: sequence of quadrilaterals OpenGL Area Fill GL_QUADS: sequence of quadrilaterals GL_QUAD_STRIP: strip of quadrilaterals 4 11 3 8 7 10 1 12 5 6 2 9 4 6 8 2 3 1 7 5

OpenGL output functions glBegin(GL_LINES); // Specify what to draw, // here lines // Geometric info via vertices: glVertex*(); // 1 glVertex*(); // 2 ... // ... glEnd; glVertex[234][isfd] [234]: 2D, 3D, 4D [isfd]: integer, short, float, double For instance: glVertex2i(100, 25);

Vertex Array OpenGL provides a facility called vertex arrays that allows us to store array data in the implementation Six types of arrays supported Vertices Colors Color indices Normals Texture coordinates Edge flags We will need only colors and vertices

Two different representation are used for storing computer fonts: Character Handling Letters, numbers, and other character can be displayed in a variety of size and styles. Typeface: The overall design style for a set of characters is call typeface: Zar, nazanin, Titr. Font: Referred to a set of cast metal character forms in a particular size and forma: 10 point Zar. Two different representation are used for storing computer fonts: Bitmap font (or bitmapped font) Outline font

Bitmap Handling Bitmap font (or bitmapped font): A simple method for representing the character shapes in a particular typeface is to use rectangular grid pattern.

The character grid only need to be mapped to a frame buffer position. Bitmap fonts required more space, because each variation (size and format) must be stored in a font cash. Bold Italic

Outline Font Graphic primitives such as lines and arcs are used to define the outline of each character. Require less storage since variation does not require a distinct font cash. We can produce boldface, italic, or different size by manipulating the curve definition for the character outlines. It does take more time to process the outline fonts, because they must be scan converted into frame buffer.

References Hughes, John F., et al. Computer graphics: principles and practice. Pearson Education, 2013. Van Dam, Andries, et al. Introduction to computer graphics. Vol. 55. Reading: Addison-Wesley, 1994. Hearn, Donald, and M. Pauline Baker. "Computer Graphics with Open GL, 3/E."ISBN: 0-13-015390-7, Prentice Hall (2004). Van Aken, Jerry R. "An efficient ellipse-drawing algorithm." Computer Graphics and Applications, IEEE 4.9 (1984): 24-35. Wright, William E. "Parallelization of Bresenham's line and circle algorithms."Computer Graphics and Applications, IEEE 10.5 (1990): 60-67.