Output primitives computer graphics c version

Output Primitives

Computer Graphics

Marwa K. U. Al-RikabyBabylon University

IT College

This Presentation has no copyrights.

Contents are taken from:

Outlines:

Introduction. Point Drawing. Line Drawing Algorithms. Circle Generation Algorithms. Ellipse Generation Algorithms. Other Curves. Filled Area Primitives. Character Generation.

Introduction:

Picture descriptions: Raster:

Completely specified by the set of intensities for the pixels positions in the display.

Shapes and colors are described with pixel arrays. Scene displayed by loading pixels array into the frame buffer.

Vector: Set of complex objects positioned at specified coordinates locations within

the scene. Shapes and colors are described with sets of basic geometric structures. Scene is displayed by scan converting the geometric-structure specifications

into pixel patterns.

Introduction:

Output Primitives: Basic geometric structures used to describe scenes. Can be grouped into more complex structures. Each one is specified with input coordinate data and

other information about the way that object is to be displayed.

Examples: point, line and circle each one with specified coordinates.

Construct the vector picture.

Introduction:

In digital representation: Display screen is divided into scan lines and columns. Pixels positions are referenced according to scan line number

and column number (columns across scan lines). Scan lines start from 0 at screen bottom, and columns start from

0 at the screen left side. Screen locations (or pixels) are referenced with integer values. The frame buffer stores the intensities temporarily. Video controller reads from the frame buffer and plots the screen

pixels.

Point Drawing

y

x

Point Drawing:

Converting a single coordinate position furnished by an application program into appropriate operation for the output device in use.

In raster system: Black-white: setting the bit value corresponding to a

specified screen position within the frame buffer to 1. RGB: loading the frame buffer with the color codes for the

intensities that are to be displayed at the screen pixel positions.

Line Drawing Algorithms

x1 x2

y1

y2

Line Drawing:

A straight line is specified by two endpoint positions.

Line drawing is done by: Calculating intermediate positions between the

endpoints. Directing the output device to fill in the calculated

positions as in the case of plotting single points.

Line Drawing:

Plotted positions may be only approximations to the actual line positions between endpoints. A computed position (10.48, 20.51) is converted to pixel

(10,21). This rounding causes the lines to be displayed with a stairstep

appearance. Stairsteps are noticeable in low resolution systems, it can be

improved by: Displaying lines on high resolution systems. Adjusting intensities along line path.

Line Drawing:

The Cartesian intercept equation for a straight line:y= m. x +b

Where m is the line slop and b is y intercept. For line segment starting in (x1,y1) and ending in (x2,y2), the slop

is:m= (y1-y2)/(x1-x2)

b= y1- m.x1 For any given x interval x, we can compute the corresponding y

interval y:y= m .x

Or x interval x from a given y: x= y/m

Line Drawing:

On raster systems, lines are plotted with pixels, and step sizes in the horizontal and vertical directions are constrained by pixel separations.

Scan conversion process samples a line at discrete positions and determine the nearest pixel to the line at each sampled position.

Y2

y1

Y2

y1

X1 x2

X1 x2

Sampling along x axis

Sampling along y axis

Line Drawing Algorithms:

Digital Differential Analyzer (DDA):Samples the line at unit intervals in one coordinate and determine corresponding integer values nearest the line path for the other coordinate.

Bresenham’s Line Algorithm:Scan converts lines using only incremental integer calculations.


DDA A scan-conversion line algorithm based on calculating either y or x using line points calculating equations.

In each case, choosing the sample axis depends on the slop value.

The unit step for the selected axis is 1. The other axis is calculated depending on the first axis and

the slop m. The next slides will show the different cases of the slop:


DDA Case 1:the slop is Positive and less than 1

Sample at unit x interval (x=1) and compute each successive y value as :

y k+1= yk+ m

K takes integer values starting from 1,at the first point, and increasing by 1 on each step until reaching the final endpoint.

The calculated y must be rounded to the nearest integer.Example:

