Of Polygons and Triangles

• We tend to like triangles in graphics systems.
  • They are easy and predictable in data size.
  • They are simple
  • They can be used to tessellate the plane, and can be used to create more complex polygons.
  • They are never concave.
  • They are never complex.
  • It is easy to test for degenerate cases (points or lines)
  • They are co-plainer.
• A polygon is simple if the sides are straight, non-intersecting and closed.
• Filling a polygon.
  • The most common algorithm is the scan line algorithm.
  • 
  • In this algorithm, endpoints of a polygon are sorted by the y coordinate, then by the x coordinate.

    • F (55,50)
      A (25,40)
      G (35,25)
      B (10,20)
      D (30,10)
      E (45,10)
      C (25,5)
      	

    • Note the tie breaker in 4 and 5.
  • We create an ActiveEdge list, which is empty.
  • The algorithm then proceeds from y= 50 to y = 5.
    • When an endpoint is encountered, we either
      • Add two lines to the current list of edges.
      • Remove two lines from the current list of edges
      • Remove one line and add another from the current list of edges.
      • Or add no lines to the current list of edges.
      • And, depending on the setup we will draw the point in the edge color (or possibly the fill color).
    • For example, at y = 50, we encounter point F
      • Two line segments FG and EF are under consideration.
      • Since F is the maximum value for both line segments, both are added to the ActiveEdge list.
      • We draw point F in the edge color.
      • We compute 2δx and 2Δy, D, and x and y for each line.

      • Active Edge List
              EF : x = 55, y = 50, ΔX = 10, Δy = 40, p = 0
              FG : x = 55, y = 50, ΔX = 20, Δy = 25, p = 0
        		 

      • Currently there is no preference for order as they are
    • At the next iteration, y = 49
      • Step through the list and generate new x and Y coordinates using Bresenham's

      • Active Edge List
              EF : x = 55, y = 49, ΔX = 10, Δy = 40, p = ?
              FG : x = 54, y = 49, ΔX = 20, Δy = 25, p = ?
        		 

      • Note, I am making up data, I do not have a Bresenham's written to do this. This would be a neat animation project to show this in javascript.
      • After (or while) we generate these points, we sort by x coordinate

      • Active Edge List
              FG : x = 54, y = 49, ΔX = 20, Δy = 25, p = ?
              EF : x = 55, y = 49, ΔX = 10, Δy = 40, p = ?
        		 

      • We can now draw a scan line from (54, 49) to (55,49).
        • Draw the endpoints with the edge color.
        • Draw the non endpoints with the fill color.
      • 
    • When y = 40, segments AB and AG will be added to the list.

      • Active Edge List
              AB : x = 25, y = 40  ...
              AG : x = 25, y = 40
              FG : x = 46, y = 49 ...
              EF : x = 53, y = 49 ...
        		 

      • And we just traverse this list, drawing lines between successive endpoints.
      • 
      • At y=25 line segments AG and FG will drop out.
      • At y=20 line segment AB drops out and BC is added.
      • At y = 10,
        • FE drops out, CD is added.
        • DE is a special case, since it has slope 0, it is just drawn, in the edge color if specified.
        • Notice the list will only be BC - CD
  • Some Notes:
    • Maintaining the dynamic list of points is somewhat expensive.
    • If we only had triangles, there are at most two edges active at any time.
    • Drawing a horizontal line is as low cost as it gets.
      • O(n) where n is the number of pixels in the line.
      • Furthermore there is only one increment and one test

        for(x=xs; x < xe; x++) {
           plot(x,y)
        }
        		

    • Endpoints are maintained with Bresenham's
      • O(n) on the number of active endpoints
      • A comparison and two adds at worst
    • Maintaining order of active points:
      • Due to the ordering of the active points, and the nature of the change, the bubble sort might be the best sort.
      • And this is the ONLY place that I have seen this sort recommended for ANYTHING.
      • While this is potentially O(n²) on the number of active points.
        • The number of active points should be small
        • And the movement between positions should be
          • Non-existent for simple polygons. (Other than end point adjustment, which can be done when the end-points are added.
• A polygon is complex if the sides cross.
• Filling a complex polygon presents a problem.
  • 
  • What is the inside of the polygon?
  • Notice the ab and ed cause points to be swapped in the list.
  • 
  • In this case, region 1 and 2 will be filled.
  • But region 3 will not be.
  • 
  • But it probably should be.
  • And Region 5 will not be filled. (as expected)
  • 
• There are two ways to test to see if something is inside of a complex polygon.
  • The Even-Odd Rule
    • This rule counts the number of edges we have crossed when scan converting a polygon.
    • If the edge is an even number, then we turn the pen on.
    • If the edge is an odd number, we turn the pen off
    • At inflection points, change.
    • At local max and min, no change.
    • For horizontal lines, consider the connections at either endpoint of the line.
    • This algorithm requires no knowledge of the "real" order of the points.
  • the Non-Zero Winding Rule
    • This requires us to know the order the points of the polygon are specified.
    • And assumes that the points either go clockwise or counterclockwise.
    • And that all polygons are specified this way.
    • We will assume a counter-clockwise specification.
    • The points would be abcdefghij
    • With respect to the first scan line.
      • 
      • The crossing of fd is from left to right, so increment the count and start drawing, count = 1
      • The crossing of ba is from left to right, so increment the count and continue drawing, count =2
      • The crossing of de is from right to left, so decrement the count, but since it is not 0, continue drawing, count =2
      • The crossing of ij is from right to left, so decrement the count, since the count is 0 stop drawing.
      • So regions 1, 2 and 3 are filled.
    • With respect to the second scan line:
      • 
      • The crossing of ab is from left to right: so start drawing, count =1
      • The crossing of ij is from right to left: decrement the count, the count =0 so stop drawing.
      • The crossing of fg is from left to right: increment the count, start drawing.
      • The crossing of de is from right to left: decrement the count, the count =0 so stop drawing.
      • So region 4 is filled, and region 5 is not.
    • An example from svg.
      • The even-odd fill rule

      • <svg width="200px", height="200px", viewbox="0 0 200 200">
              <polygon
                  points="70,60, 30,160 90,190 170,150 30,70 20,90 
        	          140,150 100,170 60,150 110,80" 
        	  style="fill-rule: evenodd; fill: #ccffcc; stroke: green;"/>
        </svg>
        	    

      • The nonzero fill rule

      • <svg width="200px", height="200px", viewbox="0 0 200 200">
               <polygon
                        points="70,60, 30,160 90,190 170,150 30,70 20,90 
        	          140,150 100,170 60,150 110,80" 
        	  style="fill-rule: nonzero; fill: #ccffcc; stroke: green;"/>
        </svg>
        

  • Notice that triangles NEVER need this complexity.
  • By the way, if we are doing 3d polygons
    • We can calculate the "z" component of each pixel and store it.
    • We can test to see if the current "z" component of the pixel and the value stored in the frame buffer is
      • Less: Draw the pixel, replace the z value.
      • Greater: Don't draw the pixel.
      • The same: some blend of the pixel and current value.
      • For Anthony, we could also take alpha values into account here.
  • Open GL has stopped drawing polygons in favor of triangles.