Fill Area Primitives

Filling 2D ShapesHow do we fill shapes?Solid FillPattern FillTexture Fill

Filling 2D Shapes (cont)Some requirementsA digital representation of the shapeThe shape must be closedIt must have a well defines inside and outsideA test for determining if a point is inside or outside of the shapeA rule or procedure for determining the colors of points inside the shape

Representing Filled ShapesDigital imagesInside determined by a color or range of colorsOriginal ImagePink pixels have been filled with yellow

Representing Filled Shapes (cont)A digital outline and a seed point indicating the interiorDigital outline and seed pointsFilled outlines

Representing Filled Shapes (cont)An implicit function representing a shapes interiorThe inside of a circle of radius RThe inside of a unit square

Representing Filled Shapes (cont)An equation or list of edges representing a shapes boundary and a rule for determining its interiorE.g.Edge listLine 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 (1,1)Rule for interior pointsAll points to the right of all of the (ordered) edges

Representing Filled Shapes (cont)Edge listLine 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 (1,1)Rule for interior pointsAll points to the right of all of the (ordered) edgesOrdered edges

Representing Filled Shapes (cont)Edge listLine 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 (1,1)Rule for interior pointsAll points to the right of all of the (ordered) edgesFilled shape

Fill OptionsHow to set pixel colors for points inside the shape?Solid FillPattern FillTexture Fill

Seed FillApproachSelect a seed point inside a regionMove outwards from the seed point, setting neighboring pixels until the region is filledSeed pointMove outwards to neighborsStop when the region is filled

Selecting the Seed PointDifficult to place the seed point automaticallySeed fill works best in an interactive application where the user sets the seed pointWhat is the inside of this shape? * It depends on the users intent

Seed FillBasic algorithmselect seed pixel initialize a fill list to contain seed pixel while (fill list not empty) { pixel get next pixel from fill listsetPixel(pixel) for (each of the pixels neighbors) { if (neighbor is inside region AND neighbor not set)add neighbor to fill list}}

There are two types of 2D regions4-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 neighborsWhich neighbors should be tested?

Which neighbors should be tested?Using 4-connected and 8-connected neighbors gives different resultsMagnified areaOriginal boundaryFill using 4-connected neighborsFill using 8-connected neighbors

When is a Neighbor Inside the Region?There are two types of tests, resulting in two filling approachesBoundary fillFlood fill

Boundary FillFill conditionThe region is defined by a set of boundary pixelsA neighbor of an inside pixel is also inside if it is not a boundary pixelBoundary pixelSeed pixelOriginal image and seed pointImage after 4-connected boundary fill

Flood FillFill conditionThe region is defined by a patch of like-colored pixelsA neighbor of an inside pixel is also inside if its color is within a range of the seed pixels original colorThe range of inside colors can be specified in the applicationSeed pixelOriginal image and seed pointImage after 4-connected flood fill

Improving PerformanceProblems with the basic algorithmWe dont know how big the fill list should beWorst case, all the image pixelsSlowPixels may be checked many times to see if they have already been set (especially for 8-connected regions)

Improving Performance (cont)Use coherence (logical connection) to improve performance and reduce memory requirementsNeighbor coherenceNeighboring pixels tend to be in the same regionSpan coherenceNeighboring pixels along a given scan line tend to be in the same regionScan-line coherenceThe filling patterns of adjacent scan lines tends to be similar

Improving Performance (cont)Span-based seed fill algorithmSeed point

Improving Performance (cont)Span-based seed fill algorithmStart from the seed pointFill the entire horizontal span of pixels inside the regionSeed point

Improving Performance (cont)Span-based seed fill algorithmDetermine spans of pixels in the rows above and below the current row that are connected to the current spanAdd the left-most pixel of these spans to the fill list

Improving Performance (cont)Span-based seed fill algorithmRepeat until the fill list is empty

Improving Performance (cont)Span-based seed fill algorithmRepeat until the fill list is empty

Improving Performance (cont)Span-based seed fill algorithmRepeat until the fill list is empty

Improving Performance (cont)Span-based seed fill algorithmRepeat until the fill list is empty

Filling Axis-Aligned RectanglesAn axis-aligned rectangle is defined by its corner points(Xmin, Ymin) and (Xmax, Ymax)(Xmin, Ymin)(Xmax, Ymax)

Filling Axis-Aligned RectanglesFilling 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)

Filling General PolygonsRepresenting general polygonsDefined by a list of connected line segmentsThe line segments must form a closed shape (i.e. the boundary must connected)General polygonsCan be self intersectingCan have interior holes

