CG.03 Ky Thuat 2D

Kỹ thuật đồ họa 2D
Nội dung
• 1. Hệ tọa độ và chuyển đổi hệ tọa độ
• 2. Thuật toán vẽ đối tượng đồ họa cơ sở
• 3. Thuật toán xén hình
• 4. Thuật toán tô màu
• 5. Các phép biến đổi 2D
Computer Graphics 2
1. Hệ tọa độ và chuyển đổi hệ tọa độ
1.1 Hệ tọa độ
• Hệ toạ độ thế giới thực (World Coordinate System - WCS)
• Mô tả các đối tượng thế giới thực.
• Đơn vị đo: từ nm, mm...  m, km ...
• Đối với không gian 2 chiều:
• Trục tọa độ Descarte: có 2 trục X,Y
• Gốc tọa độ O,
• Tọa độ 1 điểm P(x,y) với x, y  R
• Đối với không gian 3 chiều:
• Trục tọa độ Descarte: có 3 x,y,z
• Tọa độ 1 điểm P(x,y,z)
Computer Graphics 3
(1920,0)
• Hệ toạ độ thiết bị (Device Coordinate System (0,0)
- DCS)
• Dùng trong thiết bị xuất cụ thể: máy in,
màn hình …
• Đặc điểm:
• Toạ độ điểm (x,y) trong đó x,y  N.
• Toạ độ (x,y) giới hạn, phụ thuộc vào từng loại
thiết bị
(0,1080) (1920,1080)
• Gốc toạ độ O ở góc trên trái màn hình
• Ví dụ màn hình có kích thước 1920x1080
Computer Graphics 4
• Hệ toạ độ chuẩn (Normalized Coordinate System - NCS)
• Một hình ảnh hiển thị trên thiết bị này là chính xác thì chưa chắc hiển thị chính xác trên
thíết bị khác
• Hệ tọa độ chuẩn: Giải quyết vấn đề ứng dụng chạy trên thiết bị khác nhau
• Tọa độ một điểm (x,y) trong đó x,y [0,1]
• Hệ tọa độ chuẩn: là hình vuông đơn vị có góc trái dưới (0,0) và góc phải trên là (1,1)
• Các bước mô tả đối tượng thực:
• Ảnh được định nghĩa theo các toạ độ thế giới thực
• Chuyển từ toạ độ thế giới thực sang toạ độ chuẩn.
• Chuyển từ toạ độ chuẩn sang toạ độ thiết bị ứng với từng thiết bị cụ thể
Computer Graphics 5
1.2 Chuyển đổi Hệ tọa độ
• Các bước mô tả đối tượng thực:
Y
xmax X
1
Y O
y2
y1
O ymax
O x1 x2 1 X
X Y
Computer Graphics 6
1.2 Chuyển đổi Hệ tọa độ Y
• Chuyển từ hệ toạ độ thực sang hệ toạ độ chuẩn: 1
• Gọi C là cạnh hình vuông không gian lớn nhất trong hệ toạ độ y0 P0
thực chứa đối tượng cần hiển thị. P(x,y) ở thế giới thực được
ánh xạ thành P0(x0,y0) trong hệ toạ độ chuẩn: O x0 1 X
x0 = x/C y0 = y/C (x0,y0  [0,1])
• Chuyển từ hệ toạ độ chuẩn sang hệ toạ độ thiết bị:
• P0(x0,y0) trong hệ toạ độ chuẩn được ánh xạ thành điểm Y Màn hình Hình
vuông
P1(x1,y1) của hệ toạ độ thiết bị theo công thức: lớn nhất
1
x1 = ymaxx0+(xmax -ymax)/2 y1 = ymaxy0
y1 P1
O x1 1 X
Computer Graphics 7
2. Vẽ đối tượng đồ họa cơ sở
• 2.1 Thuật toán vẽ đoạn thẳng
• 2.2 Thuật toán vẽ đường tròn
• 2.3 Thuật toán vẽ ellipse
• 2.4 Thuật toán vẽ các đường cong y=f(x)
Computer Graphics 8
2.1 Thuật toán vẽ đoạn thẳng
• Cấu trúc lưới phân giải màn hình hiển thị  Lưới các pixel
pixel
Computer Graphics 9
Đường thẳng “lý tưởng”

(x1, y1)
(x2, y2)
• Vì ảnh hiển thị trên màn hình là tập hợp các điểm ảnh (pixel) rời rạc
• Không thể biểu diễn liên tục
• Chuyển hình ảnh liên tục “ảnh lý tưởng” thành các điểm ảnh rời rạc
Computer Graphics 10
Đường thẳng “lý tưởng”

(x1, y1)
(x2, y2)
• Biến đổi đường liên tục thành rời rạc (Sampling): còn gọi là rời rạc hóa điểm ảnh  Sinh ra
các đối tượng ảnh bằng phương pháp xấp xỉ dựa trên lưới phân giải của màn hình
• Bài toán: Vẽ đoạn thẳng qua 2 điểm (x1,y1) và (xn,yn)
• Giải pháp
• Đoạn thẳng là tập các điểm có tọa độ nguyên (lấy xấp xỉ tọa độ thực)
(xi,yi) với i = 1 .. n; xi,yi  N
• Tại bước thứ i xác định được điểm (xi,yi)  vẽ điểm này
• Tại bước kế tiếp i + 1 thì xác định (xi+1,yi+1) = ? để vẽ điểm kế tiếp
• Yêu cầu: Liên tục, gần điểm lý tưởng, tối ưu về tốc độ
Nguyên tắc cơ bản xác định điểm (xi+1, yi+1)

• Bước thứ i xác định được toạ độ nguyên (xi, yi)
• Tại bước i + 1, cần xác định điểm nguyên (xi+1,yi+1) là 1 trong 8 điểm lân cận
8 điểm lân cận của điểm P(xi,yi) là: 1 1
P1(xi + 1, yi + 1) P2(xi + 1, yi)
P7 P8 P1
P3(xi + 1, yi – 1) P4(xi, yi – 1) 1
(xi,yi)
P5(xi - 1, yi – 1) P6(xi – 1, yi)
P6 Pi P2
1
P7(xi - 1, yi + 1) P8(xi, yi + 1)
P5 P4 P3
Y
• Dạng 1: Biểu diễn dạng không tường minh P2(x2,y2)
(y2 – y1)x – (x2 – x1)y + x2y1 – x1y2 = 0 u
hay Ax + By + C = 0
 A = (y2 – y1)
 B = -(x2 – x1)
 C = x2y1 – x1y2
P1(x1,y1)
• Dạng 2: Biểu diễn dạng tham số
X
P(u) = P1 + u(P2 – P1) với u [0,1]
hay X(u) = x1 + u( x2 – x1 )
Y(u) = y1 + u( y2 – y1 )
x−x1 x2 −x1 Y P2(𝑥2 , 𝑦2 )

• Dạng 3: Biểu diễn tường minh có dạng: =
y−y1 y2 −y1 𝑦2
<=> x − x1 × y2 − y1 = (x2 −x1 ) × (y − y1 )
x−x1 × y2 −y1
y= +y1 (1)
(x2 −x1 )
𝑦1 P1(𝑥1 , 𝑦1 )
y2 −y1 Dy 𝑥1 𝑥2 X
Đặt: m = = (2) Gọi là hệ số góc (độ dốc) của
(x2 −x1 ) Dx đường thẳng b
x1 × y2 −y1 x1 ×Dy
b = y1 − = y1 − (3) Gọi là đoạn chắn trên trục Y
(x2 −x1 ) Dx
Phương trình 𝒚 = 𝒎𝒙 +𝒃 (4)
y2 −y1 Dy
Từ m = =
y1<y2
(x2 −x1 ) Dx
y1<y2
-1 > m > - 1<m< Và Dx = x2 – x1; Dy = y2 – y1
x1<x2
x2<x1 0m1
0  m  -1 VII VIII (x2, y2) Nếu |Dx| > |Dy|  m < 1  y=f(x) = mx+b
VI I
x2<x1 V
(x1, y1) II
Nếu |Dx| < |Dy|  m > 1  x=f-1(y)
x1<x2
0<m1 0 > m  -1
IV III
y2<y1 y2<y1
1<m< -1 > m > -
• Xét đoạn thẳng 0<m<1 và Dx > 0

y1<y2 y1<y2
-1 > m > - 1<m<
x1<x2
0m1
x2<x1
0  m  -1
(x2, y2)
(x1, y1)
x2<x1
x1<x2
0<m1
0 > m  -1
y2<y1 y2<y1
1<m< -1 > m > -
Y
(xi+1 ,yi+1 )
• Xét đoạn thẳng 0<m<1; Dx > 0 yi+1 P
1
• Giả sử tại bước thứ i: đã xác định (xi+1 ,yi)
yi S
điểm (xi,yi)
(xi,yi)
• Ở bước thứ i+1: điểm cần chọn
1
(xi+1,yi+1) sẽ là điểm S(xi+1,yi) hoặc
yi-1
P(xi+1,yi+1)
• Nhiệm vụ xác định điểm S hoặc P
như sau 1 1
O xi-1 xi xi+1 X
2.1 Thuật toán vẽ đoạn thẳng - Thuật toán Bresenham
• Giả sử ở bước thứ i đã xác định được điểm (xi,yi)

• Gọi điểm Q(xi+1,y) là điểm thuộc đường thẳng
• Vì y = mx + b nên điểm Q sẽ có tọa độ Q(xi + 1, m(xi + 1) + b)
• Bước i + 1, ta xác định điểm (xi+1, yi+1) dựa vào dấu d1 – d2.
• Nếu d1 – d2 < 0  d1 < d2 , thì chọn điểm S(xi + 1, yi)
• Nếu d1 – d2 >= 0  d1>= d2 , thì chọn điểm P(xi + 1,yi + 1) yi+1
P
• Tính: d1 = y – yi = m(xi + 1) + b – yi d2
y
d2 = (yi + 1) – y = yi + 1 – m(xi + 1) – b Q(xi+1,y) d1
yi
• Nên d1 – d2 = 2mxi – 2yi + 2m + 2b – 1 S
xi xi+1
•  d1 – d2 = 2mxi – 2yi + 2m + 2b – 1 (5)

