Coordinate frames The origin of the frame, the [0, 0, 0] value of the x, y, and z axis is located

on an arbitrary, but known, point within the environment or on an object. There can be a frame, and different origin accordingly, for each reference perspective for a given context; each would be known as the coordinate frame of the given context.

screen coordinates

This 2D coordinate system refers to the physical coordinates of the pixels on the computer screen, based on current screen resolution. ( E.g. 1024x768 )

Graphics programming: points and lines• #include <GL/glut.h>

• void init2D(float r, float g, float b)• {• glClearColor(r,g,b,0.0);• glMatrixMode (GL_PROJECTION);• gluOrtho2D (0.0, 200.0, 0.0, 150.0);• } • void display(void) • {• glClear(GL_COLOR_BUFFER_BIT);• glColor3f(1.0, 0.0, 0.0); • //draw two points • glBegin(GL_POINTS);• for(int i = 0; i < 10; i++)• {• glVertex2i(10+5*i,110); • }• glEnd();

//draw a line glBegin(GL_LINES); glVertex2i(10,10); glVertex2i(100,100); glEnd(); glFlush(); } void main(int argc,char *argv[]) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE| GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow ("points and lines"); Init2D(0.0,0.0,0.0); glutDisplayFunc(display); glutMainLoop(); }

Line Drawing Algorithms• A line drawing algorithm is a graphical algorithm for approximating a line

segment on discrete graphical media. On discrete media, such as pixel-based displays and printers, line drawing requires such an approximation (in nontrivial cases). Basic algorithms rasterize lines in one color. A better representation with multiple color gradations requires an advanced process, anti-aliasing.

• On continuous media, by contrast, no algorithm is necessary to draw a line. For example, oscilloscopes use natural phenomena to draw lines and curves.

• The Cartesian slope-intercept equation for a straight line is Y=Mx+C With M representing the slope of the line and b as the y intercept. Given that the two endpoints of the line segment are specified at positions X1,Y1 and X2,Y2. we can determine values for the slope m and y intercept b with the following calculations M=Y2-Y1/X2-X1 and so b=y1-Mx1

Two rasterized lines. The colored pixels are shown as circles. Above: monochrome screening; below: Gupta-Sproull anti-aliasing the ideal line is considered here as a surface

dx = x2 - x1 dy = y2 - y1 for x from x1 to x2 { y = y1 + dX * (x - x1) / dY plot(x, y) }

It is assumed here that the points have already been ordered so that X2>X1. This algorithm works just fine when dx>dy (i.e., slope is less than or equal to 1), but if dx<dy (i.e., slope greater than 1), the line becomes quite sparse with lots of gaps, and in the limiting case of dx=0, only a single point is plotted.

Digital Differential Analyzer

• A digital differential analyzer (DDA) is hardware or software used for linear interpolation of variables over an interval between start and end point. DDAs are used for rasterization of lines, triangles and polygons. In its simplest implementation, the DDA algorithm interpolates values in interval by computing for each xi the equations xi = xi−1+1/m, yi = yi−1 + m, where Δx = xend − xstart and Δy = yend − ystart and m = Δy/Δx

The DDA starts by calculating the smaller of dy or dx for a unit increment of the other. A line is then sampled at unit intervals in one coordinate and corresponding integer values nearest the line path are determined for the other coordinate.Considering a line with positive slope, if the slope is less than or equal to 1, we sample at unit x intervals (dx=1) and compute successive y values as

Subscript k takes integer values starting from 0, for the 1st point and increases by 1 until endpoint is reached. y value is rounded off to nearest integer to correspond to a screen pixel.For lines with slope greater than 1, we reverse the role of x and y i.e. we sample at dy=1 and calculate consecutive x values as Similar calculations are carried out to determine pixel positions along a line with negative slope. Thus, if the absolute value of the slope is less than 1, we set dx=1 if   i.e. the starting extreme point is at the left.

The DDA method can be implemented using floating-point or integer arithmetic. The native floating-point implementation requires one addition and one rounding operation per interpolated value (e.g. coordinate x, y, depth, color component etc.) and output result. This process is only efficient when an FPU with fast add and rounding operation is available.The fixed-point integer operation requires two additions per output cycle, and in case of fractional part overflow, one additional increment and subtraction. The probability of fractional part overflows is proportional to the ratio m of the interpolated start/end values.DDAs are well suited for hardware implementation and can be pipelined for maximized throughput.This slope can be expressed in DDA as where m represents the slope of the line and c is the y intercept. In fact any two consecutive point(x,y) lying on this line segment should satisfy the equation.

Bresenham’s algorithm

• Bresenham's line algorithm is an algorithm that determines the points of an n-dimensional raster that should be selected in order to form a close approximation to a straight line between two points. It is commonly used to draw lines on a computer screen, as it uses only integer addition, subtraction and bit shifting all of which are very cheap operations in standard computer architectures. It is one of the earliest algorithms developed in the field of computer graphics. An extension to the original algorithm may be used for drawing circles.

The common conventions will be used:The top-left is (0,0) such that pixel coordinates increase in the right and down directions (e.g. that the pixel at (7,4) is directly above the pixel at (7,5)), andthat the pixel centers have integer coordinates.The endpoints of the line are the pixels at    and  , where the first coordinate of the pair is the column and the second is the row.The algorithm will be initially presented only for the octant in which the segment goes down and to the right (   and  ), and its horizontal projection    is longer than the vertical projection    (the line has a negative slope whose absolute value is less than 1). In this octant, for each column x between    and  , there is exactly one row y(computed by the algorithm) containing a pixel of the line, while each row between   and   may contain multiple rasterized pixels.Bresenham's algorithm chooses the integer y corresponding to the pixel center that is closest to the ideal (fractional) y for the same x; on successive columns y can remain the same or increase by 1. The general equation of the line through the endpoints is given by: .

Since we know the column, x, the pixel's row, y, is given by rounding this quantity to the nearest integer:

The slope depends on the endpoint coordinates only and can be precomputed, and the ideal y for successive integer values of x can be computed starting from and repeatedly adding the slope.In practice, the algorithm can track, instead of possibly large y values, a small error value between −0.5 and 0.5: the vertical distance between the rounded and the exact y values for the current x. Each time x is increased, the error is increased by the slope; if it exceeds 0.5, the rasterization y is increased by 1 (the line continues on the next lower row of the raster) and the error is decremented by 1.0.

In the following pseudocode sample plot(x,y) plots a point, sign(T) decides if T is positive or negative, and abs returns absolute value

function line(x0, y0, x1, y1) real deltax := x1 - x0 real deltay := y1 - y0 real error := 0 real deltaerr := abs (deltay / deltax) // Assume deltax != 0 (line is not vertical), // note that this division needs to be done in a way that preserves the fractional part int y := y0 for x from x0 to x1 plot(x,y) error := error + deltaerr while error ≥ 0.5 then plot(x, y) y := y + sign(y1 - y0) error := error - 1.0

Illustration of the result of Bresenham's line algorithm. (0,0) is at the top left corner of the grid, (1,1) is at the top left end of the line and (11, 5) is at the bottom right end of the line.

Pixel addressing• A pixel in a passive matrix must maintain its state without active driving circuitry

until it can be refreshed again. The signal is divided into a row or select signal and a column or video signal. The select voltage determines the row that is being addressed and all n pixels on a row are addressed simultaneously.

• Object descriptions are given in a world reference frame, chosen to suit a particular application, and input world coordinates are ultimately converted to screen display positions. World descriptions of objects are given in terms of precise coordinate positions, which are infinitesimally small mathematical points.

• Addressing display positions in terms of pixel centers is to reference screen coordinates with respect to the grid of horizontal and vertical pixel boundary lines spaced one unit apart below. A screen coordinate position is then the pair of integer values identifying a grid intersection position between two pixels.

For example, the mathematical line path for a polyline with screen endpoints (0,0), (5,2), and (1,4) is shown

With the coordinate origin at the lower left of the screen, each pixel area can be referenced by the integer grid coordinates of its lower left corner.

The above figure illustrates this convention for an 8 by 8 section of a raster, with a single illuminated pixel at screen coordinate position (4, 5).

The area occupied by a pixel with screen coordinates (x, y) is identified as the unit square with diagonally opposite corners at (x, y) and (x+1,y+1).

Line Drawing Algorithms: Order Dependence

• Suppose we have five objects which all depend on some of the other objects. The objects could be anything, but in this case let’s say they’re very simple software packages (no minimal versions, etc) that depend on other packages which must be installed first. How does one find the right order of installing the packages?

• Take, for instance, the following scenario: Software package a depends on b and d. b depends on c and e. c depends on d and e.d depends on nothing, nor does e. When we visualize this, we get something like this:

Representing the data• In order to find the correct sequence of installing the software packages, we must

first represent the data in our program. This is where graphs come into the picture. A graph is a simple data structure that consists of nodes (sometimes called vertices) and edges. In our case, each software package is a node. Nodes are connected to each other by something called edges. In our case, an edge from one node to another signifies that the first node is dependent on the second. This relationship depends is implicit in our program, since all we’re doing is resolving dependencies. But edges can represent any other kind of relationship between nodes, such as ha

• Lets define a class that can hold our node information. We’ll need to store the name of the node, and a list of relationships (dependencies) to other nodes. We’re using the Python language for this, by the way. For those that don’t know Python: don’t worry. I’ll try to explain things as we go along. This is what our Node class will look like:s a road to or knows (if your nodes as persons), etc.

clipping• Clipping, in the context of computer graphics, is a method to selectively enable or

disable rendering operations within a defined region of interest. Mathematically, clipping can be described using the terminology of constructive geometry. A rendering algorithm only draws pixels in the intersection between the clip region and the scene model. Lines and surfaces outside the view volume are removed

• Clip regions are commonly specified to improve render performance. A well-chosen clip allows the renderer to save time and energy by skipping calculations related to pixels that the user cannot see. Pixels that will be drawn are said to be within the clip region. Pixels that will not be drawn are outside the clip region. More informally, pixels that will not be drawn are said to be "clipped."

Before we discuss clipping lines, let's look at the simpler problem of clipping individual points.If the x coordinate boundaries of the clipping rectangle are Xmin and Xmax, and the y coordinate boundaries are Ymin and Ymax, then the following inequalities must be satisfied for a point at (X,Y) to be inside the clipping rectangle: Xmin < X < Xmax and Ymin < Y < Ymax If any of the four inequalities does not hold, the point is outside the clipping rectangle.

1.The Cohen-Sutherland Line-Clipping AlgorithmThe more efficient Cohen-Sutherland Algorithm performs initial tests on a line to determine whether intersection calculations can be avoided.Steps for Cohen-Sutherland algorithm

1.End-points pairs are check for trivial acceptance or trivial rejected using the outcode.2.If not trivial-accepance or trivial-rejected, divided into two segments at a clip edge.3.Iteratively clipped by testing trivial-acceptance or trivial-rejected, and divided into two segments until completely inside or trivial-rejected

Trivial acceptance/reject testTo perform trivial accept and reject tests, we extend the edges of the clip rectangle to divide the plane of the clip rectangle into nine regions. Each region is assigned a 4-bit code determined by where the region lies with respect to the outside halfplanes of the clip-rectangle edges. Each bit in the outcode is set to either 1 (true) or 0 (false); the 4 bits in the code correspond to the following conditions:Bit 1 : outside halfplane of top edge, above top edgeY > YmaxBit 2 : outside halfplane of bottom edge, below bottom edgeY < YminBit 3 : outside halfplane of right edge, to the right of right edgeX > XmaxBit 4 : outside halfplane of left edge, to the left of left edgeX < Xmin

Circle Midpoint Algorithm

draw pixels in this octant(draw others using symmetry)

(0,R)

(0,-R)

(R,0)(-R,0)

222),( RyxyxF Implicit function for circle

0),( yxF

0),( yxF

0),( yxF

on circle

inside

outside

x+

y+

Choosing the Next Pixel

M

(x, y) (x+1, y)

(x+1, y+1)

E

SE

0)2/1,1( yxF

0)2/1,1( yxF

choose E

choose SE

)2/1,1()( yxFMFddecision variable d

Change of d when E is chosen

Mold

(x, y) (x+1, y)

(x+1, y+1)

E

SE

(x+2, y)

(x+2, y+1)

Mnew

32

)2/1()1(

)2/1()2(222

222

xddd

Ryxd

Ryxd

oldnew

old

new

Change of d when SE is chosen

Mold

(x, y) (x+1, y)E

SE

(x+1, y+2) (x+2, y+2)

Mnew

522

)2/1()1(

)2/3()2(222

222

yxddd

Ryxd

Ryxd

oldnew

old

new

Initial value of d

Rd

RRd

RFd

MFd

4/5

)2/1()1(

)2/1,1(

)(

0

2220

0

00

(0,-R)

M0

(1,-R)

(1,-R+1)

Midpoint Circle Algox = 0;y = -R;d = 5/4 – R; /* real */setPixel(x,y);while (y > x) {

if (d > 0) { /* E chosen */d += 2*x + 3;x++;

} else { /* SE chosen */d += 2*(x+y) + 5;x++; y++;

}setPixel(x,y);

}

New Decision Variable

• Our circle algorithm requires arithmetic with real numbers.

• Let’s create a new decision variable hh=d-1/4

• Substitute h+1/4 for d in the code.• Note h > -1/4 can be replaced with h > 0 since

h will always have an integer value.

New Circle Algorithmx = 0;y = -R;h = 1 – R; setPixel(x,y);while (y > x) {

if (h > 0) { /* E chosen */h += 2*x + 3;x++;

} else { /* SE chosen */h += 2*(x+y) + 5;x++; y++;

}setPixel(x,y);

}

Simple Circle AlgorithmsSince the equation for a circle on radius r centered at (0,0) is

x2 + y2 = r2, an obvious choice is to plot

y = ±sqrt(r2 - x2)for -r <= x <= r.

This works, but is inefficient because of themultiplications and square rootoperations. It also creates large gaps in thecircle for values of x close to R (and clumping for x near 0).

A better approach, which is still inefficient but avoids the gaps is to plotx = r cosøy = r sinø

as ø takes on values between 0 and 360 degrees.

Fast Lines Using The Midpoint MethodAssumptions: Assume we wish to draw a line between points (0,0) and (a,b) with slope

M between 0 and 1 (i.e. line lies in first octant).

The general formula for a line is y = Mx + B where M is the slope of the line and B is the y-intercept. From our assumptions M = b/a and B = 0.

Therefore y = (b/a)x + 0 is f(x,y) = bx – ay = 0 (an equation for the line). If (x1,y1) lie on the line with M = b/a and B = 0, then

f(x1,y1) = 0.

+x-x

-y

+y (a,b)

(0,0)

Fast Lines (cont.)For lines in the first octant, the nextpixel is to the right or to the right and up.

Assume: Distance between pixels centers = 1

Having turned on pixel P at (xi, yi), the next pixel is T at (xi+1, yi+1) or S at (xi+1, yi). Choose the pixel closer to the line f(x, y) = bx - ay = 0.

The midpoint between pixels S and T is (xi + 1,yi + 1/2). Let e be the difference between the midpoint and where the line actually crosses between S and T. If e is positive the line crosses above the midpoint and is closer to T. If e is negative, the line crosses below the midpoint and is closer to S. To pick the correct point we only need to know the sign of e.

(xi +1, yi + 1/2 + e)e

(xi +1,yi + 1/2)

P = (xi,yi ) S = (xi + 1, yi )

T = (xi + 1, yi + 1)

Fast Lines - The Decision Variablef(xi+1,yi+ 1/2 + e) = b(xi+1) - a(yi+ 1/2 + e) = b(xi + 1) - a(yi + 1/2) -ae =

f(xi + 1, yi + 1/2) - ae = 0

Let di = f(xi + 1, yi + 1/2) = ae; di is known as the decision variable.

Since a >= 0, di has the same sign as e.

Algorithm:If di >= 0 Then

Choose T = (xi + 1, yi + 1) as next point

di+1 = f(xi+1 + 1, yi+1 + 1/2) = f(xi +1+1,yi +1+1/2)

= b(xi +1+1) - a(yi +1+1/2) = f(xi + 1, yi + 1/2) + b - a

= di + b - a

ElseChoose S = (xi + 1, yi) as next point

di+1 = f(xi+1 + 1, yi+1 + 1/2) = f(xi +1+1,yi +1/2)

= b(xi +1+1) - a(yi +1/2) = f(xi + 1, yi + 1/2) + b

= di + b

x := 0;y := 0;d := b - a/2;For i := 0 to a do

Plot(x,y);If d >= 0 Then x := x + 1; y := y + 1; d := d + b – aElse

x := x + 1; d := d + b

End End

Fast Line Algorithm

Note: The only non-integer value is a/2. If we then multiply by 2 to get d' = 2d, we can do allinteger arithmetic using only the operations +, -, and left-shift. The algorithm still works since weonly care about the sign, not the value of d.

The initial value for the decision variable, d0, may be calculated directly from the formula at point (0,0).

d0 = f(0 + 1, 0 + 1/2) = b(1) - a(1/2) = b - a/2

Therefore, the algorithm for a line from (0,0) to (a,b) in the first octant is:

Bresenham’s Line Algorithm

We can also generalize thealgorithm to work for lines beginning at points other than (0,0) by giving x and y the proper initial values.

This results in Bresenham's Line Algorithm.

Begin {Bresenham for lines with slope between 0 and 1}a := ABS(xend - xstart);b := ABS(yend - ystart);d := 2*b - a;Incr1 := 2*(b-a);Incr2 := 2*b;If xstart > xend Then x := xend; y := yendElse x := xstart; y := ystartEnd For I := 0 to a Do Plot(x,y); x := x + 1; If d >= 0 Then

y := y + 1;d := d + incr1

Else d := d + incr2

EndEnd {For Loop}

End {Bresenham}

Note: This algorithm only works for lines withSlopes between 0 and 1

Circle Drawing AlgorithmWe only need to calculate the values on the border of the circle in the first

octant. The other values may be determined by symmetry. Assume a circle of radius r with center at (0,0).

Procedure Circle_Points(x,y :Integer);Begin

Plot(x,y);Plot(y,x);Plot(y,-x);Plot(x,-y);Plot(-x,-y);Plot(-y,-x);Plot(-y,x);Plot(-x,y)

End;

(a,b)

(b,a)

(a,-b)

(b,-a)

(-a,-b)

(-a,b)

(-b,-a)

(-b,a)

Fast Circles - The Decision Variablef(x,y) = x2 + y2 - r2 = 0

f(xi - 1/2 + e, yi + 1)

= (xi - 1/2 + e)2 + (yi + 1)2 - r2

= (xi- 1/2)2 + (yi+1)2 - r2 + 2(xi-1/2)e + e2

= f(xi - 1/2, yi + 1) + 2(xi - 1/2)e + e2 = 0

Let di = f(xi - 1/2, yi+1) = -2(xi - 1/2)e - e2 Thus,

If e < 0 then di > 0 so choose point S = (xi - 1, yi + 1).

di+1 = f(xi - 1 - 1/2, yi + 1 + 1) = ((xi - 1/2) - 1)2 + ((yi + 1) + 1)2 - r2

= di - 2(xi -1) + 2(yi + 1) + 1

= di + 2(yi+1- xi+1) + 1

If e >= 0 then di <= 0 so choose point T = (xi, yi + 1).

di+1 = f(xi - 1/2, yi + 1 + 1)

= di + 2yi+1 + 1

P = (xi ,yi )

T = (xi ,yi +1)

S = (xi -1,yi +1)

e

(xi -1/2, yi + 1)

Fast Circles - Decision Variable (cont.)

The initial value of di is

d0 = f(r - 1/2, 0 + 1) = (r - 1/2)2 + 12 - r2

= 5/4 - r {1-r can be used if r is an integer}

When point S = (xi - 1, yi + 1) is chosen then

di+1 = di + -2xi+1 + 2yi+1 + 1

When point T = ( xi , yi + 1) is chosen then

di+1 = di + 2yi+1 + 1

Fast Circle Algorithm

Begin {Circle}x := r;y := 0;d := 1 - r;Repeat

Circle_Points(x,y); y := y + 1;If d <= 0 Then

d := d + 2*y + 1Else

x := x - 1;d := d + 2*(y-x)

+ 1End

Until x < yEnd; {Circle}

Procedure Circle_Points(x,y :Integer);Begin

Plot(x,y);Plot(y,x);Plot(y,-x);Plot(x,-y);Plot(-x,-y);Plot(-y,-x);Plot(-y,x);Plot(-x,y)

End;

Fast EllipsesThe circle algorithm can be generalized to work for an ellipse but only four way

symmetry can be used.

F(x,y) = b2x2 + a2y2 -a2b2 = 0

(a,0)(-a,0)

(0,b)

(0,-b)

(x, y)

(x, -y)

(-x, y)

(-x, -y)

Fast EllipsesThe circle algorithm can be generalized to work for an ellipse but only four way

symmetry can be used.

F(x,y) = b2x2 + a2y2 -a2b2 = 0

All the points in one quadrant must be computed. Since Bresenham's algorithm is restricted to only one octant, the computation must occur in two stages. The changeover occurs when the point on the ellipse is reached where the tangent line has a slope of ±1. In the first quadrant, this is where the line y = x intersects the ellipses.

(a,0)(-a,0)

(0,b)

(0,-b)

(x, y)

(x, -y)

(-x, y)

(-x, -y)

y = x

Polygons

A polygon is a many-sided planar figure composed of vertices and edges. A polygon is bounded (finite area) and closed (includes boundary).

Vertices are represented by points (x,y).

Edges are represented as line segments which connect two points, (x1,y1) and (x2,y2).

P = { (xi , yi ) } i=1,n

E3

(x3,y3)

E2

(x2,y2)E1(x1,y1)

Larry Hodges

Polygons: Complex vs Simple

Zachary Wartell

• A simple polygon – edges only intersect a vertices, no coincident vertices

• A complex polygon – edges intersect and/or coincident vertices

A

B

C

C

EF

G

H

A B,E

C

DF

A

B

C

A B

C

D

E

Simple Polygons: Convex and Concave

Convex Polygon - For any two points P1, P2 inside the polygon, all points on the line segment which connects P1 and P2 are inside the polygon.

– All points P = uP1 + (1-u)P2, u in [0,1] are inside the polygon provided that P1 and P2 are inside the polygon.

Concave Polygon - A polygon which is not convex.

Larry Hodges, Zachary Wartell

Inside vs Outside Polygon: Odd-Parity Test

Larry Hodges, Zachary Wartell

-Is point P inside polygon?-Count # times a ray from P intersects edge of polygon

-odd count implies inside -When crossing a vertex, if the vertex’s two edges are on same side of line then count it twice, else count it once.

Count onceCount twice

oror

Filling Concave Polygons

Fill the polygon 1 scanline at a time

Determine which pixels on each scanline are inside the polygon and set those pixels to the appropriate value.

Look only for those pixels at which changes occur.

Larry Hodges, Zachary Wartell

Scan-Line Algorithm

Larry Hodges, Zachary Wartell

For each scan-line:-Find the intersections of the scan line with all edges of the polygon.-Sort the intersections by increasing x-coordinate.-Fill in all pixels between pairs of intersections.

Possible Problems1. Horizontal edges ==> Ignore2. Vertices ==> If local max or min, then count twice, else count once.

(This is implemented by shortening one edge by one pixel.)3. Calculating intersections is slow.

2

4

6

8

For scan-line number 7 the sorted list of x-coordinates is (1,3,7,9)

Therefore fill pixels with x-coordinates 1-3 and 7-9.

Edge Coherence

Larry Hodges, Zachary Wartell

-Not all polygon edges intersect each scanline.-Many edges intersected by scanline yk will also be intersected by scanline yk+1

-Nearby pixels on given edge and span have similar coordinates, attributes and equation components

“scan-line aligned” trapezoids

Zachary Wartell

T1

T2

T3

T4

T5T6

-break up problem into simpler ”scan-line aligned” trapezoids- only two side edges: left, right

left edgeof T2

right edgeof T2

Edge Table

Zachary Wartell

T1

T2

T3

T4

T5T6

-sort vertices by y coordinate building Edge Table (ET)

ymax

y=0A

B

CD

F

E

G

H

yD,C

yG

yE

yB

yH

yA AH AB

HG

BC

EF ED

GF

ET

not needed

Scan AET with AEL

Zachary Wartell

T1

T2

T3

T4

T5T6

-scan up through ET and track Active Edge Table (AET). At each scan-line fill in span of pixel for each edge pair.

ymax

y=0A

CD

F

E

G

H

yG

yE

yB

yH

yA AH AB

HG

BC

EF ED

GF

ET AETk

(k = 1..10)

[(AH,AB)]

[(HG,AB)]

[(HG,BC)]

[(HG,EF),(DE,BC)]

[(GF,EF),(DE,BC)]

[(DE,BC)]

B

How do we fill trapezoids?

Zachary Wartell

-Need to generate pixel coordinates of left and right edges of edge pair-- (lx,ly) and (rx,ry)-Need to fill pixel in span between current

A

CD

F

E

G

H

B

A

CD

F

E

G

H

B

rx0, lx0

y0

rx2rx3

lx1,

lx2,

lx3

H

G

y1

y2

y3

rx1

Rasterize Edge

Zachary Wartell

-From y=mx + b we have: yk+1= yk+1,xk+1= xk+ 1 / m = xk+ Δx / Δy - fractions yuck!

-So split into integer and fraction and look at fraction numerator: xk+1= xk+ (Δx div Δy) + (Δx mod Δy) / Δy

integer fraction

xk = xik + xnk / Δ y, xi is integer component xn is x’s fraction’s numerator

xk=0

yk=0

yk

yk+1

xk xk+1 …

…

B

Rasterize Edge

Larry Hodges, Zachary WartellLarry Hodges, Zachary Wartell

-Base Case: xi = x0 , xn = 0-Iteration Case: xi is integer component, xn is fraction numerator

xi := xi + (Δx div Δy)xn := xn + (Δx mod Δy)if xn ≥ Δy then

xi := xi + 1 xn := xn – Δyendif

A=(6,1)

B=(13,4)

Δx=7Δy=3Δx div Δy= 2Δx mod Δy= 1 k y xi xn x (=xi+xn/Δy)

0 1 6 0 61 2 8 1 8 1/32 3 10 2 10 2/33 4 13 0 13 0/3(8,2)

(10,3)

Warning: H&B doesn’t handle Δx > Δy

Rasterization Special Cases

Larry Hodges, Zachary Wartell

-Previous slide truncated to obtain integer x coordinate, alternatively use rounding -you end up with a fraction (comparing xn to Δy/2) and

must multiply xn by 2 to get all integer operations

-Often polygons share edges, to avoid writing the same pixel twice possibly:

-horizontal edge – only drawn when on top-right edge – round up-left edge – round down, if xn = 0

Rasterization Special Cases

Larry Hodges, Zachary Wartell

-Edge Shortening Trick:-Recall Odd-Parity Rule Problem:

-Implement “Count Once” case with edge shortening:

Count onceCount twice

oror

Count onceCount twice

oror

A

B

C

A

B

C

A

B

C

B'

A

B

C

B'

C

B

A

B

C

B

A

B'B

B'

xA,yB’,1/mAB xC,yB’,1/mCB

Splitting Concave Polygons – Concept

Concave can be split into Convex Polygons – this simplifies Edge Tableand Active Edge Table in polygon rasterizer (only one scan-line trapezoid is active at a time!)

Identify: look for interior angle greater than 180º - cross product signs will differ

X

Y E1

E2

E3

E4

E5

E6

(E1 X E2)z > 0

(E2 X E3)z > 0

(E3 X E4)z < 0

(E4 X E5)z < 0

(E5 X E6)z > 0

(E6 X E1)z > 0

i j kx0 y0 z0x1 y1 z1

©Zachary Wartell - 1/26/2005

Splitting Concave Polygons

Edge Vector: Compute Edge Vectors (Ek = Vk+1- Vk) traversing polygon counter-clockwise.If cross product of consecutive edge is negative, then split polygon alongthe embedding line of first edge in cross product

Rotational: put successive edges on x-axis. If next edge has negative x coordinate split polygon on x-axis.

X

Y E1

E2

E3

E4

E5

E6

X

Y E1

E2

E3

E4

E5

E6

XY

X

Y

©Zachary Wartell - 1/26/2005

Splitting Convex Polygon to Triangles

Triangle rasterizing is even simpler. Only 3 edges to “sort”. Only fill in 1 or 2 scan-line aligned triangles. Pretty much what all graphics hardware does.

Pick 3 vertices of convex polygon. Split off triangle. Repeat with remaining vertices. Continue until only 3 vertices left.

v0

v1

v2

v3

v4v0

v1

v2

v3

v4

v0

v1

v2

v3

v4

A) B) C)

