0% found this document useful (0 votes)
32 views

Chapter 4

The document discusses computer graphics primitives and line generation algorithms. It covers the following key points: - Graphics primitives are basic building blocks like points, lines, polygons that are used to construct pictures. There are 2D and 3D primitives. - Two common algorithms for drawing lines are the Digital Differential Analyzer (DDA) algorithm and Bresenham's algorithm. DDA uses slope to iteratively calculate pixel positions, while Bresenham's uses only integers for faster computation. - Bresenham's algorithm works by calculating the distance of candidate pixels from the true line and choosing the closer pixel using a decision variable p that can be incrementally updated using integers. This allows for

Uploaded by

Sola
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
32 views

Chapter 4

The document discusses computer graphics primitives and line generation algorithms. It covers the following key points: - Graphics primitives are basic building blocks like points, lines, polygons that are used to construct pictures. There are 2D and 3D primitives. - Two common algorithms for drawing lines are the Digital Differential Analyzer (DDA) algorithm and Bresenham's algorithm. DDA uses slope to iteratively calculate pixel positions, while Bresenham's uses only integers for faster computation. - Bresenham's algorithm works by calculating the distance of candidate pixels from the true line and choosing the closer pixel using a decision variable p that can be incrementally updated using integers. This allows for

Uploaded by

Sola
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 62

Computer Science

Chapter Four

Geometry and Line Generation

1/28/23 Computer Graphics Getie B. MAU-CS


Graphics Primitives
2

All graphics packages construct pictures from basic


building blocks known as graphics primitives.
Output Primitives: Basic geometric structures
(points, straight line segment, circles, quadric
surfaces, spline curve and surfaces, polygon color
areas, and character strings)
Geometric primitives: primitives or routines to
describe the geometry (i.e. shape) of objects e.g.
Point drawing, Line drawing, Polygon drawing,…
- They can be 2-D primitives (points, lines, quadrilaterals,
& general polygons) and more complex 3-D primitives
(spheres and polyhedral (polyhedron is a 3-D surface
1/28/23made from a mesh of 2-D polygons))
Computer Graphics Getie B. MAU – CS
Attributes Output Primitives
3

Attribute – any parameter that affects the way a


primitive will be displayed
e.g.: Colour, type, line thickness, fill style, etc.
OpenGL maintain a list of current state variables
that are used to modify the appearance of each
primitive as it is displayed.
Therefore these state variables represent attributes
of the primitives
All OpenGL state variables have default values
Remain in effect until new values specified
Some state variables can be changed within
glBegin() …Computer
1/28/23
glEnd()
Graphics
pairs Getie B. MAU – CS
Contd…
4

Output Primitive Attributes


Point Size
Color
Line Thickness (1pt, 2pt …)
Type (Dashed, Dotted, Solid)
Color
Text Font (Arial, Courier, Times Roman…)
Size (12pt, 16pt ..)
Spacing
Orientation (Slant angle)
Style (Bold, Underlined, Double lined)
Color
Filled Region Fill Pattern
Fill Type (Solid Fill, Gradient Fill)
Fill Color
Images Color Depth (Number of bits/pixel)

1/28/23 Computer Graphics Getie B. MAU – CS


5
OpenGL Point Drawing Functions
Point – is the most basic type of output primitive
use the pair of functions glBegin … glEnd, using the
symbolic constant GL_POINTS to specify the vertex and
other properties.
Point attributes:
- Point size: glPointSize(size); E.g glPointSize(10.0);
 Points are drawn as squares with a side length equal to
the point size. default point size is 1 pixel.
- Point colour: glColor* e.g glColor3f(0,1,0);
glVertex*- to identify the location of points
 * specifies # of arguments, and type of
arguments, e.g.
 glVertex3f: 3 Glfloat arguments
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
6

The following code fragment draws three 2-D points


with
a size of 2 pixels which illustrates an example of how
the sequences of vertices are passed to OpenGL
void displaypoint(void){
glPointSize(2.0);
glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
glColor3f(0,1,0);
glBegin(GL_POINTS); // draw 3 points
glVertex2i(50,100);
glVertex2i(100,150);
glVertex2i(150,200);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
7

We can set the OpenGL routines attributes for each


drawing points:
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_POINTS);
glVertex2i(50, 100);
glPointSize(2.0);
glColor3f(0.0, 1.0, 0.0);
glVertex2i(100, 150);
glPointSize(3.0);
glColor3f(0.0, 0.0, 1.0);
glVertex2i(150,200);
glEnd();
1/28/23 Computer Graphics Getie B. MAU – CS
Line Drawing Algorithms 8

Lines are a very common primitive and will be supported by