• Ta thấy m là số thực nên việc tính toán chậm. Do đó, thay vì
xét dấu d1 – d2 ta xét dấu một đại lượng có giá trị nguyên khác
có quan hệ với d1 – d2
• Vì Dx > 0  dấu của Dx(d1 – d2) phụ thuộc d1 – d2.
• Đặt pi = Dx(d1 – d2) = Dx(2mxi – 2yi + 2m + 2b – 1) yi+1
Dy P
• Thay m =  pi = 2Dyxi – 2Dxyi + c (6) d2
Dx
y
với c = 2Dy +(2b – 1)Dx Q(xi+1,y) d1
• Vậy: Nếu pi < 0  d1 < d2  chọn điểm S(xi + 1, yi) yi S
xi xi+1
Nếu pi >=0  d1 >= d2  chọn điểm P(xi + 1,yi + 1)
• Như vậy: điểm cần vẽ ở bước i + 1 ta dựa vào pi để chọn điểm S hoặc P
• Thế thì sau khi chọn điểm S hoặc P thì pi + 1 được tính như thế nào cho điểm kế tiếp?
• Ta có: pi+1 – pi = (2Dyxi+1 – 2Dxyi+1 + c) – (2Dyxi – 2Dxyi + c)
do xi+1 = xi+1 nên pi+1 – pi = 2Dy – 2Dx(yi+1 – yi)
 pi+1 = pi + 2Dy – 2Dx(yi+1 – yi)
• Như đã nói ở trên: yi+1
P
• Nếu pi < 0  d1 – d2 < 0 thì chọn điểm S(xi + 1, yi) d2
y
 tức là yi+1= yi  nên: pi+1 = pi + 2Dy Q(xi+1,y) d1
yi
• Nếu pi >= 0  d1 – d2 >= 0  thì chọn điểm P(xi + 1,yi + 1) S
xi xi+1
 tức là yi+1= yi +1  nên: pi+1 = pi + 2(Dy – Dx) (8)
• Như vậy:
• Tại bước i ta có pi = 2Dyxi – 2Dxyi + c (*) với c = 2Dy +(2b – 1)Dx (**)
• Tại bước i + 1 ta tính pi+1 dựa vào pi
• Nếu pi < 0  pi+1 = pi + 2Dy (7)
• Nếu pi >= 0  pi+1 = pi + 2(Dy – Dx) (9)
• Thế thì p1 của điểm xuất phát (đầu tiên) có tọa độ (x1,y1) sẽ tính như thế nào ?
Từ (*) và (**): p1 = 2Dyx1 – 2Dxy1 + c với c = 2Dy +(2b – 1)Dx
 p1 = 2Dyx1 – 2Dxy1 + 2Dy +(2b – 1)Dx (***)
• Do (x1 , y1 ) thuộc đường thẳng, nên:
Dy
y1 = mx1 + b = x +b Thế vào phương trình (***)
Dx 1
D
 p1 = 2Dyx1 – 2Dx( y x1 + b) + 2Dy + (2b – 1)Dx = 2Dy – Dx
Dx
Vậy: p1 = 2Dy – Dx (9)
Bắt 2.1 Thuật toán vẽ đoạn thẳng - Thuật toán Bresenham
đầu
• Input: (x2,y2)
x = x1; y = y1; • Điểm bắt đầu (x1,y1)
Dy = y2 – y1; Dx = x2 – x1; • Điểm kết thúc (x2,y2)
p = 2Dy – Dx; • Output: đoạn thẳng (x1,y1)
Vẽ điểm (x,y);
No
x ≤ x2
Yes
No (chọn điểm P) yi+1
p<0 P
d2
Yes (chọn điểm S) y
Q(xi+1,y) d1
p = p + 2(Dy – Dx);
p = p + 2Dy;
y = y + 1; yi S
xi xi+1
x = x +1; Kết
Vẽ điểm (x,y); thúc
Bắt 2.1 Thuật toán vẽ đoạn thẳng - Thuật toán Bresenham
đầu
void LineBres(int x1,int y1,int x2,int y2)
{ int x,y,Dx,Dy,p
x = x1; y = y1;
x=x1;y=y1;
Dy = y2 – y1; Dx = x2 – x1;
Dx = x2 – x1; Dy = y2 – y1;
p = 2Dy – Dx;
p = 2*Dy – Dx;
Vẽ điểm (x,y);
glBegin(GL_POINTS);
No glVertex2i(x,y);
x < x2 while (x < x2) {
if (p < 0)
Yes
p += 2Dy;
No (chọn điểm P) else {
p<0
p += 2*(Dy – Dx);
Yes (chọn điểm S) y++;
p = p + 2(Dy – Dx); }
p = p + 2Dy;
y = y + 1; x++;
glVertex2i(x,y);
}
x = x +1; Kết glEnd;
Vẽ điểm (x,y); thúc }
2.1 Thuật toán vẽ đoạn thẳng - Thuật toán Midpoint
• Giả sử bước thứ i ta vẽ được điểm (xi, yi)
• Tại bước i+1 ta xác định điểm kế tiếp (xi+1, yi+1)
• Chọn điểm MidPoint M là trung điểm đoạn SP:
1
 M(xi+1, yi + ).
2
• Xác định điểm kế tiếp (xi+1, yi+1) bằng cách so
sánh điểm thực Q(xi+1,y) với điểm M
• Nếu Q nằm trên M, chọn P.
yi+1 P
• Nếu Q nằm dưới M, chọn S
d2
• Hơn nữa ta thấy Q thuộc đường thẳng. Do vậy: y
• Nếu Q nằm trên M nghĩa là M nằm phía dưới 1 Q(xi+1,y)
đường thẳng yi + M
2 d1
• Nếu Q nằm dưới M nghĩa là M nằm phía trên MidPoint
đường thẳng yi S
•  Bài toán quy về xét M nằm phía trên hay phía xi xi+1
dưới của đường thẳng
2.1 Thuật toán vẽ đoạn thẳng - Thuật toán MidPoint
• Ta có phương trình dạng không tường minh cuả đường thẳng:

Ax + By + C=0
Với A = y2 – y1 = Dy ; B = – (x2 – x1) = – Dx ; C = x2y1 – x1y2
Đặt F(x,y) = Ax + By + C, thì theo tính chất của phương trình này:
< 0 𝑛ế𝑢 𝑥, 𝑦 𝑛ằ𝑚 𝑝ℎí𝑎 𝑡𝑟ê𝑛 đườ𝑛𝑔 𝑡ℎẳ𝑛𝑔
F(x,y) = 0 𝑛ế𝑢 𝑥, 𝑦 𝑡ℎ𝑢ộ𝑐 đườ𝑛𝑔 𝑡ℎẳ𝑛𝑔
> 0 𝑛ế𝑢 𝑥, 𝑦 𝑛ằ𝑚 𝑝ℎí𝑎 𝑑ướ𝑖 đườ𝑛𝑔 𝑡ℎẳ𝑛𝑔
Áp dụng tính chất này để xét điểm Midpoint M có nằm phía trên hay phía
dưới đường thẳng cần vẽ để chọn S hay P
• Cụ thể ta xét dấu hàm
1
F(MidPoint) = F(xi+1, yi + 2 )
• Biểu thức này số thực nên tính toán chậm. Để khử
2 ở mẫu số ta nhân vào giá trị 2 (và 2 cũng không
làm thay đổi dấu của biểu thức, vì 2 là số dương)
• Do vậy, đặt:
1
pi = 2F(MidPoint) = 2F(xi+1,yi + 2 ) yi+1 P
1 d2
= 2[A(xi+1) – B(yi + 2 ) – C] (1)
y
1 Q(xi+1,y)
• Nếu pi < 0  M nằm phía trên đường thẳng (nằm yi +
phía trên Q)  chọn điểm S(xi+1, yi ) 2 M d1
MidPoint
• Nếu pi ≥ 0  M nằm phía dưới đường thẳng (nằm yi S
phía dưới Q)  chọn điểm P(xi+1, yi + 1 ) xi xi+1
• Xác định pi+1 cho việc chọn điểm kế tiếp (tương tự như thuật toán Bresenham)
1 1
• Xét: pi+1 – pi = 2F(xi+1+1,yi+1 + ) – 2F(xi+1,yi + )
2 2
1 1
= 2[A(xi+1+1) + B(yi+1 + ) + C] – 2[A(xi+1) – B(yi + ) – C]
2 2
= 2A(xi+1 – xi) + 2B(yi+1 – yi) = 2Dy(xi+1 – xi)– 2Dx(yi+1 – yi)

 pi+1 = pi + 2Dy(xi+1 – xi) – 2Dx(yi+1 – yi)
• Từ đó ta có:
• Nếu pi < 0  chọn S(xi+1, yi ), tức là xi+1 = xi+1 và yi+1 = yi  pi+1 = pi + 2Dy (2)
• Nếu pi ≥0  chọn P(xi+1, yi + 1), tức là xi+1 = xi+1 và yi+1 = yi + 1  pi+1 = pi + 2Dy – 2Dx (3)
• Xác định p1 đối với điểm xuất phát (x1,y1)
y1 +1
p1 = 2F(x1+1, ) = 2(Ax1+ By1+ C) + 2A + B =2A + B  p1 = 2Dy – Dx (4)
2
• Thuật toán hoàn toàn giống Thuật toán Bresenham
y1<y2
Bài tập:
y1<y2
-1 > m > - 1<m<
x1<x2
1. Nhận xét các thuật toán vẽ đường thẳng Bresenham, x2<x1
0m1
MidPoint 0  m  -1
(x2, y2)
2. Sử dụng C++, OpenGL cài đặt vẽ các đường thẳng

(x1, y1)
cho các trường hợp như hình vẽ x2<x1
0<m1
x1<x2
0 > m  -1
3. Xác định các điểm (xi,yi) để vẽ đoạn thẳng bằng thuật

toán Bresenham, MidPoint giữa hai điểm sau đây theo y2<y1
1<m<
y2<y1
-1 > m > -
cấu trúc bảng như hình
1) A(10,10) và B(20,20) Bước i xi yi pi
2) A(12,20) và B(18,40) 1
2
…
2.2 Thuật toán vẽ đường tròn
• Xét phương trình đường tròn:
• Trong hệ tọa độ Descartes
• Tâm O(x,y) - bán kính R:
x2 + y2 = R2
• Tâm C(xc,yc) - bán kính R:
(x - xc)2 + (y - yc)2 = R2
• Do tính đối xứng của đường tròn nên chỉ cần vẽ 1/8
cung tròn, sau đó lấy đối xứng qua 2 trục tọa độ và 2
đường phân giác thì ta vẽ được cả đường tròn.
2.2 Thuật toán vẽ đường tròn
• Nguyên tắc vẽ đường tròn:

𝑅 2
• Cho x = 0, 1, 2, ..., với R>1
2
• Tại mỗi giá trị x, tính y = 𝑅2 − 𝑥 2
• Vẽ điểm (x,y) cùng 7 điểm đối xứng của
nó.
• Nhận xét:
• Để vẽ đường tròn tâm C(xc,yc) thì ta vẽ đường
tròn O(x,y) sau đó tịnh tiến theo vector (xc,yc)
• không hiệu quả do gặp phải các phép toán nhân
và lấy căn làm hạn chế tốc độ
• Đường tròn vẽ theo cách này có thể không liền
nét (trừ R lớn)
2.2. Thuật toán vẽ đường tròn -Thuật toán Bresenham
• Xét cung tròn (màu xanh) là đường cần vẽ
Y
• Giả sử tại bước i ta vẽ được điểm (xi,yi)
• Tại bước i+1 phải xác định điểm kế tiếp (xi+1,yi+1) yi P
Đó là P(xi+1,yi) hoặc S(xi+1,yi – 1). Q(xi+1,y)

