1. عَلَّمَهُ الْبَيَانَ He has taught him speech (and intelligence).
Allah says
عَلَّمَهُ الْبَيَانَ
He has taught him speech (and intelligence).
Al-Qur'an, (Ar-Rahman)

2. Lecture-3 Graphics Primitives: Filling Algos
Majed Bouchahma
Computer Science Section
Department of Physical and Mathematical Science

3. Filled Area Primitives
Two basic approaches to area filling on raster systems:
Determine the overlap intervals for scan lines that cross the area (scan-line)
Start from an interior position and point outward from this point until the boundary condition reached (fill method)
Scan-line: simple objects, polygons, circles,..
Fill-method: complex objects, interactive fill.

4. Scan-line Polygon Fill
This scan line passes through E3, E4 and E5 producing 3 intersection points, two of which are at V5: Cannot be paired!!
A polygon is characterized by its vertices
An edge results by drawing a line segment from one vertex to the next
Polygon representation
E1: V1* to V2
E2: V2 to V3
To fill the polygon’s interior we can use a simple algorithm
For each scan line from the y-coordinate of the lowest vertex to the y-coordinate of the highest vertex
Find the intersections of the scan with all edges to result in pairs of intersection points
Fill the area between every two intersection points after sorting the intersection points from L to R
This scan line passes through E1, E2, E3 and E5 producing 4 intersection points V6
(18,40) V8
(11,38) E6 E7 E8 V7
(16,35) V3
(12,20) E5 V1
(0,20) E1 E2 E3 V2
(10,10) E4 V5
(20,4) V4
(15,0)
We would like V4 to be counted twice but V5 to be counted only once
This scan line passes through E3 and E4 producing 2 intersection points at V4

5. Solution to the vertex counting problem
Make a clockwise or counter-clockwise traversal on edges. Check if y is monotonically increasing or decreasing. If direction changes, double intersection, otherwise single intersection. 2 1 a b c d a b c d

6. Scan Line Polygon Fill: Handling Vertices…
Controlling the number of intersections
Shorten the edge to split those vertices that should be counted as one intersection 2 2 2 a 2 1
If the end point y coordinates of two edges are decreasing, decrease the y-value of the upper end point of the next edge by 1 c 2
If the end point y coordinates of two edges are increasing, decrease the y-value of the upper end point of current edge by 1 b d 1 2

7. Solution to the vertex counting problem
This scan line passes through E3, E4 and E5 producing 3 intersection points, two of which are at V5: Cannot be paired!!
Polygon representation
E1: V1* to V2
E2: V2 to V3 …
This scan line passes through E1, E2, E3 and E5 producing 4 intersection points V6
(18,40) V8
(11,38) E6 E7 E8 V7
(16,35) V3
(12,20) V1
(0,20) E5
V*1
(0-dx,19) E1 E2 E3 V2
(10,10) E4 V5
(20,4)
V*5
(20-dx,3) V4
(15,0)
We would like V4 to be counted twice but V5 to be counted only once
This scan line passes through E3 and E4 producing 2 intersection points at V4 7

8. Scan Line Polygon Fill: Finding Intersection Points
How do we find intersection points of scan lines with the polygon edges?
If the intersection point of scan-line at yk with an edge is known to be (xk,yk) then the intersection point of the next scan line at yk+1=yk+1 can be found to be (xk+1,yk+1)
All we need is xk+1
yk+1=yk+1
xk+1 Δy Δx

9. Scan Line Polygon Fill: Finding Intersection Points
If the slope of an edge is known to be m=Δy/Δx where Δx and Δy are differences between the x and y coordinates of the two end points of that edge, then

10. Scan Line Polygon Fill: Finding Intersection Points
Thus, If the intersection point of scan-line at yk with an edge is known to be (xk,yk) then the intersection point of the next scan line at yk+1=yk+1 is (xk+round(1/m),yk+1)
However this requires floating point operations

11. Scan Line Polygon Fill: Finding Intersection Points
An all integer computation algorithm for finding the intersection points of an edge (with end points at (xL,yL) and (xU, yU) with slope m) with different scan lines is as follows
Set y=yL, x=xL, c=0, Δy=yU-yL, Δx=xU-xL
Add (xL,yL) as an intersection point
While (y<yU)
y=y+sgn(Δx)
c=c+2*sgn(Δx)*Δx
While (c≥Δy)
x=x+1
c=c-2Δy
Add (x,y) as an intersection point
(xU, yU)
yk+1=yk+1
xk+1 Δy
(xL,yL)

12. Finding Intersectionsy x c 1 40 2 28 3 16 4 44 5 32 6 20 7 8 -4 36 9 24 10 12 11 13 14 15 17 18 19
Consider an edge from (0,0) to (20,6)
Set y=yL, x=xL, c=0, Δy=yU-yL, Δx=xU-xL
Add (xL,yL) as an intersection point
While (y<yU)
y=y+1
c=c+2Δx
While (c≥Δy)
x=x+1
c=c-2Δy
Add (x,y) as an intersection point

13. Scan Line Polygon Fill: Finding Intersection Points