almost all graphics packages.
Lines form the basis of more complex primitives such as polylines
(a connected sequence of straight-line segments) or polygons (2-D
objects formed by straight-line edges)
Lines are normally represented by the two end-points, and points
(x,y) along the line must satisfy slope-intercept straight-line
equation:
y = mx + c…………………………………………... (1)
(m= slope or gradient, c= coordinate at which the line intercepts y-axis)
Given end points (x0, y0) and (xend, yend) we can calculate
m = (yend - y0)/(xend - x0) ……………… (2)
c = y0 - m.x0…………………………...………… (3)
Two line-drawing algorithms: DDA algorithm and Bresenham’s
algorithm
For any given x-interval δx(x increment), we can find the
corresponding y-interval δy(y increment):
Line Drawing: DDA Algorithm
9

DDA=Digital Differential Analyser


Operates: starting at one end-point of the line, and
then using Eqs. (4) and (5) to generate successive
pixels until the second end-point is reached.
For lines with |m|≤1: line more horizontal than
vertical
 Start with (x0, y0), successive pixel positions calculated
using δx=1, δy=m
 e.g (2,2) to (9,2) and (5,4) to (12,7)
For lines with |m|>1: line more vertical than
horizontal
 Start with (x0, y0), successive pixel positions calculated
using δx=(1/m), δy=1 e.g
 E.g (2,5) to (2,12) and (5,7) to (10,15)
Contd…
10

Example:
 m=3/5=0.6
 |m|≤1, so
δx=1, δy=0.6

 Start with (x0,y0) = (10,10) – colour this pixel


 Next, (x1,y1) = (10+1,10+0.6) = (11,10.6) – so we colour pixel (11,11)
 Next, (x2,y2) = (11+1,10.6+0.6) = (12,11.2) – so we colour pixel (12,11)
 Next, (x3,y3) = (12+1,11.2+0.6) = (13,11.8) – so we colour pixel (13,12)
 Next, (x4,y4) = (13+1,11.8+0.6) = (14,12.4) – so we colour pixel (14,12)
Next, (x5,y5) = (14+1,12.4+0.6) = (15,13) – so we colour pixel (15,13)
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
11

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

 Therefore we do not need to compute the actual


13
Bresenham’s Algorithm
 Bresenham’s algorithm works as follows. First, we denote by
dupper and dlower the distances between the centres of pixels A and
B and the ‘true’ line.
 Using Eq. (1) the ‘true’ y-coordinate at xk+1 can be calculated as:

1/28/23 Computer Graphics Getie B. MAU – CS


14
Bresenham’s Algorithm
 If the value of this expression is positive we choose pixel A;
otherwise we choose pixel B. The question now is how we can
compute this value efficiently. To do this, we define a decision
variable pk for the kth step in the algorithm and try to formulate pk
so that it can be computed using only integer operations. To achieve
this, we substitute.

• where d is a constant that has the value


 Note that the sign of pk will be the same as the sign of (dlower –
dupper), so if pk is positive we choose pixel A and if it is negative
we choose pixel B.
 Next calculate how much the decision variable changes every
time (pk incremental calculation=pnext-pk).
 Given that we know a value for pk, we can calculate pk+1 from Eq.
(10) by observing that:
1/28/23 Computer Graphics Getie B. MAU – CS
15
Bresenham’s Algorithm
 The initial value for the decision variable, p0, is calculated by
substituting xk = x0 and yk = y0 into Eq. (10), which gives the
following simple expression:

Summary

1/28/23 Computer Graphics Getie B. MAU – CS


16
Bresenham’s Algorithm
Consider the example of plotting the line shown below using Bresenham’s algorithm:
Bresenham’s Algorithm
AlgorithimBresnham(x0,y0,xend,yend)
17

{
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++;
}} }

Computer Graphics Getie B. MAU – CS


18
OpenGL Line Drawing Primitives
3 kinds of line primitives, based on different
interpretations of a vertex stream.
- GL_LINES: Vertices 0 and 1 are considered a
line. Vertices 2 and 3 are considered a line and
so on. If the user specifies a non-even (odd)
number of vertices, then the extra vertex is
ignored
- GL_LINE_STRIP: adjacent vertices are
considered lines. Thus, if you pass n vertices,
you will get n-1 lines. If the user only specifies
1 vertex, the rendering command is ignored.
- GL_LINE_LOOP: As line strips, except that
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
19

GLint p1[] = {200,100}; GLint p2[] = {50,0}


GLint p3[] = {100,200}; GLint p4[]={150,0}; GLint p5[]
= {0,100};
GL_LINES
 Unconnected line segments

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

We can draw using the same glBegin … glEnd functions


