SlideShare a Scribd company logo
Fill Area Algorithms
Jan. 2008
Polygon Fill Algorithm
• Different types of Polygons
– Simple Convex
– Simple Concave
– Non-simple : self-intersecting
– With holes
Convex Concave Self-intersecting
Polygon Fill Algorithm
• A scan-line fill algorithm of a region is
performed as follows:
1. Determining the intersection positions of the
boundaries of the fill region with the screen scan
lines.
2. Then the fill colors are applied to each section of a
scan line that lies within the interior of the fill region.
• The simplest area to fill is a polygon, because
each scan-line intersection point with a polygon
boundary is obtained by solving a pair of
simultaneous linear equations, where the
equation for the scan line is simply y = constant.
Example
• Consider the following polygon:
Example
• For each scan line that crosses the polygon, the
edge intersections are sorted from left to right,
and then the pixel positions between, and
including, each intersection pair are set to the
specified fill color.
• In the previous Figure, the four pixel intersection
positions with the polygon boundaries define two
stretches of interior pixels.
Example
• The fill color is applied to the five pixels:
–from x = 10 to x = 14
and
• To the seven pixels
–from x = 18 to x = 24.
Polygon Fill Algorithm
• However, the scan-line fill algorithm for a
polygon is not quite as simple
• Whenever a scan line passes through a
vertex, it intersects two polygon edges at
that point.
• In some cases, this can result in an odd
number of boundary intersections for a
scan line.
Polygon Fill Algorithm
• Consider the next Figure.
• It shows two scan lines that cross a
polygon fill area and intersect a vertex.
• Scan line y’ intersects an even number of
edges, and the two pairs of intersection
points along this scan line correctly
identify the interior pixel spans.
• But scan line y intersects five polygon
edges.
Polygon Fill Algorithm
Polygon Fill Algorithm
• To identify the interior pixels for scan line
y, we must count the vertex intersection as
only one point.
• Thus, as we process scan lines, we need
to distinguish between these two cases.
Polygon Fill Algorithm
• We can detect the difference between the
two cases by noting the position of the
intersecting edges relative to the scan line.
• For scan line y, the two edges sharing an
intersection vertex are on opposite sides
of the scan line.
• But for scan line y’, the two intersecting
edges are both above the scan line.
Polygon Fill Algorithm
• A vertex that has adjoining edges on opposite
sides of an intersecting scan line should be
counted as just one boundary intersection point.
• We can identify these vertices by tracing around
the polygon boundary in either clockwise or
counterclockwise order and observing the
relative changes in vertex y coordinates as we
move from one edge to the next.
Polygon Fill Algorithm
• If the three endpoint y values of two consecutive
edges increase or decrease, we need to count
the shared (middle) vertex as a single
intersection point for the scan line passing
through that vertex.
• Otherwise, the shared vertex represents a local
extremum (minimum or maximum) on the
polygon boundary, and the two edge
intersections with the scan line passing through
that vertex can be added to the intersection list.
Area Fill Algorithm
• An alternative approach for filling an area is to
start at a point inside the area and “paint” the
interior, point by point, out to the boundary.
• This is a particularly useful technique for filling
areas with irregular borders, such as a design
created with a paint program.
• The algorithm makes the following assumptions
– one interior pixel is known, and
– pixels in boundary are known.
Area Fill Algorithm
• If the boundary of some region is specified
in a single color, we can fill the interior of
this region, pixel by pixel, until the
boundary color is encountered.
• This method, called the boundary-fill
algorithm, is employed in interactive
painting packages, where interior points
are easily selected.
Example
• One can sketch a figure outline, and pick
an interior point.
• The figure interior is then painted in the fill
color as shown in these Figures
Area Fill Algorithm
• Basically, a boundary-fill algorithm starts
from an interior point (x, y) and sets the
neighboring points to the desired color.
• This procedure continues until all pixels
are processed up to the designated
boundary for the area.
Area Fill Algorithm
• There are two methods for processing
neighboring pixels from a current point.
1. Four neighboring points.
– These are the pixel positions that are right,
left, above, and below the current pixel.
– Areas filled by this method are called 4-
connected.
Area Fill Algorithm
2. Eight neighboring points.
– This method is used to fill more complex
figures.
– Here the set of neighboring points to be set
includes the four diagonal pixels, in addition to
the four points in the first method.
– Fill methods using this approach are called 8-
connected.
Area Fill Algorithm
Area Fill Algorithm
• Consider the Figure in the next slide.
• An 8-connected boundary-fill algorithm
would correctly fill the interior of the area
defined in the Figure.
• But a 4-connected boundary-fill algorithm
would only fill part of that region.
Area Fill Algorithm
Area Fill Algorithm
• The following procedure illustrates a recursive
method for painting a 4-connected area with a
solid color, specified in parameter fillColor, up
to a boundary color specified with parameter
borderColor.
• We can extend this procedure to fill an 8-
connected region by including four additional
statements to test the diagonal positions (x ± 1,
y ± 1).
Area Fill Algorithm
Area Fill Algorithm
• Some times we want to fill in (or recolor)
an area that is not defined within a single
color boundary.
• Consider the following Figure.
Area Fill Algorithm
• We can paint such areas by replacing a
specified interior color instead of
searching for a particular boundary color.
• This fill procedure is called a flood-fill
algorithm.
Area Fill Algorithm
• We start from a specified interior point (x,
y) and reassign all pixel values that are
currently set to a given interior color with
the desired fill color.
• If the area we want to paint has more than
one interior color, we can first reassign
pixel values so that all interior points have
the same color.
Area Fill Algorithm
• Using either a 4-connected or 8-
connected approach, we then step
through pixel positions until all interior
points have been repainted.
• The following procedure flood fills a 4-
connected region recursively, starting from
the input position.
Area Fill Algorithm
Problems with Fill Algorithm (1)
• Recursive boundary-fill algorithms may not
fill regions correctly if some interior pixels
are already displayed in the fill color.
• This occurs because the algorithm checks
next pixels both for boundary color and for
fill color.
Problems with Fill Algorithm
• To avoid this, we can first change the
color of any interior pixels that are initially
set to the fill color before applying the
boundary-fill procedure.
• Encountering a pixel with the fill color can
cause a recursive branch to terminate,
leaving other interior pixels unfilled.
Problems with Fill Algorithm (2)
• This procedure requires considerable
stacking of neighboring points, more
efficient methods are generally employed.
• These methods fill horizontal pixel spans
across scan lines, instead of proceeding to
4-connected or 8-connected neighboring
points.
Problems with Fill Algorithm (2)
• Then we need only stack a beginning
position for each horizontal pixel span,
instead of stacking all unprocessed
neighboring positions around the current
position.
• Starting from the initial interior point with
this method, we first fill in the contiguous
span of pixels on this starting scan line.
Problems with Fill Algorithm (2)
• Then we locate and stack starting
positions for spans on the adjacent scan
lines, where spans are defined as the
contiguous horizontal string of positions
bounded by pixels displayed in the border
color.
• At each subsequent step, we retrieve the
next start position from the top of the stack
and repeat the process.
Area Fill Algorithm
The algorithm can be summarized as follows:
1. define seed point,
2. fill scan line containing seed point,
3. for scan lines above and below, define new seed
points as:
i) first point inside left boundary,
ii) subsequent points within boundary whose left neighbor is
outside,
4. d) repeat algorithm with the new set of seed points.
Example
• In this example, we first process scan lines
successively from the start line to the top
boundary.
• After all upper scan lines are processed, we fill
in the pixel spans on the remaining scan lines in
order down to the bottom boundary.
• The leftmost pixel position for each horizontal
span is located and stacked, in left to right order
across successive scan lines.
Example
• In (a) of this figure, the initial span has
been filled, and starting positions 1 and 2
for spans on the next scan lines (below
and above) are stacked.
Example
• In Fig.(b), position 2 has been unstacked
and processed to produce the filled span
shown, and the starting pixel (position 3)
for the single span on the next scan line
has been stacked.
Example
• After position 3 is processed, the filled
spans and stacked positions are as shown
in Fig. (c).
Example
• And Fig.(d) shows the filled pixels after
processing all spans in the upper right of
the specified area.
Example
• Position 5 is next processed, and spans
are filled in the upper left of the region;
then position 4 is picked up to continue the
processing for the lower scan lines.
Example
• Finish up the upper scan lines.
Example
• Start the bottom scan lines.
Example
• Finish up the bottom scan lines.
Example
• Finish up the bottom scan lines.