©Zachary Wartell - 1/26/2005

Filling Irregular Boundaries

Larry Hodges, Zachary Wartell

·boundary fill: expand and fill region until you reach boundary color

flood fill: expand and fill region while you find interior color

Boundary Fill

Interior Fill

4 vs 8 connected

Larry Hodges, Zachary Wartell

Define: 4-connected versus 8-connected,its about the neighbors

4 vs 8 connected

Zachary Wartell

Fill Result: 4-connected versus 8-connected

“seed pixel”

Recursive Pixel Boundary Fill·http://www.cosc.canterbury.ac.nz/people/mukundan/cogr/Fill.html

void boundaryFill4(int x, int y){ if(getPixel(x,y)!=borderColor && getPixel(x,y)!=fillColor ){ setPixel(x,y); boundaryFill4(x+1,y); boundaryFill4(x-1,y); boundaryFill4(x,y+1); boundaryFill4(x,y-1); } }

65

47

1

2

131

3

12

14156

141

5

5

7

4

Recursive Scan-line (boundary) fill

Zachary Wartell

A B

C D

Stack

Fill Patterns

Larry Hodges, Zachary Wartell

Fill patterns can be used to put a noticeable “texture” inside a polygon. A fill pattern can be defined in a 0-based, m x n array. A pixel (x,y) is assigned the value found in:

pattern((x mod m), (y mod n))

Pattern Pattern filled polygon

Halftoning

Larry Hodges, Zachary Wartell

For 1-bit (B&W) displays, fill patterns with different fill densities can be used to vary the range of intensities of a polygon. The result is a tradeoff of resolution (addressability) for a greater range of intensities and is called halftoning. The pattern in this case should be designed to avoid being noticed.

These fill patterns are chosen to minimize banding.

Plane Equations• Equation of a plane. In an x-y-z Cartesian coordinate system the general form

of the equation of a plane is•

ax + by + cz + d = 0 .•

It is an equation of the first degree in three variables.•

The locus of any equation of the first degree in three variables is a plane in three-dimensional Cartesian space. Conversely, any plane in space can be represented by some equation of the first degree in three variables. If one of the variables is missing (that is, if one of the coefficients a, b, c is zero), the plane is parallel to the axis of the missing variable. If two of the variables are missing, the plane is parallel to the plane of the missing variables.

Three point form of the equation of a plane. The equation of a plane passing through three non-collinear points (x1, y1, z1), (x2, y2, z2), (x3, y3, z3) is

Evaluation by minors using the top row shows that it is of the first degree and thus represents a plane. It can also be seen that it is satisfied by the coordinates of each of the given points because if the coordinates of any one of the points is substituted in place of x, y and z, the determinant will contain two rows that are just alike, and so will vanish.

