Chapter 4
Chapter 4
Chapter Four
Example:
m=3/5=0.6
|m|≤1, so
δx=1, δy=0.6
AlgorithimDDA(x1,y1,xend,yend)
{
dx=xend-x1, dy=yend-y1;
If(abs(dx)>abs(dy)
step=abs(dx);
Else
Step=abs(dy);
Xincrement=dx/steps; Yincrement=dy/steps;
For(i=1;i<=step;i++)
{
putPixel(x1,y1);
x1=x1+Xincrement;
y1=y1+Yincrement;
}}
1/28/23
Computer Graphics Getie B. MAU – CS
12
Line Drawing: Bresenham’s Algorithm
DDA Algorithm generate floating point numbers. The
calculation of float takes extra time compare to integer. so
the algorithm is slow & time consuming. The algorithm
takes round technique to plot the pixel value. Due to this
the line is not smooth.
Bresenham’s algorithm uses only integer operations –
much faster
If we know the previous pixel location, we only have
a choice of 2 locations for the next pixel,
At each stage, we need to decide which of
A=(xk+1, yk+1)
B=(xk+1,yk) pixel to choose
Summary
{
X=x0, Y=y0;
dx=xend-x0, dy=yend-y0;
P=2dy-dx;
While(x<=xend)
{
Plotpixel(X,Y);
X++;
If(p<0)
{
P=p+2dy;
}
Else
{ p=p+2dy-2dx;
Y++;
}} }
GL_LINE_STRIP
Connected line segments(a polyline)
GL_LINE_LOOP
Connected line segments, and last
point connected to first point
OpenGL Line Functions
20
Width - tickness
Specify in pixels and proportion of a
standard line width
Issues:
Line have different thickness on the slope
Problem with
End of the line
Joining the two lines (polygon)
Width
simplest and most common technique for
increasing the width of a line
plot a line of width 1 pixel, and then
add extra pixels in either the horizontal or
vertical directions
these two approaches we use depends on
gradient m of line
If |m| ≤ 1: line more horizontal than vertical
plot extra pixels vertically, i.e. same x-
coordinate, different y-coordinate, as
If |m| > 1 :Computer
1/28/23
line Graphics
more vertical Getie
than horizontal
B. MAU – CS
Contd…
25
Width
Width
Two problems with
technique:
- Thickness depends on
slope, e.g.
If slope = 0, plotting
n pixels gives
thickness n
If slope = 1 (45o),
plotting n pixels
gives thickness of
n/√2
- Ends of lines:
depending on whether
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
27
Width
Answer to the second problem – use line caps
Line cap is a shape that is applied to the end of
the line only to give them a better appearance
Three types of line cap are common in computer
graphics:
- Butt cap - is formed by drawing a line through
each end-point at an orientation of 90o to the
direction of the line
- Round cap - formed by drawing a semi-circle at
each end-point with radius equal to half the line
1/28/23width Computer Graphics Getie B. MAU – CS
Contd…
28
Width
Types of line cap
Style
Solid
Dotted – very short dash with spacing
equal to or greater than dash itself
Dashed – displayed by generating an interdash spacing
normal approach to change line style – define a
pixel mask
- Pixel mask means a sequence of bit values that
determine whether pixels in the plotted line should be
on or off, e.g.,
- Mask 11111000 specifies a dash length of 5 pixels
followed by a spacing of 3 pixels
- In other words,
1/28/23 if bit in PM plot pixel Getie B. MAU – CS
is 1Graphics
Computer
Contd…
32
glEnable(GL_LINE_STIPPLE);
glLineWidth(3.0);
glLineStipple(1, 0x00FF);
glBegin(GL_LINE_STRIP);
glVertex2i(100,100);
glVertex2i(150,100);
glVertex2i(150,200);
glVertex2i(250,250);
glEnd();
glDisable(GL_LINE_STIPPLE);
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
34
GL_TRIANGLES:
Vertex list treated as groups of three triangle vertices
Vertices must be specified in anti-clockwise order
GLint p1[] = {50,100};GLint p2[] = {100,10};GLint p6[] =
{100,200};
GLint p3[] = {150,10};GLint p5[] = {150,200};GLint p4[]=
{200,100};
glBegin(GL_TRIANGLES);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p4);
Contd…
37
GL_TRIANGLE_STRIP:
Displays set of connected triangles
First triangle vertices must be anti-clockwise
E.g.
glBegin(GL_TRIANGLE_STRIP);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p5);
glVertex2iv(p4);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
38
GL_TRIANGLE_FAN:
First vertex is the ‘source’ of the fan
Subsequent pairs of vertices form triangles with the first
one
E.g.
glBegin(GL_TRIANGLE_FAN);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
39
Writing Assignments
Discuss about
- Circle Generating Algorithms
- Ellipse Generating Algorithms
Write pseudo codes and flowchart for the above
generating algorithms.
Texture Fill
Solid Fill Pattern Fill
Reading Assignments
Concave and Convex Polygons
Identify concave polygons
Splitting concave polygons
Polygon Inside-Outside Tests
Representing polygons
Polygon Front and Back faces
Polygon Normal Vectors
glRect*
Because rectangles are a common primitive to display,
OpenGL provides a special routine that takes 2-D
points only.
glRect* (x1, y1, x2, y2)
where (x1,y1) and (x2,y2) define opposite corners of
the rectangle. Actually when we call the glRect*
routine, OpenGL will construct a polygon with
vertices defined in the following order:
(x1,y1), (x2,y1), (x2,y2), (x1,y2).
Specify opposite corners of the rectangle,
e.g: glRecti(200,100,50,250);
Can draw rectangles with other functions,
but glRect*can be
1/28/23
more efficient Getie B. MAU – CS
Computer Graphics
Contd…
46
GL_POLYGON:
Displays a single convex polygon
Vertices of the polygon are specified in anti-clockwise
direction
E.g.
glBegin(GL_POLYGON);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
1/28/23glEnd(); Computer Graphics Getie B. MAU – CS
Contd…
48
GL_TRIANGLES:
Vertex list treated as groups of three triangle vertices
Vertices must be specified in anti-clockwise order
E.g.
glBegin(GL_TRIANGLES);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
49
GL_TRIANGLE_STRIP:
Displays set of connected triangles
First triangle vertices must be anti-clockwise
E.g.
glBegin(GL_TRIANGLE_STRIP);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p5);
glVertex2iv(p4);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
50
GL_TRIANGLE_FAN:
First vertex is the ‘source’ of the fan
Subsequent pairs of vertices form triangles with the first
one
E.g.
glBegin(GL_TRIANGLE_FAN);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
51
GL_QUADS:
Vertex list treated as groups of four quadrilateral
vertices
Vertices must be specified in anti-clockwise order, E.g.
glBegin(GL_QUADS);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glVertex2iv(p7);
glVertex2iv(p8);
1/28/23glEnd(); Computer Graphics Getie B. MAU – CS
Contd…
52
GL_QUAD_STRIP:
One quadrilateral drawn for each pair of vertices after
the first two
E.g.
glBegin(GL_QUAD_STRIP);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glVertex2iv(p7);
glVertex2iv(p8);
1/28/23glEnd();
Computer Graphics Getie B. MAU – CS
Character Primitives 53
00111000
01101100
11000110
11000110
11111110
11000110
11000110
00000000
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
56
Stroke(outline)
Stroke (or outline) fonts represent characters using
line or curve primitives. They are less efficient to
draw but are easily scalable.
Each character represented (stored) as a series of
line segments
Takes longer time draw than bitmap fonts
we can change the font, colour, and also line width
and line style
Therefore the width of these lines can be changed
using
glLineWidth
style of the lines using
1/28/23 Computer Graphics Getie B. MAU – CS
57
OpenGL Character Primitives functions
glut library supports display of character
primitives
All characters displayed at current raster position:
glRasterPos2i(x, y);//positions the raster at coordinate
location (x,y).
Bitmap characters are drawn using
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_10, ‘a’);
//the number represents the height of the font.
glutBitmapCharacter(GLUT_BITMAP_9_BY_15, ‘a’);//This will
draw the character ‘a’ in a monospace bitmap font with width 9
and height 15 pixels.
To change colour of the character use
glColor* routine
Stroke characters, e.g.
Computer Graphics Getie B. MAU – CS
glutStrokeCharacter(GLUT_STROKE_ROMAN, ‘a’);//This will
OpenGL Color Modes
58
glutInitDisplayMode, e.g.
- glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glColor*, e.g.
- glColor3f(1.0,1.0,1.0); white foreground
glClearColor, e.g.
- glClearColor(0,0,0,0) black background
WHITE
Question
s?
Thank You!
1/28/23 Computer Graphics Getie B. MAU – CS