More Related Content

PDF
Bresenham line-drawing-algorithm By S L Sonawane.pdf
PPTX
Depth Buffer Method
PPTX
Hidden surface removal
PPTX
Attributes of output primitive(line attributes)
PPTX
Computer graphics
PPT
Shading
PPTX
Cohen sutherland line clipping
PPTX
Input of graphical data
Bresenham line-drawing-algorithm By S L Sonawane.pdf
Depth Buffer Method
Hidden surface removal
Attributes of output primitive(line attributes)
Computer graphics
Shading
Cohen sutherland line clipping
Input of graphical data

What's hot (20)

PPTX
Clipping in Computer Graphics
PPTX
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
PPT
Visible surface detection in computer graphic
PPTX
Projection In Computer Graphics
PPTX
Computer graphics basic transformation
PPTX
Computer Graphic - Lines, Circles and Ellipse
PPT
Window to viewport transformation
PPT
Composite transformations
PPTX
The sutherland hodgeman polygon clipping algorithm
PPT
Polygon filling
PPTX
Polygon filling algorithm
PPTX
Back face detection
PPT
Circle drawing algo.
PDF
Unit 3
PPTX
sutherland- Hodgeman Polygon clipping
PPTX
Window to viewport transformation&matrix representation of homogeneous co...
PPT
Polygon Fill
PPTX
Overview of Graphics System
PPT
Raster scan system
Clipping in Computer Graphics
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
Visible surface detection in computer graphic
Projection In Computer Graphics
Computer graphics basic transformation
Computer Graphic - Lines, Circles and Ellipse
Window to viewport transformation
Composite transformations
The sutherland hodgeman polygon clipping algorithm
Polygon filling
Polygon filling algorithm
Back face detection
Circle drawing algo.
Unit 3
sutherland- Hodgeman Polygon clipping
Window to viewport transformation&matrix representation of homogeneous co...
Polygon Fill
Overview of Graphics System
Raster scan system
Ad

