ECE291 Lecture 16 Fun with graphics. ECE 291 Lecture 16Page 2 of 25 Lecture outline Bresenham’s Line Drawing Algorithm Bresenham’s Circle Drawing Algorithm

ECE291ECE291

Lecture 16Lecture 16

Fun with graphicsFun with graphics

ECE 291 Lecture 16ECE 291 Lecture 16

Page Page 22 of 25 of 25

Lecture outlineLecture outline

Bresenham’s Line Drawing AlgorithmBresenham’s Line Drawing Algorithm

Bresenham’s Circle Drawing AlgorithmBresenham’s Circle Drawing Algorithm

Alpha blendingAlpha blending



Drawing Lines Basic AlgorithmDrawing Lines Basic AlgorithmWe want to draw lineWe want to draw line Y = m * X + bY = m * X + b

mm = Slope of line = Slope of line

bb = Displacement = Displacement

XX = independent coordinate = independent coordinate

Choose X so as to plot large number of points Choose X so as to plot large number of points

YY = Dependent coordinate = Dependent coordinate

Plot to nearest Y when fractions occur Plot to nearest Y when fractions occur

Draw Line from (X1,Y1) to (X2,Y2)Draw Line from (X1,Y1) to (X2,Y2)

mm = dy/dx; = dy/dx; dydy = (Y2-Y1);= (Y2-Y1); dxdx = (X2-X1) = (X2-X1)

bb = Y1 – m*X1 = Y1 – m*X1

Plot(X, m*X+b) Plot(X, m*X+b) for X=X1... X2 for X=X1... X2

This algorithm requires slow floating point mathThis algorithm requires slow floating point math



Derivation of Bresenham’s Line AlgorithmDerivation of Bresenham’s Line Algorithm

Eliminates floating point calculationsEliminates floating point calculations

Given two line endpoints, we are trying to find the “in-between” Given two line endpoints, we are trying to find the “in-between” points on a pixel gridpoints on a pixel grid

The Bresenham’s line algorithm determines subsequent points from The Bresenham’s line algorithm determines subsequent points from the the start pointstart point by making a by making a decisiondecision between the two next available between the two next available points and selecting one that is closer to the points and selecting one that is closer to the ideal pointideal point

Start pointStart point (X1, Y1)(X1, Y1)

End pointEnd point (X2, Y2)(X2, Y2)

SlopeSlope m = dy/dx m = dy/dx

Current PointCurrent Point (X, Y)(X, Y)



Derivation of Bresenham’s Line Derivation of Bresenham’s Line AlgorithmAlgorithm

(X1, Y1)

(X2, Y2)

(X + 1, Y)

(X + 1, Y + 1)

T

S

(X, Y)




If we restrict the slope for now to (0 <= slope <= 1) and If we restrict the slope for now to (0 <= slope <= 1) and assume (X1 < X2)assume (X1 < X2)

step through step through xx one pixel at a time to the right and determine one pixel at a time to the right and determine what what yy value to choose next value to choose next

given current point given current point (X, Y),(X, Y), next ideal point would be between next ideal point would be between(X + 1, Y)(X + 1, Y) and and (X + 1, Y + 1)(X + 1, Y + 1)

must choose between must choose between (X + 1, Y)(X + 1, Y) or or (X + 1, Y + 1)(X + 1, Y + 1)

How do we decide between these points?How do we decide between these points? must choose the closet point to the idealmust choose the closet point to the ideal




Determine S and TDetermine S and T

S = (X + 1) * m - YS = (X + 1) * m - Y

T = 1 - S = 1 - (X + 1) * m + YT = 1 - S = 1 - (X + 1) * m + Y

Then Then S - T = 2 * (X + 1) * m - 2 * Y - 1S - T = 2 * (X + 1) * m - 2 * Y - 1

Select the next point:Select the next point:

if S < Tif S < T go horizontal - go horizontal - next point (X + 1, Y)next point (X + 1, Y)

if S > Tif S > T go diagonal - go diagonal - next point (X + 1, Y + next point (X + 1, Y + 1)1)




We want to develop a We want to develop a FASTFAST algorithm; we algorithm; we create a decision variable (error) that can be create a decision variable (error) that can be used to quickly determine which point to useused to quickly determine which point to use

