Allah says Say, "Allah created cattle for you. In them you find warmth and benefit and from them you eat. In them there is beauty for you when you bring them home and when you take them out to the pasture. They bear your heavy loads to lands you could not have reached except with great effort. Surely, your Lord is Most Compassionate, Most Merciful." Al-Qur'an, Surah an-Nahl, Verses 5-7 © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Lecture-2 Introduction to Computer Graphics Majed Bouchahma boumaged@unizwa.edu.om Computer Science Section Department of Physical and Mathematical Science

2D Graphics Primitives Graphics drawing is based on basic geometric structures called graphics primitives Points Lines Circles Conic Sections In this lecture we discuss how to draw the basic graphics primitives Representation of pictorial data = mathematical representation and In-Memory representation of graphical data Manipulation – Rotation, Movement, Transformation, Enhancement Creation Technologies – Software and hardware used for creating images (Motion Capture, Scanners 2D & 3D, Computational Algorithms) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Points Input specification Coordinates (x, y) of the point Color Specification Procedure Write the required color value to the corresponding position of the frame buffer Color can be specified depending upon the graphics hardware interface e.g. RGB For a black and white screen whenever a value of 1 is encountered the graphics system turns the corresponding pixel on black Function Call setPixel (x,y): To turn the pixel (x,y) on getPixel (x,y): To get the pixel value for (x,y) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Points… Output © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Lines What is a line? A set of connected points satisfying y = mx+c (x2,y2) Δy (x1,y1) c Δx © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Lines In graphics, usually we are given the end points (xa,ya) and (xb,yb) of the line for drawing A simple algorithm Calculate the slope Start with (xa,ya) k=1 and set xk+1=xk+1 Then find Put a pixel at (xk+1 , round(yk+1)) Continue till the other xb end point is reached |m|<1 ensures that the points will be continuous (xb,yb) (xa,ya) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Lines… For |m|>1 Gaps appear Solution Use Start with (xa,ya) and set yk+1=yk+1 Put a pixel at (round(xk+1) , yk+1) Continue until the end point y2 is reached (xb,yb) (xa,ya) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Lines… (xa,ya) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Lines… This procedure is called the DDA Algorithm Digital Differential Analyzer void lineDDA(int xa, int ya, int xb, int yb) { int dx=xb-xa, dy=yb-ya, steps, k; float xIncrement, yIncrement, x=xa, y=ya; if ( abs(dx) > abs(dy) ) steps = abs (dx); else steps = abs (dy); xIncrement = dx / (float) steps; yIncrement = dy / (float) steps; setPixel (round (x), round (y)); for (k=0; k<steps; k++){ x += xIncrement; y += yIncrement; } void drawLineDDA(float xa, float ya, float xb, float yb,int p) { int dx=xb-xa, dy=yb-ya, steps, k; float xIncrement, yIncrement, x=xa, y=ya; if ( abs(dx) > abs(dy) ) steps = abs (dx); else steps = abs (dy); xIncrement = dx / (float) steps; yIncrement = dy / (float) steps; if(p){ xIncrement=floor(xIncrement)+round((xIncrement-floor(xIncrement))*100)/100.0; yIncrement=floor(yIncrement)+round((yIncrement-floor(yIncrement))*100)/100.0; } glBegin(GL_POINTS); glVertex2f (round (x), round (y)); for (k=0; k<steps; k++){ x += xIncrement; y += yIncrement; //x=x+1; //y=((yb-ya)/(xb-xa))*x; } glEnd(); © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Line Drawing: DDA Characteristics Efficiency Better than direct line drawing y=mx+c Eliminates Multiplication But uses rounding off which is an expensive operation Uses floating point operations Round off errors can cause the line to drift away from the true line segment Especially for long lines Can be a problem for systems with low precision numeric representation © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Round off Error Accumulation Intended Line Drift caused by round-off error accumulation © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

The Bresenham Line Algorithm The Bresenham algorithm is another incremental scan conversion algorithm The big advantage of this algorithm is that it uses only integer calculations Jack Bresenham worked for 27 years at IBM before entering academia. Bresenham developed his famous algorithms at IBM in the early 1960s

Bresenham Algorithm: Main Idea Move across the x axis in unit intervals and at each step choose between two different y coordinates to select the point closest to original line 5 (xk+1, yk+1) For example, from position (2, 3) we have to choose between (3, 3) and (3, 4) We would like the point that is closer to the original line 4 (xk, yk) 3 (xk+1, yk) 2 2 3 4 5

Deriving The Bresenham Line Algorithm At sample position xk+1 the vertical separations from the mathematical line are labelled dupper and dlower The y coordinate on the mathematical line at xk+1 is: y yk yk+1 xk+1 dlower dupper Our assumption here is that the line has a positive slope less than one

Deriving The Bresenham Line Algorithm (cont…) So, dupper and dlower are given as follows: and: We can use these to make a simple decision about which pixel is closer to the mathematical line

Deriving The Bresenham Line Algorithm (cont…) This simple decision is based on the difference between the two pixel positions: Let’s substitute m with ∆y/∆x where ∆x and ∆y are the differences between the end-points: Since in our case Δx is positive therefore this term has the same sign as dlower-dupper Constant terms collected in ‘c’

Deriving The Bresenham Line Algorithm (cont…) So, a decision parameter pk for the kth step along a line is given by: The sign of the decision parameter pk is the same as that of dlower – dupper If pk is negative, then we choose the lower pixel, otherwise we choose the upper pixel

Deriving The Bresenham Line Algorithm (cont…) Remember coordinate changes occur along the x axis in unit steps so we can do everything with integer calculations At step k+1 the decision parameter is given as: Subtracting pk from this we get:

Deriving The Bresenham Line Algorithm (cont…) But, xk+1 is the same as xk+1 so: where yk+1 - yk is either 0 or 1 depending on the sign of pk The first decision parameter p0 is evaluated at (x0, y0) is given as:

The Bresenham Line Algorithm BRESENHAM’S LINE DRAWING ALGORITHM (for |m| < 1.0) Input the two line end-points, storing the left end-point in (x0, y0) Plot the point (x0, y0) Find: At each xk along the line, starting at k = 0, perform the following test. If pk < 0, the next point to plot is (xk+1, yk) and: Otherwise, the next point to plot is (xk+1, yk+1) and: Repeat step 4 (Δx – 1) times

Bresenham Example Let’s have a go at this Let’s plot the line from (20, 10) to (30, 18) First off calculate all of the constants: Δx: 10 Δy: 8 2Δy: 16 2Δy - 2Δx: -4 Calculate the initial decision parameter p0: p0 = 2Δy – Δx = 6

Bresenham Example (cont…) k pk (xk+1,yk+1) 1 2 3 4 5 6 7 17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30

Bresenham Exercise Go through the steps of the Bresenham line drawing algorithm for a line going from (21,12) to (29,16)

Generalization of the Bresenham Line Drawing Algorithm For lines with slopes greater than 1 Inter-change the roles of the x and y directions Take a unit step in y direction and calculate x values nearest to the line path For lines with negative slopes Procedure is generally similar except that now one coordinate decreases as the other increases Vertical, Horizontal and Diagonal lines Can be drawn as special cases without processing by the line plotting method Interchange of the starting and ending points can be checked © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Characteristics of Bresenham Line Drawing Algorithm Uses only integer calculations More efficient Paves the way for making more complex curves based upon a similar logic Take the screen pixel closest to the original curve © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Assignment-1 Write pseudo-codes of Bresenham Line Drawing Algorithms for lines of Arbitrary slopes Implement DDA and Bresenham Line Drawing Algorithms using OpenGL to draw lines of Arbitrary slopes given the starting and end points Assignment Due: 29th October 2009 in lab Evaluation: Via viva and code structure Marks (% of total marks): 3% © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Circles A Circle is the set of points that are all at a given distance r (called radius) from a center point (xc,yc) The equation for a circle is: The circle is a frequently used component in pictures and graphics © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing Circles… A circle can be drawn by using the following equation by moving in unit steps from xc-r to xc+r and calculating the corresponding y value at each position void drawCircle(float xc, float yc, float r) { float y1,y2,x; glBegin(GL_POINTS); for (x=xc-r; x<=xc+r; x++){ y1=yc+sqrt(r*r-(x-xc)*(x-xc)); y2=yc-sqrt(r*r-(x-xc)*(x-xc)); glVertex2f (round (x), round (y1)); glVertex2f (round (x), round (y2)); } glEnd(); © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Part of the circle drawn © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing a Circle… Problems with this approach Computations Spacing between points is not uniform Reason Absolute value of the slope exceeds 1 Solution-1 Switch the roles of x and y when the absolute value of slope exceeds 1 Increment y by one unit and calculate corresponding x Still computationally complex © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing a circle… Problems… Solution-2 Use parametric polar form of the circle Start with initial angle equal to zero and increment the angle to get and then plot the next point The increment in the angle should be small (1/r) to ensure a continuous boundary or if a large step is used then the points can be connected by straight lines to approximate a circular boundary void drawCircle2(float xc, float yc, float r) { float y,x,t,tr; glBegin(GL_POINTS); for (t=0; t<=360; t=t+1/r){ tr=t*3.14125/180; x=xc+r*cos(tr); y=yc+r*sin(tr); glVertex2f (round (x), round (y)); } glEnd(); © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing a circle… Problems… Solution-2… The increment of 1/r ensures continuity of the points A similar relation can be obtained for yk and as therefore continuity is ensured © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing a circle… Reducing computational complexity Using 8-way symmetry However, both the algorithms described earlier involve complex floating point calculations (x, y) (y, x) (y, -x) (x, -y) (-x, -y) (-y, -x) (-y, x) (-x, y) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing a circle: Midpoint Circle Algorithm The midpoint circle algorithm has been developed and patented by J. Bresenham Charcteristics of MPCA Incremental in nature Uses a decision parameter to find the pixel closest to the circumference of the original circle Uses (almost all) integer operations Uses 8-way symmetry to reduce computations © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint Circle Algorithm: Main Idea (xk+1, yk) (xk+1, yk-1) (xk, yk) Assume we are drawing the 2nd octant of the circle Assume we have just plotted point (xk,yk) We have two choices for the next point (xk+1,yk) and (xk+1,yk-1) This decision is made by calculating whether (xk+1,yk-1/2) is outside the circle or inside it If the midpoint is inside the circle then plot the lower point otherwise plot the upper point © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint Circle Algorithm: Main Idea… This can be done by using the circle function based on the equation of the circle Thus our decision parameter is © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint Circle Algorithm… We decide yk+1 on the basis of pk pk+1 is given by, © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint Circle Algorithm… © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint Circle Algorithm… The initial decision parameter can be obtained by evaluating the circle function at (x0,y0-1/2)=(0,r-1/2) If the redius is an integer then 5/4 can be rounded off to 1 to ensure integer operations © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

The Mid-Point Circle Algorithm… Input radius r and circle centre (xc, yc), then set the coordinates for the first point on the circumference of a circle centred on the origin as: Calculate the initial value of the decision parameter as: Starting with k = 0 at each position xk, perform the following test. If pk < 0, the next point along the circle centred on (0, 0) is (xk+1, yk) and:

The Mid-Point Circle Algorithm… Otherwise the next point along the circle is (xk+1, yk-1) and: Determine symmetry points in the other seven octants Move each calculated pixel position (x, y) onto the circular path centred at (xc, yc) to plot the coordinate values: Repeat steps 3 to 5 until x >= y

Mid-Point Circle Algorithm Example To see the mid-point circle algorithm in action lets use it to draw a circle centred at (0,0) with radius 10

Mid-Point Circle Algorithm Example (cont…) 9 7 6 5 4 3 2 1 8 10 k pk (xk+1,yk+1) 2xk+1 2yk+1 1 2 3 4 5 6

Mid-Point Circle Algorithm Exercise Use the mid-point circle algorithm to draw the circle centred at (0,0) with radius 15

Mid-Point Circle Algorithm Example (cont…) k pk (xk+1,yk+1) 2xk+1 2yk+1 1 2 3 4 5 6 7 8 9 … 9 7 6 5 4 3 2 1 8 10 13 12 11 14 15 16

Generalized Midpoint Algorithm for Drawing Curves The midpoint algorithm can be generalized to draw complex curves if the equation of the curve is known Develop the curve function f(x,y) which indicates whether the point (x,y) is above, below or on the curve Use this function to establish a decision parameter pk which decides which of the two selected points will be plotted by using the mid point of the selected points as a parameter to the curve function The options may be (top or bottom) or (left or right) depending upon the direction of unit increment on the basis of slope Develop a recurrence relation for pk+1 Apply unit increment along one axis and evaluate the value of the other on the basis of decision parameter to draw the curve © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing an Ellipse using Midpoint algorithm An ellipse is described by the equation d1 d2 P(x,y) F1(x1,y1) F2(x2,y2) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Drawing an Ellipse using Midpoint algorithm If the major and minor axis of the ellipse are parallel to x and y axes then the equation can be written as ry C(xc,yc) rx © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Symmetry in an ellipse With its center at origin the symmetry points can be described as We can minimize drawing computation by drawing only one quadrant of an ellipse with its center at origin and then using symmetry to complete the curve The final ellipse can then be rotated and translated to any desired position (-x,y) (x,y) ry C(0,0) rx (-x,-y) (x,-y) © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse Consider an ellipse with its center at the origin and rx<ry The part of the ellipse in the 1st quadrant can be drawn by Taking increment in x-direction where the magnitude of the slope is less than 1 and finding the corresponding pixel y-values nearest to the original curve Taking increment in y-direction where the magnitude of the slope is greater than 1 and finding the corresponding pixel x-values nearest to the original curve © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse Region-1 Region-2 © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… To draw the ellipse in region 1, we will first assume that we have placed a pixel (xk,yk) and the next pixel to be drawn is (xk+1,yk+1) for which yk+1 can be yk or yk-1 and xk+1=xk+1 yk+1depends upon whether the midpoint (xk+1, yk-1/2) lies above or below the original curve yk yk+1 Midpoint (xk+1, yk-1/2) xk xk+1 © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… The decision function being used to detect whether (x,y) is above the curve or below it is given by: The decision parameter for Region-1 can be calculated as © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… Now © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… At (0,ry) the two terms (2ry2x and 2rx2y) can be obtained as As x and y are incremented, the updated values of these terms can be obtained by adding 2ry2 to the first term and subtracting 2ry2 from the second term Thus the evaluation of these terms can be done through only multiplications and divisions © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… For p10 © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

Midpoint algorithm for drawing an ellipse… To Do: See and complete the proof for Region 2 along with the pseudo code for drawing the complete ellipse © 2008, Fayyaz A. Afsar, DCIS, PIEAS.

End of Lecture-2 To choose time is to save time. Francis Bacon (1561–1626), English philosopher, lawyer, and statesman. Essays "Of Dispatch" (1625)