Viewers also liked (9)

PPTX
Backtracking
PPTX
Hamiltonian path
PDF
Euler and hamilton paths
PPTX
Backtracking
PDF
backtracking algorithms of ada
PPTX
8 queens problem using back tracking
PPT
Lecture filling algorithms
PPTX
Area filling algo
Backtracking
Hamiltonian path
Euler and hamilton paths
Backtracking
backtracking algorithms of ada
8 queens problem using back tracking
Lecture filling algorithms
Area filling algo
Ad

Similar to Fill area algorithms (20)

PPTX
CS401_M2_L6_Solid Area Scan Conversion.pptx
PPTX
Fill area algorithm on computer graphics course
PPTX
attribute.pptx
PPTX
ATTRIBUTES OF OUTPUT PRIMITIVES IN COMPUTER GRAPHICS
PPT
Unit-2 PPT.ppt
PPTX
B. SC CSIT Computer Graphics Unit 1.3 By Tekendra Nath Yogi
PPT
14485616.ppt
PPTX
Area Filling Algokjgkjgkjgkjgkjghkgjkjggkjgjkgg
PDF
cg mod2.pdf
PPTX
Area Filling Algorithm used in computer graphics
PDF
CG_MODULE2 (1) Fill Area Primitives Polygon Fill Areas
PPTX
UNIT2.pptx
PPTX
Hidden surface removal
PPT
99995327.ppt
PPTX
CSO PPT.pptx
PPTX
ch4.pptx
PPTX
Image representation
PPT
1516 contouring
PPTX
Hidden surface removal algorithm
PPT
Seed filling algorithm
CS401_M2_L6_Solid Area Scan Conversion.pptx
Fill area algorithm on computer graphics course
attribute.pptx
ATTRIBUTES OF OUTPUT PRIMITIVES IN COMPUTER GRAPHICS
Unit-2 PPT.ppt
B. SC CSIT Computer Graphics Unit 1.3 By Tekendra Nath Yogi
14485616.ppt
Area Filling Algokjgkjgkjgkjgkjghkgjkjggkjgjkgg
cg mod2.pdf
Area Filling Algorithm used in computer graphics
CG_MODULE2 (1) Fill Area Primitives Polygon Fill Areas
UNIT2.pptx
Hidden surface removal
99995327.ppt
CSO PPT.pptx
ch4.pptx
Image representation
1516 contouring
Hidden surface removal algorithm
Seed filling algorithm