Principal plane of a quadric surface. A principal plane of a quadric surface is a plane of symmetry of the surface. For example, in Figure 1 the principal planes of the ellipsoid are the X-Y plane, the X-Z plane and the Y-Z plane. We now give a technical definition of a principal plane.

Def. Principal Plane. A principal plane is a diametral plane that is perpendicular to the chords it bisects.

The equation of the diametral plane conjugate to a system of parallel chords cutting a quadric surface 1) f(x, y, z) = ax2 + by2 + cz2 + 2fyz + 2gxz + 2hxy + 2px + 2qy + 2rz + d = 0

in the direction (l, m, n) is:

2) (al + hm + gn)x + (hl + bm + fn)y + (gl + fm + cn) z + (pl + qm + rn) = 0 .

We recall that a set of direction numbers for the normal to a plane

ax + by + cz + d = 0

are the coefficients a, b, c. For the condition that the diametral plane be perpendicular to the chords it bisects to be met, the direction of the chords must be the same as the direction the diametral plane’s normal. This means that the coefficients of equation 2) must be proportional to the direction numbers l, m, n, that is that there is a real number k such that

al + hm + gn = kl hl + bm + fn = km gl + fm + cn = kn

We recognize this as an eigenvector problem where equation 4) corresponds to as the eigenvector equation AX = λX. We also recognize the matrix e

              