Describe the line segment which starts at (3,3) and ends at (23,7).

Lines Drawing Algorithms: DDA2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

m= (7-3)/(23-3) =4/20 =0.2

x=1y=0.2

Lines Drawing Algorithms: DDA2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

x y actual point pixel position3 3 (3,3) (3,3)4 3.2 (4,3.2) (4,3)5 3.4 (5,3.4) (5,3)6 3.6 (6,3.6) (6,4)7 3.8 (7,3.8) (7,4)8 4 (8,4) (8,4)9 4.2 (9,4.2) (9,4)10 4.4 (10,4.4) (10,4)11 4.6 (11,4.6) (11,5)12 4.8 (12,4.8) (12,5)13 5 (13,5) (13,5)14 5.2 (14,5.2) (14,5)15 5.4 (15,5.4) (15,5)16 5.6 (16,5.6) (16,6)17 5.8 (17,5.8) (17,6).. .. .. .... .. .. ..22 6.8 (22,6.8) (22,7)23 7 (23,7) (23,7)


DDA Case 2:the slop is Positive and greater than 1

Sample at unit y interval (y=1) and compute each successive y value as :

x k+1= xk+ (1/m)

K takes integer values starting from 1,at the first point, and increasing by 1 on each step until reaching the final endpoint.

The calculated x must be rounded to the nearest integer.Example:

Describe the line segment which starts at (3,3) and ends at (7,23).

Line Drawing Algorithms: DDA2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

m= (23-3)/(7-3) = 20/4 = 5

x =1/m =1/5 =0.2

y =1

Line Drawing Algorithms: DDA2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

y x actual point pixel position3 3 (3,3) (3,3)4 3.2 (3.2,4) (3,4)5 3.4 (3.4,5) (3,5)6 3.6 (3.6,6) (4,6)7 3.8 (3.8,7) (4,7)8 4 (4,8) (4,8)9 4.2 (4.2,9) (4,9)10 4.4 (4.4,10) (4,10)11 4.6 (4.6,11) (5,11)12 4.8 (4.8,12) (5,12)13 5 (5,13) (5,13)14 5.2 (5.2,14) (5,14)15 5.4 (5.4,15) (5,15)16 5.6 (5.6,16) (6,16)17 5.8 (5.8,17) (6,17).. .. .. .... .. .. ..22 6.8 (6.8,22) (7,22)23 7 (7,23) (7,23)


DDA Case 3:the slop is negative and its absolute value is less than 1

Follow the same way in case 1. Case 4:the slop is negative and its absolute value is greater than 1

Follow the same way in case 2. In the previous 4 cases, we start from the left to the right. If the

state is reversed then: If the absolute slop is less than 1, set x=-1 and

y k+1= yk - m

If the absolute slop is greater than 1, set y=-1 andx k+1= xk - (1/m)


DDA properties A faster method for calculating pixel positions than the direct

use: y= m . x +b. Uses x or y to eliminate the multiplication in the above

equation. Rounding successive additions of the floating-point

increment can cause the calculated pixel positions to drift away from the true line path for long line segment.

Rounding and floating-point arithmetic are time-consuming operations.


Bresenham’s Line Algorithm: Scan converts lines using only incremental integer

calculations. Can be adapted to display circles and other

curves. When sampling at unit x intervals, we need to

decide which of two possible pixel positions is closer to the line path at each sample step by using a decision parameter.


Bresenham’s Line Algorithm: The decision parameter (pk) is an integer number

that is proportional to the difference between the separations of the two pixel positions from the actual line path.

Depending on the slop sign and value the decision parameter determine which pixel coordinates would be taken in the next step.


Bresenham’s Line Algorithm: Pk for line with positive slop less than 1:

Sampling at unit x intervals. At pixel (xk,yk) we need to decide whether (xk+1,yk) or (xk+1,yk+1)

would be plotted in column xk+1.

d1 and d2 are the vertical pixel separations from the mathematical line path.