Filling General PolygonsSpecifying the interiorMust be able to determine which points are inside the polygonNeed a fill rule

Filling General PolygonsSpecifying the interiorThere are two commonly used fill rulesEven-odd parity ruleNon-zero winding ruleFilled using even-odd parity ruleFilled using none-zero winding rule

Even-odd Parity RuleTo determine if a point P is inside or outsideDraw a line from P to infinityCount the number of times the line crosses an edgeIf the number of crossing is odd, the point is insideIf the number of crossing is even, the point is outside

Non-zero Winding Number RuleThe outline of the shape must be directedThe line segments must have a consistent direction so that they formed a continuous, closed path

Non-zero Winding Number RuleTo determine if a points is inside or outsideDetermine 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 zeroPoint are inside if the winding number is not zero

Non-zero Winding Number RuleTo determine the winding number at a point PInitialize the winding number to zero and draw a line (e.g. horizontal) from P to infinityIf the line crosses an edge directed bottom to upAdd 1 to the winding numberIf the line crosses an edge directed top to bottomSubtract 1 from the winding number

Inside-Outside TestsThe non-zero winding number rule and the even-odd parity rule can give different results for general polygonsWhen polygons self intersectWhen polygons have interior holesEven-odd parityNon-zero winding

Inside-Outside TestsStandard polygonsStandard polygons (e.g. triangles, rectangles, octagons) do not self intersect and do not contain holesThe non-zero winding number rule and the even-odd parity rule give the same results for standard polygons

Shared VerticesEdges share verticesIf the line drawn for the fill rule intersects a vertex, the edge crossing would be counted twiceThis yields incorrect and inconsistent even-odd parity checks and winding numbersLine pierces the outline - Should count as one crossingLine grazes the outline - Should count as no crossings

Dealing with Shared VerticesCheck the vertex type (piercing or grazing)If the vertex is between two upwards or two downwards edges, the line pierces the edgeProcess a single edge crossingIf the vertex is between an upwards and a downwards edge, the line grazes the vertexDont process any edge crossingsVertex between two upwards edges - Process a single crossingVertex between upwards and downwards edges - Process no crossings

Dealing with Shared VerticesEnsure that the line does not intersect a vertexUse a different line if the first line intersects a vertexCould be costly if you have to try several lines

If using horizontal scan line for the inside-outside testPreprocess edge vertices to make sure that none of them fall on a scan lineAdd a small floating point value to each vertex y-position

Filling Polygons via Boundary FillPolygons are defined by their edges

Filling Polygons via Boundary FillPolygons are defined by their edgesUse a line drawing algorithm to draw edges of the polygon with a boundary color

Filling Polygons via Boundary FillPolygons are defined by their edgesFill the inside of the polygon using a boundary fill

Filling Polygons via Boundary FillProblemsPixels are drawn on both sides of the lineThe polygon contains pixels outside of the outlinePolygons with shared edges will have overlapping pixelsEfficiencyDrawing outlines and then filling can be less efficient that combining the edge drawing and filling in one step

Raster-Based FillingFill polygons in raster-scan orderFill spans of pixels inside the polygon along each horizontal scan lineMore efficient addressing by accessing spans of pixelsOnly test pixels at the span endpoints

Raster-Based FillingFor each scan lineDetermine points where the scan line intersects the polygon

Raster-Based FillingFor each scan lineSet pixels between intersection points (using a fill rule)Even-odd parity rule: set pixels between pairs of intersectionsNon-zero winding rule: set pixels according to the winding number

Raster-Based FillingBasic algorithm (with even-odd parity rule)

for (each scan line, j) { find the x-intersections between the scan line and each edge sort 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 PixelsAdjacent polygons share edgesWhen rendered, some pixels along the edges are sharedNeed to know what color to use for shared edge pixels

Conventions for Setting Edge PixelsIf we draw all edge pixels for each polygonShared pixels will be rendered more than onceIf setPixel() overwrites the current pixel, the last polygon drawn will look largerGreen triangle written last

Conventions for Setting Edge PixelsIf we draw all edge pixels for each polygonShared pixels will be rendered more than onceIf setPixel() overwrites the current pixel, the last polygon drawn will look largerBlue triangle written last

Conventions for Setting Edge PixelsIf we draw all edge pixels for each polygonShared pixels will be rendered more than onceIf setPixel() blends the background color with the foreground color, shared edge pixels will have a blended colorEdge color different than either triangle

Conventions for Setting Edge PixelsIf we draw none of the edge pixelsOnly interior pixels are drawnGaps appear between polygons and the background shows throughGaps between adjacent triangles