then ex = kx

Polygons, triangles, stripsQuads and quad strips

• With one exception, the OpenGL procedures for specifying fill polygons are similar to those for describing a point or a polyline. A glVertex function is used to input the coordinates for a single polygon vertex, and a complete polygon is described with a list of vertices placed between a glBegin/glEnd pair. However, there is one additional function that we can use for displaying a rectangle that has an entirely different format. By default, a polygon interior is displayed in a solid color, determined by the current color settings. As options (which are described in the next chapter), we can fill a polygon with a pattern and we can display polygon edges as line borders around the interior fill. There are six different symbolic constants that we can use as the argument in the glBegin function to describe polygon fill areas. These six primitive constants allow us to display a single fill polygon, a set of unconnected fill polygons, or a set of connected fill polygons. In OpenGL, a fill area must be specified as a convex polygon. Thus, a vertex list for a fill polygon must contain at least three vertices, there can be no crossing edges, and all interior angles for the polygon must be less than 180 ◦ . And a single polygon fill area can be defined with only one vertex list, which precludes any specifications that contain holes in the polygon interior, such as that shown in Fig. 3-54.We could describe such a figure using two overlapping convex polygons

Each polygon that we specify has two faces:aback face and a front face. In OpenGL, fill color and other attributes can be set for each face separately, and back/front identification is needed in both two-dimensional and threedimensional viewing routines. Therefore, polygon vertices should be specified in a counterclockwise order as we view the polygon from “outside”. This identi- fies the front face for that polygon. Because graphics displays often include rectangular fill areas, OpenGL provides a special rectangle function that directly accepts vertex specifications in the xy plane. In some implementations of OpenGL, the following routine can be more efficient than generating a fill rectangle using glVertex specifications. glRect* (x1, y1, x2, y2); One corner of this rectangle is at coordinate position (x1, y1), and the opposite corner of the rectangle is at position (x2, y2). Suffix codes for glRect specify the coordinate data type and whether coordinates are to be expressed as array elements. These codes are i (for integer), s (for short), f (for float), d (for double), and v (for vector). The rectangle is displayed with edges parallel to the xy

