Chapter 3: Output Primitives

1
OUTPUT PRIMITIVES
● Graphic SW and HW provide
subroutines to describe a scene in terms of
basic geometric structures called output
primitives.
● Đồ họa SW và HW cung cấp các chương
trình con để mô tả một cảnh theo các cấu trúc
hình học cơ bản được gọi là nguyên thủy đầu
ra.

● Output primitives are combined to form ● Nguyên thủy đầu ra được kết hợp để tạo
complex structures thành các cấu trúc phức tạp

● Simplest primitives ● Nguyên thủy đơn giản nhất

– Point (pixel) - Điểm (pixel)

- Đoạn đường
– Line segment
- Vòng tròn
– Circle

2
 Screen coordinates
(0,0) x

POINT y
(399,299)
xmax,ymax
● To load an intensity value into the frame buffer at a position
corresponding to column x along scan line y,
(px,py)
setpixel (x, y, color)
x
● To retrieve the current frame buffer intensity setting for a specified (0,0)
location we use a low level function , xmin,ymin
color = getpixel (x, y) (799,599)
Setting a pixel in OpenGL
 glBegin(GL_POINTS);
y
glVertex2f(px,py);
glEnd();
● Để tải một giá trị cường độ vào bộ đệm khung tại vị trí tương
Setting Orthogonal Camera ứng với cột x dọc theo đường quét y,
 glMatrixMode(GL_PROJECTION); setpixel (x, y, color)
glLoadIdentity(); ● Để truy xuất cài đặt cường độ bộ đệm khung hiện tại cho một vị
gluOrtho2D(xmin,xmax,ymin,ymax);
trí đã chỉ định, chúng ta sử dụng chức năng mức thấp,
color = getpixel (x, y)
3
LINES
A line segment is completely defined in terms of its
two endpoints.
A line segment is thus defined as:
 Line_Seg = { (x1, y1), (x2, y2) }
A line is produced by means of illuminating a set of
intermediary pixels between the two endpoints.
All line drawing algorithms make use of the fundamental
equations: Line Eqn.
Một đoạn đường được xác định hoàn toàn theo hai điểm cuối của nó.
Do đó, một phân đoạn dòng được định nghĩa là:
 Line_Seg = {(x1, y1), (x2, y2)}
Một dòng được tạo ra bằng cách chiếu sáng một tập hợp các pixel trung
gian giữa hai điểm cuối.
Tất cả các thuật toán vẽ đường đều sử dụng các phương trình cơ bản:
Đường Eqn.
4
 Parametric

LINES P(u) = P1 + u(P2 - P1)

u [0,1]
X = x1 + u( x2 - x1 )
Explicit: y = f(x) Y = y1 + u( y2 - y1 )
y = m.x + b
Slope m = y2 − y1 / x2 − x1 = Δy / Δx
y-intercept b = y1 − m.x1
x-interval→Δx = Δy / m
y-interval→ Δy = m Δx
Implicit:
(y2-y1)x - (x2-x1)y + x2y1 - x1y2 = 0
rx + sy + t = 0
s = -(x2-x1 )
r = (y2-y1) và t = x2y1 - x1y2
5
 u E [0 1]

P1 ( x1, Y1) P(ui) = p1+a

a = k P1P2
P1P2 = P2-P1
a a = k(P2 – P1 )
ui
P(ui) = k.(P2—P1) + p1
P(ui) = ui(p2-p1 ) + p1
P(ui) = (1-ui)p1 + ui.p2

P(u) = [x (u) y(u) ]= (1-u) p1 + u.p2

P(ui) P2( x2, y2)

6
P1 = [x1 y1] = 2,2
P2 = 6,6 = [x2 y2 ]

Tìm tọa độ của điểm khi u=0

? : u= 1
? u=1/2

7
 WHY SCAN CONVERSION?