EE = (S -T)*dx = (S -T)*dx

= 2*(X+1)*dy - 2*Y*dx - 1*dx = 2*(X+1)*dy - 2*Y*dx - 1*dx

= 2*X*dy - 2*Y*dx + 2*dy - dx = 2*X*dy - 2*Y*dx + 2*dy - dx

NOTE,NOTE, thatthat m=dy/dx ; the quantity dx is non-zero m=dy/dx ; the quantity dx is non-zero positivepositive




Let E be a function of X and Y -- E(X,Y) and assume our Let E be a function of X and Y -- E(X,Y) and assume our line passes through the origin (0,0)line passes through the origin (0,0)

E(0,0)E(0,0) = = 2*dy - dx2*dy - dx

E(X+1, Y+1) - E(X,Y) = Additive error for a diagonal moveE(X+1, Y+1) - E(X,Y) = Additive error for a diagonal move

Diagonal Move:Diagonal Move: E(X+1,Y+1) - E(X,Y)E(X+1,Y+1) - E(X,Y) = = 2*dy - 2*dx2*dy - 2*dx

E(X+1, Y) - E(X,Y) = Additive error for a horizontalE(X+1, Y) - E(X,Y) = Additive error for a horizontal

Horizontal Move:Horizontal Move: E(X+1,Y) - E(X,Y)E(X+1,Y) - E(X,Y) = = 2*dy2*dy



Algorithm for Drawing Lines Algorithm for Drawing Lines in the First Octantin the First Octant

Draw_Line (X1, Y1, X2, Y2)Draw_Line (X1, Y1, X2, Y2)

dx = X2 - X1dx = X2 - X1

dy = Y2 - Y1dy = Y2 - Y1

E = 2dy - dxE = 2dy - dx

HoriMove = 2dyHoriMove = 2dy

DiagMove = 2dy - 2dxDiagMove = 2dy - 2dx

Y = Y1Y = Y1

for X from X1 to X2for X from X1 to X2set_pixel (X, Y)set_pixel (X, Y)

ifif E < 0 then (S < T) E < 0 then (S < T)

E = E + E = E + HoriMoveHoriMove

elseelse

E = E + E = E + DiagMoveDiagMove

Y = Y + 1Y = Y + 1

end ifend if

end forend for

end Draw_Lineend Draw_Line



Algorithm for Drawing Lines Algorithm for Drawing Lines in the First Octantin the First Octant