coordinate axes. As an example,the following statement defines the square shown in Fig. 3-55. glRecti (200, 100, 50, 250); If we put the coordinate values for this rectangle into arrays, we can generate the same square with the following code. int vertex1 [ ] = {200, 100}; int vertex2 [ ] = {50, 250}; glRectiv (vertex1, vertex2); When a rectangle is generated with function glRect, the polygon edges are formed between the vertices in the order (x1, y1), (x2, y1), (x2, y2), (x1, y2), and then back to the first vertex. Thus, in our example, we produced a vertex list with a clockwise ordering. In many two-dimensional applications, the determination of front and back faces is unimportant. But if we do want to assign different properties to the front and back faces of the rectangle, then we should reverse the order of the two vertices in this example so that we obtain a counterclockwise ordering of the vertices. In Chapter 4, we discuss another way that we can reverse the specification of front and back polygon faces. Each of the other six OpenGL polygon fill primitives is specified with a symbolic constant in the glBegin function, along with a a list of glVertex commands. With the OpenGL primitive constant GL POLYGON, we can display a single polygon fill area such as that shown in Fig. 3-56(a). For this example, we assume that we have a list of six points, labeled p1 through p6, specifying twodimensional polygon vertex positions in a counterclockwise ordering. Each of the points is represented as an array of (x, y) coordinate values.

A quadrilateral is set up for each pair of vertices specified after the first two vertices in the list, and we need to list the vertices so that we generate a correct counterclockwise vertex ordering for each polygon. For a list of N vertices, we obtain N 2 − 1 quadrilaterals, providing that N ≥ 4. If N is not a multiple of 4, any extra coordinate positions in the list are not used. We can enumerate these fill polygons and the vertices listed as n = 1, n = 2, ... , n = N 2 − 1. Then polygon tables will list the vertices for quadrilateral n in the vertex order number 2n − 1, 2n, 2n + 2, 2n + 1. For this example, N = 8 and we have 3 quadrilaterals in the strip. Thus, our first quadrilateral (n = 1) is listed as having a vertex ordering of (p1, p2, p3, p4). The second quadrilateral (n= 2) has the vertex ordering (p4, p3, p6, p5). And the vertex ordering for the third quadrilateral (n= 3) is (p5, p6, p7, p8).

Data structure for vertex arraysSample code for polygonal objects

• A Vertex Array Object (VAO) is an OpenGL Object that stores all of the state needed to supply vertex data (with one minor exception noted below). It stores the format of the vertex data as well as the Buffer Objects (see below) providing the vertex data arrays. Note that VAOs do not copy, freeze or store the contents of the referenced buffers - if you change any of the data in the buffers referenced by an existing VAO, those changes will be seen by users of the VAO.

• As OpenGL Objects, VAOs have the usual creation, destruction, and binding functions: glGenVertexArrays ,glDeleteVertexArrays , and glBindVertexArray . The latter is different, in that there is no "target" parameter; there is only one target for VAOs, and glBindVertexArray binds to that target.

• Note: VAOs cannot be shared between OpenGL contexts.• Vertex attributes are numbered from 0 to GL_MAX_VERTEX_ATTRIBS - 1. Each attribute can

be enabled or disabled for array access. When an attribute's array access is disabled, any reads of that attribute by the vertex shader will produce a constant value (see below) instead of a value pulled from an array.

• A newly-created VAO has array access disabled for all attributes. Array access is enabled by binding the VAO in question and calling:

void glEnableVertexAttribArray(GLuint index );

There is a similar glDisableVertexAttribArray function to disable an enabled array.Remember: all of the state below is part of the VAO's state, except where it is explicitly stated that it is not. A VAO must be bound when calling any of those functions, and any changes caused by these function will be captured by the VAO.

Sample program for polygon is below

void display(void){ static double radius = 0.05; const double delta_theta = pi2/20; double xcenter , ycenter; double x, y; double theta = 0.0; double current_angle = cos(omega * time); glColor3f(0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); /* Draw pendulum cord */ glColor3f(1.0, 1.0, 1.0); glBegin(GL_LINES); glVertex2f(0.0, 0.0); xcenter = -cord_length * sin(current_angle); ycenter = -cord_length * cos(current_angle); glVertex2f(xcenter, ycenter); glEnd(); /* Draw pendulum dish */ glColor3f(1.0, 0.0, 0.0); glBegin(GL_POLYGON); while (theta <= pi2) { x = xcenter + radius * sin(theta); y = ycenter + radius * cos(theta); glVertex2f(x, y); theta += delta_theta; }; glEnd(); glutSwapBuffers(); };

