open gl t0074 56 sm4
DESCRIPTION
TRANSCRIPT
![Page 1: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/1.jpg)
Drawing 2D PrimitivesFoley & Van Dam, Chapter 3
![Page 2: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/2.jpg)
Topics
•Interactive Graphic Systems•Drawing lines•Drawing circles•Filling polygons
![Page 3: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/3.jpg)
Interactive Graphic System
Application ModelApplication Model
Application ProgramApplication Program
Graphics SystemGraphics System
![Page 4: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/4.jpg)
Interactive Graphic SystemApplication 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)
![Page 5: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/5.jpg)
Graphics System–Intermediates between the application programand the interface hardware:
•Output flow•Input flow
–Causes the application program to be device-independent.
![Page 6: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/6.jpg)
Display HardwareCRT - Cathode Ray Tube
Cathode(electron gun)
deflection yoke
focusing anode
shadow mask and phosphor coated screen
phosphors on glass screen
shadow mask
electron guns
![Page 7: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/7.jpg)
Raster Scan (CRT)
Scan line
![Page 8: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/8.jpg)
Display HardwareFED - Field Emission Display
Catode electrodes
Microtips(Emitters)
Phospor
Anode
![Page 9: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/9.jpg)
Image Representation in Raster Displays
pixel
I RG
B
![Page 10: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/10.jpg)
Raster Display
3614795115927660127845255558217155
Frame Buffer
Video Controller
Display Controller
KeyboardMouse
Display commands
Interaction data
Graphics system
![Page 11: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/11.jpg)
TerminologyPixel: Picture element.
- Smallest accessible element in picture- Assume rectangular or circular shape
Aspect Ratio: Ratio between physical dimensions of a pixel (not necessarily 1)
Dynamic Range: The ratio between the minimal (not zero!) and the maximal light intensity a display pixel can emit
Resolution: The number of distinguishable rows and columns in the device. Measured in:
- Absolute values (1K x 1K) or,- Density values (300 dpi [=dots per inch])
Screen Space: A discrete Cartesian coordinate system of the screen pixels
Object Space: The Cartesian coordinate system of the universe, in which the objects (to be displayed) are embedded
![Page 12: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/12.jpg)
Scan ConversionThe conversion from a geometrical
representation of an object to pixels in a raster display
(x0,y0)
(x1,y1)
![Page 13: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/13.jpg)
RepresentationsImplicit formula:
Constraint(s) expressed as
A k-dimensional surface embedded in n-dimensions
Explicit formula:For each x define y as y=f(x)Good only for "functions".
Parametric formula:Depending on free parameter(s)
For k-dimensional surface there are k free parameters
f(x,y,..)=0
fi(x1,x2,..,xn)=0 ; i=1..n-k
x=fx(t)y=fy(t)
![Page 14: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/14.jpg)
Line in 2 dimensions•Implicit representation:
•Explicit representation:
•Parametric representation:
0=++ γβα yx
01
01
xxyymBmxy
−−
=+=
]1..0[)( 010 ∈−+= ttPPPP
=
yx
P
x
P0
P1
x0
y1
y0
x1B
![Page 15: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/15.jpg)
Scan Conversion - Lines
slope = m = y1 - y0x1 - x0
Assume |m| ≤ 1Assume x0 ≤ x1
Basic AlgorithmFor x = x0 to x1
y = mx + BPlotPixel(x,round(y))
end;
offset= B = y1-mx1
For each iteration: 1 float multiplication, 1 addition, 1 round
y = mx + B
(x0,y0)
(x1,y1)
![Page 16: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/16.jpg)
Scan Conversion - LinesIncremental Algorithm
yi+1 = mxi+1 + B = m(xi + ∆x) + B = yi + m∆xif ∆x = 1 then yi+1 = yi + m
Algorithm
For x = x0 to x1PlotPixel(x,round(y))
end;
y=y0
y = y + m
![Page 17: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/17.jpg)
Scan Conversion - Lines
( xi,Round(yi) )
( xi+1, yi+m )( xi, yi )
( xi+1,Round(yi+m) )
![Page 18: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/18.jpg)
Pseudo Code for Basic Line DrawingAssume 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 dobegin
PlotPixel( x,Round(y) );y := y+slope;
end;end;
![Page 19: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/19.jpg)
Basic Line DrawingSymmetric Cases:
|m| ≥ 1
For y = y0 to y1
x = x + 1/mPlotPixel(round(x),y)
end;
x = x0
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))
For each iteration:•1 addition, 1 rounding
Drawbacks:• Accumulated error• Floating point arithmetic• Round operations
![Page 20: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/20.jpg)
Midpoint (Bresenham) Line Drawing
Assumptions:• x0 < x1 , y0 < y1 • 0 < slope < 1
MQ
E
NE
(xp,yp)Given (xp,yp), the 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)
![Page 21: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/21.jpg)
Midpoint (Bresenham) Line Drawingy = x + Bdy
dxImplicit form of a line:
f(x,y) = ax + by + c = 0
Decision Variable :d = f(M) = f(xp +1,yp +1/2) = a(xp +1) + b(yp +1/2) + c
• choose NE if d > 0• choose E if d ≤ 0
f(x,y) = dy x - dx y + B dx = 0
f(x,y) = 0f(x,y) > 0
f(x,y) < 0(a>0)
![Page 22: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/22.jpg)
Midpoint (Bresenham) Line Drawing
If E was chosen at xp + 1
What happens at xp + 2 ?
M = (xp +2,yp +1/2)dnew = f(xp +2,yp +1/2) = a(xp +2) + b(yp +1/2) + cdold = f(xp +1,yp +1/2) = a(xp +1) + b(yp +1/2) + c
dnew = dold + a = dold + dydnew = dold + ∆E
If NE was chosen at xp + 1M = (xp +2,yp +3/2)
dnew = f(xp +2,yp +3/2) = a(xp +2) + b(yp +3/2) + cdold = f(xp +1,yp +1/2) = a(xp +1) + b(yp +1/2) + c
dnew = dold + a + b = dold + dy - dx
dnew = dold + ∆NE
M
Q
E
NE
(xp,yp)
MM
![Page 23: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/23.jpg)
Midpoint (Bresenham) Line Drawing
Initialization:First point = (x0,y0), first MidPoint = (x0+1,y0+1/2)dstart = f(x0 +1,y0+1/2) = a(x0 +1) + b(y0 +1/2) +c
= ax0 + by0 + c + a + b/2= f(x0,y0) + a + b/2 = a + b/2
dstart =dy - dx/2
Enhancement:
To eliminate fractions, define:
f(x,y) = 2(ax + by + c) = 0
dstart =2dy - dx
∆E=2dy∆NE=2(dy-dx)
![Page 24: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/24.jpg)
Midpoint (Bresenham) Line Drawing•The sign of f(x0+1,y0+1/2) indicates whether to move Eastor 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: ∆E=2dyIf we moved North-East: ∆NE=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
![Page 25: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/25.jpg)
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, ∆E, ∆ΝE ;x:= x0; y=y0;dx := x1-x0; dy := y1-y0;d := 2*dy-dx;∆E := 2*dy; ∆ΝΕ := 2*(dy-dx); PlotPixel(x,y);while(x < x1) do
if (d < 0) then d:=d+ ∆E;x:=x+1;
end;else
d:=d+ ∆ΝE;x:=x+1;y:=y+1;
end;PlotPixel(x,y);
end;end;
![Page 26: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/26.jpg)
Scan Conversion - CirclesImplicit representation (centered at the origin, radius R):
Explicit representation:
Parametric representation:
0222 =−+ Ryx
( )( ) ]2..0[
sincos
π∈
=
t
tRtR
yx
22 xRy −±=
x
R
![Page 27: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/27.jpg)
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• Floating point arithmetic• Large gap for x values close to R
![Page 28: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/28.jpg)
Scan Conversion - CirclesExploiting Eight-Way SymmetryFor 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)
![Page 29: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/29.jpg)
Scan Conversion - Circles
CirclePoints(x, y)begin
PlotPixel(x,y);PlotPixel(y,x); PlotPixel(y,-x);PlotPixel(x,-y); PlotPixel(-x,-y);PlotPixel(-y,-x); PlotPixel(-y,x);PlotPixel(-x,y);
end;
(x,y)
(y,x)
(y,-x)
(x,-y)(-x,-y)
(-y,x)
(-y,-x)
(-x,y)
![Page 30: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/30.jpg)
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)
![Page 31: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/31.jpg)
Circle Midpoint (for one octant)
d(x,y)=f(x,y) = x2 + y2 -R2 = 0
f(x,y) = 0
f(x,y) < 0
f(x,y) > 0
Threshold Criteria:
![Page 32: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/32.jpg)
Circle Midpoint (for one octant)
• At the beginning dstart= d(x0+1,y0-1/2)
= d(1,R-1/2) = 5/4 - R• If d<0 we move East:
∆E = d(x0+2,y0-1/2) - d(x0+1,y0-1/2) = 2x0+3• if d>0 we move South-East:
∆SE = d(x0+2,y0-3/2) - d(x0+1,y0-1/2) = 2(x0-y0)+5• ∆E and ∆SE are not constant anymore• Since d is incremented by integer values, we can use
dstart = 1-Ryielding an integer algorithm. This has no affect on the threshold criteria.
x0
y0
![Page 33: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/33.jpg)
Pseudo Code for Circle MidpointMidpointCircle (R)begin
int x, y, d;x := 0;y :=R;d := 5.0/4.0-R;CirclePoints(x,y);while ( y>x ) do
if ( d<0 ) then /* East */d := d+2x+3; x := x+1;
end;else /* South East */
d := d+2(x-y)+5;x := x+1;y := y-1;
end;CirclePoints( x,y ); /* Mirror to create the other seven octants */
end;
![Page 34: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/34.jpg)
Pseudo Code for Circle MidpointMidpointCircle (R)begin
int x, y, d;x := 0;y :=R;d := 1-R; /* originally d := 5.0/4.0 - R */CirclePoints(x,y);while ( y>x ) do
if ( d<0 ) then /* East */d := d+2x+3; /* Multiplication! */x := x+1;
end;else /* South East */
d := d+2(x-y)+5; /* Multiplication! */x := x+1;y := y-1;
end;CirclePoints( x,y ); /* Mirror to create the other seven octants */
end;
![Page 35: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/35.jpg)
Pseudo Code for Circle MidpointMidpointCircle (R)begin
int x, y, d;x := 0;y :=R;d := 1-R; /* originally d := 5.0/4.0 - R */∆E = 3;∆SE = -2R+5;CirclePoints(x,y);while ( y>x ) do
if ( d<0 ) then /* East */d := d+∆E; /* See Foley & van Dam pg. 87 */∆E := ∆E+2;∆SE := ∆SE+2;x := x+1;
end;else /* South East */
d := d+∆SE; /* See Foley & van Dam pg. 87 */∆E := ∆E+2;∆SE := ∆SE+4;x := x+1;y := y-1;
end;CirclePoints( x,y ); /* Mirror to create the other seven octants */
end;
![Page 36: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/36.jpg)
Circle Midpoint
![Page 37: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/37.jpg)
Polygon FillRepresentation:
Polygon = V0, V1, V2, .. VnVi=(xi,yi) - vertexEi=(vi,vi+1) - edgeEn=(vn,v0)
v0 v1
v5
v4v3
v2
v6
vertex
edge
E0 E1
E6
![Page 38: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/38.jpg)
Scan Conversion - Polygon FillProblem: 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
![Page 39: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/39.jpg)
Flood Fill Algorithm•Let P be a polygon with n vertices, v0 .. vn-1•Denote vn=v0•Let c be a color to paint P•Let p=(x,y) be a point in P
![Page 40: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/40.jpg)
Flood Fill AlgorithmFloodFill(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;
Slow algorithm due to recursion, needs initial point
![Page 41: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/41.jpg)
Fill Polygon
Question: How do we know if a given point is inside or outside a polygon?
![Page 42: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/42.jpg)
Scan Conversion – Basic Algorithm
ScanConvert (P,c)For j:=0 to ScreenYMax doI := 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?
•Let P be a polygon with n vertices, v0 .. vn-1•Denote vn=v0•Let c be a color to paint P
![Page 43: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/43.jpg)
Scan Conversion – Fill Polygon
What happens in with these cases?
![Page 44: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/44.jpg)
Scan Conversion – Fill PolygonIntersections at pixel coordinates
Rule: In the odd/even count, we count ymin vertices of an edge, but not ymax vertices
Vertex B is counted once because ymin of (A,B)Vertex E is not counted because ymax of both (D, E) and (E, F)Vertex H is counted twice because ymin of both (G, H) and (H, I)
A
B
CD
E
F
I
H
G
![Page 45: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/45.jpg)
Fill Polygon – Optimized Algorithm
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;
Uses a list of “active” edges A (edges currently intersecting the scan line)
![Page 46: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/46.jpg)
Fill Polygon – Optimized Algorithm
3 5 7
4 10 15
A
12
ymin
ymax
3 12
E
Implementation with linked lists
![Page 47: Open GL T0074 56 sm4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/54b4da0a4a7959e55c8b45d9/html5/thumbnails/47.jpg)
Flood Fill vs. Scan Conversion
•Very simple.
•Requires a seed point
•Requires large stack size
•Common in paint packages
•More complex
•No seed point is required
•Requires small stack size
•Used in image rendering
Flood Fill Scan Conversion