RASTERIZATION: Process of determining
which pixels provide the best
approximation to a desired line on the
screen.
SCAN CONVERSION: Combination of
rasterization and generating the picture in
RASTERIZATION: Quá trình xác định pixel nào cung
scan line order. cấp xấp xỉ tốt nhất cho một dòng mong muốn trên màn
hình.
Graphics System convert each primitive
from its geometric definition into a set of CHUYỂN ĐỔI SCAN: Kết hợp rasterization và tạo hình
ảnh theo thứ tự dòng quét.
Pixels that make up the primitive in the
Image Space. Hệ thống đồ họa chuyển đổi từng nguyên thủy từ định
nghĩa hình học của nó thành một tập hợp các pixel tạo
nên nguyên thủy trong Không gian hình ảnh.
8
CONSTRAINTS OF LINE SCAN CONVERSION
● Converting output primitives into frame
buffer updates.
Choose which pixels contain which intensity
value.
● Constraints
– Straight lines should appear as a straight
line
– Primitives should start and end accurately
– Primitives should have a consistent brightness
along their length
– They should be drawn rapidly
● Chuyển đổi nguyên thủy đầu ra thành cập nhật
bộ đệm khung.
Chọn pixel nào chứa giá trị cường độ nào.
● Những ràng buộc
- Đường thẳng sẽ xuất hiện dưới dạng đường thẳng
- Nguyên thủy nên bắt đầu và kết thúc chính xác
- Người nguyên thủy nên có độ sáng nhất quán dọc
theo chiều dài của chúng
- Chúng nên được rút ra nhanh chóng
9
 LINE DRAWING ALGORITHMS

❑Digital Differential Analyzer (DDA)

Algorithm

❑Bresenham’s Line Algorithm

❑Parallel Line Algorithm

10
DIRECT SCAN CONVERSION

11
 DDA
A line algorithm Based on calculating either Δy
or Δx using the above equations.
If m ≤ 1 then take Δx = 1
Compute successive y by
 yk+1 = yk + m (1)

Một thuật toán vẽ đường Dựa trên việc tính toán

Δy hoặc Δx bằng các phương trình trên.
Nếu m ≤ 1 thì lấy Δx = 1
Tính liên tiếp y bằng
 yk+1 = yk + m (1)
12
 DDA
Subscript k takes integer values starting
from 1, for the first point, and increases
by 1 until the final end point is reached.
Since 0.0 < m ≤ 1.0, the calculated y
values must be rounded to the nearest
integer pixel position.

Đăng ký k lấy các giá trị nguyên bắt đầu từ 1,

cho điểm đầu tiên và tăng 1 cho đến khi đạt đến
điểm cuối cuối cùng.
Vì 0,0 <m ≤ 1,0, các giá trị y được tính phải
được làm tròn đến vị trí pixel nguyên gần nhất.
13
 DDA PSEUDO-CODE
DDA(int x1, int y1, int x2, int x1) {
int x, y;
int xinc, yinc; Q: For each step, how many floating point
int numsteps; operations are there?
numsteps = x2 – x1
xinc = 1 ; / pixel ; A: 4
yinc = (y2 – y1) / numsteps; ; m
x = x1; Q: For each step, how many integer
y = y1; operations are there?
ColorPixel(x,Round(y));
for (int i=0; i<numsteps; i++) { A: 2
x += xinc;
y += yinc;
SetPixel(x,Round(y));
}
}

14
 MERITS + DEMERITS
▪Faster than the direct use of line Eqn.
▪It eliminates the multiplication in line Eqn.
▪For long line segments, the true line Path may be mislead due to round off.
▪Rounding operations and floating-point arithmetic are still time consuming.
▪The algorithm can still be improved.
▪Other algorithms, with better performance also exist.

▪Nhanh hơn so với việc sử dụng trực tiếp đường Eqn.

▪Nó loại bỏ phép nhân trong đường Eqn.
▪Đối với các đoạn dài, Đường dẫn đúng có thể bị sai lệch do làm tròn.
▪Các phép toán làm tròn và số học dấu phẩy động vẫn còn tốn thời gian.
▪Thuật toán vẫn có thể được cải thiện.
▪Các thuật toán khác, với hiệu suất tốt hơn cũng tồn tại. 15
THE BRESENHAM LINE ALGORITHM
Jack Bresenham worked for 27 years
at IBM before entering academia.
Bresenham developed his famous
algorithms at IBM in the early 1960s
▪The Bresenham algorithm is another
incremental scan conversion algorithm
▪The big advantage of this algorithm
is that it uses only integer calculations
Jack Bresenham đã làm việc 27 năm tại IBM
trước khi vào học viện.
Bresenham đã phát triển các thuật toán nổi
tiếng của mình tại IBM vào đầu những năm
1960
Thuật toán Bresenham là một thuật toán
chuyển đổi quét gia tăng khác
Ưu điểm lớn của thuật toán này là nó chỉ sử
dụng các phép tính số nguyên
16
 BRESENHAM’S LINE