Bitmaps and pixmaps• A pixmap is an off screen chunk of memory that has many of the properties that a

window has• Both windows and pixmaps are call drawables in X, that is applications can draw in

them, in the case of windows the drawings are immediately visible on the screen, and in the case of pixmaps they must be copied to the screen

• Like a window, a pixmap has a width and height, which specifies how many pixels are in the pixmap and a depth which specifies the number of bits in each pixel

• A bitmap is a pixmap with depth 1, that is the pixels can be either 0 or 1• Bitmaps and pixmaps have many uses in X applications, some of their uses are:

– icons– cursors– background patterns for windows– border patterns for windows– fill patterns

• we will look at how we create, modify and use pixmaps and bitmaps

we can create a pixmap (or bitmap) using the following procedure: Pixmap XCreatePixmap(display, drawable, width, height, depth) Display *display; Drawable drawable; unsigned int width, height; unsigned int depth;

A pixmap is associated with a particular X server and a particular screen on that server, in most cases the pixmap will be stored in the server not the client programthe first parameter identifies the server where the pixmap will be storedIn Xt applications we can retrieve a display pointer from a widget using XtDisplay, which behaves in the following way:

Display *XtWindow(w) Widget w;The next parameter identifies the screen associated with the pixmap, this parameter is one of the drawables that is already on the screenIn Xt applications we can use XtScreen to determine the screen for a widget, and then use RootWindow of screen to find a drawable

Storage in hardware• A bitmap is a simple black and white image, stored as a 2D array of bits (ones and

zeros). In this representation, each bit represents one pixel of the image. Typically, a bit set to zero represents black and a bit set to one represents white. The left side of Figure 1.4shows a simple block letter U laid out on an 8 × 8 grid. The right side shows the 2-dimensional array of bit values that would correspond to the image, if it were stored as a bitmap. Each row or scanline on the image corresponds to a row of the 2D array, and each element of a row corresponds with a pixel on the scanline. Although our experience with television, the print media, and computers leads us to feel that the natural organization of an image is as a 2D grid of dots or pixels, this notion is simply a product of our experience. In fact, although images are displayed as 2D grids, most image storage media are not organized in this way. For example, the computer’s memory is organized into a long linear array

of addressable bytes (8 bit groups) of storage. Thus, somewhere in the memory of a typical computer, the block letter U of Figure 1.4 might be represented as the following string of contiguous bytes:

11111111 11011011 11011011 11011011 11011011 11011011 11000011 11111111

Since the memory is addressable only at the byte level, the color of each pixel (black or white) must be extracted from the byte holding the pixel’s value. And, since the memory is addressed as a linear array, rather than as a 2D array, a computation must be made to determine which byte in the representation contains the pixel that we wish to examine, and which bit in that byte corresponds with the pixel.

The procedure print_bitmap() in Figure 1.5 will print the contents of the image stored in the array named bitmap. We assume that the image represented by bitmap contains exactly width * height pixels, organized into height scanlines, each of length width. In other words, the number of pixels vertically along the image is height, and the number of pixels horizontally across the image is width. The print_bitmap() procedure assumes that each scanline in memory is padded out to a multiple of 8 bits (pixels), so that it exactly fits into an integer number of bytes. The variable w gives the width of a scanline in bytes. Another issue is that the representation of groups of pixels in terms of lists of ones and zeros is extremely difficult for humans to deal with cognitively. To convince yourself of this, try looking at a group of two or more bytes of information, remembering what you see, and then writing down the numbers from memory. To make the handling of this binary encoded information more manageable, it is convenient to think of each group of 4 bits as encoding a hexadecimal number. The hexadecimal numbers are the numbers written using a base of 16, as opposed to the usual decimal numbers that use base 10, or the binary numbers of the computer that use base 2. Since 16 is the 4th power of 2, each hexadecimal digit can be represented exactly by a unique pattern of 4 binary digits. These patterns are given in table Table 1.1, and because of their regular organization they can be easily memorized. With the device

Pixmap - Representing Grey Levels or Color If the pixels of an image can be arbitrary grey tones, rather than simply black or white, we could allocate enough space in memory to store a real number, rather than a single bit, for each pixel. Then arbitrary levels of grey could be represented as a 2D array of real numbers, say between 0 and 1, with pixel color varying smoothly from black at 0.0 through mid-grey at 0.5 to white at 1.0. However, this scheme would be very inefficient, since floating point numbers (the computer equivalent of real numbers) typically take 32 or more bits to store. Thus image size would grow 32 times from that needed to store a simple bitmap. The pixmap is an efficient alternative to the idea of using a full floating point number for each pixel. The main idea is that we can take advantage of the eye’s finite ability to discriminate levels of grey

It is a simple mathematical fact that in a group of n bits, the number of distinct combinations of 1’s and 0’s is 2n. In other words, n bits of storage will allow us to represent and discriminate among exactly 2n different values or pieces of information. This relationship is shown in tabular form in Table 1.2. If, in our image representation, we use 1 byte (8 bits) to represent each pixel, then we can represent up to 256 different grey levels. This turns out to be enough to “fool” the eye of most people. If these 256 different grey levels are drawn as vertical lines across a computer screen, people will think that they are seeing a smoothly varying grey scale. The structure of a pixmap, then, is a 2D array of pixel values, with each pixel’s value stored as a group of 2 or more bits. To conform to byte boundaries, the number of bits used is typically 8, 16, 24 or 32 bits per pixel, although any size is possible. If we think of the bits within a byte as representing a binary number, we can store grey levels between 0 and 255 in 8 bits. We can easily convert the pixel value in each byte to a grey level between 0.0 and 1.0 by dividing the pixel value by the maximum grey value of 255. Assuming that we have a pixmap storing grey levels in eight bits per pixel, the procedure print_greymap() in Figure 1.6 will print the contents of the image stored in the array named greymap. We assume that the image represented by greymap contains exactly width * height pixels, organized into height scanlines, each of length width.

Pixel Drawing• Pixel art is a form of digital art, created through the use of raster graphics software,

where images are edited on the pixel level. Graphics in most old (or relatively limited) computer, console, graphing calculator and mobile phone vide Drawings usually start with what is called the line art, which is the basic line that defines the character, building or anything else the artist is intending to draw. Linearts are usually traced over scanned drawings and are often shared among other pixel artists. Other techniques, some resembling painting, also exist.

• The limited palette often implemented in pixel art usually promotes dithering to achieve different shades and colors, but due to the nature of this form of art this is done completely by hand. Hand-made anti-aliasing is also used.