we specify that vertices should be interpreted as line end-
points
by using the symbolic constant GL_LINES
E.g.,
glLineWidth(3.0);
glBegin(GL_LINES);
glVertex2f(200.0, 100.0);
glVertex2f(50.0, 0.0);
glVertex2f(100.0, 200.0);
glVertex2f(150.0, 0.0);
glVertex2f(0.0, 100.0);
glEnd()
line will be drawn in the current drawing colour and with
Contd…
21

GL_LINE_STRIP and GL_LINE_LOOP


GLint p1[] = {200,100}; GLint p2[] = {50,0}
GLint p3[] = {100,200}; GLint p4[]={150,0};
GLint p5[] = {0,100};
glBegin(GL_LINE_STRIP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
glEnd();
glBegin(GL_LINE_LOOP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
glEnd();
Line Attributes
22

Line Attribute: there are 3 most common


attributes
- Line type- solid, dashed and dotted lines
- Line Width
- Line Color

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
23

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)

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
24

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

Fig. Increasing Line Width by Plotting Extra Pixels in the


Vertical (a) and Horizontal (b) directions
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
26

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

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
29

The process introduce a new problem


 If we are drawing polylines, or a connected
series of line segments, with these line caps, we
can get problems at line joins
For example
 what happens at the line join of two line
segments drawn with butt caps
 There is a small triangular area at the join that
does not get filled

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
30

To overcome this problem – use the following


join types:
 Miter join – extend the outer boundaries of each
of the two lines until they meet
 Round join – draw a circular boundary centred
on the join point with a diameter equal to the line
width
 Bevel join – use butt caps, then fill in triangle
that is left unfilled
Line join
types
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
31

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

Line style – is specified using a pixel mask


 Stippled lines – to make stippled (dotted or dashed)
lines
 Firstly, must enable line stipple using:
glEnable(GL_LINE_STIPPLE);
Next, use glLineStipple function to define line style, takes
2 arguments: a
glLineStipple(GLint repeatFactor, GLushort
pattern);
 repeatFactor, specifies how many times each bit in
the pixel mask should be repeated, and
 pattern, which is a 16-bit pixel mask, with the low-
order
1/28/23
bit used first – series
Computer Graphics
of 0’s and 1’s
Getie B. MAU – CS
Contd…
33

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

1/28/23 Computer Graphics Getie B. MAU – CS


Triangle Drawing Primitives
35

triangle - a primitive formed by 3 vertices


It is the 2D shape with the smallest number of
vertices
3 kinds of triangle primitives, based again on
different interpretations of the vertex stream:
- GL_TRIANGLES: vertices 0, 1, and 2 form a triangle.
Vertices 3, 4, and 5 form a triangle. And so on.
- GL_TRIANGLE_STRIP: Every group of 3 adjacent
vertices forms a triangle. A vertex stream of n length
will generate n-2 triangles
- GL_TRIANGLE_FAN: The first vertex is always
held fixed. From there on, every group of 2 adjacent
1/28/23vertices form a triangle
Computer Graphicswith the first.
Getie So with
B. MAU – CS a vertex
Contd…
36

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.

1/28/23 Computer Graphics Getie B. MAU – CS


Fill-Area Primitives
40

Refers to any enclosed boundary that can be filled


with a solid colour or pattern
How do we fill shapes?

Texture Fill
Solid Fill Pattern Fill

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
41

Fill-area primitives are normally polygons, as they


can be filled more efficiently by graphics packages
Fill-Area algorithms are used to fill the interior of a
polygonal shape
If the polygon is to be filled we can specify a fill style
Options for filling a defined region include
- choice between a solid color or a pattern fill and
- choices for particular colors and patterns
Polygons are 2-D shapes whose boundary is formed
by any number of connected straight-line segments
- defined by 3 or more coplanar vertices (points positioned
on the same plane)
- Each pair of adjacent
1/28/23 vertices is connected
Computer Graphics in –sequence
Getie B. MAU CS by
Contd…
42

Normally polygons should have no edge crossings: in


this case they are known as simple polygons or
standard polygons
Edge crossings, e.g.

Polygons are the most common form of graphics


primitive because they form the basis of polygonal
meshes, which is the most common representation for
3-D graphics objects.
Polygonal meshes approximate curved surfaces by
forming a mesh of simple polygons.

1/28/23 Computer Graphics Getie B. MAU – CS


43

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

1/28/23 Computer Graphics Getie B. MAU – CS


44
OpenGL Polygon Fill-Area Functions
To fill polygons with a fill-area pattern:
- Define the pattern
- Enable polygon-fill feature of OpenGL
- Draw polygons
A number of different ways:
 glRect*
 6 different symbolic constants
For all:
 Polygons must be convex
 Must specify vertices in anti-clockwise order when
viewing the polygon from “outside”
 Default fill-style is solid color, determined by current
color settings Computer Graphics
1/28/23 Getie B. MAU – CS
Contd…
45

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

All other fill-area functions use the functions


glBegin… glEnd:
 GL_POLYGON
 GL_TRIANGLES
 GL_TRIANGLE_STRIP
 GL_TRAINGLE_FAN
 GL_QUADS
 GL_QUAD_STRIP

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
47

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

Character primitives can be used to display text


characters.
Many pictures require text.
attributes: Font size, Color and Orientation
Attributes can be set both for entire character strings
(text) and for individual characters
Most graphics packages have some support for
displaying character primitives
Type Faces (fonts) can be divided into two:
 Serif – has small lines or Arial
accents
is aat the endsfont
sans-serif of the
main character stroke. And soVerdana
makes readable.
is a sans-serif font
 Sans-Serif – does not have Times Roman is a serif font
accents.
Garamond is a serif font
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
54

Another category of fonts


 Monospace font: always take up the same width on the display,
regardless of which character is being drawn. monospace fonts
use the same width for each character.
 Proportional fonts: width used on the display will be
proportional to the actual width of the character.
Two ways of representing characters:
 Bitmap (Raster):
 Bitmap fonts represent characters using a grid of pixel
values. They are efficient to draw but not easily scalable.
 Binary pattern defined on rectangular grid
 Each character represented (stored) as a 2-D array
- Each element corresponds to a pixel in a rectangular
“character cell”
- Simplest: each element is a bit (1=pixel on, 0=pixel off)
1/28/23 Computer Graphics Getie B. MAU – CS
Contd…
55

Two ways of representing characters:


 Bitmap (Raster)

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

2 ways to specify colours in OpenGL:


- RGB:
 Uses standard RGB colors (24-bit color, consisting
of 8 bits of red, green and blue) and is the default
 3 numbers represent the amount of red, green and
blue in the colour
- RGBA:
 Optional fourth value is the alpha coefficient
 Specifies the degree of transparency of the
primitive
 Useful for controlling colour blending for
overlapping primitives
1/28/23 If no alpha Computer
valueGraphics
is defined it is assumed
Getie B. MAU – CS to be
Contd…
59

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

1/28/23 Computer Graphics Getie B. MAU – CS


Contd…
60

Some color types

glColor3f(0.0, 0.0, 0.0); black


glColor3f(1.0, 0.0, 0.0); red
glColor3f(0.0, 1.0, 0.0); green
glColor3f(1.0, 1.0, 0.0); yellow
glColor3f(0.0, 0.0, 1.0); blue
glColor3f(1.0, 0.0, 1.0); magenta
glColor3f(0.0, 1.0, 1.0); cyan
glColor3f(1.0, 1.0, 1.0); white

1/28/23 Computer Graphics Getie B. MAU – CS


Contd… 61
void display(){
glClear(GL_COLOR_BUFFER_BIT); GLint xRaster = 125, yRaster = 450; // Initialize
glColor3f(0.0,1.0,0.0); raster position.
glRasterPos2i(15,30); void display(void)
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'E');
{
glRasterPos2i(16,30);
glColor3f(1.0,1.0,0.0);
GLint l,k;
glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'T');
glRasterPos2i(17,30); glColor3f (0.0, 0.4, 1.0); // Set text color to black.
glColor3f(1.0,0.0,0.0); glRasterPos2i(xRaster, yRaster);
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'H');
for ( k = 0; k < 27; k++)
glRasterPos2i(18,30); glutBitmapCharacter(GLUT_BITMAP_9_BY_15,
glColor3f(0.0,1.0,0.0); "Computer Science & IT Dep't"[k]);
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'I');
glRasterPos2i(19,30);
glColor3f(1.0,1.0,0.0); yRaster-=20;
glRasterPos2i(xRaster, yRaster);
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'O');
glRasterPos2i(20,30); for ( l = 0; l < 28; l++)
glColor3f(1.0,0.0,0.0); glutBitmapCharacter (GLUT_BITMAP_9_BY_15,
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'P');
"Welcome to Computer Graphics"[l]);
glRasterPos2i(21,30);
glColor3f(0.0,1.0,0.0);
glutStrokeCharacter (GLUT_STROKE_ROMAN, 'A');
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'I');
glRasterPos2i(22,30); glFlush(); // send all output to the display
glColor3f(1.0,0.0,0.0); }
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,'A’);
glRasterPos2i(10,15);
glutStrokeCharacter(GLUT_STROKE_ROMAN,’A’);
62

Question
s?
Thank You!
1/28/23 Computer Graphics Getie B. MAU – CS

You might also like