y coordinate on the mathematical line at pixel xk+1 is calculated as:

y= (x+1.m)+b

d1= y-yk

d2= yk+1-y

Pk =x(d1-d2)


Bresenham’s Line Algorithm: Properties of Pk for line with positive slop less than 1:

If the pixel at yk is closer to the line path than the pixel at yk+l (that is, d1 < d2), then decision parameter pk is negative and we plot the lower pixel.

On reverse, pk is positive and we plot the upper pixel.

If pk is zero ,then choose either yk+l for all such cases, or yk.


Bresenham’s Line Algorithm: Properties of Pk for line with positive slop less than 1:

Incremental integer calculations can be used to obtain values of successive decision parameters, because change occur on either x or y coordinates:

pk+1=pk+2y-2x(yk+1-yk)

and p0=2y-x

Line Drawing Algorithms: Bresenham’s2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Drawing the line between the endpoints (3,3) and (23,13)

m= (13-3)/(23-3)= 0.5

x= 20y=10 P0= 2(10)-20=0

Line Drawing Algorithms: Bresenham’s2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

K P x+1 y+10 0 4 41 -20 5 42 0 6 53 -20 7 54 0 8 65 -20 9 66 0 10 77 -20 11 78 0 12 89 -20 13 810 0 14 9 .. .. .. .. .. .. .. ..19 -20 23 13


Bresenham’s line algorithm properties

It is generalized to lines with arbitrary slope by considering the symmetry between the various octants and quadrants of the xy plane.

The constants 2y and 2y - 2x are calculated once for each line to be scan converted, so the arithmetic involves only integer addition and subtraction of these two constants.

… Finally 2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Special cases can be handled separately:

Horizontal y=0Vertical x=0Diagonal |x|=|y|

each can be loaded directly into the frame buffer without processing them through the line-plotting algorithms.

Circle Generating Algorithms

Circle Properties:

A set of points that are all at the same distance (r) from a center point (xc,yc).

Expressed by Pythagorean equation in Cartesian coordinates as:(x – xc )2 + (y - yc )2 = r2

Any given circle can be drawn on the origin(0,0) and then moved to its actual position by: Each calculated x on the circumference moved to x+xc.

Each calculated y on the circumference is moved to y+yc.

Circle Generating Algorithms:

Standard AlgorithmPolar AlgorithmSymmetry AlgorithmMid-point Algorithm (xc, yc ) r (x, y)

Standard Algorithm:

Uses the Pythagorean equation to find the points along the circumference.

Steps along x axis by unit steps from xc-r to xc+r and calculate y for each step as:

y= yc± √r2-(xc-yc)2

It involves considerable computations at each step.

Standard Algorithm:

Spacing between plotted pixels is not uniform.

Spacing can be adjusted by stepping on y instead of x when the slop is greater than 1, but such approach increasing computations.

Polar Algorithm:

Uses polar coordinates r and Ө. Calculate points by fixed regular step size equations

as:

x= xc + r * cosӨ

y= yc + r * sinӨ Step size that is chosen for Ө depends on the

application. Larger separations can be connected by line segments

to approximate the circle path.

Polar Algorithm:

In raster displays, step size is 1/r which plots pixel positions that are approximately one unit apart.

rx,y

Ө

Symmetry Algorithm:

Reduces computations by considering the symmetry of circles in the eight octants in the xy plane.

Generates all pixel positions

around a circle by calculating

only the points within the

sector from x = 0 to x = y.

Mid-point Algorithm:

Samples at unit intervals and uses decision parameter to determine the closest pixel position to the specified circle path at each step.

Along the circle section from x = 0 to x = y in the first quadrant, the slope of the curve varies from 0 to -1. Therefore, we can take unit steps in the positive x direction over this octant and use a decision parameter to determine which of the two possible y positions is closer to the circle path at each step. Positions in the other seven octants are then obtained by symmetry.


To apply mid-point method, we define a circle function:

and determine the nearest y position from pk:


If pk < 0, this midpoint is inside the circle and the pixel on scan line yk is closer to the circle boundary.

Otherwise, the midposition is outside or on the circle boundary, and we select the pixel on scan line yk – 1 .

Successive parameters are calculated using incremental calculations:


Example:

For a circle radius=10 and center (12,12)

we calculate positions in the first octant only , beginning with x=0 and ending when x=y

The initial decision parameter value:

P0=1 - r = -9

Drawing on the origin (0,0) and the initial point (0,10)

2x0=0 2y0=20

Mid-point Algorithm:2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

K P (xk+1,yk+1) 2xk+1 2yk+1

0 -9 (1,10) 2 201 -6 (2,10) 4

202 -1 (3,10) 6 203 6 (4,9) 8 184 -3 (5,9) 10 185 8 (6,8) 12 166 5 (7,7) 14

14

The first octant is completed and the remained seven octants can be plotted according to symmetry.

Mid-point Algorithm:2423222120191817161514131211109876543210

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

The circle after plotting all octants and moving it to its original center (12,12)

Ellipse Generating Algorithms

Ellipse Properties:

rx

ry

F1F2

d1d2

P=(x,y)

Ellipse Properties:

An elongated circle. A set of points having an equal sum distances from two fixed

positions (foci F1,F2).

d1+d2=constant The major axis is the straight line segment extending from one

side of the ellipse to the other through the foci. The minor axis spans the shorter dimension of the ellipse,

bisecting the major axis at the halfway position (ellipse center) between the two foci.

The two foci and point coordinates on the circumference are enough information to plot an ellipse with arbitrary orientation.

Ellipse Properties:

The equation of the ellipse can be written in terms of the ellipse center coordinates and parameters rx, and ry, as:

Using polar coordinates r and Ө. we can also describe the ellipse in standard position with the parametric equations:

x= xc + rx * cosӨ

y= yc + ry * sinӨ

Symmetry considerations can be used to reduce computations, the four quadrants are similar ( not the eight octants).

Midpoint Ellipse Algorithm:

Similar to displaying a raster circle. Given parameters rx, ry, and (xc,yc), we determine points ( x , y)

for an ellipse in standard position centered on the origin, and then we shift the points so the ellipse is centered at ( xc,yc).

To display the ellipse in nonstandard position, we could then rotate the ellipse about its center coordinates to reorient the major and minor axes.

This method is applied throughout the first quadrant in two parts: Stepping on x when the slop is less than 1. Stepping on y when the slop is greater than 1.

Midpoint Ellipse Algorithm:

The decision parameter considered by:

It has the following properties:

The next position to be selected depends on the sign of this parameter. The same way followed in circle we can use to choose the start

point and depending on the slop and Pk calculate the next nearest pixel on the ellipse path.

Other Curves

Overview:

Include: conics, trigonometric and exponential functions, probability distributions, general polynomials, and spline functions.

Positions along paths can be generated from curves explicit equations y= f(x) .

Incremental midpoints can be calculated from implicit function f(x,y)=0.

The same idea in the previous primitives, choosing the stepping axis, can be used to obtain uniform spacing between points.

Symmetries are also available in some curves, such as The normal probability distribution function is symmetric about at center position

(the mean). All points along one cycle of a sine curve can be generated from the points in a

90" interval.

Conic Sections:

Described by:

The parameters A,B,C,D,E,F values determine the section type:

Conic Sections:

Parabolic path Hyperbola Path

Polynomial and Splines Curves:

Polynomial is defined as:

where n is a nonnegative integer and the ak are constants, with a≠0. We get:

A straight line when n=1. A quadratic when n=2. A cubic polynomial when n=3. A quartic when n=4…


Designing object shapes or motion paths is typically done by specifying a few points to define the general curve contour, then fitting the selected points with a polynomial.

One way to accomplish the curve fitting is to construct a cubic polynomial curve section between each pair of specified points.