• Here are a few parts of the above image of “The Gunk” in detail, depicting a few of the techniques involved:

• 1. The basic form of dithering, using two colors in a 2×2 checkerboard pattern. Changing the density of each color will lead to different subtones.

• 2. Stylized dithering with 2×2 pixel squares randomly scattered can produce interesting textures. Small circles are also frequent.

• 3. Anti-aliasing can be done, by hand, to smooth curves and transitions. Some artists , games are mostly pixel art

Double buffering• Double-buffering is a term that is well known throughout the graphics industry.

Most applications (primarily games) seldom work without it as it has many advantages over single-buffering (but also has a few disadvantages).

• The Buffers• Double-buffering possibly sounds harder than it actually is. In theory, you have a

buffer A and a buffer B, which are usually respectively called the front-and back-buffer. On single-buffered displays, you draw straight to video memory, so suppose video memory is located at address 0xB8000 (like console video memory is), you just start modifying values starting from this address (as you probably know) to show characters on the screen. If you would do this with double-buffering (which isn't a very good idea with console video memory, by the way), 0xB8000 would represent buffer A (the front-buffer) whilst buffer B is created and allocated by your favourite malloc function (or new[] operator).

Where To Write ToInstead of writing directly to console video memory (at 0xB8000), you write everything to the address where Buffer B is located. The process of drawing characters is exactly the same as before, except you're now writing to another memory address. When you're done drawing, you copy the contents of the back buffer (buffer B) to the front buffer (buffer A). This process is commonly called 'swapping the buffers', though swapping isn't interpreted as switching the contents around, but more of in 'switching the order of the buffers'. By 'swapping the buffers', the back buffer is now seen by the user and carries the same pixel values as the front buffer. The back buffer can then be freely modified again until ready to be then swapped again.What Actually Is SeenWhen using double-buffering, the user is looking at Buffer A while you're drawing to Buffer B. When using single-buffering, the user is looking at buffer A at the same time you're modifying that buffer. So that means the user doesn't see any pixels being modified at the moments he or she is looking at the screen. He or she will notice the changes as soon as you swap the buffers.

ExampleFor example, without double buffering consider a simple game rendering like the following:void run() { while(running) { /* update input */ /* update game logic */ clear_screen(); draw_background(); draw_levels(); draw_picksup(); draw_characters(); } }Now imagine if each of those functions drew directly to the frame buffer. The video card and monitor may update just after you have drawn the background, or it may update just after you have cleared the screen. More likely, you're going to end up with a combination of effects with resulting in your screen flickering and seeing through objects.Now imagine if each of these functions drew to a secondary buffer the size of the frame buffer. Each time you modify a pixel it won't be writing directly to the video card. Instead, afterdraw_characters() you would call:memcpy(framebuffer, backbuffer, width * height * bytesperpixel);so the final image in its entirety is sent to the frame buffer, not just parts of it.

Character Handling• A bitmap font is one that stores each glyph as an array of pixels (that is, a bitmap). It

is less commonly known as a raster font. Bitmap fonts are simply collections of raste images of glyphs. For each variant of the font, there is a complete set of glyph images, with each set containing an image for each character. For example, if a font has three sizes, and any combination of bold and italic, then there must be 12 complete sets of images.

• Advantages of bitmap fonts include:• Extremely fast and simple to render• Unscaled bitmap fonts always give exactly the same output• Easier to create than other kinds• The primary disadvantage of bitmap fonts is that the visual quality tends to be poor

when scaled or otherwise transformed, compared to outline and stroke fonts, and providing many optimized and purpose-made sizes of the same font dramatically increases memory usage. The earliest bitmap fonts were only available in certain optimized sizes such as 8, 9, 10, 12, 14, 18, 24, 36, 48, 72, and 96 points (assuming a resolution of 96 DPI), with custom fonts often available in only one specific size, such as a headline font at only 72 points.

The limited processing power and memory of early computer systems forced exclusive use of bitmap fonts. Improvements in hardware have allowed them to be replaced with outline or stroke fonts in cases where arbitrary scaling is desirable, but bitmap fonts are still in common use in embedded systems and other places where speed and simplicity are considered important.Bitmap fonts are used in the Linux console, the Windows recovery console and embedded systems. Older dot matrix printers used bitmap fonts; often stored in the memory of the printer and addressed by the computer's print driver. Bitmap fonts may be used in cross-stitch.To draw a string using a bitmap font, means to successively output bitmaps of each character that the string comprises, performing per-character indentation.

A glyph's outline is defined by the vertices of individual stroke paths, and the corresponding stroke profiles. The stroke paths are a kind oftopological skeleton of the glyph. The advantages of stroke-based fonts over outline fonts include reducing number of vertices needed to define a glyph, allowing the same vertices to be used to generate a font with a different weight, glyph width, or serifs using different stroke rules, and the associated size savings. For a font developer, editing a glyph by stroke is easier and less prone to error than editing outlines. A stroke-based system also allows scaling glyphs in height or width without altering stroke thickness of the base glyphs. Stroke-based fonts are heavily marketed for East Asian markets for use on embedded devices, but the technology is not limited to ideograms.

Commercial developers included Agfa Monotype (iType), Type Solutions, Inc. (Font Fusion (FFS), btX2),Fontworks (Gaiji Master), which have independently developed stroke-based font types and font engines.Although Monotype and Bitstream have claimed tremendous space saving using stroke-based fonts on East Asian character sets, most of the space saving comes from building composite glyphs, which is part of the TrueType specification and does not require a stroke-based approach.Stroke-based font formatsMETAFONT uses a different sort of glyph description. Like TrueType, it is a vector font description system. It draws glyphs using strokes produced by moving a polygonal or elliptical pen approximated by a polygon along a path made from cubic composite Bézier curves and

straight line segments, or by filling such paths. Although when stroking a path the envelope of the stroke is never actually generated, the method causes no loss of accuracy or resolution. The method Metafont uses is more mathematically complex because the parallel curves of a Bézier can be 10th order algebraic curves.

Referenceshttps://alala666888.wordpress.com/2010/06/06/opengl2d-draw-points-and-lines/https://en.wikipedia.org/wiki/Line_drawing_algorithmhttp://www.electricmonk.nl/docs/dependency_resolving_algorithm/dependency_resolving_algorithm.htmlhttps://en.wikipedia.org/wiki/Computer_fonthttp://wiki.osdev.org/Double_Bufferinghttp://ergodic.ugr.es/cphys_pedro/unix/athena5.htmlhttp://people.cs.clemson.edu/~dhouse/courses/405/notes/pixmaps-rgb.pdfhttp://www.linuxfocus.org/English/January1998/article17.html#17lfindex2http://www.solitaryroad.com/c412.html