For a positive slope, 0 < m < 1 and line is
starting from left to right.

After plotting a pixel position (xk, yk) we have

two choices for next pixel:
 (xk +1, yk)
 (xk +1, yk+1)

17
 DERIVING THE BRESENHAM LINE ALGORITHM
y = m( xk + 1) + b
Then
d1 = y − yk
= m( xk + 1) + b − yk

And d 2 = ( yk + 1) − y
= yk + 1 − m( xk + 1) − b

Difference between separations

d1 − d 2 = 2m( xk + 1) − 2 yk + 2b − 1

18
 DERIVING THE BRESENHAM LINE ALGORITHM Constant=2Δy + Δx(2b-1) Which is
independent of pixel position

Defining decision parameter

pk = x( d1 − d 2 ) [1]
= 2y.xk − 2x. yk + c
c eliminated here
Sign of pk is same as that of d1-d2 for Δx>0 (left to right sampling)
pk +1 = 2y.xk +1 − 2x. yk +1 + c because xk+1 = xk + 1
pk +1 − pk = 2y ( xk +1 − xk ) − 2x( yk +1 − yk )

pk +1 = pk + 2y − 2x( yk +1 − yk ) yk+1-yk = 0 if pk < 0

yk+1-yk = 1 if pk ≥ 0
For Recursive calculation, initially
Substitute b = y0 – m.x0
p0 = 2y − x and m = Δy/Δx in [1]
19
ALGORITHM STEPS (|M|<1)
1.Input the two line endpoints and store the left endpoint in (x0,y0) void drawline(int x0, int y0, int x1, int y1)
{
int dx, dy, p, x, y;
2.Plot first point (x0,y0) dx=x1-x0; dy=y1-y0;
x=x0; y=y0;
3.Calculate constants Δx, Δy, 2Δy and 2 Δy- 2Δx, and obtain p0 = p=2*dy-dx;
2Δy – Δx
while(x<x1)
4.At each xk along the line, starting at k=0, perform the following {
if(p>=0) {
test: putpixel(x,y,7);
y=y+1;
If pk<0, the next point plot is (xk+1,yk) and p=p+2*dy-2*dx; }
else
Pk+1 = pk + 2Δy { putpixel(x,y,7);
p=p+2*dy; }
Otherwise, the next point to plot is (xk + 1, yk+1) and
x=x+1;
Pk+1 = pk + 2Δy - 2Δx }
}
5.Repeat step 4 Δx times

20
WHAT’S THE ADVANTAGE?
Answer: involves only the
calculation of constants Δx, Δy,
2Δy and 2Δy- 2Δx once and
integer addition and subtraction in
each steps
Hence the arithmetic involves
only integer addition and
subtraction of these two
constants.
Trả lời: chỉ liên quan đến việc tính
các hằng số Δx, y, 2Δy và 2Δy- 2Δx
một lần và phép cộng và trừ số
nguyên trong mỗi bước
Do đó, số học chỉ liên quan đến
phép cộng và phép trừ số nguyên
của hai hằng số này.
21
BRESENHAM LINE ALGORITHM SUMMARY
The Bresenham line algorithm has the
following advantages:
 An fast incremental algorithm
 Uses only integer calculations
Comparing this to the DDA
algorithm, DDA has the following
problems:
 Accumulation of round-off errors can
make the pixelated line drift away from
what was intended
 The rounding operations and floating
point arithmetic involved are time
consuming
Thuật toán vẽ đường Bresenham có
những ưu điểm sau:
 Một thuật toán gia tăng nhanh
 Chỉ sử dụng tính toán số nguyên
So sánh điều này với thuật toán DDA,
DDA có các vấn đề sau:
 Tích lũy các lỗi làm tròn có thể làm cho dòng
pixel bị trôi đi khỏi những gì đã được dự định
 Các hoạt động làm tròn và số học dấu phẩy
động có liên quan đều tốn thời gian
22
OPENGL OUTPUT FUNCTIONS
glBegin(GL_LINES); // Specify what to draw,
// here lines
// Geometric info via vertices:
glVertex*(); // 1
glVertex*(); // 2
... // ...
glEnd;
glVertex[234][isfd]
[234]: 2D, 3D, 4D
[isfd]: integer, short, float, double
For instance: glVertex2i(100, 25);