Each curve section is then described in parametric form as:

where parameter u varies over the interval 0 to 1.


Values for the coefficients of u in the parametric equations are determined from boundary conditions on the curve sections: Two adjacent curve sections have the same coordinate position at the

boundary. Match the two curve slopes at the boundary so that we obtain one

continuous, smooth individual cubic curve.

Splines are continuous curves formed with polynomial pieces.

Filled Area Primitives

Overview:

Two basic ideas: Determine the overlap intervals for scan lines that

cross the area. Used to fill polygons, circles, ellipses, and other simple curves.

Start from a given interior position and paint outward from this point until we encounter the specified boundary conditions. Used with more complex boundaries and in interactive painting systems.

Filled Area Primitives:

Scan-Line Polygon Fill Algorithm: Locates the intersection points along the scan line with the

polygon edges. Sorts the intersections from left to right. Set the corresponding frame buffer positions between each

intersection with a specified fill color. Special handling:

Scan line passing through a vertex intersects two edges at that position: add two points to the list of intersections for the scan line.

Care should be taken to determine which side of intersection is belonging to the polygon.


Such situations need more processing to determine:1. Whether there is a need to duplicate some intersections.2. If the points are inside or outside the shape.

We should trace around the shape boundaries to make a decision.



Scan line


Scan line


Scan line

Inside-Outside Tests:

Odd-even (odd parity or even odd) rule: Drawing a line from any position P to a distant point

outside the coordinate extents of the object. Counting the number of edge crossings along the

line. If the number of polygon edges crossed by this line

is odd, then P is an interior point, otherwise it is an exterior point.

The line chosen must not intersect the polygon vertices.


Non-zero winding number rule: Counts the number of times the polygon edges wind around a

particular point in the counterclockwise direction, which is called “winding number”.

Interior points of a two-dimensional object are defined to be those that have a nonzero value for the winding number.

Counting method: Start winding number with 0. Imagine a line passing across the object and not intersect vertices. Add 1 to winding number when the line is crossed by an edge from right to left. Subtract 1 from winding number when the line is crossed by an edge from left

to right. To determine the direction use either cross product or dot product.


Scan-Line Fill of Curved Boundary Areas :

In circles and ellipses, only find the two scan-line Intersections on opposite sides of the curve.

In other curves, such as ellipse arc, the interior region is bounded by the ellipse section and a straight-line segment that closes the curve by joining the beginning and ending positions of the arc.

Symmetry can be exploited to reduce calculations.

Boundary-Fill Algorithm:

Accepts as input the coordinates of an interior point (x, y), a fill color, and a boundary color.

Starting from (x,y), the procedure tests neighboring positions to determine whether they are of the boundary color.

If not, they are painted with the fill color, and their neighbors are tested.

This process continues until all pixels up to the boundary color for the area have been tested.



Flood-Fill Algorithm:

Replacing a specified interior color instead of searching for a boundary color value.

Start from a specified interior point (x, y) and reassign all pixel values that are currently set to a given interior color with the desired fill color.

If the area we want to paint has more than one interior color, we can first reassign pixel values so that all interior points have the same color.

Using either a 4-connected or 8-connected approach, we then step through pixel positions until all interior points have been repainted.

Character Generation

Typefaces (Fonts):

Serif group: Has small lines or accents at the ends of the main

character strokes. More readable.

Sans serif group: Does not have accents. The individual characters easier to recognize. More legible, and hence, good for labeling and

short headings.

Character Generation Methods:

Bitmapped Font: Uses rectangular grid patterns. The simplest to define and display, the character grid only

needs to be mapped to a frame-buffer position. Need more space, each variation (size and format) must be

stored in a font cache.

Outline Font: Uses straight-line and curve sections. Require less storage since each variation does not require a

distinct font cache. Need more time since to the scan conversion process.

Character Generation Methods:

Bitmapped Font Outline Font

Education

Output primitives computer graphics c version