14. Finding Intersection Points
The integer based intersection point finding algorithm keeps on accumulating the fractional part until it exceeds one at which the x coordinate is incremented by an additional one

15. Complete Scan Line Filling Algorithm
Make a (counter) clockwise traversal of the edges and shorten single intersection edges
For each edge, store its lower and upper vertices along with Δy and Δx values
For each scan line from the minimum y value to maximum y value in the vertices of the polygon
Find the intersection of the scan line with all edges through which it passes and store the corresponding x- intersection coordinates for all these edges sorted in increasing values
Fill the scan line between every two intersection points
clear
P=10*[0 0; 30 10; 40,90 ;50 40;45 30];
clc
N=size(P,1);
Po=P;
E=[E; P(k,:) P(k+1,:)]
for k=1:N-1
E=[];
Eo=E;
E(end+1,:)=[P(end,:) P(1,:)];
end
Ne=size(E,1);
yL=zeros(Ne,1);
xU=zeros(Ne,1);
xL=zeros(Ne,1);
C=xL;
XY=zeros(Ne,2);
yU=zeros(Ne,1);
for k=1:size(E,1)
dpk_1=E(k+1,4)-E(k+1,2);
dpk=E(k,4)-E(k,2);
if(k<Ne)
if(((dpk>0)&(dpk_1>0)))
E(k+1,2)=E(k+1,2)-1;
elseif ((dpk<0)&(dpk_1<0))
E(k,4)=E(k,4)-1;
if(E(k,2)>E(k,4))
L=1;U=3;
else
L=3;U=1;
XY(k,:)=[xL(k) yL(k)];
xU(k)=E(k,U);yU(k)=E(k,U+1);
xL(k)=E(k,L);yL(k)=E(k,L+1);
ymin=min(yL)
X=cell(ymax-ymin+1,1);
ymax=max(yU)
dX=xU-xL;
plot([P(:,1);P(1,1)],[P(:,2);P(1,2)],'o-')
figure
dY=yU-yL;
for m=1:length(X)
hold on
if((yL(k)<=y) & (yU(k)>=y))
for k=1:Ne
y=ymin+m;
while(C(k)>=dY(k))
C(k)=C(k)+2*sign(dX(k))*dX(k);
XY(k,2)=y;
XY(k,1)=XY(k,1)+sign(dX(k));
C(k)=C(k)-2*dY(k);
% Z=[Z;y x c];
X{m}=[X{m} XY(k,1)];
y=ymin+k;
x=sort(X{k});
for k=1:length(X)
plot([x(m) x(m+1)],[y y],'-')
for m=1:2:length(x)
plot([E(k,1) E(k,3)],[E(k,2) E(k,4)],'r-')

16. Complete Algorithm Tweaks
Special data structures e.g. linked lists and tables can be used
Bucket sort or some other sorting algorithm can be employed for efficient sorting

17. Result of Scan Line Fill Algorithm

18. Results of Scan Line Filling Algorithm

19. Results of Scan Line Filling Algorithm

20. Boundary Fill Algorithm
Start at a point inside a continuous arbitrary shaped region and paint the interior outward toward the boundary. Assumption: boundary color is a single color
(x,y): start point; b:boundary color, fill: fill color void boundaryFill4(x,y,fill,b) { cur = getpixel(x,y) if (cur != b) AND (cur != fill) { setpixel(x,y,fill); boundaryFill4(x+1,y,fill,b); boundaryFill4(x-1,y,fill,b); boundaryFill4(x,y+1,fill,b); boundaryFill4(x,y-1,fill,b); } }

21. Boundary Fill at Work!

22. Boundary Fill
4 neighbors vs 8 neighbors: depends on definition of continuity. 8 neighbor: diagonal boundaries will not stop
Recursive, so slow. For large regions with millions of pixels, millions of function calls.
Stack based improvement: keep neighbors in stack
Number of elements in the stack can be reduced by filling the area as pixel spans and pushing only the pixels with pixel transitions.

23. Check the neighbor pixels as filling the area line by line
If pixel changes from null to boundary or null when scan-line finishes, push the pixel information on stack.
After a scan-line finishes, pop a value from stack and continue processing.
Stack after scan line 10 9 7 8 3 2 2 3 1 1 4 11 5 12 6

24. Flood-Fill
Similar to boundary fill. Algorithm continues while the neighbor pixels have the same color.
void FloodFill4(x,y,fill,oldcolor) { cur = getpixel(x,y) if (cur == oldcolor) { setpixel(x,y,fill); FloodFill4(x+1,y,fill,oldcolor); FloodFill4(x-1,y,fill,oldcolor); FloodFill4(x,y+1,fill,oldcolor); FloodFill4(x,y-1,fill,oldcolor); } }

25. Character Generation Typesetting fonts:
Bitmap fonts: simple, not scalable.
Outline fonts: scalable, flexible, more complex process
Points and tangents of the boundary
Pixelwise on/of information

26. End of Lecture-3
Work expands so as to fill the time available for its completion.
Cyril Northcote Parkinson (1909–1993)
British political scientist, historian, and writer.
Parkinson's Law (1958).