1. 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.

2. Lecture-2 Introduction to Computer Graphics
Majed Bouchahma
Computer Science Section
Department of Physical and Mathematical Science

3. 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.

4. 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.

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

6. 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.

7. 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.

8. 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.

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

10. 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.

11. 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.

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

13. 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

14. 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

15. 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

16. 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

17. 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’

18. 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

19. 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:

20. 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:

21. 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

22. 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

23. 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

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

25. 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.

26. 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.

27. 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.

28. 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.

29. 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.

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

31. 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.

32. 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* /180;
x=xc+r*cos(tr);
y=yc+r*sin(tr);
glVertex2f (round (x), round (y)); }
glEnd();
© 2008, Fayyaz A. Afsar, DCIS, PIEAS.

33. 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.

34. 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.

35. 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.

36. 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.

37. 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.

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

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

40. 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.

41. 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:

42. 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

43. 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

44. 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

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

46. 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

47. 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.

48. 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.

49. 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.

50. 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.

51. 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.

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

53. 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.

54. 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.

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

56. 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.

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

58. 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.

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