23
CIRCLE
24
SCAN CONVERTING CIRCLES
Explicit: y = f(x) y =  R2 − x2
Usually, we draw a quarter circle by incrementing x from 0 to R in unit steps and
solving for +y for each step.
Parametric: x = R cos  - by stepping the angle from 0 to 90
- avoids large gaps but still insufficient.
y = R sin 

Implicit: f(x) = x2+y2-R2 Thông thường, chúng ta vẽ một vòng tròn bằng cách tăng
x từ 0 đến R theo các bước đơn vị và giải + y cho mỗi
If f(x,y) = 0 then it is on the circle.
bước.
f(x,y) > 0 then it is outside the circle.
f(x,y) < 0 then it is inside the circle.

25
CIRCLE GENERATING ALGORITHMS
Problem 1 can be overcome by considering the symmetry of
circles as in Figure.
But it still requires a good deal of computation time.

Vấn đề 1 có thể được khắc phục bằng cách xem xét tính đối xứng của
các vòng tròn như trong Hình.
Nhưng nó vẫn đòi hỏi nhiều thời gian tính toán.

Efficient Solutions
 Midpoint Circle Algorithm

26
BRESENHAM’S ALGORITHM COULD BE ADAPTED ??

Yes
How ?
 Setting decision parameter for finding the closest pixel to
the circumference
what to do For Non-linear equation of circle ?
 The square (multiply) operations
 The square root operation – try really hard to avoid
these!
We need a more efficient, more accurate solution

27
MIDPOINT CIRCLE ALGORITHM
Similarly to the case with lines, there is an incremental
algorithm for drawing circles – the mid-point circle
algorithm
Circle function defined as:
f circle( x, y) = x + y − r
2 2 2

Any point (x,y) satisfies following conditions

 0, if ( x, y ) is inside the circle boundary


f circle( x, y )= 0, if ( x, y ) is on the circle boundary
 0, if ( x, y ) is outside the circle boundary

28
MIDPOINT CIRCLE ALGORITHM
As with the line, we determine the value of the
decision variable by substituting the mid-point of
the next pixel into the implicit form of the circle:
2
 1
d i = ( xi + 1) +  yi −  − r 2
2

 2
If di < 0 we choose pixel A otherwise we choose
pixel B
 Note: we currently assume the circle is centered at the origin
Again, as with the line algorithm, the choice of A or B can be
used to determine the new value of di+1

29
 MIDPOINT CIRCLE ALGORITHM

If B chosen then next midpoint has the Otherwise if A is chosen then the next
following decision variable: decision variable is given by:
2 2
 3  3  1  1
( )2
 xi + 2, yi −   di +1 = xi + 2 +  yi −  − r
2
 i
x + 2, yi −   d i +1 = ( xi + 2 )2
+  yi −  − r 2

 2  2  2   2
= di + 2 xi − 2 yi + 5 = di + 2 xi + 3 30
MIDPOINT CIRCLE ALGORITHM
If we assume that the radius is an integral value, then the first pixel drawn is (0, r) and the
initial value for the decision variable is given by:
 1  2 1 2
1, r −   d 0 = 1 +  r − r +  − r
 2  4
5
= −r
4
Although the initial value is fractional, we note that all other values are integers.
we can round down:
d0 = 1 − r

31
MIDPOINT CIRCLE ALGORITHM
d = 1-r
x = 0 initialisation
y = r stop at diagonal  end of octant
while y > x
if d < 0 then
d = d+2*x+3
x = x+1 choose A
else
d = d+2*(x-y)+5
x = x+1 choose B
y = y-1
endif
SetPixel(cx+x,cy+y)
endwhile

Translate to the circle center

32
 SUMMARY
As in Bresenham’s line algorithm, the midpoint method calculates pixel
positions along the circumference of a circle using integer additions and
subtractions, assuming that the circle parameters are specified in screen
coordinates.

Như trong thuật toán vẽ đường Bresenham, phương pháp trung điểm tính toán các
vị trí pixel dọc theo chu vi của vòng tròn bằng cách sử dụng phép cộng và phép trừ
số nguyên, giả sử rằng các tham số vòng tròn được chỉ định trong tọa độ màn hình.

33
ELLIPSE
34
ELLIPSE-GENERATING ALGORITHMS