y
• Xác định điểm kế tiếp: (phụ thuộc d1 và d2)
yi-1 S
• Vì điểm Q(xi+1,y) thuộc đường tròn (điểm mong
muốn vẽ), nên ta có:
y2 = R2 – (xi+1)2 X
xi xi+1
• Gọi d1 = yi2 – y2 = yi2 – R2 + (xi+1)2
d2 = y2 – (yi – 1)2 = R2 –(xi+1)2 –(yi – 1)2
• Đặt pi = d1 – d2 Y
= yi2 – R2 +(xi+1)2 – R2+(xi+1)2+(yi – 1)2

yi P
= 2(xi+1)2 + yi2 +(yi – 1)2 – 2R2 (1)
Q(xi+1,y)
• Lấy pi+1 – pi = 2(xi+1+1)2 +yi+12+(yi+1 – 1)2 – 2R2 y
yi-1 S
– 2(xi+1)2 – yi2 – (yi – 1)2 +2R2
=4xi+6+2(yi+12 – yi2) – 2(yi+1 – yi)

X
•  pi+1 = pi + 4xi+6+2(yi+1 – yi2)
2 – 2(yi+1 – yi) xi xi+1
• Từ pi+1 = pi + 4xi + 6 + 2(yi+12 – yi2) – 2(yi+1 – yi) Y

• Ta thấy:
• Nếu d1 – d2 < 0 (Q gần P)  pi <0 thì chọn yi P
P(xi+1,yi).Tức là yi+1= yi  pi+1 = pi + 4xi+6 (2) Q(xi+1,y)

y
• Nếu d1 – d2 ≥0 (Q gần S)  pi ≥0 thì chọn S(xi+1,yi –
1). Tức là yi+1= yi – 1 yi-1 S
 pi+1 = pi + 4(xi – yi) + 10 (3)

• Tính p1 tại điểm đầu tiên (x1,y1)=(0,r), thế vào (1): X
xi xi+1
p1 = 2 + R2 + (R – 1)2 – 2R2 = 3 – 2R (4)
Bắt 2.2. Thuật toán vẽ đường tròn -Thuật toán Bresenham
đầu
• Input:
• Tâm đường tròn (xc,yc)
x = 0; y = R;
• Bán kính R
p = 3 – 2R ; (1) và (4)
• Output: Đường tròn
Vẽ 8 điểm tâm C; Y
No
x<y yi P
Yes
Yes (chọn điểm P) Q(xi+1,y)
p<0
No (chọn điểm S)
yi-1 S
p +=4*(x-y) + 10; (3)
p += 4*x + 6 (2)
y -- ;
x = x +1; Kết X
xi xi+1
Vẽ 8 điểm tâm C; thúc
Bắt 2.2. Thuật toán vẽ đường tròn -Thuật toán Bresenham
đầu
void CircleBres(int xc,int yc,int R )
{ int p ;
x = 0; y = R;
int y = R ;
p = 3 – 2R ; (1) và (4)
int x = 0;
Vẽ 8 điểm tâm C;
p = 3 - 2*R;
draw8point(xc,yc,x,y);
No while (x < y)
x<y
{
Yes if (p <0)
Yes (chọn điểm P) p +=4*x+6;
p<0 else
No (chọn điểm S) {
p +=4*(x-y) + 10; (3) p += 4*(x-y)+10;
p += 4*x + 6 (2) y--;
y -- ;
}
x++;
x = x +1; Kết draw8point(xc,yc,x,y);
Vẽ 8 điểm tâm C; thúc }
}
2.2. Thuật toán vẽ đường tròn -Thuật toán vẽ 8 điểm
void Vẽ_8_điểm_Tâm_C(int xc,int yc, int x, int y)

void draw8point(int xc, int yc, int x, int y)
{ {
Vẽ_điểm ( x + xc, y + yc); glBegin(GL_POINTS);
Vẽ_điểm ( y + xc, x + yc); glVertex2i(xc + x, yc + y);
glVertex2i(xc + y, yc + x);
Vẽ_điểm ( y + xc, -x + yc); glVertex2i(xc + y, yc - x);
Vẽ_điểm ( x + xc, -y + yc); glVertex2i(xc + x, yc - y);
Vẽ_điểm (-x + xc, -y + yc); glVertex2i(xc - x, yc - y);
glVertex2i(xc - y, yc - x);
Vẽ_điểm (-y + xc, -x + yc); glVertex2i(xc - y, yc + x);
Vẽ_điểm (-y + xc, x + yc); glVertex2i(xc - x, yc + y);
Vẽ_điểm (-x + xc, y + yc); glEnd();
}
}
2.2 Thuật toán đường tròn - Thuật toán MidPoint
• Xét cung tròng màu xanh là đường cần vẻ. Giả
sử bước thứ i ta vẽ được điểm (xi, yi) Y
• Chọn điểm MidPoint M là trung điểm đoạn SP:
1 yi P
 M(xi+1, yi − ).
2
1 M MidPoint
• Xác định điểm kế tiếp (xi+1, yi+1) bằng cách so yi −
sánh điểm thực Q(xi+1,y) với điểm M 2 Q(xi+1,y)
• Nếu Q nằm dưới M, thì Q gần S  chọn S
yi-1 S
• Nếu Q nằm trên M, thì Q gần P  chọn P
• Hơn nữa ta thấy Q thuộc đường tròn. Do vậy:
• Nếu Q nằm dưới M nghĩa là M nằm phía
ngoài đường tròn X
• Nếu Q nằm trên M nghĩa là M nằm phía xi xi+1
trong đường tròn
•  Bài toán quy về xét M nằm trong hay ngoài
của đường tròn
• Ta có phương trình cuả đường tròn là x2 + y2 = R2

• Xét điểm (x,y). Đặt F(x,y) = x2 + y2 – R2 , thì theo tính chất của phương trình này:
< 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑡𝑟𝑜𝑛𝑔 đườ𝑛𝑔 𝑡𝑟ò𝑛

F(x,y) = 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑡ℎ𝑢ộ𝑐 đườ𝑛𝑔 𝑡𝑟ò𝑛
> 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑛𝑔𝑜à𝑖 đườ𝑛𝑔 𝑡𝑟ò𝑛
Áp dụng tính chất này để xét điểm Midpoint M có nằm trong hay ngoài
đường tròn cần vẽ để chọn S hay P
• Từ F(x,y) = x2 + y2 – R2 Y
1
• Ta có F(M) = F(xi+1, yi − )
2
1 yi
• Đặt pi = F(M) = F(xi+1, yi − ) P
2
= [(xi+1)2 + (yi
1
– )2 – R2 ] (1) 1 M MidPoint
2 yi −
2 Q(xi+1,y)
• Như vậy tại bước thứ i
• Nếu pi < 0  thì M nằm trong đường tròn  Q yi-1 S
nằm trên M  Q nằm gần P  chọn điểm kế
tiếp là P(xi+1,yi)
• Nếu pi ≥ 0  thì M nằm ngoài (hoặc thuộc) X
đường tròn  Q nằm dưới M  Q nằm gần S  xi xi+1
chọn điểm kế tiếp là S(xi+1,yi – 1).
• Sau khi chọn S hoặc P thì phải xác định pi+1 để vẽ các điểm tiếp theo (xi+1, yi+1)
1 1
• Ta có: pi+1 – pi = F(xi+1 + 1, yi+1 – ) – F(xi+1, yi – )
2 2
1 1
= [(xi+1+1)2 + (yi+1 – )2 – R2 ] – [(xi+1)2 + (yi – )2 – R2 ]
2 2
= 2xi + 3 + (yi+12 – yi2) – (yi+1 – yi)
 pi+1 = pi + 2xi + 3 + (yi+12 – yi2) – (yi+1 – yi) (*)
• Từ đó ta có
• Vì khi pi < 0 thì chọn điểm P(xi+1,yi)  yi+1 = yi  pi+1 = pi + 2xi+3 (2)
Và khi pi ≥0 thì chọn điểm S(xi+1,yi – 1)  yi+1 = yi – 1  pi+1 = pi + 2(xi – yi) + 5 (3)
• Giá trị của p1 tại điểm xuất phát (x1, y1) = (0, R), áp dụng (1) ta có:
1 1 5 5
p1 = F(x1+1, y1 – )= F(1, R – ) = – R  p1 = – R (4)
2 2 4 4
Bắt 2.2 Thuật toán đường tròn - Thuật toán MidPoint
đầu
void CircleMidpoint(int xc,int yc,int R )
{ float P;
x = 0; y = R; int y = R;
p = 5/4 – R (4) int x = 0;
Vẽ 8 điểm tâm C; P = 5/4 - R;
No while (x < y)
x<y
{
Yes if (P <0) # Chọn điểm P
No (chọn điểm S) p +=2*x + 3;
p<0 else # Chọn điểm S
Yes (chọn điểm P) {
p += 2*(x - y) + 5;
p += 2*(x – y) + 5 (3)
p += 2*x + 3; (2) y--;
y -- ;
}
x++;
x = x +1; draw8point(xc,yc,x,y);
Kết
Vẽ 8 điểm tâm C; }
thúc
}
Bài tập:
1. Nhận xét các thuật toán vẽ đường tròn
Bresenham, MidPoint
2. Sử dụng C++, OpenGL cài đặt vẽ các đường
tròn bán kính:
a) (20,20, R = 30) b) (0, 0, R=20)
3. Xác định các điểm (xi,yi) để vẽ đường tròn
bằng thuật toán Bresenham, MidPoint (theo bảng
Bước i xi yi pi
như hình) 1
1) A(10,10, R =10) 2
2) B(12,20, R =40) …
2.3 Thuật toán Ellpise
• Phương trình Ellipse có tâm ở gốc tọa độ có dạng:

Y
b (x,y)
• Ta có thể viết lại: (-x,y)
a x
• Nguyên tắc vẽ đường Ellipse: (-x,-y) (x,-y)
• Do tính đối xứng qua trục tọa độ nên chỉ cần vẽ
¼ ellipse, rồi lấy đối xứng qua trục tọa độ
• Tại mỗi bước ta cho x tăng từ 0 đến a sau đó
tính y tương ứng qua biểu thức trên.
• Phương pháp này không hiệu quả do phải làm
nhiều phép toán lấy bình phương và phép khai
căn. Tốc độ thuật toán chậm.
Vẽ 4 điểm đối xứng trên Ellipse có tâm (xc, yc)
Vẽ_4_điểm(xc, yc, x, y)
{ Y
Vẽ điểm(x + xc, y + yc); b (x,y)
(-x,y)
Vẽ điểm(x + xc,-y + yc);
Vẽ điểm(xc - x, yc - y); a x
Vẽ điểm(xc - x, yc + y); (-x,-y) (x,-y)
}
Nếu tâm O(0,0) thì xc = 0 và yc = 0
• Vẽ góc phần tư rồi lấy đối xứng qua trục X, trục Y
• Chọn điểm Q là tiếp điểm của tiếp tuyến Ellipse có độ dốc (hệ số góc) m = -1
• Vẽ gồm 2 phần: Phần 1 từ điểm A(0,b) đến điểm Q(x0,y0); Phần 2 từ điểm Q đến điểm B(a,0)
Y
A(0,b)
Q (x0,y0)
b
X
(0,0)
a B(a,0)
• Xác định tọa độ điểm Q(x0,y0)