More from Kumar (20)

PPT
Graphics devices
PDF
region-filling
PDF
Bresenham derivation
PPT
Bresenham circles and polygons derication
PPTX
Introductionto xslt
PPTX
Extracting data from xml
PPTX
Xml basics
PPTX
XML Schema
PPTX
Publishing xml
PPTX
DTD
PPTX
Applying xml
PPTX
Introduction to XML
PDF
How to deploy a j2ee application
PDF
JNDI, JMS, JPA, XML
PDF
EJB Fundmentals
PDF
JSP and struts programming
PDF
java servlet and servlet programming
PDF
Introduction to JDBC and JDBC Drivers
PDF
Introduction to J2EE
PPT
Android tutorial (2)
Graphics devices
region-filling
Bresenham derivation
Bresenham circles and polygons derication
Introductionto xslt
Extracting data from xml
Xml basics
XML Schema
Publishing xml
DTD
Applying xml
Introduction to XML
How to deploy a j2ee application
JNDI, JMS, JPA, XML
EJB Fundmentals
JSP and struts programming
java servlet and servlet programming
Introduction to JDBC and JDBC Drivers
Introduction to J2EE
Android tutorial (2)

Recently uploaded (20)

PDF
LDMMIA Reiki Yoga Workshop 15 MidTerm Review
PDF
Landforms and landscapes data surprise preview
PPTX
UNDER FIVE CLINICS OR WELL BABY CLINICS.pptx
PDF
Types of Literary Text: Poetry and Prose
PPTX
Introduction and Scope of Bichemistry.pptx
PDF
English Language Teaching from Post-.pdf
PPTX
Renaissance Architecture: A Journey from Faith to Humanism
PDF
High Ground Student Revision Booklet Preview
PDF
Sunset Boulevard Student Revision Booklet
PPTX
Onica Farming 24rsclub profitable farm business
PPTX
Revamp in MTO Odoo 18 Inventory - Odoo Slides
DOCX
UPPER GASTRO INTESTINAL DISORDER.docx
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
Insiders guide to clinical Medicine.pdf
PPTX
Nursing Management of Patients with Disorders of Ear, Nose, and Throat (ENT) ...
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Open Quiz Monsoon Mind Game Final Set.pptx
PPTX
How to Manage Starshipit in Odoo 18 - Odoo Slides
PPTX
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
PPTX
Cardiovascular Pharmacology for pharmacy students.pptx
LDMMIA Reiki Yoga Workshop 15 MidTerm Review
Landforms and landscapes data surprise preview
UNDER FIVE CLINICS OR WELL BABY CLINICS.pptx
Types of Literary Text: Poetry and Prose
Introduction and Scope of Bichemistry.pptx
English Language Teaching from Post-.pdf
Renaissance Architecture: A Journey from Faith to Humanism
High Ground Student Revision Booklet Preview
Sunset Boulevard Student Revision Booklet
Onica Farming 24rsclub profitable farm business
Revamp in MTO Odoo 18 Inventory - Odoo Slides
UPPER GASTRO INTESTINAL DISORDER.docx
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Insiders guide to clinical Medicine.pdf
Nursing Management of Patients with Disorders of Ear, Nose, and Throat (ENT) ...
human mycosis Human fungal infections are called human mycosis..pptx
Open Quiz Monsoon Mind Game Final Set.pptx
How to Manage Starshipit in Odoo 18 - Odoo Slides
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
Cardiovascular Pharmacology for pharmacy students.pptx