Ellipse – A modified circle whose radius varies from a

maximum value in one direction (major axis) to a
minimum value in the perpendicular direction (minor
axis).
d1
F1 P=(x,y)
d2
 The sum of the two distances d1 and d2, between the F2
fixed positions F1 and F2 (called the foci of the
ellipse) to any point P on the ellipse, is the same
value, i.e.
Hình elip - Một vòng tròn được sửa
d1 + d2 = constant đổi có bán kính thay đổi từ một giá
trị tối đa theo một hướng (trục
chính) đến một giá trị tối thiểu theo
hướng vuông góc (trục nhỏ).
35
ELLIPSE PROPERTIES ry

rx

Expressing distances d1 and d2 in terms of the focal

coordinates F1 = (x1, x2) and F2 = (x2, y2), we have:

( x − x1 )2 + ( y − y1 )2 + ( x − x2 )2 + ( y − y2 )2 = constant

Cartesian coordinates:
2 2
 x − xc   y − yc 
  +   = 1
 rx   ry 
Polar coordinates: x = xc + rx cos 
y = yc + ry sin 
36
ELLIPSE ALGORITHMS
Symmetry between quadrants
(-x, y) (x, y)
Not symmetric between the two octants of a quadrant
ry
Thus, we must calculate pixel positions along the elliptical arc
through one quadrant and then we obtain positions in the rx
remaining 3 quadrants by symmetry
(-x, -y) (x, -y)
Đối xứng giữa các góc phần tư
Không đối xứng giữa hai quãng tám của góc phần tư
Do đó, chúng ta phải tính toán các vị trí pixel dọc theo cung
elip qua một góc phần tư và sau đó chúng ta có được các vị trí
trong 3 góc phần tư còn lại bằng cách đối xứng
37
 Slope = -1

ELLIPSE ALGORITHMS ry
1
2

rx
Decision parameter:

 0 if ( x, y) is inside the ellipse


f ellipse ( x, y ) = = 0 if ( x, y) is on the ellipse
 0 if ( x, y) is outside the ellipse


dy 2ry2 x
fellipse ( x, y) = r x + r y − r r
2
y
2
x
2 2 2 2
x y
Slope = =− 2
dx 2rx y

38
ELLIPSE ALGORITHMS
Starting at (0, ry) we take unit steps in the x direction until we
reach the boundary between region 1 and region 2. Then we
take unit steps in the y direction over the remainder of the curve
in the first quadrant.
Slope = -1
At the boundary 1
ry 2
dy
= −1  2r x = 2r y
y
2
x
2

dx rx

therefore, we move out of region 1 whenever

2ry2 x  2rx2 y
39
FILLED AREA PRIMITIVES
40
 FILLED AREA PRIMITIVES
A standard output primitive in general graphics packages is a solid-
color or patterned polygon area.
There are two basic approaches to area filling on raster systems:

1. The scan-line approach

Determine the overlap intervals for scan lines that cross the area.
Typically used in general graphics packages to fill polygons, circles,
ellipses
Một nguyên thủy đầu ra tiêu chuẩn trong các gói đồ họa nói chung là một khu
vực đa giác có màu đặc hoặc có hoa văn.
Có hai cách tiếp cận cơ bản để lấp đầy khu vực trên các hệ thống raster:
1. Cách tiếp cận quét dòng
Xác định các khoảng chồng lấp cho các đường quét đi qua khu vực.
Thường được sử dụng trong các gói đồ họa chung để điền vào đa giác, hình
tròn, hình elip 41
 FILLED AREA PRIMITIVES
2. Filling approaches
start from a given interior position and paint outward from this point
until we encounter the specified boundary conditions.
useful with more complex boundaries and in interactive painting
systems.

2. Phương pháp tiếp cận điền

bắt đầu từ một vị trí bên trong nhất định và vẽ ra từ điểm này cho
đến khi chúng ta gặp các điều kiện biên được chỉ định.
hữu ích với các ranh giới phức tạp hơn và trong các hệ thống sơn
tương tác.

42
 SCAN-LINE FILL
ALGORITHM
For each scan line crossing a
polygon, the area-fill algorithm
locates the intersection points of
the scan line with the polygon
edges.
These intersection points are then
sorted from left to right, and the
corresponding frame-buffer
positions between each
intersection pair are set to the
specified fill color.

