780 likes | 1.88k Views
COMPUTER GRAPHICS. CHAPTER 3 2D GRAPHICS ALGORITHMS. 2D Graphics Algorithms. Output Primitives Line Drawing Algorithms DDA Algorithm Midpoint Algorithm Bersenhem’s Algorithm Circle Drawing Algorithms Midpoint Circle Algorithm Antialising Fill-Area Algorithms. Output Primitives.
E N D
COMPUTER GRAPHICS CHAPTER 3 2D GRAPHICS ALGORITHMS
2D Graphics Algorithms • Output Primitives • Line Drawing Algorithms • DDA Algorithm • Midpoint Algorithm • Bersenhem’s Algorithm • Circle Drawing Algorithms • Midpoint Circle Algorithm • Antialising • Fill-Area Algorithms
Output Primitives • The basic objects out of which a graphics display is created are called. • Describes the geometry of objects and – typically referred to as geometric primitives. • Examples: point, line, text, filled region, images, quadric surfaces, spline curves • Each of the output primitives has its own set of attributes.
Output Primitives • Points • Attributes: Size, Color. • glPointSize(p); • glBegin(GL_POINTS); • glVertex2d(x1, y1); • glVertex2d(x2, y2); • glVertex2d(x3, y3); • glEnd()
Output Primitives • Lines • Attributes: Color, Thickness, Type • glLineWidth(p); • glBegin(GL_LINES); • glVertex2d(x1, y1); • glVertex2d(x2, y2); • glVertex2d(x3, y3); • glVertex2d(x4, y4); • glEnd()
Output Primitives • Polylines (open) • A set of line segments joined end to end. • Attributes: Color, Thickness, Type • glLineWidth(p); • glBegin(GL_LINE_STRIP); • glVertex2d(x1, y1); • glVertex2d(x2, y2); • glVertex2d(x3, y3); • glVertex2d(x4, y4); • glEnd()
Output Primitives • Polylines (closed) • A polyline with the last point connected to the first point . • Attributes: Color, Thickness, Type Note: A closed polyline cannot be filled. • glBegin(GL_LINE_LOOP); • glVertex2d(x1, y1); • glVertex2d(x2, y2); • glVertex2d(x3, y3); • glVertex2d(x4, y4); • glEnd()
Output Primitives • Polygons • A set of line segments joined end to end. • Attributes: Fill color, Thickness, Fill pattern Note: Polygons can be filled. • glBegin(GL_POLYGON); • glVertex2d(x1, y1); • glVertex2d(x2, y2); • glVertex2d(x3, y3); • glVertex2d(x4, y4); • glEnd()
Output Primitives • Text • Attributes: Font, Color, Size, Spacing, Orientation. • Font: • Type (Helvetica, Times, Courier etc.) • Size (10 pt, 14 pt etc.) • Style (Bold, Italic, Underlined)
Output Primitives • Images • Attributes: Image Size, Image Type, Color Depth. • Image Type: • Binary (only two levels) • Monochrome • Color. • Color Depth: Number of bits used to represent color.
Line Drawing • Line drawing is fundamental to computer graphics. • We must have fast and efficient line drawing functions. Rasterization Problem: Given only the two end points, how to compute the intermediate pixels, so that the set of pixels closely approximate the ideal line.
y B(bx,by) y=mx+c A(ax,ay) x ax bx Line Drawing - Analytical Method
Line Drawing - Analytical Method double m = (double)(by-ay)/(bx-ax); double c = ay - m*ax; double y; int iy; for (int x=ax ; x <=bx ; x++) { y = m*x + c; iy = round(y); setPixel (x, iy); } • Directly based on the analytical equation of a line. • Involves floating point multiplication and addition • Requires round-off function.
Next pixel on next column (when slope is small) Next pixel on next row (when slope is large) Incremental Algorithms I have got a pixel on the line (Current Pixel). How do I get the next pixel on the line? Compute one point based on the previous point: (x0, y0)…….…………..(xk, yk) (xk+1, yk+1) …….
Incrementing along x Current Pixel (xk, yk) (6,3) To find (xk+1, yk+!): xk+1 = xk+1 yk+1 = ? (5,2) (6,2) (6,1) • Assumes that the next pixel to be set is on the next column of • pixels (Incrementing the value of x !) • Not valid if slope of the line is large.
Line Drawing - DDA Digital Differential Analyzer Algorithm is an incremental algorithm. Assumption: Slope is less than 1 (Increment along x). Current Pixel = (xk, yk). (xk, yk) lies on the given line. yk = m.xk + c Next pixel is on next column. xk+1 = xk+1 Next point (xk+1, yk+1) on the line yk+1 = m.xk+1 + c = m (xk+1) +c = yk + m Given a point (xk, yk) on a line, the next point is given by xk+1 = xk+1 yk+1 = yk + m
Line Drawing - DDA double m = (double) (by-ay)/(bx-ax); double y = ay; int iy; for (int x=ax ; x <=bx ; x++) { iy = round(y); setPixel (x, iy); y+ = m; } • Does not involve any floating point multiplication. • Involves floating point addition. • Requires round-off function
Assumption: Slope < 1 Current Pixel Midpoint Algorithm Midpoint algorithm is an incremental algorithm xk+1 = xk+1 yk+1 = Either yk or yk+1
Line ( xk+1, yk+1) Candidate Pixels Midpoint Current Pixel ( xk, yk) ( xk+1, yk) Coordinates of Midpoint = ( xk+1, yk+(1/2) ) Midpoint Algorithm - Notations
Midpoint Below Line Midpoint Above Line Midpoint Algorithm:Choice of the next pixel • If the midpoint is below the line, then the next pixel is (xk+1, yk+1). • If the midpoint is above the line, then the next pixel is (xk+1, yk).
B(bx,by) A(ax,ay) Equation of a line revisited. Equation of the line: Let w = bxax, and h = byay. Then, h (x ax) w (y ay) = 0. (h, w, ax , ay are all integers). In other words, every point (x, y) on the line satisfies the equation F(x, y) =0, where F(x, y) = h (x ax) w (y ay).
F(x,y) < 0 (for any point above line) F(x,y) = 0 F (x,y) > 0 (for any point below line) Midpoint Algorithm:Regions below and above the line.
F(MP) < 0 Midpoint below line Midpoint above line Midpoint AlgorithmDecision Criteria F(MP) > 0
Midpoint AlgorithmDecision Criteria Decision Parameter F(MP) = F(xk+1, yk+ ½) = Fk(Notation) If Fk < 0 : The midpoint is above the line. So the next pixel is (xk+1, yk). If Fk 0 : The midpoint is below or on the line. So the next pixel is (xk+1, yk+1).
Midpoint Above Line Fk < 0 yk+1 = yk Next pixel = (xk+1, yk) Midpoint Algorithm – Story so far. Midpoint Below Line Fk > 0 yk+1 = yk+1 Next pixel = (xk+1, yk+1)
Midpoint AlgorithmUpdate Equation Fk = F(xk+1, yk+ ½) = h (xk+1ax) w (yk+½ay) Update Equation But, Fk+1 = Fk + hw (yk+1 yk). (Refer notes) So, Fk< 0 : yk+1 = yk. Hence, Fk+1 = Fk + h . Fk 0 : yk+1 = yk+1. Hence, Fk+1 = Fk + hw. F0 = hw/2.
Midpoint Algorithm int h = by-ay; int w = bx-ax; float F=h-w/2; int x=ax, y=ay; for (x=ax; x<=bx; x++){ setPixel(x, y); if(F < 0) F+ = h; else{ F+ = h-w; y++; } }
Bresenham’s Algorithm int h = by-ay; int w = bx-ax; int F=2*h-w; int x=ax, y=ay; for (x=ax; x<=bx; x++){ setPixel(x, y); if(F < 0) F+ = 2*h; else{ F+ = 2*(h-w); y++; } }
Midpoint Circle Drawing Algorithm • To determine the closest pixel position to the specified circle path at each step. • For given radius r and screen center position (xc, yc), calculate pixel positions around a circle path centered at the coodinate origin (0,0). • Then, move each calculated position (x, y) to its proper screen position by adding xc to xandyc to y. • Along the circle section from x=0 to x=y in the first quadrant, the gradient varies from 0 to -1.
Midpoint Circle Drawing Algorithm • 8 segments of octants for a circle:
{ > 0, (x,y) outside the circle < 0, (x,y) inside the circle = 0, (x,y) is on the circle boundary fcircle (x,y) = Midpoint Circle Drawing Algorithm • Circle function: fcircle (x,y) = x2 + y2 –r2
yk yk midpoint midpoint yk-1 yk-1 Fk >= 0 Fk < 0 yk+1 = yk- 1 yk+1 = yk Next pixel = (xk+1, yk-1) Next pixel = (xk+1, yk) Midpoint Circle Drawing Algorithm
Midpoint Circle Drawing Algorithm We know xk+1 = xk+1, Fk = F(xk+1, yk- ½) Fk = (xk +1)2 + (yk - ½)2 - r2 -------- (1) Fk+1 = F(xk+1, yk- ½) Fk+1 = (xk +2)2 + (yk+1 - ½)2 - r2 -------- (2) (2) – (1) Fk+1 = Fk+ 2(xk+1) + (y2k+1 – y2k) - (yk+1 – yk)+ 1 Fk+1 = Fk+ 2xk+1+1 If Fk < 0, If Fk >= 0, Fk+1 = Fk+ 2xk+1+1 – 2yk+1
f0 = fcircle (1, r-½ ) = 1 + (r-½ )2 – r2 = 5 – r 4 ≈1 – r Midpoint Circle Drawing Algorithm For the initial point, (x0 , y0) = (0, r)
f0= 5 – r 4 = 5 – 10 4 = -8.75 ≈–9 Midpoint Circle Drawing Algorithm Example: Given a circle radius = 10, determine the circle octant in the first quadrant from x=0 to x=y. Solution:
Midpoint Circle Drawing Algorithm Initial (x0, y0) = (1,10) Decision parameters are: 2x0 = 2, 2y0 = 20
Midpoint Circle Drawing Algorithm void circleMidpoint (int xCenter, int yCenter, int radius) { int x = 0; Int y = radius; int f = 1 – radius; circlePlotPoints(xCenter, yCenter, x, y); while (x < y) { x++; if (f < 0) f += 2*x+1; else { y--; f += 2*(x-y)+1; } } circlePlotPoints(xCenter, yCenter, x, y); }
Midpoint Circle Drawing Algorithm void circlePlotPoints (int xCenter, int yCenter, int x, int y) { setPixel (xCenter + x, yCenter + y); setPixel (xCenter – x, yCenter + y); setPixel (xCenter + x, yCenter – y); setPixel (xCenter – x, yCenter –y); setPixel (xCenter + y, yCenter + x); setPixel (xCenter – y, yCenter + x); setPixel (xCenter + y, yCenter –x); setPixel (xCenter – y, yCenter – x); }
Antialiasing Antialiasing is a technique used to diminish the jagged edges of an image or a line, so that the line appears to be smoother; by changing the pixels around the edges to intermediate colors or gray scales. Eg. Antialiasing disabled: Eg. Antialiasing enabled:
Antialiasing disabled Antialiasing enabled Antialiasing (OpenGL) • Setting antialiasing option for lines: • glEnable (GL_LINE_SMOOTH);
Fill Area Algorithms • Fill-Area algorithms are used to fill the interior of a polygonal shape. • Many algorithms perform fill operations by first identifying the interior points, given the polygon boundary.
Basic Filling Algorithm The basic filling algorithm is commonly used in interactive graphics packages, where the user specifies an interior point of the region to be filled. 4-connected pixels
Basic Filling Algorithm [1] Set the user specified point. [2] Store the four neighboring pixels in a stack. [3] Remove a pixel from the stack. [4] If the pixel is not set, Set the pixel Push its four neighboring pixels into the stack [5] Go to step 3 [6] Repeat till the stack is empty.
Basic Filling Algorithm (Code) void fill(int x, int y) { if(getPixel(x,y)==0){ setPixel(x,y); fill(x+1,y); fill(x-1,y); fill(x,y+1); fill(x,y-1); } }