Fill area algorithms

  • 2. Polygon Fill Algorithm • Different types of Polygons – Simple Convex – Simple Concave – Non-simple : self-intersecting – With holes Convex Concave Self-intersecting
  • 3. Polygon Fill Algorithm • A scan-line fill algorithm of a region is performed as follows: 1. Determining the intersection positions of the boundaries of the fill region with the screen scan lines. 2. Then the fill colors are applied to each section of a scan line that lies within the interior of the fill region. • The simplest area to fill is a polygon, because each scan-line intersection point with a polygon boundary is obtained by solving a pair of simultaneous linear equations, where the equation for the scan line is simply y = constant.
  • 4. Example • Consider the following polygon:
  • 5. Example • For each scan line that crosses the polygon, the edge intersections are sorted from left to right, and then the pixel positions between, and including, each intersection pair are set to the specified fill color. • In the previous Figure, the four pixel intersection positions with the polygon boundaries define two stretches of interior pixels.
  • 6. Example • The fill color is applied to the five pixels: –from x = 10 to x = 14 and • To the seven pixels –from x = 18 to x = 24.
  • 7. Polygon Fill Algorithm • However, the scan-line fill algorithm for a polygon is not quite as simple • Whenever a scan line passes through a vertex, it intersects two polygon edges at that point. • In some cases, this can result in an odd number of boundary intersections for a scan line.
  • 8. Polygon Fill Algorithm • Consider the next Figure. • It shows two scan lines that cross a polygon fill area and intersect a vertex. • Scan line y’ intersects an even number of edges, and the two pairs of intersection points along this scan line correctly identify the interior pixel spans. • But scan line y intersects five polygon edges.
  • 10. Polygon Fill Algorithm • To identify the interior pixels for scan line y, we must count the vertex intersection as only one point. • Thus, as we process scan lines, we need to distinguish between these two cases.
  • 11. Polygon Fill Algorithm • We can detect the difference between the two cases by noting the position of the intersecting edges relative to the scan line. • For scan line y, the two edges sharing an intersection vertex are on opposite sides of the scan line. • But for scan line y’, the two intersecting edges are both above the scan line.
  • 12. Polygon Fill Algorithm • A vertex that has adjoining edges on opposite sides of an intersecting scan line should be counted as just one boundary intersection point. • We can identify these vertices by tracing around the polygon boundary in either clockwise or counterclockwise order and observing the relative changes in vertex y coordinates as we move from one edge to the next.
  • 13. Polygon Fill Algorithm • If the three endpoint y values of two consecutive edges increase or decrease, we need to count the shared (middle) vertex as a single intersection point for the scan line passing through that vertex. • Otherwise, the shared vertex represents a local extremum (minimum or maximum) on the polygon boundary, and the two edge intersections with the scan line passing through that vertex can be added to the intersection list.
  • 14. Area Fill Algorithm • An alternative approach for filling an area is to start at a point inside the area and “paint” the interior, point by point, out to the boundary. • This is a particularly useful technique for filling areas with irregular borders, such as a design created with a paint program. • The algorithm makes the following assumptions – one interior pixel is known, and – pixels in boundary are known.
  • 15. Area Fill Algorithm • If the boundary of some region is specified in a single color, we can fill the interior of this region, pixel by pixel, until the boundary color is encountered. • This method, called the boundary-fill algorithm, is employed in interactive painting packages, where interior points are easily selected.
  • 16. Example • One can sketch a figure outline, and pick an interior point. • The figure interior is then painted in the fill color as shown in these Figures
  • 17. Area Fill Algorithm • Basically, a boundary-fill algorithm starts from an interior point (x, y) and sets the neighboring points to the desired color. • This procedure continues until all pixels are processed up to the designated boundary for the area.
  • 18. Area Fill Algorithm • There are two methods for processing neighboring pixels from a current point. 1. Four neighboring points. – These are the pixel positions that are right, left, above, and below the current pixel. – Areas filled by this method are called 4- connected.
  • 19. Area Fill Algorithm 2. Eight neighboring points. – This method is used to fill more complex figures. – Here the set of neighboring points to be set includes the four diagonal pixels, in addition to the four points in the first method. – Fill methods using this approach are called 8- connected.
  • 21. Area Fill Algorithm • Consider the Figure in the next slide. • An 8-connected boundary-fill algorithm would correctly fill the interior of the area defined in the Figure. • But a 4-connected boundary-fill algorithm would only fill part of that region.
  • 23. Area Fill Algorithm • The following procedure illustrates a recursive method for painting a 4-connected area with a solid color, specified in parameter fillColor, up to a boundary color specified with parameter borderColor. • We can extend this procedure to fill an 8- connected region by including four additional statements to test the diagonal positions (x ± 1, y ± 1).
  • 25. Area Fill Algorithm • Some times we want to fill in (or recolor) an area that is not defined within a single color boundary. • Consider the following Figure.
  • 26. Area Fill Algorithm • We can paint such areas by replacing a specified interior color instead of searching for a particular boundary color. • This fill procedure is called a flood-fill algorithm.
  • 27. Area Fill Algorithm • We start from a specified interior point (x, y) and reassign all pixel values that are currently set to a given interior color with the desired fill color. • If the area we want to paint has more than one interior color, we can first reassign pixel values so that all interior points have the same color.
  • 28. Area Fill Algorithm • Using either a 4-connected or 8- connected approach, we then step through pixel positions until all interior points have been repainted. • The following procedure flood fills a 4- connected region recursively, starting from the input position.
  • 30. Problems with Fill Algorithm (1) • Recursive boundary-fill algorithms may not fill regions correctly if some interior pixels are already displayed in the fill color. • This occurs because the algorithm checks next pixels both for boundary color and for fill color.
  • 31. Problems with Fill Algorithm • To avoid this, we can first change the color of any interior pixels that are initially set to the fill color before applying the boundary-fill procedure. • Encountering a pixel with the fill color can cause a recursive branch to terminate, leaving other interior pixels unfilled.
  • 32. Problems with Fill Algorithm (2) • This procedure requires considerable stacking of neighboring points, more efficient methods are generally employed. • These methods fill horizontal pixel spans across scan lines, instead of proceeding to 4-connected or 8-connected neighboring points.
  • 33. Problems with Fill Algorithm (2) • Then we need only stack a beginning position for each horizontal pixel span, instead of stacking all unprocessed neighboring positions around the current position. • Starting from the initial interior point with this method, we first fill in the contiguous span of pixels on this starting scan line.
  • 34. Problems with Fill Algorithm (2) • Then we locate and stack starting positions for spans on the adjacent scan lines, where spans are defined as the contiguous horizontal string of positions bounded by pixels displayed in the border color. • At each subsequent step, we retrieve the next start position from the top of the stack and repeat the process.
  • 35. Area Fill Algorithm The algorithm can be summarized as follows: 1. define seed point, 2. fill scan line containing seed point, 3. for scan lines above and below, define new seed points as: i) first point inside left boundary, ii) subsequent points within boundary whose left neighbor is outside, 4. d) repeat algorithm with the new set of seed points.
  • 36. Example • In this example, we first process scan lines successively from the start line to the top boundary. • After all upper scan lines are processed, we fill in the pixel spans on the remaining scan lines in order down to the bottom boundary. • The leftmost pixel position for each horizontal span is located and stacked, in left to right order across successive scan lines.
  • 37. Example • In (a) of this figure, the initial span has been filled, and starting positions 1 and 2 for spans on the next scan lines (below and above) are stacked.
  • 38. Example • In Fig.(b), position 2 has been unstacked and processed to produce the filled span shown, and the starting pixel (position 3) for the single span on the next scan line has been stacked.
  • 39. Example • After position 3 is processed, the filled spans and stacked positions are as shown in Fig. (c).
  • 40. Example • And Fig.(d) shows the filled pixels after processing all spans in the upper right of the specified area.
  • 41. Example • Position 5 is next processed, and spans are filled in the upper left of the region; then position 4 is picked up to continue the processing for the lower scan lines.
  • 42. Example • Finish up the upper scan lines.
  • 43. Example • Start the bottom scan lines.
  • 44. Example • Finish up the bottom scan lines.
  • 45. Example • Finish up the bottom scan lines.