View
219
Download
0
Category
Preview:
Citation preview
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 33 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 44 of 25 of 25
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)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 55 of 25 of 25
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)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 66 of 25 of 25
Derivation of Bresenham’s Line AlgorithmDerivation of Bresenham’s Line Algorithm
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 77 of 25 of 25
Derivation of Bresenham’s Line AlgorithmDerivation of Bresenham’s Line Algorithm
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)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 88 of 25 of 25
Derivation of Bresenham’s Line AlgorithmDerivation of Bresenham’s Line Algorithm
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 99 of 25 of 25
Derivation of Bresenham’s Line AlgorithmDerivation of Bresenham’s Line Algorithm
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1010 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1111 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1212 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1313 of 25 of 25
Example (Seventh Octant)Example (Seventh Octant)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1414 of 25 of 25
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)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1515 of 25 of 25
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)
Swap X1, Y1Swap X2, Y2
INC X by -1set_pixel(Y,X)
Swap X1, Y1Swap X2, Y2
set_pixel(Y,X)
Swap X1, Y1Swap X2, Y2
set_pixel(Y,X)
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1616 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1717 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1818 of 25 of 25
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/
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 1919 of 25 of 25
Overlaying imagesOverlaying images
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2020 of 25 of 25
Overlaying imagesOverlaying images
X1 = green X3 = greenX2 != green X4 != green
green greengreen green
FFFF FFFF0000 0000
……….
pcmpeqw
Bitmask4pixel/cycle
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2121 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2222 of 25 of 25
Image Dissolve Using Image Dissolve Using Alpha BlendingAlpha Blending
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2323 of 25 of 25
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
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2424 of 25 of 25
Image Dissolve Using Image Dissolve Using Alpha BlendingAlpha Blending
ECE 291 Lecture 16ECE 291 Lecture 16
Page Page 2525 of 25 of 25
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
Recommended