43
ADVANTAGES & DISADVANTAGES
• Calculations performed in scan-conversion
take advantage of various coherence
properties
• Coherence property is can be used to reduce
processing.
• Coherence methods often involve incremental
calculations applied along a single scan line
or between successive scan lines.
• Các tính toán được thực hiện trong chuyển đổi quét
tận dụng các thuộc tính kết hợp khác nhau
• Thuộc tính kết hợp có thể được sử dụng để giảm xử
lý.
• Các phương pháp kết hợp thường liên quan đến các
phép tính gia tăng được áp dụng dọc theo một đường
quét đơn hoặc giữa các đường quét liên tiếp.
Problems
• What happens if a vertex is shared by more
than one polygon, e.g. three triangles?
• What happens if the polygon intersects itself?
• What happens for a “sliver”?
Các vấn đề
• Điều gì xảy ra nếu một đỉnh được chia sẻ bởi
nhiều hơn một đa giác, ví dụ: ba tam giác?
• Điều gì xảy ra nếu đa giác giao nhau?
• Điều gì xảy ra với một sliver?
44
 Start point

WHY BOUNDARY FILL ALGORITHM

▪Start at a point inside a region and
paint the interior outward toward
the boundary.
▪If the boundary is specified in a
single color, the fill algorithm
proceeds outward pixel by pixel
until the boundary color is
encountered. ▪Bắt đầu tại một điểm trong một khu vực và sơn nội thất
▪The inputs of the this algorithm are: ra bên ngoài về phía ranh giới.
• Coordinates of the interior point ▪Nếu ranh giới được chỉ định trong một màu duy nhất,
thuật toán điền sẽ tiến hành pixel bên ngoài theo pixel cho
(x, y) đến khi gặp màu ranh giới.
• Fill Color ▪Các đầu vào của thuật toán này là:
• Boundary Color ▪ Tọa độ của điểm bên trong (x, y)
▪ Tô màu
▪ Ranh giới màu 45
BOUNDARY FILL ALGORITHM
void boundaryFill4 (int x, int y, int fillColor, int
borderColor) ● It is useful in interactive painting packages, where
{ int interiorColor; interior points are easily selected.
/* set current color to fillColor, then perform
following operations. */
interiorColor =getPixel (x, y);
Assumption: boundary color is a single color
if ( (interiorColor != borderColor)
&& (interiorColor != fillColor) ) ● (x,y): start point; b:boundary color, fill: fill color
{
setPixel (x, y); // set color of pixel to fillColor

boundaryFill4 (x + 1, y, fillColor, borderColor); ● Nó rất hữu ích trong các gói vẽ tương tác, trong đó các
boundaryFill4 (x - 1, y, fillColor, borderColor);
điểm bên trong dễ dàng được chọn.
boundaryFill4 (x, y + 1, fillColor, borderColor);
boundaryFill4 (x, y - 1, fillColor, borderColor); Giả định: màu biên là một màu duy nhất
}
} ● (x, y): điểm bắt đầu; b: màu ranh giới, tô màu: tô màu

46
BOUNDARY FILL ALGORITHM
▪Starting from (x, y), the algorithm tests
neighboring pixels to determine whether they are
of the boundary color.
▪ If not, they are painted with the fill color, and
their neighbors are tested. This process continues
until all pixels up to the boundary have been
tested.
▪ There are two methods for proceeding to
neighboring pixels from the current test position:

▪Bắt đầu từ (x, y), thuật toán kiểm tra các pixel lân
cận để xác định xem chúng có phải là màu biên
hay không.
▪ Nếu không, chúng được sơn bằng màu tô và
hàng xóm của chúng được kiểm tra. Quá trình này
tiếp tục cho đến khi tất cả các pixel cho đến ranh
giới đã được kiểm tra.
▪ Có hai phương pháp để tiến tới các pixel lân cận
từ vị trí thử nghiệm hiện tại: 47
4-CONNECTED VS. 8-CONNECTED
1. The 4-connected method.
2. The 8-connected method.

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.

4 điểm lân cận so với 8 điểm lân cận: phụ thuộc vào định
nghĩa về tính liên tục. 8 lân cận: ranh giới đường chéo sẽ
không dừng lại
● Đệ quy, quá chậm. Đối với các vùng lớn có hàng triệu
pixel, hàng triệu lệnh gọi hàm.

48
PIXEL SPAN METHOD
● 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.

