topic 4 part iii fill area primitives polygon fill areas cgmb214: introduction to computer graphics
Post on 25-Dec-2015
249 Views
Preview:
TRANSCRIPT
TOPIC 4 PART I I IFILL AREA PRIMITIVESPOLYGON FILL AREAS
CGMB214: Introduction to Computer Graphics
What we are going to learn
To be able to understand the concept of fill attributes
To be able to understand the concept of polygon
Fill Area Primitives
Filled-Area Primitives
Two ways of area filling on raster system By determining the overlaps intervals for scan lines
that cross the area. By starting from interior position outward until
specified boundary condition is encountered.
Filling 2D Shapes
Types of filling
Pattern Fill
Solid Fill
Texture Fill
Filling 2D Shapes
Some requirements A digital representation of the shape
The shape must be closed It must have a well defines inside and
outside A test for determining if a point is inside
or outside of the shape A rule or procedure for determining the
colors of points inside the shape
Representing Filled Shapes
Digital images Inside determined by a color or range of
colors
Original ImagePink pixels have been filled with
yellow
Representing Filled Shapes
A digital outline and a seed point indicating the interior
Digital outline and seed points
Filled outlines
Representing Filled Shapes
An implicit function representing a shape’s interior
The inside of a circle of radius R
The inside of a unit square
Representing Filled Shapes
An equation or list of edges representing a shape’s boundary and a rule for determining its interior E.g.
Edge list Line from (0,0) to (1,0) Line from (1,0) to (1,1) Line from (1,1) to (0,1) Line from (0,1) to (0,0)
Rule for interior points All points to the right of all of the (ordered) edges
Representing Filled Shapes
Edge list Line from (0,0) to (1,0) Line from (1,0) to (1,1) Line from (1,1) to (0,1) Line from (0,1) to (0,0)
Rule for interior points All points to the right of all of the (ordered) edges
Representing Filled Shapes
Edge list Line from (0,0) to (1,0) Line from (1,0) to (1,1) Line from (1,1) to (0,1) Line from (0,1) to (0,0)
Rule for interior points All points to the right of all of the (ordered) edges
Filled shape
Fill Options
How to set pixel colors for points inside the shape?
Solid Fill Pattern Fill Texture Fill
Seed Fill
Approach Select a seed point inside a region Move outwards from the seed point, setting
neighboring pixels until the region is filled
Seed point
Move outwards to neighbors
Stop when the region
is filled
Selecting the Seed Point
Difficult to place the seed point automatically Seed fill works best in an interactive application
where the user sets the seed point
What is the inside of this shape? It depends on the user’s intent
Seed Fill
Basic algorithmselect seed pixelinitialize a fill list to contain seed pixelwhile (fill list not empty) {
pixel get next pixel from fill listsetPixel(pixel)
for (each of the pixel’s neighbors) { if (neighbor is inside region AND neighbor
not set) add neighbor to fill list}
}
Which neighbors should be tested?
There are two types of 2D regions 4-connected region (test 4 neighbors)
Two pixels are 4-connected if they are vertical or horizontal neighbors
8-connected region (test 8 neighbors) Two pixels are 8-connected if they are vertical,
horizontal, or diagonal neighbors
Which neighbors should be tested?
Using 4-connected and 8-connected neighbors gives different results
Magnified area
Original boundary
Fill using 4-connected neighbors
Fill using 8-connected neighbors
When is a Neighbor Inside the Region?
There are two types of tests, resulting in two filling approachesBoundary fillFlood fill
Fill condition The region is defined by a set of boundary
pixels A neighbor of an inside pixel is also inside
if it is not a boundary pixel
Boundary Fill
Boundary pixel
Seed pixel
Original image and seed point
Image after 4-connected boundary fill
Fill condition The region is defined by a patch of like-colored
pixels A neighbor of an inside pixel is also inside if its
color is within a range of the seed pixel’s original color The range of inside colors can be specified in the
application
Flood Fill
Seed pixel
Original image and seed point
Image after 4-connected flood fill
Improving Performance
Problems with the basic algorithm We don’t know how big the fill list should
be Worst case, all the image pixels
Slow Pixels may be checked many times to see
if they have already been set (especially for 8-connected regions)
Improving Performance
Use coherence (logical connection) to improve performance and reduce memory requirements Neighbor coherence
Neighboring pixels tend to be in the same region Span coherence
Neighboring pixels along a given scan line tend to be in the same region
Scan-line coherence The filling patterns of adjacent scan lines tends
to be similar
Span-based seed fill algorithm
Improving Performance
Seed point
Improving Performance
Span-based seed fill algorithm Start from the seed point Fill the entire horizontal span of pixels inside the
region
Seed point
Improving Performance
Span-based seed fill algorithm Determine spans of pixels in the rows above and
below the current row that are connected to the current span
Add the left-most pixel of these spans to the fill list
Improving Performance
Span-based seed fill algorithm Repeat until the fill list is empty
Improving Performance
Span-based seed fill algorithm Repeat until the fill list is empty
Improving Performance
Span-based seed fill algorithm Repeat until the fill list is empty
Improving Performance
Span-based seed fill algorithm Repeat until the fill list is empty
Filling Axis-Aligned Rectangles
An axis-aligned rectangle is defined by its corner points(Xmin, Ymin) and (Xmax, Ymax)
(Xmin, Ymin)
(Xmax, Ymax)
Filling Axis-Aligned Rectangles
Filling can be done in a nested loopfor (j = Ymin, j < Ymax, j++) { for (i = Xmin, i < Xmax, i++) { setPixel(i, j, fillColor) }}
(Xmin, Ymin)
(Xmax, Ymax)
Polygon Fill Areas
What is polygon?
A plane figure specified by a set of three or more coordinate positions (called vertices), that are connected in sequence by straight line segments (called edges or sides of the polygon).
Polygon must have All vertices within a single plane No edge crossing
Polygon Classification
An interior angle of a polygon is an angle inside the polygon boundary formed by two adjacent edges
If all interior angles of a polygon are less than or equal to 180 degree, the polygon is said to be convex
If there is at least one interior angle greater than 180 degree, the polygon is said to be concave
The order of vertices for a polygon can be either clockwise or anti-clockwise
Polygon Concave
Convex
Polygon Classification
Setup vectors for all edgesPerform cross product to adjacent vectors to test
for concavityPerform dot product if we want to determine the
angle between two edgesAll vector products will be the same value (positive
or negative) for convex polygonIf there are some cross products yield a positive
and some yield a negative value, we have a concave polygon
Identifying Concave Polygon
V1V2
V3
V4
V5V6
E1
E2
E3
E4
E5
E6(E1 X E2) > 0(E2 X E3) > 0(E3 X E4) < 0(E4 X E5) > 0(E5 X E6) > 0(E6 X E1) > 0
EJ X EK = EJXEKY - EJYEKX
Ej = (Vnx – Vmx , Vny – Vmy)
Vm
VnEj
Identifying Concave Polygon
Identifying Concave Polygon
Example: Given 6 vertices:
V1 = (1,1) V2 = (5,1) V3 = (7,3) V4 = (4,5) V5 = (4,10) V6 = (1,10)
Prove that these vertices is for concave polygon. What can you say about the cross product values if we change the order of these vertices (v6 becomes v1, v5 becomes v2, etc…).
Exact angle between two adjacent edges Use dot product operation
a.b = |a||b|cos θ |a| means the magnitude of vector a |a| =
Angle between Edges
22
yx aa
θ
Angle Between Edges
Example: Given 2 vectors a = (2,3) and b = (6,3). Determine the
angle between these two vectors Determine the angle between E3 and E4
Filling General Polygons
Representing general polygons Defined by a list of connected line
segments The line segments must form a closed shape
(i.e. the boundary must connected) General polygons
Can be self intersecting Can have interior holes
Filling General Polygons
Specifying the interior Must be able to determine which points are
inside the polygon Need a fill rule
Filling General Polygons
Inside-Outside Tests Filling means coloring a region How to identify interior or exterior region? Once determined only then interior to be
filled accordingly
Filling General Polygons
Specifying the interior There are two commonly used fill rules
Even-odd parity rule Non-zero winding rule
Filled using even-odd parity rule Filled using none-zero winding rule
Inside-Outside Tests: Even-Odd Rule
Even-Odd Rule Also known as odd-parity and odd-even rule.
How its work? Pick a point of P in the region of interest Draw a line from P to a distant point which lower than the
smallest x
Move from P along the line to the distant point
Count the number of region edges the line crosses If the number of crossed is odd then P is inside the
interior region If the number of crossed is even then P is inside the
exterior region
Inside-Outside Tests: Even-Odd Rule
To determine if a point P is inside or outside Draw a line from P to infinity Count the number of times the line crosses an edge
If the number of crossing is odd, the point is inside If the number of crossing is even, the point is outside
Inside-Outside Tests: Non-Zero Winding Rule
Non-Zero Winding Number Rule Each boundary is given a direction number and then sum the
numbers.
Rules The line chosen must not pass through any vertices. If first y values less than second y value
Then give direction number –1 If first y values greater than second y value
Then give direction number 1. Move from P along the line to the distant point. Add or minus based on the direction number when crossing the
edges.
Interior regions have non-zero winding numbers.
Exterior regions have a winding number of 0.
Inside-Outside Tests: Non-Zero Winding Rule
The outline of the shape must be directed The line segments must have a consistent
direction so that they formed a continuous, closed path
Inside-Outside Tests: Non-Zero Winding Rule
To determine if a points is inside or outside Determine the winding number (i.e. the number of times
the edge winds around the point in either a clockwise or counterclockwise direction) Points are outside if the winding number is zero Point are inside if the winding number is not zero
Inside-Outside Tests: Non-Zero Winding Rule
To determine the winding number at a point P Initialize the winding number to zero and draw a line (e.g.
horizontal) from P to infinity If the line crosses an edge directed bottom to up
Add 1 to the winding number If the line crosses an edge directed top to bottom
Subtract 1 from the winding number
Inside-Outside Tests: Non-Zero Winding Rule
The non-zero winding number rule and the even-odd parity rule can give different results for general polygons When polygons self intersect When polygons have interior holes
Even-odd parity Non-zero winding
Inside-Outside Tests
Standard polygons Standard polygons (e.g. triangles, rectangles, octagons) do
not self intersect and do not contain holes The non-zero winding number rule and the even-odd parity
rule give the same results for standard polygons
Shared Vertices
Edges share vertices If the line drawn for the fill rule intersects a vertex,
the edge crossing would be counted twice This yields incorrect and inconsistent even-odd parity
checks and winding numbers
Line pierces the outline- Should count as one crossing
Line grazes the outline- Should count as no crossings
Dealing with Shared Vertices
1. Check the vertex type (piercing or grazing) If the vertex is between two upwards or two downwards
edges, the line pierces the edge Process a single edge crossing
If the vertex is between an upwards and a downwards edge, the line grazes the vertex
Don’t process any edge crossings
Vertex between two upwards edges- Process a single crossing
Vertex between upwards and downwards edges- Process no crossings
Dealing with Shared Vertices
2. Ensure that the line does not intersect a vertex
Use a different line if the first line intersects a vertex Could be costly if you have to try several lines
If using horizontal scan line for the inside-outside test Preprocess edge vertices to make sure that none of
them fall on a scan line Add a small floating point value to each vertex y-
position
Filling Polygons via Boundary Fill
Polygons are defined by their edges
Filling Polygons via Boundary Fill
Polygons are defined by their edges Use a line drawing algorithm to draw edges of
the polygon with a boundary color
Filling Polygons via Boundary Fill
Polygons are defined by their edges Fill the inside of the polygon using a boundary fill
Filling Polygons via Boundary Fill
Problems1. Pixels are drawn on both sides of the
line The polygon contains pixels outside of the
outline Polygons with shared edges will have
overlapping pixels
2. Efficiency Drawing outlines and then filling can be less
efficient that combining the edge drawing and filling in one step
Raster-Based Filling
Fill polygons in raster-scan order Fill spans of pixels inside the polygon along each horizontal
scan line More efficient addressing by accessing spans of pixels Only test pixels at the span endpoints
Raster-Based Filling
For each scan line Determine points where the scan line intersects
the polygon
Raster-Based Filling
For each scan line Set pixels between intersection points (using a fill
rule) Even-odd parity rule: set pixels between pairs of
intersections Non-zero winding rule: set pixels according to the
winding number
Raster-Based Filling
Basic algorithm (with even-odd parity rule)
for (each scan line, j) {find the x-intersections between the scan line and each edgesort the x-intersections by increasing x-value
for (each pair of intersection points, x1 and x2) {while (x1 < i < x2) setPixel(i, j, fillColor)
}}
Conventions for Setting Edge Pixels
Adjacent polygons share edges When rendered, some pixels along the edges are shared Need to know what color to use for shared edge pixels
Conventions for Setting Edge Pixels
If we draw all edge pixels for each polygon Shared pixels will be rendered more than once
If setPixel() overwrites the current pixel, the last polygon drawn will look larger
Green triangle written last
Conventions for Setting Edge Pixels
If we draw all edge pixels for each polygon Shared pixels will be rendered more than once
If setPixel() overwrites the current pixel, the last polygon drawn will look larger
Blue triangle written last
Conventions for Setting Edge Pixels
If we draw all edge pixels for each polygon Shared pixels will be rendered more than once
If setPixel() blends the background color with the foreground color, shared edge pixels will have a blended color
Edge color different than either triangle
If we draw none of the edge pixels Only interior pixels are drawn
Gaps appear between polygons and the background shows through
Conventions for Setting Edge Pixels
Gaps between adjacent triangles
Conclusion
You have learn on: The basic tools
to draw points, lines, curves To fill color areas
Three methods on developing straight line DDA Bresenham Algo Midpoint Algo
How to draw circle or ellipse efficiency by taking the symmetrical value into account
Using Inside-Outside test to test the interior and the exterior of an area
top related