The code should not useThe code should not use floating point numbersfloating point numbers multiplicationmultiplication divisiondivision comparison to any number other than zero (they are slowercomparison to any number other than zero (they are slower

It should be It should be sufficient to usesufficient to use additionsadditions bit-shiftsbit-shifts comparison to zerocomparison to zero



Example (first octant)Example (first octant)

-2+2

-6

-2 +2

-6

-2

(6, 2)

(0, 0)

E

X Y E0 0 4-6 = -2 1 0 -2+4 = +2 2 1 +2-8 = -6 3 1 -6+4 = -2 4 1 -2+4 = +2 5 2 +2-8 = -6 6 2 -6+4 = -2

X Y E0 0 4-6 = -2 1 0 -2+4 = +2 2 1 +2-8 = -6 3 1 -6+4 = -2 4 1 -2+4 = +2 5 2 +2-8 = -6 6 2 -6+4 = -2

(X1,Y1) = (0,0) (X2,Y2) = (6,2) dx=6 dy=2 E = 4-6 = -2HoriMove = 4DiagMove = -8

(X1,Y1) = (0,0) (X2,Y2) = (6,2) dx=6 dy=2 E = 4-6 = -2HoriMove = 4DiagMove = -8



Example (Seventh Octant)Example (Seventh Octant)



Example (Seventh Octant)Example (Seventh Octant)

-2

+2-6

-2

+2-6

-2

(2, -6)

(0, 0)

E

X Y E 0 0 4 - 6 = -2 -1 0 -2+4 = +2 -2 1 +2- 8 = -6 -3 1 -6+4 = -2 -4 1 -2+4 = +2 -5 2 +2- 8 = -6 -6 2 -6+4 = -2

X Y E 0 0 4 - 6 = -2 -1 0 -2+4 = +2 -2 1 +2- 8 = -6 -3 1 -6+4 = -2 -4 1 -2+4 = +2 -5 2 +2- 8 = -6 -6 2 -6+4 = -2

(Y1,X1) = (0,0) (Y2,X2) = (-6,2) dx=6 dy=2 HoriMove = 4 DiagMove = -8

(Y1,X1) = (0,0) (Y2,X2) = (-6,2) dx=6 dy=2 HoriMove = 4 DiagMove = -8

Swap X1, Y1and X2, Y2Swap X1, Y1and X2, Y2

INC X by -1(X will change from 0 to -6)

INC X by -1(X will change from 0 to -6)

Set pixel(Y, X)



Drawing Lines Drawing Lines in All Eight Octantsin All Eight Octants

There are eight regions (octants) in which the algorithm should workThere are eight regions (octants) in which the algorithm should work

INC Y by -1set_pixel(X,Y)

INC X by -1set_pixel(X,Y)

INC Y by -1INC X by -1set_pixel(X,Y)

Swap X1, Y1Swap X2, Y2

INC Y by -1INC X by -1

set_pixel(Y,X)


INC X by -1set_pixel(Y,X)


set_pixel(Y,X)


set_pixel(Y,X)



Drawing circlesDrawing circles

Circles are symmetric about the x and y Circles are symmetric about the x and y axes, as well as their 45axes, as well as their 45oo lines lines

We only have to figure out the pixels for We only have to figure out the pixels for one octant of the circle!one octant of the circle!

Bresenham has an algorithm for doing thisBresenham has an algorithm for doing this



Drawing circlesDrawing circlese = 3 - (2 * r) x = 0 y = RADIUS

Do Until x = yPutPixel(CenterX + X, Center Y + Y) PutPixel(CenterX + X, Center Y - Y) PutPixel(CenterX - X, Center Y + Y) PutPixel(CenterX - X, Center Y - Y) PutPixel(CenterX + Y, Center Y + X) PutPixel(CenterX + Y, Center Y - X) PutPixel(CenterX - Y, Center Y + X) PutPixel(CenterX - Y, Center Y - X)

if e < 0 then e = e + (4 * x) + 6

else e = e + 4 * (x - y) + 10 y = y - 1

endx = x + 1

End doCenter

Start here End here



Drawing circlesDrawing circles

http://www.gamedev.net/reference/articles/http://www.gamedev.net/reference/articles/article767.asparticle767.asp

http://www.rpi.edu/dept/ecse/graphics-f99/http://www.rpi.edu/dept/ecse/graphics-f99/Classes/24/Classes/24/



Overlaying imagesOverlaying images



Overlaying imagesOverlaying images

X1 = green X3 = greenX2 != green X4 != green

green greengreen green

FFFF FFFF0000 0000

……….

pcmpeqw

Bitmask4pixel/cycle



Overlay of the ImageOverlay of the Image

FFFF 0000 0000FFFF FFFF 0000 0000FFFF

X1 X2 X4X3 Y1 Y2 Y4Y3

0000 X2 X40000 Y1 0000 0000Y3

Y1 X2 X4Y3

pandn pand

por



Image Dissolve Using Image Dissolve Using Alpha BlendingAlpha Blending




MMX instructions speed up image compositionMMX instructions speed up image composition

A flower will dissolve a swanA flower will dissolve a swan

Alpha determines the intensity of the flowerAlpha determines the intensity of the flower

The full intensity, the flower’s 8-bit alpha value is FFh, or 255The full intensity, the flower’s 8-bit alpha value is FFh, or 255

The equation below calculates each pixel:The equation below calculates each pixel:

Result_pixel =Flower_pixel *(alpha/255) + Swan_pixel * [1-(alpha/255)]Result_pixel =Flower_pixel *(alpha/255) + Swan_pixel * [1-(alpha/255)]

For alpha 230, the resulting pixel is 90% flower and 10% swanFor alpha 230, the resulting pixel is 90% flower and 10% swan






Instruction Count Instruction Count with/without MMX Technologywith/without MMX Technology

Operation cost for fading from flower to swan by single-stepping the alpha value from 1 to 255

Documents

ECE291 Lecture 16 Fun with graphics. ECE 291 Lecture 16Page 2 of 25 Lecture outline Bresenham’s Line Drawing Algorithm Bresenham’s Circle Drawing Algorithm