xx0 yy0
• Phương trình tiếp tuyến của Ellipse tại điểm Q(x0,y0) là + =1
a2 b2
dy fy
• Độ dốc 𝑚 của tiếp tuyến Ellipse tại điểm (𝑥, 𝑦) bất kỳ, là: m= =−
dx fx
• Trong đó: fx là đạo hàm riêng của f x, y theo x, tức là fx = 2b2 x
fy là đạo hàm riêng của f x, y theo y, tức là fy = 2a2 y
2a2 x 2a2 x0
• Suy ra: m = − 2  Độ dốc của tiếp tuyến tại Q(x0,y0) là − 2
2b y 2b y0
2a2 x0 b4 2
• Mà Độ dốc tại Q(x0,y0) là -1  − 2 =−1 y2 = x (*)
2b y0 a4 0
x02 y02
• Đồng thời Q(x0,y0) thuộc Ellipse  + =1 (**)
a02 b02
• Từ (*) và (**) ta có:
x0 = a 2 / a 2 + b 2 y0 = b2 / a2 + b 2
• Vẽ Phần 1 từ điểm (0,b) đến điểm Q(x0,y0)
Y
• Giả sử tại bước i ta vẽ được điểm (xi,yi)
• Tại bước i+1 phải xác định điểm kế tiếp (xi+1,yi+1)
Đó là P(xi+1,yi) hoặc S(xi+1,yi – 1) yi P
• Xác định điểm kế tiếp: (phụ thuộc d1 và d2) y

K
• Vì điểm K(xi+1,y) thuộc đường Ellipse (điểm mong
muốn vẽ), nên ta có:
(xi +1)2 y2 b2(x +1)2 yi - 1 S
+ 2 = 1  y2 = b2 − i
(1)
a 2 b a2
2
Q(x0,y0)
2 b
Gọi d1 = yi – y = yi + 2 (xi
2 2 + 1)2 − b2
a
b2 2
X
2 2
d2 = y – (yi – 1) =− 2 xi + 1 + b2 −(y1 − 1)2 xi xi + 1
a
2.3. Thuật toán vẽ đường Ellipse -Thuật toán Bresenham
Y
• Đặt pi=(d1 – d2)a2
= 2[b2 (xi + 1)2 – b2 ]+2a2 (yi2 – yi)+a2 (2) yi P
y
 pi+1 = 2[b2 (x i+1 + 1)2 – b2 ]+2a2 2
(yi+1 – yi+1 )+ a2 K
yi-1 S
• Lấy pi+1 – pi = 2b2 (2xi + 3)2 + 4a2 (1 – yi )
Q(x0,y0)
 pi+1 = pi + 2b2 (2xi + 3)2 + 4a2 (1 – yi ) xi xi+1

X
• Từ pi+1 = pi + 2b2 (2xi + 3)2 + 4a2 (1 – yi )
• Nếu pi < 0 , tức là d1 < d2 (K gần P) chọn P(xi+1,yi),
tức là yi+1 = yi và xi+1 = xi + 1
Y
 pi+1 = pi + 2b2 (2xi + 3) (3)
• Nếu pi  0 , tức là d1  d2 (K gần S)chọn S(xi+1,yi – 1),
yi P
tức là yi+1 = yi – 1 và xi+1 = xi + 1 d1
y
 pi+1 = pi + 2b2 (2xi + 3) + 4a2 (1 − yi) (4) K
d2
• Điểm đầu tiên (0,b), thế vào (2):
yi-1 S
p1 =a2 (1 − 2b) + b2 (5)
Q(x0,y0)
X
xi xi+1
Bắt 2.3. Thuật toán vẽ đường Ellipse -Thuật toán Bresenham
đầu
• Input:
x = 0; y = b; • Tâm đường Ellipse tâm (xc,yc)
p = a2 (1 − 2b) + b2 ; (5) • a, b
x0 = a2 / a2 + b 2 • Output: đường Ellipse – phần 1: từ (0,b) đến Q
Vẽ 4 điểm tâm C; Y
No
x < x0
yi P
Yes d1
y
Yes (chọn điểm P)
p<0 K
d2
No (chọn điểm S)
p += 2b2 (2xi + 3) + 4a2 (1 − yi) (4) y -1 S
p += 2b2 (2xi + 3) (3) i
y -- ;
Q(x0,y0)
x = x +1; Kết X
Vẽ 4 điểm tâm C; thúc xi xi+1
Bắt 2.3. Thuật toán vẽ đường Ellipse -Thuật toán Bresenham
đầu void EllipsBresenham(int xc,int yc,double a, double b )
{ float p;
x = 0; y = b;
int y = b;
p = a2 (1 − 2b) + b2 ;
int x = 0;
x0 = a2 / a2 + b 2 float x0 = a*a/sqrt(a*a + b*b);
Vẽ 4 điểm tâm C; p = a*a*(1-2*b)+ b*b;
No
x < x0 while (x <= x0)
{
Yes if (P <0)
Yes (chọn điểm P) P += (2*b*b)*(2*x + 3);
p<0
else
No (chọn điểm S) {
p += 2b2 (2xi + 3) + 4a2 (1 − yi) P += (2*b*b)*(2*x+3) + 4*a*a*(1-y);
p += 2b2 (2xi + 3)
y -- ; y--;
}
x++;
x = x +1; Kết draw4point(xc,yc,x,y);
Vẽ 4 điểm tâm C; thúc }
Computer Graphics
} 53
Vẽ 4 điểm đối xứng trên Ellipse có tâm (xc, yc)
Vẽ_4_điểm(xc, yc, x, y) void draw4point(int xc, int yc, int x, int y)

{
{ glBegin(GL_POINTS);
Vẽ điểm(x + xc, y + yc);
glVertex2i(x + xc, y + yc);
Vẽ điểm(x + xc,-y + yc); glVertex2i(x + xc,-y + yc);
Vẽ điểm(xc - x, yc - y); glVertex2i(xc - x, yc - y);
glVertex2i(xc - x, yc + y);
Vẽ điểm(xc - x, yc + y);
} glEnd();
}
Nếu tâm O(0,0) thì xc = 0 và yc = 0
Vẽ phần 2 từ điểm (a,0) đến điểm Q

Y Q(x ,y )
• Để vẽ phần 2 ta chỉ cần thay đổi vai trò: 0 0
• Của x và y d2 d1
• Của a và b yi+1
U H V
• Tức là hoán đổi chúng trong thuật toán, tương ứng
yi
xi-1 xi xi+1 a X
2.3 Thuật toán đường Ellipse - Thuật toán MidPoint
• Vẽ Phần 1 từ điểm (0,b) đến điểm Q(x0,y0)
Y
• Giả sử bước thứ i ta vẽ được điểm (xi, yi)
• Chọn điểm MidPoint M là trung điểm đoạn SP: yi P
1 d1
 M(xi+1, yi − ). y
K
2
• Xác định điểm kế tiếp (xi+1, yi+1) bằng cách so y − 1 M d2
i
sánh điểm thực K(xi+1,y) với điểm M 2 MidPoint
• Nếu K nằm trên M, thì K gần P nên chọn P yi-1 S
• Nếu K nằm dưới M, thì Q gần S chọn S
• Hơn nữa ta thấy Q thuộc đường tròn. Do vậy: Q(x0,y0)
• Nếu K nằm trên M nghĩa là M nằm phía trong
đường Ellipse X
xi xi+1
• Nếu K nằm dưới M nghĩa là M nằm phía
ngoài đường Ellipse
•  Bài toán quy về xét M nằm trong hay ngoài
đường Ellipse
• Xét 1 điểm (x,y) Y

𝑥2 𝑦2 b (x,y)
• Từ phương trình Ellipse: + =1
𝑎2 𝑏2
• Đặt F(x,y) = b2x2 + a2y2 - a2b2, theo tính chất

của Ellipse, ta có:
a x
< 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑡𝑟𝑜𝑛𝑔 đườ𝑛𝑔 𝐸𝑙𝑙𝑖𝑝𝑠𝑒

F(x,y) = 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑡ℎ𝑢ộ𝑐 đườ𝑛𝑔 𝐸𝑙𝑙𝑖𝑝𝑠𝑒
> 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑛𝑔𝑜à𝑖 đườ𝑛𝑔 𝐸𝑙𝑙𝑝𝑠𝑒
Y
• Đặt pi = F(Midpoint) = F(xi+1, yi – 1/2)
= b2(xi+1)2+ a2(yi – 1/2)2 – a2b2 (1)
yi P
• Nếu pi<0, tức là thì M nằm trong Ellipse K d1
y
 M nằm dưới K  chọn P(xi+1,yi) 1
yi − M d2
hay xi+1= xi+1 và yi+1 = yi 2 MidPoint
yi-1 S
• Nếu pi≥ 0, tức là M nằm ngoài Ellipse 
M nằm trên K  chọn S(xi+1,yi – 1) Q(x0,y0)
hay xi+1 = xi+1 và yi+1 = yi – 1
X
xi xi+1
• Tính pi+1 = F(xi+1+1, yi+1 – 1/2) = b2(xi+1+1)2+ a2(yi+1 – 1/2)2 – a2b2

• Vì xi+1 =xi + 1 nên:
pi+1 – pi = b2 [(xi+1+1)2 – (xi+1)2 ]+a2 [(yi+1 – 1/2)2 –(yi – 1/2)2]
 pi+1 = pi + (2xi +3) b2 + a2 [(yi+1 – 1/2)2 – (yi – 1/2)2]
• Từ đó ta có:
• Nếu pi<0: Chọn P, tức là: xi+1= xi+1 và yi+1 = yi
 pi+1= pi + (2xi +3) b2 (2)
• Nếu pi0: Chọn S, tức là: xi+1 = xi+1 và yi+1 = yi – 1
 pi+1= pi + (2xi +3)b2 – 2 a2(yi – 1) (3)
• Tính p1 tại (0,b): p1 = b2 + a2(b – 1/2)2 – a2b2 = b2 – a2b + a2/4 (4)
Vẽ phần 2 từ điểm (a,0) đến điểm Q

Y Q(x ,y )
• Để vẽ phần 2 ta chỉ cần thay đổi vai trò: 0 0
• Của x và y d2 d1
• Của a và b yi+1
U H M V
• Tức là hoán đổi chúng trong thuật toán, tương ứng MidPoint
• Sinh viên vẽ lưu đồ và cài đặt thuật toán giống như yi

