IDC-CG1

Drawing 2D Primitives

Chapter 3 in Hearn & Baker

Chapter 3 in Foley & Van Dam

IDC-CG2

Topics

• Interactive Graphic Systems

• Scan Convertion:

– Drawing lines

– Drawing circles

– Filling polygons

IDC-CG3

Interactive Graphic Systems

Application Model

Application Program

Graphics System

IDC-CG4

• Application Model:

– Represents data and objects to be

displayed on the output device.

• Application Program:

– Creates, stores into, and retrieves

from the application model.

– Handles user-inputs.

– Sends output commands to the

graphics system :

• Which geometric object to view

(point, line, circle, polygon).

• How to view it (color, line-style,

thickness, texture).

IDC-CG5

• Graphics System:

– Intermediates between the

application program and the

interface hardware:

• Output flow

• Input flow

– Causes the application program to

be device-independent.

IDC-CG6

pixel

I RG

B

Image Representation in

Raster Displays:

R BG

242 158 226

=>

0 255B&W

Color

IDC-CG7

Raster Display

Host Keyboard

Mouse

Display commands

Interaction

data

3614795115927660127845255558217155

Frame Buffer

Video

Controller

Graphic

System

Memory

Display

Controller

IDC-CG8

Cathode(electron gun)

deflection yoke

focusing anode

shadow mask and phosphor coated screen

Display HardwareCRT - Cathode Ray Tube

phosphors on glass screen

shadow mask

electron guns

IDC-CG9

Raster Scan (CRT)

Scan line

IDC-CG10

Display HardwareLCD – Liquid Crystal Display

Unpolarized light polarizers

IDC-CG11

Display HardwareLCD – Liquid Crystal Display

Electrical field

IDC-CG12

Display HardwarePlasma display

Discharge + UV

IDC-CG13

Display HardwareFED - Field Emission Display

Catode electrodes

Anode

(Emitters)

IDC-CG14

Vector graphics

IDC-CG15

Resolution: The number of distinguishable

rows and columns in the device. Measured in:

- Absolute values (#rows x #columns) or,

- Density values (300 dpi [=dots per inch]).

Terminology

Dynamic Range: The ratio between the

minimal (not zero!) and the maximal light

intensity a display pixel can emit.

pixel

Pixel: Picture element.

- Smallest accessible element in picture.

- Assume rectangular or circular shape.

H

W

Aspect Ratio: Ratio between physical

dimensions of a pixel (not necessarily 1).=

W

H

#rows

#columns

=

IDC-CG16

Terminology

Screen Space: A discrete Cartesian coordinate system of the screen pixels.

x

y

Object Space: The Cartesian coordinate system of the universe, in which the objects (to be displayed) are embedded.

X

Y

Z

IDC-CG17

Scan Conversion

The conversion from a geometric

object representation to pixels in a

raster display.

(x0,y0)

(x1,y1)

IDC-CG18

Manifold Representations

f(x,y,..)=0

fi(x1,x2,..,xn)=0 ; i=1..n-k

• Implicit formula:

– Constraint(s) expressed as

– A k-D surface embedded in n-D

• Explicit formula:

– For each x define y as y=f(x).

– Good only for "functions".

x=fx(t) y=fy(t)

• Parametric formula:

– Run over a free parameter(s)

– For k dimension surface there are k

free parameters.

IDC-CG19

2D Line

• Implicit representation:

y

x

P0

P1

x0

y1

y0

x1B

]1..0[)( 010 ttPPPP

y

xP

• Parametric representation:

01

01

xx

yymBmxy

• Explicit representation:

IDC-CG20

Scan Conversion - Lines

(x0,y0)

(x1,y1)

slope = m = y1 - y0

x1 - x0

Assume |m| 1

Assume x0 x1

Basic Algorithm

For x = x0 to x1

y = mx + B

PlotPixel(x,round(y))end;

offset= B = y1-mx1

For each iteration: 1 float multiplication, 1 addition, 1 Round

y = mx + B

IDC-CG21

yi+1 = mxi+1 + B = m(xi + Dx) + B = yi + mDx

if Dx = 1 then yi+1 = yi + m

Incremental Algorithm:

Algorithm

For x = x0 to x1

PlotPixel(x,round(y))

end;

y=y0

y = y + m

( xi,Round(yi) )

( xi+1, yi+m )( xi, yi )

( xi+1,Round(yi+m) )

IDC-CG22

Pseudo Code for Basic Line Drawing:

Assume x1>x0 and line slope absolute value is 1

Line(x0,y0,x1,y1)

begin

float dx, dy, x, y, slope;

dx := x1-x0;

dy := y1-y0;

slope := dy/dx;

y := y0;

for x:=x0 to x1 do

begin

PlotPixel( x,Round(y) );

y := y+slope;

end;

end;

Symmetric Cases:|m| 1

For y = y0 to y1

x = x + 1/mPlotPixel(round(x),y)

end;

x = x0

IDC-CG23

Special Cases:

m = ± 1 (diagonals)

m = 0, (horizontal, vertical)

Symmetric Cases:

if x0 > x1 for |m| 1 or y0 > y1 for |m| 1

swap((x0,y0),(x1,y1))

Basic Line Drawing:

For each iteration: 1 addition, 1 Round.

Drawbacks:

• Accumulated error

• Float arithmetic

• Round operations

IDC-CG24

Midpoint (~Bresenham) Line Drawing

Assumptions:

• x0 < x1 , y0 < y1

• 0 < slope < 1

M

Q

E

NE

(xp,yp)

Given (xp,yp):

next pixel is E = (xp +1,yp) or NE = (xp+1,yp+1)

Bresenham: sign(M-Q) determines NE or E

M = (xp +1,yp +1/2)

IDC-CG25

Midpoint Line Drawing (cont.)

y = x + Bdy

dx

Implicit form of a line:

f(x,y) = ax + by + c = 0

Decision Variable :

d = f(M) = f(xp+1,yp+1/2) = dy(xp+1) - dx(yp+1/2) + B dx

• choose NE if d > 0

• choose E if d 0

f(x,y) = dy x - dx y + B dx = 0

f(x,y) = 0

f(x,y) > 0

f(x,y) < 0(a>0)

IDC-CG26

Incremental Algorithm:

If E was chosen at xp + 1

What happens at xp + 2 ?

Mnew = (xp +2,yp +1/2)

dnew = f(xp +2,yp +1/2) = dy(xp+2) - dx(yp+1/2) + B dx

dold = f(xp +1,yp +1/2) = dy(xp+1) - dx(yp+1/2) + B dx

dnew = = dold + dy

dnew = dold + DE

Q

E

NE

(xp,yp)

MnewMold

IDC-CG27

Incremental Algorithm:

What happens at xp + 2 ?

If NE was chosen at xp + 1

Mnew = (xp +2,yp +3/2)

dnew = f(xp +2,yp +3/2) = dy(xp +2) - dx(yp +3/2) + B dx

dold = f(xp +1,yp +1/2) = dy(xp +1) - dx(yp +1/2) + B dx

dnew = dold + dy - dx

dnew = dold + DNE

Mnew

Q

E

NE

(xp,yp)

Mold

IDC-CG28

Incremental Algorithm:

Initialization:

First point = (x0,y0), first MidPoint = (x0+1,y0+1/2)

dstart = f(x0 +1,y0+1/2) = dy(x0 +1) - dx(y0 +1/2) + B dx

= dy x0 – dx y0 + B dx + dy - dxb/2

= f(x0,y0) + dy - dx/2 = dy - dx/2

dstart =dy - dx/2

Enhancement:

To eliminate fractions, define:

f(x,y) = 2(dy x - dx y + B dx ) = 0

dstart =2dy - dx

DE=2dy

DNE=2(dy-dx)

f(x0,y0)=0

IDC-CG29

• The sign of f(x0+1,y0+1/2) indicates

whether to move East or North-East.

• At the beginning d=f(x0+1,y0+1/2)=2dy-dx.

• The increment in d (after this step) is:

– If we moved East: DE=2dy

– If we moved North-East: DNE=2dy-2dx

• Comments:

– Integer arithmetic (dx and dy are

integers).

– One addition for each iteration.

– No accumulated errors.

– By symmetry, we deal with 0>slope>-1

Midpoint Line Drawing -

Summary

IDC-CG30

Pseudo Code for Midpoint Line Drawing:

Assume x1>x0 and 0 < slope 1

Line(x0,y0,x1,y1)

begin

int dx, dy, x, y, d, DE, DNE ;

x:= x0; y=y0;

dx := x1-x0; dy := y1-y0;

d := 2*dy-dx;DE := 2*dy; DNE := 2*(dy-dx);

PlotPixel(x,y);

while(x < x1) do

if (d < 0) then

begin

d:=d+ DE;

x:=x+1;

end;

else begin

d:=d+ DNE;

x:=x+1;

y:=y+1;

end;

PlotPixel(x,y);

end;

end;

IDC-CG31

Drawing Circles

• Implicit representation (centered

at the origin with radius R):

22 xRy

• Explicit representation:

]2..0[

sin

cos

t

tR

tR

y

x

x

R

• Parametric representation:

IDC-CG32

Scan Conversion - Circles

Basic Algorithm

For x = -R to Ry = sqrt(R2-x2)

PlotPixel(x,round(y))

PlotPixel(x,-round(y))

end;

Comments:

• Square-root operations are expensive.

• Float arithmetic.

• Large gap for x values close to R.

IDC-CG33

Exploiting Eight-Way Symmetry

For a circle centered at the origin:

If (x,y) is on the circle then -

(y,x) (y,-x) (x,-y) (-x,-y) (-y,-x) (-y,x) (-x,y)

are on the circle as well.

Therefore we need to compute only

one octant (45o) segment.

(x,y)

(y,x)

(y,-x)

(x,-y)(-x,-y)

(-y,x)

(-y,-x)

(-x,y)

IDC-CG34

Circle Midpoint (for one octant)

• We start from (x0,y0)=(0,R).

• One can move either East or South-East.

• Again, d(x,y) will be a threshold criteria at

the midpoint.

(The circle is located at (0,0) with radius R)

IDC-CG35

f(x,y) = 0

f(x,y) < 0

f(x,y) > 0

d(x,y)=f(x,y) = x2 + y2 -R2 = 0

Threshold Criteria

IDC-CG36

Circle Midpoint (cont.)

• At the beginning (X0 = 0, Y0 = R).

dstart=d(x0+1, y0-1/2) =

d(1, R-1/2) = 5/4 – R

• If d<0 we move East:

DE = d(x0+2,y0-1/2) - d(x0+1,y0-1/2)=2x0+3

• if d>0 we move South-East:

DSE = d(x0+2,y0-3/2) - d(x0+1,y0-1/2) =

= 2(x0-y0)+5

x0

y0

IDC-CG37

Circle Midpoint (cont.)

•If d<0 we move East:

DE = d(x+2,y-1/2) - d(x+1,y-1/2)=2x+3

• if d>0 we move South-East:

DSE = d(x+2,y-3/2) - d(x+1,y-1/2) =

= 2(x-y)+5

• DE and DSE are not constant anymore.

• Since d is incremented by integer values, we

can use dstart = 1-R, yielding an integer

algorithm. This has no affect on the

threshold criteria.

IDC-CG38

Midpoint Circle Algorithm

Circle Octant2 (R)

begin

int x, y, d;

x := 0;

y :=R;

d := 1-R;

PlotPixel(x,y);

while ( y>x ) do

if ( d<0 ) then /* East */

begin

d := d+2x+3;

x := x+1;

end;

else begin /* South East */

d := d+2(x-y)+5;

x := x+1;

y := y-1;

PlotPixel( x,y ); (*)

end;

One may mirror (*), creating the other seven octans.

IDC-CG39

IDC-CG40

Polygon Fill(Foley Van Dam 3.6)

v0 v1

v5

v4

v3

v2

v6

Representation:

• Polygon = V0, V1, V2, .. Vn

Vi=(xi,yi) - vertex

Ei=(vi,vi+1) - edge

En=(vn,v0)

vertex

edge

E0

E1

E6

IDC-CG41

Polygon Fill

Problem: Given a closed 2D polygon, fill

its interior with a specified color, on a

graphics display.

Assumption: Polygon is simple, i.e. no

self intersections, and simply connected,

i.e. without holes.

Solutions:

• Flood fill.

• Scan conversion

IDC-CG42

Flood Fill

• Let P be a polygon with n

vertices, v0 to vn-1. Denote vn=v0.

• Let c be the color to paint this

polygon.

• Let p=(x,y) be a point in P.

IDC-CG43

FloodFill(P,x,y,c)

if (OnBoundary(x,y,P) or Colored (x,y,c))

then return;

else begin

PlotPixel(x,y,c);

FloodFill(P,x+1,y,c);

FloodFill(P,x,y+1,c);

FloodFill(P,x,y-1,c);

FloodFill(P,x-1,y,c);

end;

Flood Fill Algorithm

Comment:

Slow algorithm due to recursion.

IDC-CG44

Scan Conversion

Fill Polygon

Question:

How do we know if a given point is inside

or outside a polygon?

IDC-CG45

Scan Conversion

Fill Polygon

Question:

How do we know if a given point is inside

or outside a polygon?

IDC-CG46

Scan Conversion -

Basic Algorithm

• Let P be a polygon with n vertices,

v0 .. vn-1. Denote vn=v0.

• Let c be a color to paint P.

ScanConvert (P,c)

For j:=0 to ScreenYMax do

I := points of intersection of edges

from P with line y=j;

Sort I in increasing x order and fill

with color c alternating segments;

end;

Question:

How do we find the intersecting edges?

IDC-CG47

What happens in with these cases?

IDC-CG48

Scan Conversion - Optimized

Algorithm

• One can maintain an active list of

edges A, that contains the edges that

currently intersect with the scan line:

ScanConvert(P,c)

Sort all edges E={Ej} in increasing MinY(Ej ) order.

A := ;

For k :=0 to ScreenYMax do

For each Ej E,

if MinY(Ej) k A := A Ej ; E=E- Ej

For each Ej A,

if MaxY(Ej) k A := A – Ej

I:=Points of intersection of members

from A with line y=k;

Sort I in increasing x order and draw

with color c alternating segments;

end;

IDC-CG49

Implementation with Linked List

3 5 7

4 10 15

A

12

ymin

ymax

3 12

E

ymin

ymax

ymin

(Ordered by Ymax)

(Ordered by Ymin)

IDC-CG50

Flood Fill

v.s.

Scan Conversion

Flood Fill

• Very simple.

• Requires a seed

point.

• Requires very

large stack size.

• Common in

paint packages.

• Unsuitable for

line based Z-

buffer.

Scan Conversion

• More complex.

• No seed point is

required.

• Requires small

stack size.

• Used in image

rendering.

• Suitable for line

based Z-buffer.

IDC-CG51

Theoretic homework #1

Submit until Tirgul in two weeks:

1. We would like to scan convert the parabola y = x2+bx+c

in an efficient way.

– Describe how it is possible to implement the incremental

algorithm to draw this curve. When is the scan

implemented on the x axis and when on the y axis?

Describe the increment in each case.

– Is it possible to take advantage of the symmetry property of

the parabola? If yes, describe how.

– What is the saving of this algorithm compared to the naive

algorithm?

2. Which curve/surface representation (implicit, explicit,

parametric) is most appropriate for each of the following

problems:

– Given 2 curves A and B. Verify whether a point (x,y) is

located at an intersection point of A and B.

– Given 2 closed curves defining 2 closed areas A and B.

Verify whether a point (x,y) is located in AB.

– What are the intersection points of the curve A with a line

parallel to the y axis?

– Does curve A define a closed curve?

IDC-CG52

Nyquist Frequency

Question: How dense should be the

pixel grid in order to draw properly a

drawn object?

Sampling

IDC-CG53

Sampling Theorem

Given a sampling at intervals equal to d

then one may recover frequencies (sine

waves) of wavelength > 2d.

If the sampling interval is more than 1/2 the

wavelength, erroneous frequencies may be

produced - ALIASING.

1D Example:

0 2 3 4 5 6

Rule of Thumb: To observe details of size d

one must sample at d/2 intervals.

To observe details at frequency f (=1/d) one

must sample at frequency 2f. The Frequency

2f is the NYQUIST frequency.

IDC-CG54

Aliasing

Jaggies

IDC-CG55

Anti-Aliasing

IDC-CG56

Simple Anti-aliasing

Original 50x50

Original 100x100

Averaged and reduced to

50x50

(+) simple & general

(-) x4 memory size

(-) x4 scan conversion + reduction