● Cải thiện dựa trên ngăn xếp: giữ hàng xóm trong ngăn
xếp
● Có thể giảm số lượng phần tử trong ngăn xếp bằng
cách lấp đầy khu vực dưới dạng các pixel và chỉ đẩy các
pixel bằng các pixel chuyển tiếp.

49
FLOOD FILL ALGORITHM
• Similar to boundary, Flood fill algorithm is used
for filling the interior of a polygon .
• Used when an area defined with multiple color
boundaries
• Start at a point inside a region− Replace a
specified interior color (old color) with fill color
• Flood fill algorithm is simplest algorithm.
• Flood fill algorithm is slow, For large polygon flood
fill algorithm is fail because it requires a large
frame.
• Tương tự như đường biên, thuật toán lấp lũ được
sử dụng để lấp đầy phần bên trong của đa giác.
• Được sử dụng khi một khu vực được xác định có
nhiều ranh giới màu
• Bắt đầu tại một điểm trong khu vực - Thay thế
màu nội thất đã chỉ định (màu cũ) bằng màu tô
Thuật toán lấp đầy là thuật toán đơn giản nhất.
• Thuật toán lấp đầy lũ chậm, Đối với thuật toán lấp
lũ đa giác lớn bị lỗi vì nó yêu cầu một khung lớn. 50
Similar to boundary fill. Algorithm continues while
the neighbor pixels have the same color
void floodFill4 (int x, int y, int fillColor, int interiorColor)
{int color;
/* set current color to fillColor, then perform following
operations. */
getPixel (x, y, color);
if (color = interiorColor)
{
setPixel (x, y); // set color of pixel to fillColor
floodFill4 (x + 1, y, fillColor, interiorColor);
floodFill4 (x - 1, y, fillColor, interiorColor);
floodFill4 (x, y + 1, fillColor, interiorColor);
floodFill4 (x, y - 1, fillColor, interiorColor);
}}

51
CHARACTER
GENERATION
52
CHARACTER
GENERATION
•Not so Very important output primitive
• Many pictures require text
Two different representation are used for storing
computer fonts:
1. Bitmap font (or bitmapped font)
2. Outline font

•Không quá quan trọng Đầu ra nguyên thủy

•Nhiều hình ảnh yêu cầu văn bản
•Hai đại diện khác nhau được sử dụng để lưu
trữ phông chữ máy tính:
1. Phông chữ bitmap (hoặc phông chữ bitmap)
2. Phông chữ phác thảo
53
BITMAP FONT
Bitmap font: A simple method for representing
the character shapes in a particular typeface is to
use rectangular grid pattern.
▪Each character represented (stored) as a 2-D array
▪Each element corresponds to a pixel in a
rectangular “character cell”
▪Simplest: each element is a bit (1=pixel on,
0=pixel off)
Phông chữ bitmap: Một phương pháp đơn giản để
biểu diễn các hình dạng ký tự trong một kiểu chữ cụ
thể là sử dụng mẫu lưới hình chữ nhật.
❑Mỗi ký tự được biểu diễn (được lưu trữ) dưới dạng
mảng 2 chiều
❑Mỗi phần tử tương ứng với một pixel trong một ô ký
tự hình chữ nhật
❑Đơn giản nhất: mỗi phần tử là một bit (bật 1 = pixel,
tắt 0 = pixel) 54
BITMAP FONT
The character grid only need to be mapped to a
frame buffer position.
Bitmap fonts required more space, because each
variation (size and format) must be stored in a
font cash.

Bold Italic 55
OUTLINE FONT
(STROKED)
Graphic primitives such as lines and arcs are used to
define the outline of each character.
Require less storage since variation does not require a
distinct font cash.
Each character represented (stored) as a series of line
segments
– sometimes as more complex primitives
Parameters needed to draw each stroke
– endpoint coordinates for line segments

56
SUMMARY
▪Rasterization
▪Point
▪Line
▪Circle
▪Filled Area Primitives
▪Character

57
Tài liệu phục vụ
học tập sinh viên
CNTT&TT ĐHBK -
HN
Tài liệu sử dụng Hình ảnh , Text , Video trên mạng theo
nguyên tắc FU – CC và tuân thủ theo quy tắc đó
Sinh viên, người học hoàn toàn có quyền chỉnh sửa,
copy và tái suất bản theo CC & FU

58