thuật toán vẽ đường Ellipse -Bresenham
xi-1 xi xi+1 a X
Bài tập:
1. Nhận xét các thuật toán vẽ đường Ellipse
Bresenham, MidPoint
2. Sử dụng C++, OpenGL cài đặt vẽ các đường
Ellipse:
a) (0, 0, 30, 40) b) (10, 10, 40, 80)
3. Xác định các điểm (xi,yi) để vẽ đường Ellipse
bằng thuật toán Bresenham, MidPoint (theo bảng
Bước i xi yi pi
như hình) 1
1) A(0,0, 10, 20) 2
2) B(10,10, 20, 40) …
2.4. Thuật toán vẽ đường cong y = f(x)
Nguyên tắt cơ bản: Áp dụng thuật toán MidPoint/Bresenham vẽ đường cong

theo các bước sau:
• Bước 1: Dựa vào:
• Hình dáng
• Phương trình đường cong cần vẽ (tính đối xứng, chẳn lẻ, …)
• Để rút gọn một phần đường cong cần vẽ.
• Bước 2: Tính đạo hàm để phân vùng vẽ
yi+1 yi+1
yi yi
xi xi+1 xi xi+1
a) Nếu 0  f’(x)  1 chọn c) Nếu f’(x) > 1 chọn
yi+1
yi
yi
yi-1
xi-1 xi
xi xi+1
d) Nếu f’(x) <-1 chọn
b) Nếu -1  f’(x)  0 chọn
• Bước 3: áp dụng thuật toán Midpoint/Bresenham để vẽ theo các bước:

Bước 3.1: Xác định công thức và dấu của pi để tìm tọa độ vẽ điểm tiếp theo
Chú ý:
+ Tìm pi dựa vào phương trình đường cong.
+ pi = 0 khi điểm (xi, yi) thuộc đường cong.
+ Chọn pi sao cho giảm ít nhất các phép toán với số thực (thường thêm
vào các tham số nhưng không thay đổi dấu của pi)
• Bước 3.2: Tìm mối quan hệ pi và pi+1 bằng cách pi+1 – pi
• Bước 3.3: Tính p1, hoàn chỉnh và cài đặt thuật toán
• Bài tập:
• 1. Xây dựng thuật toán vẽ đường cong bậc 2 (Parabol): y = ax2+bx+c trên
một đoạn xác định [x1, x2]
• 2. Viết chương trình vẽ parabol như trên
• 3. Viết chương trình vẽ đường y = sinx
• 4. Viết chương trình vẽ đường y = cosx
• 5. Viết chương trình vẽ đường Hypecbol
3. Thuật toán xén hình
• Khái niệm:
• Thao tác loại bỏ các phần hình ảnh nằm ngoài một vùng cho trước được
gọi là xén hình (Clipping)
• Vùng được dùng để xén hình được gọi là cửa sổ xén
• Cửa sổ xén: hình chữ nhật, đa giác, trình tròn, …
• Bài toán: Cho miền DRn và FRn . Gọi F  D là hình có được từ hình F bằng
cách cắt vào trong D
• Được ký hiệu ClipD(F)
• Mục tiêu: Tìm thuật toán xác định ClipD(F)
66
Computer Graphics
• Ví dụ:
67
Computer Graphics
• Nội dung chương trình tập trung:

• Trường hợp 1: F là đoạn thẳng và cửa sổ xén D là hình chữ nhật
• Trường hợp 2: F là đoạn thẳng và cửa sổ xén D là đường tròn
• Trường hợp 3: F là đa giác và cửa sổ xén D là hình chữ nhật
F F
F
D D
D
68
Computer Graphics
3.1. Trường hợp 1: F là đoạn thẳng và cửa sổ xén D là hình chữ nhật
• Giả sử cạnh của cửa sổ xén song song với trục tọa độ
B(x2,y2)
• Ta có:
 x min  x  x max  Y Q
D   (x, y)  R ymax
2

 y min  y  y max 
P
• Vì F là phương trình đường thẳng AB, nên:
A(x1,y1)
 x  x1  m(x 2  x1 )  ymin

 

F  (x, y)  R y  y1  m(y 2  y1 ) 
2
0 xmin xmax
    X


0 m 1 

x min  x1  m(x 2 - x1 )  x max 
Khi đó, F  D chính là đoạn PQ  
D  F   y min  y1  m(y 2 - y1 )  y max 
nghiệm của hệ bất phương trình 0  m  1 
  69
Computer Graphics
x min  x1  m(x 2 - x1 )  x max 

 
• Gọi N là tập nghiệm của hệ bất phương trình D  F   y min  y1  m(y 2 - y1 )  y max 
0  m  1 
 
• Khi đó xảy ra các trường hợp:

• Nếu N =   Hệ bất phương trình vô nghiệm  ký hiệu ClipD(F) = 
• Nếu N    Hệ bất phương trình có nghiệm  ký hiệu ClipD(F)  
70
Computer Graphics
• Nếu N , gọi P và Q là 2 giao điểm, thì: B(x2,y2)

ClipD(F) = PQ
Y Q
• Và tọa độ điểm P và Q là: ymax
 x p  x1  m(x  x1 )  P
 2 
 
 y p  y1  m(y 2  y1 ) 
  A(x1,y1)
ymin
 x Q  x1  m(x  x1 ) 
 2 
  0 xmin xmax
 y Q  y1  m(y 2  y1 ) 
  X
 Tính toán trên nhiều số thực
 Làm chậm thời gian thực thi thuật toán
71
Computer Graphics
a) Thuật toán Cohen - Sutherland

• Chia mặt phẳng thành 9 vùng, gồm cửa sổ xén và 8 vùng xung quanh nó
• Mỗi vùng được gán bởi một mã nhị phân 4 bit (mỗi bít có giá trị 0 hoặc 1)
3 2 1 0 I: 1001 II: 1000 III: 1010

ymax
Cöûa soå
LEFT VIII: 0001 VI: 0010
0000
RIGHT ymin
BOTOM
VII: 0101 VI: 0100 V: 0110
TOP
xmin xmax
72
Computer Graphics
Cho điểm C(x,y), gán mã cho điểm C:
TOP
1, neáu x C  x min
Bitleft (C )  
0, ngöôïc laïi
1001 1000 1010
ymax
1, neáu x C  x max
Bitright (C )  
0, ngöôïc laïi Cöûa soå
0001 0010 RIGHT
LEFT 0000
1, neáu y C  y min
Bitbottom (C )   ymin
0101 0100 0110
1, neáu y C  y max xmin
Bittop (C )   xmax
BOTTOM

Hàm xác định mã của một điểm
int MãM(double xM, double yM)
{
int m = 0;
if (xM < xmin) m = 1; // 0001  LEFT
if (xM > xmax) m = 2; //0010  RIGHT
if (yM < ymin) m = 4; //0100  BOTTOM
if (yM > ymax) m = 8; //1000  TOP
return m;
}
74
Computer Graphics
• Xét đoạn thẳng AB, có các trường hợp sau:

• Trường hợp 1: Điểm A và B đều nằm cùng một phía ở bên ngoài cửa sổ xén
Tức là:
Nếu: (Mã(A) AND Mã(B))  0000 1001 1000 1010
ymax
Thì: ClipD(F) =   Loại bỏ đoạn AB
Cöûa soå
0001 0010
0000
ymin
0101 0100 0110
xmin A B xmax
1001 A 1000 1010
• Trường hợp 2: Xét một trong hai điểm A và B
ymax A’
• Nếu: Mã(B) = 0000 thì xét A: Nếu Mã(A) = 0000 thì
chấp nhận đoạn AB, ngược lại đến Trường hợp 3. 0001 0000 0010
ymin B
• Nếu Mã(A) = 0000 thì xét B: Nếu Mã(B) =0000 thì chấp xmax
0101 xmin 0100 0110
nhận đoạn AB, ngược lại đến Trường hợp 3
A
B’
76
Computer Graphics

• Trường hợp 3: Mã(A)0000
TH 3.1: Nếu A nằm trong vùng Top thì thay A bằng A’ (giao điểm AB với cạnh trên
của cửa sổ xén).
• Tức là:
A
Nếu: (Mã(A) AND Top) = True A
ymax A’
A
A’ A’
Thì: yA’ = ymax;
0000
ymin B
xA’ = xA+ m*(ymax-yA)/m
B B
với m = (yB-yA)/(xB-xA)
77
Computer Graphics

TH 3.2 : Nếu A nằm trong vùng Bottom thì thay A bằng A’ (giao điểm AB với cạnh
dưới của cửa sổ xén). ymax ymax
B
• Tức là: B
ymin A’ ymin
Nếu: (Mã(A) AND Bottom) = true A
A’
A
Thì: yA’=ymin;
B B
ymax ymax
xA’=xA+ (ymin-yA)/m
ymin A’
A’ ymin
A A
78
Computer Graphics

TH 3.3 : Nếu A nằm trong vùng Right thì thay A bằng A’ (giao điểm AB với cạnh phải
của cửa sổ xén). A A
A’ A’
• Tức là:
B B
Nếu: (Mã(A) AND Right) = true xmin xmax xmin xmax
Thì: xA’ = xmax; A’ A
yA’ = yA+ m*(ymax-yA)

B
B
xmin xmax xmin xmax
A’ A
TH 3.4 : Nếu A nằm trong vùng Left thì thay A bằng A’ (giao điểm AB với cạnh trái
của cửa sổ xén). A
A’
A
• Tức là:
A’
Nếu: (Mã(A) AND Left) = true B
Thì: xA’ = xmin; xmin xmax xmin xmax

B
B
yA’ = yA+ m*(ymin-yA)
B
với m = (yB-yA)/(xB-xA) A’
xmin A
xmax xmin xmax
A A’
80
Computer Graphics

• Sau khi thực hiện các Trường hợp 1, Trường hợp 2, Trường hợp 3 để cập nhật giá trị tọa độ
các điểm A và B thì tính lại Mã(A) và Mã(B).
• Quá trình này lặp lại khi A và B ở trong vùng 0000.
• Tức là điều kiện lặp khi (Mã(A) OR Mã(B)) !=0
A B
81
Computer Graphics

void cohen_Line(float xA,float yA,float xB,float yB) // Trường hợp 3: Điểm A nằm ngoài
{ // Các TH 3.1, 3.2, 3.3, 3.4
int cA=code(xA,yA); // Lấy mã điểm A float x,y;
int cB=code(xB,yB); // Lấy mã điểm B if((c & 8)){y=ymax;x=xi+ 1.0/m*(ymax-yi);}
float m=(yB-yA)/(xB-xA); else if((c & 4)){y=ymin;x=xi+1.0/m*(ymin-yi);}
while((cA|cB)!=0) else if((c & 2)){x=xmax;y=yi+m*(xmax-xi);}
{ else if((c & 1)){x=xmin;y=yi+m*(xmin-xi);}
//Trường hợp 1: Điểm A và B nằm cùng phía
if((cA & cB)!=0){exit(0);} //Cập nhật lại tọa độ A, B và tính lại Mã A, Mã B
if(c==cA){ xdA=x; ydA=y; cA=code(xdA,ydA); }
//Trường hợp 2: Điểm A Hoặc B nằm trong cửa sổ if(c==cB){ xdB=x; ydB=y; cB=code(xdB,ydB); }
//Hoán đổi A với B
float xi=xA;float yi=yA; // Lấy tọa độ điểm A }
int c=cA;
if(c==0){c=cB;xi=xB;yi=yB;} Chú ý: xdA, ydA, xdB, ydB là biến toàn cục; là đối số khi
truyền giá trị cho các tham số của hàm này
82
Computer Graphics
b) Thuật toán chia nhị phân: Giống như thuật toán Cohen - Sutherland
• Chia mặt phẳng thành 9 vùng, gồm cửa sổ xén và 8 vùng xung quanh nó
• Mỗi vùng được gán bởi một mã nhị phân 4 bit (mỗi bít có giá trị 0 hoặc 1)
3 2 1 0 I: 1001 II: 1000 III: 1010

ymax
Cöûa soå
LEFT VIII: 0001 VI: 0010
0000
RIGHT ymin
BOTOM
VII: 0101 VI: 0100 V: 0110
TOP
xmin xmax
Computer Graphics
b) Thuật toán chia nhị phân

Tư tưởng của thuật toán
• Kiểm tra mã của trung điểm đoạn thẳng để loại dần các đoạn con không chứa giao điểm.
• Cuối cùng, trung điểm hội tụ về giao điểm của đoạn thẳng với hình chữ nhật.
• Kết quả, thu được đoạn con nằm trong hình chữ nhật (nếu có)
M
M
84
Computer Graphics
• Xét đoạn thẳng AB, có các trường hợp sau:

• Trường hợp 1: Điểm A và B đều nằm cùng một phía ở bên ngoài cửa sổ xén
Tức là:
Nếu: (Mã(A) AND Mã(B))  0000 1001 1000 1010
ymax
Thì: ClipD(F) =   Loại bỏ đoạn AB
Cöûa soå
0001 0010
0000
ymin
0101 0100 0110
xmin A B xmax
1001 A 1000 1010
• Trường hợp 2: Xét một trong hai điểm A và B
ymax A’
• Nếu: Mã(B) = 0000 thì xét A: Nếu Mã(A) = 0000 thì
chấp nhận đoạn AB, ngược lại đến Trường hợp 3. 0001 0000 0010
ymin B
• Nếu Mã(A) = 0000 thì xét B: Nếu Mã(B) =0000 thì xmax
0101 xmin 0100 0110
chấp nhận đoạn AB, ngược lại đến Trường hợp 3
A
B’
86
Computer Graphics

• Đoạn thẳng được chia tại trung điểm của nó thành A

hai đoạn nhỏ hơn.
M3
• Xác định xem 2 đoạn mới thuộc trường hợp nào. M2 M1
B
• Nếu không thuộc Trường hợp 1 thì mỗi một đoạn
thẳng được chia tiếp thành các đoạn nhỏ hơn.
• Quá trình chia đôi và phân loại tiếp tục cho tới khi tất
cả các đoạn thẳng thuộc trường hợp nhìn thấy sẽ
được hiển thị của cửa sổ.
87
Computer Graphics
void BinaryClip(Point A,Point B){
Point P,Q,M;
if ((Ma(A) | Ma(B))==0) drawLine(A,B);
if ((Ma(A) & Ma(B)) != 0) return;
A B if ((Ma(A) != 0) && (Ma(B) == 0)) swap(&A,&B);
if ((Ma(A) == 0) && (Ma(B) != 0)){
Q=B
P=A; Q=B;
while ((abs(P.x-Q.x)+abs(P.y-Q.y)) > 2){
Q=M
M.x=(P.x+Q.x)/2; M.y=(P.y+Q.y)/2;
P=A
if (Ma(M)==0) P=M;
P=A P=M
else Q=M;
Q=B }
drawLine(A,P);
}
88
Computer Graphics
if (((Ma(A) != 0) && (Ma(B) != 0)) && ((Ma(A) & Ma(B))==0)){
P=A; Q=B;
M.x=(P.x+Q.x)/2; M.y=(P.y+Q.y)/2;
while ((Ma(M)!=0) && ((abs(P.x-Q.x)+abs(P.y-Q.y)) > 2)){
if ((Ma(P) & Ma(M))!=0) P=M; Q=B
else Q=M; Q=M

Q=B
M.x=(P.x+Q.x)/2; M.y=(P.y+Q.y)/2;
} P=A
if (Ma(M)==0){ P=M
BinaryClip (P,M);
B1 B P=A
BinaryClip (M,Q);
} M
A1
} A
}
89
Computer Graphics
3.2. Trường hợp 2: F là đoạn thẳng và D là hình chữ nhật
Cạnh của hình chữ nhật tạo với trục hoành một góc 
1. Gọi R là ma trận phép quay đổi trục
2. Ta tính: (X max , Ymax )  ( x max , y max ).R B
A
(X min , Ymin )  ( x min , y min ).R
 A1=A.R; B1=B.R 
Đặt F = đoạn A1B1

Hình chữ nhật D= hình chữ nhật tạo bởi 2 điểm (Xmin, Ymin), (Xmax, Ymax)
3. Xác định ClipD(F) bằng một trong các thuật toán trên
4. Nếu ClipD(F) =  thì kết quả của phép xén hình làø 
Nếu ClipD(F) = A2B2, kết quả là A3B3 với A3=A2.R-1 , B3=B2.R-1
90
Computer Graphics
3.3 Trường hợp 3: F là đoạn thẳng và D là đường tròn
Giải quyết bằng cách xét vị trí tương đối giữa đường thẳng và đường tròn
1. Tính khoản cách d từ ) đến AB y

B1 B
2. Nếu d >R,  ClipD(AB)=
A1 d
3. Nếu d=R,  ClipD(AB)={A0} A R
{A0 : Tiếp điểm của đường thẳng với đường tròn}. x

4. Nếu d<R
…
91
Computer Graphics
3.4. Trường hợp 4: F là đa giác và D là hình chữ nhật
(F) (F1) (F2) (F3) (F4)
1. Với đa giác F, cắt bỏ phần bên trái HCN (nghĩa là bên trái của cạnh trái nối dài)
ta thu được đa giác mới F1
2. Với đa giác F1 cắt bỏ phần bên phải HCN ta thu được đa giác mới F2
3. Với đa giác F2 cắt bỏ phần bên trên HCN ta thu được đa giác mới F3
4. Với đa giác F3 cắt bỏ phần bên dưới HCN ta thu được đa giác mới F4
Kết quả: Nếu F4 =  thì ClipD(F)=.
Ngược lại kết quả xén là đa giác F4, hay ClipD(F)=F4
92
Computer Graphics
• Giải thuật Sutherland - Hodgeman
Ai Ai+1
Ai Ai+1
Ai+1 Ai+1
Ai+1 Ai
Ai
Ai
i.Nếu tất cả các đỉnh đa giác đều nằm trong HCN, hình cần xén chính là đa giác.
ii.Ngược lại: Từ một đỉnh nằm ngoài HCN, chạy theo dọc biên của đa giác.
Với mỗi cạnh của đa giác, ta có các trường hợp sau:
Nếu cả hai đỉnh đều nằm ngoài hình chữ nhật thì:
Nếu Ma(Ai) and Ma(Ai+1)  0000 thì không lưu đỉnh
Ngược lại thì lưu hai giao điểm.
Ai ngoài, Ai+1 trong: lưu giao điểm P và Ai+1.
Cả hai đỉnh đều nằm trong hình chữ nhật: lưu Ai và Ai+1.
Ai trong, Ai+1 ngoài: lưu Ai và giao điểm P.
93
Computer Graphics
• Giải thuật Sutherland – Hodgeman (tiếp)
?
Sau khi duyệt qua tất cả các cạnh của đa giác,

ta có được một dãy các đỉnh mới phát sinh: B1, B2, ..., Bn ?
Nếu trong dãy các đỉnh mới này có hai đỉnh liên tiếp không nằm trên cùng một cạnh của hình
chữ nhật , giả sử hai đỉnh đó là Bi và Bi+1 thì ta đi dọc các cạnh của hình chữ nhật từ Bi đến
Bi+1 để tìm tất cả các đỉnh của hình chữ nhật nằm trong đa giác rồi bổ sung chúng vào giữa Bi
và Bi+1.
94
Computer Graphics
• Giải thuật Sutherland - Hodgeman ?

• Tập đỉnh mới tìm được chính là đa giác xén được.
• Nếu tập đỉnh mới này rỗng: ?
• Nếu có một đỉnh của hình chữ nhật nằm trong
đa giác thì hình xén đượcchính là toàn bộ hình
chữ nhật.
• Ngược lại, hình xén được là rỗng.
95
Computer Graphics
4. Tô màu miền kín
• 4.1. Thuật toán tô màu loang (flood fill)
• 4.2. Thuật toán tô màu theo dòng quét (scanline fill)
96
Computer Graphics
• Thuật toán tô màu loang (Flood Fill):
• Bắt đầu từ một điểm trong vùng tô
• Từ đó tô loang ra dần đến các điểm tại biên vùng tô
• Thuật toán tô màu theo dòng quét (Scanline Fill):
• Sử dụng đường thẳng (dòng quét)
• Xác định phần giao của dòng quét với biên của vùng tô
• Tô màu các điểm thuộc về phần giao này
97
Computer Graphics
4.1. Thuật toán tô màu loang
• Thuật toán:
• Bước 1: Bắt đầu từ điểm xuất phát bất kỳ P(x,y) thuộc vùng tô
• Bước 2: Kiểm tra các điểm lân cận (4 điểm hoặc 8 điểm) của P
Nếu điểm lân cận là điểm chưa tô và không phải điểm biên thì tô màu điểm đó
• Bước 3: Lặp lại cho đến khi nào không còn điểm thỏa mãn điều kiện tại Bước 2
• Các điểm lân cận: 4 điểm hoặc 8 điểm
4 điểm lân cận 8 điểm lân cận
4.1. Thuật toán tô màu loang
Void BoundaryFill(int x, int y, int fillColor, int boundaryColor)

{
int color=getpixel(x,y);
if (color != boundaryColor) AND (color != fillColor)
{
Putpixel(x, y, fillColour);
BoundaryFill(x-1, y, fillColor, boundaryColor);
BoundaryFill(x, y+1, fillColor, boundaryColor);
BoundaryFill(x+1, y, fillColor, boundaryColor);
BoundaryFill(x, y-1, fillColor, boundaryColor);
}
}
 Bài tập: Thực hiện đối với trường hợp 8 điểm lân cận
4. Tô màu
4.2. Thuật toán tô màu theo dòng quét
Giả sử vùng tô là đa giác có n đỉnh: Pi(xi,yi), i=1,2…n
Thuật toán
• Bước 1: Xác định ytop, ybottom là giá trị lớn nhất, nhỏ nhất của tập các tung độ các đỉnh đa giác.
• Bước 2: Ứng với mỗi dòng quét y = k (ybottom  k  ytop)
2.1. Tìm tất cả hoành độ giao điểm y = k với các cạnh của đa giác
2.2. Sắp xếp hoành độ giao điểm tăng dần (vd: x1, x2, …)
2.3. Tô màu lần lượt các đoạn thẳng trên đường thẳng y = k được giới hạn bởi
các cặp hoành độ giao điểm (x1,x2), (x3,x4), (x5,x6),… (x2m-1,x2m)
y ytop
k 1 2 3 4
ybottom
0
x
4. Tô màu
Một số trường hợp:
• Trường hợp 1
y=k2 y=k2
1 2, 3 4 1 2, 3 4
y=k1 y=k1
1 2, 3 4 5 1 2 3 4
• Giải quyết
pi-1 pi-1
pi+1 pi+1
pi
pi pi pi
pi+1
pi-1 pi+1 pi-1
(a) (b)
Quy tắc hính 1 điểm giao (a) và 2 điểm giao (b)

4. Tô màu
• Trường hợp 2: Nếu giải hệ phương trình tìm giao điểm của cạnh đa giác với mỗi dòng quét sẽ
gặp các phép toán nhân, chia..trên số thực
 Giảm tốc độ khi lặp lại nhiều lần với mỗi dòng quét
• Giải quyết: Gọi xk và xk+1 lần lượt là hoành độ giao điểm của một cạnh nào đó với các dòng
quét y=k vào y=k+1. Ta có:
y k 1  b y k  b y k 1  y k k  1  k 1
x k 1  xk     
m m m m m
hay y=k+1
xk+1
y=k
xk

5. Biến đổi 2D
• 5.1. Các phép biến đổi hình học cơ sở
• 5.2. Phép biến đổi ngược
• 5.3. Hệ toạ độ thuần nhất
• 5.4. Kết hợp các phép biến đổi
103
Computer Graphics
5. Biến đổi 2D
• Nhắc lại các phép toán ma trận
• Cộng, trừ ma trận [A(m, n)] + [B(m, n)] = [C(m, n)]
• Nhân hai ma trận [A(m, n)] x [B(n, p)]= [C(m, p)]
Với j = 1,...,m và k = 1,...,p
104
Computer Graphics
5. Biến đổi 2D
• Ứng dụng của biến đổi 2D
• Mô hình hóa (modeling): Định vị và thay đổi kích thước các phần của đối tượng phức tạp
• Quan sát (viewing): Định vị và quan sát camera ảo
• Animation: Xác định đối tượng chuyển động và thay đổi theo thời gian như thế nào.
105
Computer Graphics
5. Biến đổi 2D
• Các phép biến đổi hình học cơ sở gồm:
• Tịnh tiến (translation)
• Quay (rotation)
• Thay đổi tỷ lệ (scaling).
• Đối xứng (reflection)
• Biến dạng (shearing).
106
Computer Graphics
5. Biến đổi 2D
Phép Tịnh tiến Phép thay đổi tỷ lệ
Phép quay Phép biến dạng
Phép đối xứng qua trục Y

Phép đối xứng qua gốc tọa độ
107
Computer Graphics
5. Biến đổi 2D
• Định nghĩa 1: Phép biến đổi là một ánh xạ T:
T: R2  R2
P(x,y)  Q(x’,y’)
Hay T là hàm số T(x,y) theo 2 biến x, y
• Định nghĩa 2: Phép biến đổi affine là phép biến đổi với các hàm f(x,y) và g(x,y) tuyến
tính có dạng:
Dạng 1: Viết dưới dạng hệ phương trình Dạng 2: Viết dưới dạng ma trận
x'  f(x, y)  ax  cy  e a b 
x y   x y    e f 
 
 c d 
 y'  g(x, y)  bx  dy  f
a b 
Với a, b, c, d, e, f  R và ad – bc  0 Ký hiêu: M    : ma trận biến đổi
c d 
T  e f  : vector offset (còn gọi vector dịch)
108
Hay: Q = P x M + T
Computer Graphics
5. Biến đổi 2D - Phép tịnh tiến
y Q
• Xét điểm P(x,y):
ty
• Gọi tx và ty là độ dời điểm P theo trục x, trục y P
tx
• Thì tọa độ mới của điểm P là điểm Q(x’,y’), với: O x
• Hoặc biểu diễn dưới dạng ma trận:

y
O x
T = t x t y là vector tịnh tiến hay vector độ dời
1 0
M= là ma trận đơn vị
0 1
100
• Lưu ý: Nếu tịnh tiến hình cơ sở thì thực hiện tịnh tiến 50
các điểm giao gữa các cạnh tạo nên hình
50 150
109
Computer Graphics
5. Biến đổi 2D - Phép tịnh tiến
y Q
Ví dụ: Tìm điểm tịnh tiến của điểm P(x = 5,y =5) với vector
ty
(độ dời) tịnh tiến T = [10,20] P
tx
O x
Tọa độ mới của điểm P là điểm Q(x’,y’), với:
Vậy tọa độ của P sau khi tịnh tiến là Q(15,25)
110
Computer Graphics
5. Biến đổi 2D - Phép tỉ lệ
• Trường hợp 1: Phép biến đổi tỷ lệ với tâm tỷ lệ gốc tọa độ
y
Gọi hệ số tỷ lệ sx, sy
x'  x  s x
 hay
y'  y  s y
(2,3) (4,3)
(4,1.5) (8,1.5)
O
x
• (sx,sy) = (-1,1)  phép lật (flipping) có ảnh đối xứng qua trục y Biến đổi tỷ lệ với sx=2 sy=0.5
• (sx,sy)=(1,-1)  phép lật (flipping) có ảnh đối xứng qua trục x

• sx , sy < 1  Phép Thu nhỏ đối tượng.
• sx , sy > 1  Phép phóng to đối tượng.
• sx=sy=s  Phép đồng dạng
• Lưu ý: Nếu biến đổi tỷ lệ hình cơ sở thì thực hiện biến đổi các điểm giao gữa các cạnh tạo nên hình
111
Computer Graphics
• Ví dụ trường hợp 1: Phép biến đổi tỷ lệ với tâm tỷ lệ gốc tọa độ
Xét tam giác ABC có A(5,5) B(10,10) và C(15,15). Hãy thực hiện thay đổi tỷ lệ với hệ
số tỷ lệ sx, = 5 sy = 10
• Xét điểm A(5,5) thì A’ sau khi biến đổi tỷ lệ có tọa độ là: • Vậy tam giác ABC sau khi
thay đổi tỷ lệ là A’B’C’ với
A’(25,50), B’(50,100),
C’(75,150)
• Vẽ hai hình trên cùng một
• Xét điểm B(10,10) thì B’ sau khi biến đổi tỷ lệ có tọa độ là: hệ tọa độ
• Tương tự, điểm C(15,15) thì C’ sau khi biến đổi tỷ lệ có tọa độ là:
112
Computer Graphics
• Trường hợp 2: Phép biến đổi tỷ lệ với tâm tỷ lệ là điểm T(tx,ty):
• Tịnh tiến vector (-tx,-ty) để đưa tâm về gốc tọa độ O
• Biến đổi tỷ lệ theo tâm tỷ lệ là gốc O theo hệ số tỷ lệ sx, sy
• Tịnh tiến theo vector (tx, ty) để đưa về vị trí ban đầu
x0, y0
x0, y0
d)
a) b) c)
S x 0
x' y'  x 
y t x ty 
  0 S y 

 tx ty 

• Lưu ý: Nếu biến đổi tỷ lệ hình cơ sở thì thực hiện biến đổi các điểm giao gữa các cạnh tạo nên hình
113
Computer Graphics
5. Biến đổi 2D - Phép quay
• Trường hợp 1: Phép quay điểm P(x,y) quanh gốc tọa độ một góc 
Đặt
Y
Suy ra Q(x', y')
r
Biểu diễn dưới dạng ma trận: P(x, y)
r


X
• Lưu ý: Nếu phép quay hình cơ sở thì thực hiện phép quay các điểm giao gữa các cạnh
tạo nên hình
114
Computer Graphics
5. Biến đổi 2D - Phép quay
• Trường hợp 2: Phép quay quanh điểm T(tx,ty) một góc 
y
• Tịnh tiến về gốc O theo vector (-tx,-ty) Q
• Quay quanh gốc tọa độ một góc  Q’
P
• Tịnh tiến về vị trí ban đầu theo vector (tx,ty) 
P’
 T
x
O
 Cos Sin 
x ' 
y'  x 
y  t x ty 
   tx  ty 
 Sin Cos
• Lưu ý: Nếu phép quay hình cơ sở thì thực hiện phép quay các điểm giao gữa các cạnh
tạo nên hình
115
Computer Graphics
5. Biến đổi 2D - Phép biến đổi ngược
Với phép biến đổi affine, ta có: Q = P x M + T  P = (Q - T) x M-1
Trong đó: suy ra: khi (ad-bc0)
 Phép tịnh tiến: trừ x và y đi 1 lượng tx và ty.

Tương đương khi thực
hiện thao tác Undo
 Phép biến đổi tỷ lệ:
 Phép quay:
116
Computer Graphics
5. Biến đổi 2D - Hệ tọa độ thuần nhất
Trong phép biến đổi affine: Q = P x M + T

Trong đó, M là ma trận 2 x 2 và T là vector tịnh tiến và biểu diễn dạng ma trận:
a b
x y  x y     e f
c d
 Để loại bỏ phép cộng thì biểu diễn:

a b 0 
x ' y' 1  x y 1  c d 0

e f 1 
 Lúc đó: P(x,y,1) và Q(x’,y’,1) được gọi là các điểm biểu diễn trong tọa độ thuần nhất
 Vì thế công thức phép biến đổi theo hệ tọa độ tuần nhất là Q = P x M.
 Trong đó, M ma trận 3 x 3
117
Computer Graphics
5. Biến đổi 2D - Biểu diễn các phép biến đổi trong Hệ
tọa độ thuần nhất
Ta có: Khi đó
• Phép tịnh tiến: 
• Phép biến đổi tỷ lệ: 
• Phép quay: 
118
Computer Graphics
5. Biến đổi 2D - Biểu diễn các phép biến đổi trong Hệ
tọa độ thuần nhất
•  Phép đối xứng:
Đối xứng Đối xứng Đối xứng

qua trục x qua trục y qua gốc tọa độ
1 1
1’ 1
2 3 3
2
3’ 2 3
2’ 2’
2’ 3’
1’
3’
1’
119
Computer Graphics
5. Biến đổi 2D - Kết hợp các phép biến đổi
• Quá trình áp dụng nhiều phép biến đổi liên tiếp để tạo nên một pháp biến đổi tổng thể
• Giả sử có 2 phép biến đổi:
T1: PQ
T2: QW
• Phép biến đổi kết hợp:
T: PW
•  Tìm ma trận M kết hợp nhiều phép biến đổi ở hệ tọa độ thuần nhất:
• T1 có ma trận biến đổi M1: nên Q = P x M1
• T2 có ma trận biến đổi M2: nên W = Q x M2  W = P x M1 x M2 W = P x M
•  Vậy kết hợp 2 phép biến đổi ta có được 1 phép biến đổi với ma trận biến đổi:
M = M1 x M2
120
Computer Graphics
5. Biến đổi 2D- Ví dụ kết hợp các phép tịnh tiến
Gọi T1 và T2 là 2 phép tịnh tiến: T1: P(x,y)  P’
T2: P’  Q(x’,y’)
Ma trận tịnh tiến P sang Q là:
Vì Q=PxM nên
Kết luận: Kết hợp 2 hay nhiều phép tịnh tiến là một phép tịnh tiến
121
Computer Graphics
5. Biến đổi 2D - Ví dụ kết hợp các phép tỉ lệ
• Trường hợp 1: Phép biến đổi tỷ lệ với tâm là gốc tọa độ
Gọi T1 và T2 là 2 phép biến đổi tỷ lệ: T1: P(x,y)  P’
T2: P’  Q(x’,y’)
Ma trận biến đổi tỷ lệ từ P sang Q là:
Vì Q=P x M hay
 Vậy, kết hợp 2 hay nhiều phép tỷ lệ là một phép tỷ lệ

122
Computer Graphics
5. Biến đổi 2D - Ví dụ kết hợp phép tỉ lệ và phép tịnh tiến
• Phép biến đổi tỷ lệ với tâm tỷ lệ là điểm T bất kỳ
• Giả sử tâm tỷ lệ có tọa độ T(x0, y0) Phép tỷ lệ tâm T được kết hợp từ các phép biến đổi sau:
• Thực hiện phép tịnh tiến theo vector (-x0, -y0) để đưa tâm tỷ lệ về gốc tọa độ  Ký hiệu
phép biến đổi tịnh tiến M1
• Thực hiện biến đổi tỷ lệ quanh gốc tọa độ theo tỷ lệ sx và syKý hiệu phép biến đổi tỷ lệ M2
• Thực hiện phép tịnh tiến theo vector (x0,y0) để đưa tâm tỷ lệ về vị trí ban đầu Ký hiệu
phép biến đổi tịnh tiến M3
x0, y0
x0, y0
d)
a) b) c)
123
Computer Graphics
5. Biến đổi 2D - Ví dụ kết hợp phép tỉ lệ và phép tịnh tiến
Ma trận phép biến đổi kết hợp là: M = M1 x M2 x M3
124
Computer Graphics
5. Biến đổi 2D - Ví dụ kết hợp các phép quay
• Trường hợp 1: Phép quay quanh gốc tọa độ:
Gọi T1 và T2 là 2 phép quay quanh gốc tọa độ: T1: P(x,y)  P’
T2: P’  Q(x’,y’)
Ma trận biến đổi từ P sang Q là:
Vì Q = P x M Nên
 Vậy, kết hợp 2 hay nhiều phép quay quanh gốc tọa độ là một phép quay quanh gốc
125
tọa độ
Computer Graphics
5. Biến đổi 2D - Ví dụ Kết hợp các phép quay và tịnh tiến
• Trường hợp 2: Thực hiện phép quay có tâm bất kỳ
• Phép quay quanh tâm T(x0 , y0) một góc được kết hợp:
• Thực hiện phép tịnh tiến theo vector (-x0 ,-y0) để đưa tâm quay về gốc tọa độ. Ký hiệu phép
biến đổi tịnh tiến M1
• Thực hiện phép quay quanh gốc tọa độ một góc . Ký hiệu phép quay là M2
• Thực hiện phép tịnh tiến theo vector (x0 ,y0) để đưa tâm quay về vị trí ban đầu. Ký hiệu
phép tịnh tiến M3
I(x0,y0) I(x0,y0)

126
Computer Graphics
5. Biến đổi 2D - Ví dụ Kết hợp các phép quay và tịnh tiến
x0, y0 x0, y0
d)
a) b) c)
 Ma trận của phép biến đổi kết hợp là: M=M1 x M2 x M3
127
Computer Graphics
5. Biến đổi 2D - Bài tập
1. Tìm ma trận biến đổi để đối tượng đối xứng qua y=x và y=-x.
2. Cho tam giác A(3, 1), B(1, 3), C(3,3). Xác định tọa độ mới của các đỉnh tam giác sau khi:
 Quay một góc 900 ngược chiều kim đồng hồ xung quanh điểm P(2, 2).
 Phóng to tam giác lên hai lần, giữ nguyên vị trí điểm C.
3. Tìm ma trận biến đổi trong phép đối xứng qua đường thẳng nằm nghiêng có độ nghiêng m
và đi qua điểm (0, c).
128
Computer Graphics
5. Biến đổi 2D - Bài tập
1. Viết phương trình đường thẳng d1 vuông góc với đường thẳng d2
B1. Xác định vector pháp tuyến của d2
Bằng cách: Vector pháp tuyến của đường thẳng ax + by + c = 0 với a2 + b2 # 0 là (a,b)
B2. Xác định vector chỉ phương của d1 chính là (a,b)
B3. Phương trình: x = x0 + at; y = y0 +bt
129
Computer Graphics

CG.03 Ky Thuat 2D

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CG.03 Ky Thuat 2D

Uploaded by

Copyright:

Available Formats

Kỹ thuật đồ họa 2D

• 2. Thuật toán vẽ đối tượng đồ họa cơ sở

• 3. Thuật toán xén hình

• 4. Thuật toán tô màu

• 5. Các phép biến đổi 2D

• Ví dụ màn hình có kích thước 1920x1080

• Chuyển từ hệ toạ độ thực sang hệ toạ độ chuẩn: 1

• 2.2 Thuật toán vẽ đường tròn

• 2.3 Thuật toán vẽ ellipse

• 2.4 Thuật toán vẽ các đường cong y=f(x)

Đường thẳng “lý tưởng”

Đường thẳng “lý tưởng”

• Bài toán: Vẽ đoạn thẳng qua 2 điểm (x1,y1) và (xn,yn)

Nguyên tắc cơ bản xác định điểm (xi+1, yi+1)

x−x1 x2 −x1 Y P2(𝑥2 , 𝑦2 )

• Xét đoạn thẳng 0<m<1 và Dx > 0

• Giả sử ở bước thứ i đã xác định được điểm (xi,yi)

•  d1 – d2 = 2mxi – 2yi + 2m + 2b – 1 (5)

• Ta có phương trình dạng không tường minh cuả đường thẳng:

= 2A(xi+1 – xi) + 2B(yi+1 – yi) = 2Dy(xi+1 – xi)– 2Dx(yi+1 – yi)

• Thuật toán hoàn toàn giống Thuật toán Bresenham

2. Sử dụng C++, OpenGL cài đặt vẽ các đường thẳng

3. Xác định các điểm (xi,yi) để vẽ đoạn thẳng bằng thuật

• Nguyên tắc vẽ đường tròn:

• Tại bước i+1 phải xác định điểm kế tiếp (xi+1,yi+1) yi P

Đó là P(xi+1,yi) hoặc S(xi+1,yi – 1). Q(xi+1,y)

d2 = y2 – (yi – 1)2 = R2 –(xi+1)2 –(yi – 1)2

= yi2 – R2 +(xi+1)2 – R2+(xi+1)2+(yi – 1)2

=4xi+6+2(yi+12 – yi2) – 2(yi+1 – yi)

• Từ pi+1 = pi + 4xi + 6 + 2(yi+12 – yi2) – 2(yi+1 – yi) Y

P(xi+1,yi).Tức là yi+1= yi  pi+1 = pi + 4xi+6 (2) Q(xi+1,y)

 pi+1 = pi + 4(xi – yi) + 10 (3)

void Vẽ_8_điểm_Tâm_C(int xc,int yc, int x, int y)

• Ta có phương trình cuả đường tròn là x2 + y2 = R2

< 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑡𝑟𝑜𝑛𝑔 đườ𝑛𝑔 𝑡𝑟ò𝑛

• Phương trình Ellipse có tâm ở gốc tọa độ có dạng:

Vẽ 4 điểm đối xứng trên Ellipse có tâm (xc, yc)

• Vẽ góc phần tư rồi lấy đối xứng qua trục X, trục Y

• Xác định tọa độ điểm Q(x0,y0)

• Xác định điểm kế tiếp: (phụ thuộc d1 và d2) y

= 2[b2 (xi + 1)2 – b2 ]+2a2 (yi2 – yi)+a2 (2) yi P

 pi+1 = pi + 2b2 (2xi + 3)2 + 4a2 (1 – yi ) xi xi+1

Vẽ 4 điểm đối xứng trên Ellipse có tâm (xc, yc)

Vẽ_4_điểm(xc, yc, x, y) void draw4point(int xc, int yc, int x, int y)

Vẽ phần 2 từ điểm (a,0) đến điểm Q

• Xét 1 điểm (x,y) Y

• Đặt F(x,y) = b2x2 + a2y2 - a2b2, theo tính chất

< 0 𝑛ế𝑢 đ𝑖ể𝑚 𝑥, 𝑦 𝑛ằ𝑚 𝑡𝑟𝑜𝑛𝑔 đườ𝑛𝑔 𝐸𝑙𝑙𝑖𝑝𝑠𝑒

• Tính pi+1 = F(xi+1+1, yi+1 – 1/2) = b2(xi+1+1)2+ a2(yi+1 – 1/2)2 – a2b2

Vẽ phần 2 từ điểm (a,0) đến điểm Q

• Sinh viên vẽ lưu đồ và cài đặt thuật toán giống như yi

Nguyên tắt cơ bản: Áp dụng thuật toán MidPoint/Bresenham vẽ đường cong

a) Nếu 0  f’(x)  1 chọn c) Nếu f’(x) > 1 chọn

• Bước 3: áp dụng thuật toán Midpoint/Bresenham để vẽ theo các bước:

• Nội dung chương trình tập trung:

x min  x1  m(x 2 - x1 )  x max 

• Khi đó xảy ra các trường hợp:

• Nếu N , gọi P và Q là 2 giao điểm, thì: B(x2,y2)

a) Thuật toán Cohen - Sutherland

3 2 1 0 I: 1001 II: 1000 III: 1010

a) Thuật toán Cohen - Sutherland

a) Thuật toán Cohen - Sutherland

• Xét đoạn thẳng AB, có các trường hợp sau: