Giáo trình Cơ sở kỹ thuật đồ hoạ (Nghề: Thiết kế đồ hoạ - CĐ/TC) - Trường Cao đẳng nghề Đồng Tháp

UỶ BAN NHÂN DÂN TỈNH ĐỒNG THÁP
TRƢỜNG CAO ĐẲNG NGHỀ ĐỒNG THÁP

GIÁO TRÌNH CƠ SỞ KỸ THUẬT ĐỒ HOẠ
MƠN HỌC/ MƠ ĐUN: MĐ 18
NGÀNH, NGHỀ: THIẾT KẾ ĐỒ HỌA
TRÌNH ĐỘ: CAO ĐẲNG/TRUNG CẤP
(Ban hành kèm theo Quyết định số ...... /QĐ-CĐCĐ ngày ..... tháng ..... năm 2017
của Hiệu trƣởng trƣờng Cao đẳng Nghề Đồng Tháp)

Đồng Tháp, năm 2017



TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể đƣợc phép
dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.



LỜI GIỚI THIỆU
Trƣớc sự bùng nổ của công nghệ số cùng với sự phát triển nhu cầu nghệ
thuật và thị hiếu thẩm mỹ của công chúng đã và đang thúc đẩy mạnh mẽ những
xu hƣớng mới trong lĩnh vực sáng tạo ứng dụng, trong đó có ngành thiết kế đồ
họa. Câu châm ngôn “trăm nghe không bằng một thấy” cho thấy ý nghĩa rất lớn
của hình ảnh trong việc chuyển tải thơng tin. Hình ảnh bao giờ cũng đƣợc cảm
nhận nhanh và dễ dàng hơn, đặc biệt là trong trƣờng hợp bất đồng về ngơn ngữ.
Do đó khơng có gì ngạc nhiên khi mà ngay từ khi xuất hiện máy tính, các nhà
nghiên cứu đã cố gắng sử dụng nó để phát sinh các ảnh trên màn hình. Và cho

tới ngày nay, khả năng phát sinh hình ảnh bằng máy tính đã đạt tới mức các máy
tính ngày nay đều hỗ trợ khả năng đồ họa rất tốt.
Giáo trình “Cơ sở kỹ thuật đồ họa” đã bám sát nội dung chƣơng trình chi
tiết do nhà trƣờng ban hành gồm 5 chƣơng:
Chƣơng 1. Giới thiệu thuật tốn vẽ và tơ các đƣờng cơ bản
Chƣơng 2. Các thuật tốn tơ màu
Chƣơng 3. Phép biến đổi trong đồ họa hai chiều
Chƣơng 4. Windowing và clipping
Chƣơng 5. Đồ họa ba chiều
Nhằm cung cấp cho sinh viên các cơ sở lý thuyết về đồ hoạ máy tính từ đơn
giản nhất nhƣ các thuật tốn vẽ đƣờng thẳng, đƣờng tròn, đa giác..... đến các kỹ
thuật phức tạp hơn nhƣ: xén tỉa, các phép biến đổi đồ hoạ, các kỹ thuật tô màu...
Tuy đã tham khảo nhiều tài liệu nhƣng chắc chắn cuốn giáo trình vẫn có
những hạn chế nhất định rất mong nhận đƣợc sự góp ý của quý thầy cô, quý
đồng nghiệp để cuốn giáo trình hồn thiện hơn.
Xin chân thành cảm!
Đồng Tháp, ngày…..........tháng…........... năm 2020
Chủ biên
Lƣơng Phụng Tiên

i


MỤC LỤC
TRANG

LỜI GIỚI THIỆU ................................................................................................... i
CHƢƠNG 1: GIỚI THIỆU THUẬT TỐN VẼ VÀ TƠ CÁC ĐƢỜNG CƠ
BẢN ....................................................................................................................... 1
1. Tổng quan: ......................................................................................................... 1

2. Hệ tọa độ thế giới thực, hệ tọa độ thiết bị và hệ tọa độ chuẩn: ......................... 1
2.1. Hệ tọa độ thế giới thực: .................................................................................. 1
2.2. Hệ tọa độ thiết bị ............................................................................................ 2
2.3. Hệ tọa độ chuẩn .............................................................................................. 2
3. Thuật toán vẽ đoạn thẳng .................................................................................. 3
3.1. Thuật toán DDA (Digital DifferentialAnalyzer) ............................................ 4
3.2. Thuật toán Bresenham .................................................................................... 5
4. Thuật tốn vẽ đƣờng trịn .................................................................................. 7
4.1. Thuật tốn đơn giản ........................................................................................ 7
4.2. Thuật toán MidPoint ....................................................................................... 9
4.3. Vẽ đƣờng trịn bằng thuật tốn Bresenham .................................................. 11
4.4. Thuật tốn vẽ Ellipse .................................................................................... 13
4.5. Vẽ đƣờng conics và một số đƣờng cong khác ............................................. 13
4.6. Vẽ đa giác ..................................................................................................... 14
CÂU HỎI VÀ BÀI TẬP CHƢƠNG 1 ................................................................ 16
CHƢƠNG 2: CÁC THUẬT TỐN TƠ MÀU ................................................... 17
1. Tổng quan ........................................................................................................ 17
2. Các không gian màu ........................................................................................ 17
2.1. Không gian màu RGB ................................................................................. 17
2.2. Không gian màu CMY ................................................................................ 18
2.3. Không gian màu HSV ................................................................................. 19
3. Các thuật tốn tơ màu ...................................................................................... 19
ii


3.1. Tơ đơn giản ................................................................................................. 19
3.2. Tơ màu theo dịng quét (scan – line) ........................................................... 22
3.3. Phƣơng pháp tô màu dựa theo đƣờng biên ................................................. 25
CÂU HỎI VÀ BÀI TẬP CHƢƠNG 2................................................................ 26
CHƢƠNG 3: PHÉP BIẾN ĐỔI TRONG ĐỒ HỌA HAI CHIỀU ..................... 27

1. Tổng quan ........................................................................................................ 27
2. Phép tịnh tiến (translation) .............................................................................. 28
3. Phép biến đổi tỷ lệ (Scaling) ........................................................................... 28
4. Phép quay (Rotation)....................................................................................... 29
5. Phép đối xứng.................................................................................................. 31
6. Phép biến dạng (Shearing) .............................................................................. 31
7. Phép biến đổi Affine ngƣợc ............................................................................ 32
8. Một số tính chất của phép biến đổi affine ....................................................... 33
9. Hệ tọa độ thuần nhất........................................................................................ 33
10. Kết hợp các phép biến đổi ............................................................................. 34
CÂU HỎI VÀ BÀI TẬP CHƢƠNG 3................................................................ 36
CHƢƠNG 4: WINDOWING VÀ CLIPPING .................................................... 37
1. Tổng quan ........................................................................................................ 37
2. Các định nghĩa về Windowing ........................................................................ 38
3. Các thuật toán Clipping ................................................................................... 40
3.1. Khái niệm: .................................................................................................... 40
3.2. Clipping điểm: .............................................................................................. 40
3.3. Clipping đoạn thẳng ..................................................................................... 40
3.3. Clipping đa giác ........................................................................................... 45
4. Phép biến đổi từ cửa sổ đến vùng quan sát .................................................... 48
CÂU HỎI VÀ BÀI TẬP CHƢƠNG 4................................................................ 50
CHƢƠNG 5: ĐỒ HỌA BA CHIỀU ................................................................... 51
1. Tổng quan ........................................................................................................ 51
iii


2. Giới thiệu đồ họa 3 chiều ................................................................................ 52
3. Biểu diễn đối tƣợng 3 chiều ............................................................................ 54
4. Các phép biến đổi 3 chiều ............................................................................... 55
4.1. Hệ tọa độ bàn tay phải - bàn tay trái ............................................................ 55

4.2. Các phép biến đổi Affine cơ sở .................................................................... 56
CÂU HỎI VÀ BÀI TẬP CHƢƠNG 5 ................................................................ 58
TÀI LIỆU THAM KHẢO ................................................................................... 59

iv


GIÁO TRÌNH MƠN HỌC
Tên mơn học: CƠ SỞ KỸ THUẬT ĐỒ HỌA.
Mã môn học: MH15KC6480216
Thời gian thực hiện môn học: 60 giờ (Lý thuyết: 30 giờ; Thực hành/ thực tập/thí
nghiệm/ bài tập/thảo luận:28 giờ; Kiểm tra: 1 giờ; Thời gian thi: 1 giờ, hình
thức: Lý thuyết).
I. Vị trí, tính chất, ý nghĩa và vai trị của mơn học:
- Vị trí: Mơn học đƣợc bố trí sau khi ngƣời học học xong các mơn học chung;
Mơn học đƣợc bố trí trƣớc các môn học chuyên sâu về thiết kế, kĩ năng đồ họa.
- Tính chất: Là mơn học về kiến thức cơ sở cho đồ họa, đa phƣơng tiện
- Ý nghĩa và vai trị của mơn học: Mơn học này cung cấp cho sinh viên những lý
thuyết cơ bản về đồ họa trong máy tính.
II. Mục tiêu của mơn học:
- Về kiến thức: Trang bị cho ngƣời học các kiến thức cơ bản về đồ họa, chuẩn bị
cho các môn học về kỹ năng đồ họa;
- Về kỹ năng: Trình bày đƣợc các kiến thức cơ bản về đồ họa.
- Về năng lực tự chủ và trách nhiệm: Rèn luyện cơ bản đầu tiên về đồ họa.
III. Nội dung của môn học:
Thời gian
Số TT

Tên chƣơng mục

1

Tổng
số

Lý
thuyết

Chƣơng 1: Giới thiệu thuật toán
vẽ và tơ các đƣờng cơ bản

8

8

0

2

Chƣơng 2: Các thuật tốn tô màu

8

4

4

3

Chƣơng 3: Phép biến đổi trong đồ

họa hai chiều

12

6

6

4

Chƣơng
clipping

16

6

9

4:

Windowing

và

Thực Kiểm
hành tra

1

v


5

Chƣơng 5: Đồ họa ba chiều

15

6

Kiểm tra/thi kết thúc môn

1

Cộng

60

6

9
1

30

28

2

vi


CHƢƠNG 1: GIỚI THIỆU THUẬT TỐN VẼ VÀ TƠ CÁC
ĐƢỜNG CƠ BẢN
Mã chƣơng: MH 15 -01
Giới thiệu:
Mỗi đối tƣợng đồ họa đƣợc mô tả thông qua dữ liệu về tọa độ và các thuộc
tính của nó, đây chính là thơng tin cho biết kiểu cách mà đối tƣợng đƣợc hiển
thị. Đối tƣợng đồ họa đơn giản nhất là điểm và đoạn thẳng, ngồi ra cịn có
đƣờng trịn, và các đƣờng conics, mặt bậc hai, các mặt và đƣờng splines, các
vùng tơ đa giác, chuỗi kí tự, … cũng đƣợc xem là các đối tƣợng đồ họa để giúp
xây dựng các ảnh phức tạp.
Chƣơng này sẽ khảo sát các thuật toán hiển thị các đối tƣợng đồ họa cho cơ
sở nhƣ đoạn thẳng, đƣờng tròn.
Mục tiêu:
Học xong chương này người học có khả năng: Trình bày một số thuật tốn
vẽ đoạn thẳng, đƣờng trịn.
Nội dung chính:
1. Tổng quan:
Bất kì một ảnh mô tả thế giới thực nào bao giờ cũng đƣợc cấu trúc từ tập
các đối tƣợng đơn giản hơn. Ví dụ một ảnh thể hiện bài trí của một căn phòng
sẽ đƣợc cấu trúc từ các đối tƣợng nhƣ cây cảnh, tủ kính, bàn ghế, tƣờng, ánh
sáng đèn, …
Với các ảnh đồ họa phát sinh bằng máy tính, hình dạng và màu sắc của mỗi
đối tƣợng có thể đƣợc mơ tả riêng biệt bằng hai cách : hoặc là bằng dãy các
pixel tƣơng ứng hoặc là bằng tập các đối tƣợng hình học cơ sở nhƣ điểm, đoạn
thẳng,… và tất cả đều phải đƣợc đặt trong mộ hệ tọa độ nhất định.
2. Hệ tọa độ thế giới thực, hệ tọa độ thiết bị và hệ tọa độ chuẩn:
2.1. Hệ tọa độ thế giới thực:

Một trong những hệ tọa độ thực thƣờng đƣợc dùng để mô tả các đối tƣợng
trong thế giới thực là hệ tọa độ Descartes. Với hệ tọa độ này, mỗi điểm P đƣợc
biểu diễn bằng một cặp tọa độ (xp,yp) với xp, yp R (Xem hình 1.1)

1


- Ox : gọi là trục hoành.
- Oy : gọi là trục tung.
- xp : hoành độ điểm P.
- yp : tung độ điểm P.

2.2. Hệ tọa độ thiết bị

Hình 1.1 Hệ tọa độ thực

Hệ tọa độ thiết bị (device coordinates) đƣợc dùng cho một thiết bị xuất cụ
thể nào đó, ví dụ nhƣ máy in, màn hình,..
Trong hệ tọa độ thiết bị thì các điểm cũng đƣợc mơ tả bởi cặp tọa độ (x,y).
Tuy nhiên, khác với hệ tọa độ thực là x, y N. Điều này có nghĩa là các điểm
trong hệ tọa độ thực đƣợc định nghĩa liên tục, còn các điểm trong hệ tọa độ thiết
bị là rời rạc. Ngoài ra, các tọa độ x, y của hệ tọa độ thiết bị chỉ biểu diễn đƣợc
trong một giới hạn nào đó của N.
Ví dụ : Độ phân giải của màn hình trong chế độ đồ họa là 640x480. Khi đó, x
(0,640) và y (0,480) (xem hình 1.2)

Hình 1.2 Hệ tọa độ trên màn hình

2.3. Hệ tọa độ chuẩn
Do cách định nghĩa các hệ tọa độ thiết bị khác nhau nên một hình ảnh hiển

thị đƣợc 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. Ngƣời ta xây dựng một hệ tọa độ thiết bị chuẩn đại diện chung cho tất
cả các thiết bị để có thể mơ tả các hình ảnh mà khơng phụ thuộc vào bất kỳ thiết
bị nào.

2


Trong hệ tọa độ chuẩn, các tọa độ x, y sẽ đƣợc gán các giá trị trong đoạn từ
[0,1]. Nhƣ vậy, vùng khơng gian của hệ tọa độ chuẩn chính là hình vng đơn
vị có góc trái dƣới (0, 0) và góc phải trên là (1, 1).
Q

trìn
h
mơ
tả
các
đối tƣợng thực nhƣ sau (xem hình 1.3):

Hình 1.3 Hệ tọa độ thiết bị

3. Thuật toán vẽ đoạn thẳng
- Điểm:

Trong hệ toạ độ hai chiều (x,y), ngồi ra nó cịn có tính chất màu sắc.
- Đoạn thẳng:
Một đoạn thẳng đƣợc xác định nếu biết 2 điểm thuộc nó. Phƣơng trình
đoạn thẳng đi qua 2 điểm P (x1,y1) và Q(x2,y2), màu vẽ C nhƣ sau:
(y-y1)/( x-x1) = ( y2-y1)/( x2-x1)

(y-y1)(x2-x1)=(x-x1)(y2-y1)
(x2-x1)y=(y2-y1)x + y1(x2-x1) - x1(y2-y1)
y = ((y2-y1)/(x2-x1))x + y1 - ((y2-y1)/(x2-x1))x1
y = kx + m
k = (y2-y1)/(x2-x1) Độ dốc hay hệ số góc của đƣờng
m = y1- kx1Đoạn chắn trên trục y

Hình 1.4 Đoạn thẳng PQ

Δy = kΔx (tức là khi x thay đổi thì y thay đổi theo)

3


3.1. Thuật tốn DDA (Digital DifferentialAnalyzer)
Để đơn giản hóa giải thuật, chúng ta chỉ xét các đƣờng thẳng có hệ số góc
m trong khoảng [0,1] và x>0. Mỗi bƣớc nhảy của x trong mỗi lần tính tƣơng
đƣơng một điểm ảnh.
Nhƣ vậy tại bƣớc i+1:
xi+1=xi + 1
Và tọa độ y tƣơng ứng yi+1=yi+m
Vì m là số thực nên để thu đƣợc yi+1 nguyên buộc ta phải làm tròn y trƣớc
khi đƣa tọa độ truy xuất lên màn hình

Hình 1.5 Minh họa chọn điểm tiếp theo
trong thuật tốn DDA

Hình 1.6 Lưu đồ thuật tốn
DDA

Ví dụ: Vẽ đoạn thẳng AB bằng giải thuật DDA biết A(1,2) và B(7,6), màu xanh
lá.

4


Dy = y2 – y1 = 6 – 2 = 4
Dx = x2 – x1 = 7 – 1 = 6
m = Dy/Dx = 4/6 = 2/3
x = x1 = 1
y = y1 = 2

3.2. Thuật toán Bresenham
Năm 1960 Bresenham thuộc IBM theo nguyên lý tìm ra các điểm gần với
đƣờng thẳng dựa trên độ phân giải hữu hạn. Giải thuật này loại bỏ đƣợc các
phép toán chia và phép tốn làm trịn nhƣ ta đã thấy trong giải thuật DDA.
Xét đoạn thẳng có hệ số góc m[0,1] và x>0

Hình 1.7 Thuật tốn Bresenham
vẽ đoạn thẳng có 0 ≤ m ≤ 1

Gọi (xi +1,yi +1) là điểm thuộc đoạn thẳng (xem hình 1.7). Ta có y:= m(xi
+1)+b.
Đặt d1 = yi +1 - yi
d2 = (yi +1) - yi +1
Việc chọn điểm (xi +1, yi +1) là P1 hay P2 phụ thuộc vào việc so sánh d1 và d2
hay dấu của d1 - d2.
- Nếu d1- d2<0 : chọn điểm P1, tức là yi +1= yi
- Nếu d1- d2 ≥0 : chọn điểm P2, tức là yi +1= yi
Xét Pi = x (d1 - d2)

Ta có : d1 - d2 = 2 yi+1 - 2yi - 1
= 2m(xi+1) + 2b - 2yi - 1
Pi = x (d1 - d2) = x[2m(xi+1) + 2b - 2yi - 1]
5


= x[2

x (xi+1) + 2b - 2yi - 1]

= 2 y(xi+1) - 2 x.yi + x(2b - 1)
= 2 y.xi - 2 x.yi + 2 y + x(2b - 1)
Vậy C = 2 y + x(2b - 1) = Const
Pi = 2 y.xi - 2 x.yi
Nhận xét rằng nếu tại bƣớc thứ i ta xác định đƣợc dấu của Pi thì xem nhƣ ta
xác định đƣợc điểm cần chọn ở bƣớc (i+1). Ta có :
Pi +1 - Pi = (2 y.xi+1 - 2 x.yi+1 + C) - (2 y.xi - 2 x.yi + C )
Pi +1 = Pi + 2 y - 2 x ( yi+1 - yi )
- Nếu Pi < 0 : chọn điểm P1, tức là yi +1= yi và Pi +1 = Pi + 2 y.
- Nếu Pi ≥ 0 : chọn điểm P2, tức là yi +1= yi +1 và Pi +1 = Pi + 2 y - 2 x
- Giá trị P0 đƣợc tính từ điểm vẽ đầu tiên (x0 ,y0 ) theo công thức :
P0 = 2 y.x0 - 2 x.y0 + C
Do (x0 ,y0 ) là điểm nguyên thuộc về đoạn thẳng nên ta có:
y0 = m .x0 + b =

.x0 + b

Thế vào phƣơng trình trên ta đƣợc :
P0 = 2 y - x
Lƣu đồ thuật toán Bresenham

6


Hình 1.8 Lưu đồ vẽ đoạn thẳng
bằngthuật tốn Bresenham

Ví dụ: Vẽ đoạn thẳng AB bằng giải thuật Bresenham biết A(1,2) và B(7,6), màu
xanh lá.
Dx = x2 – x1 = 7 – 1 = 6
Dy = y2 – y1 = 6 – 2 = 4
P = 2 Dy – Dx = 2*4 – 6 = 2
C1 = 2Dy = 2 *4 = 8
C2 = 2(Dy – Dx) = 2(4 – 6) = - 4
x = 1; y = 2
4. Thuật toán vẽ đƣờng trịn
4.1. Thuật tốn đơn giản
Trong hệ tọa độ Descartes, phƣơng trình đƣờng trịn bán kính R có dạng:
Với tâm O(0,0) : x2 + y2 = R2
7


Với tâm C(xc,yc): (x - xc )2 + (y - yc )2 = R2
Trong hệ tọa độ cực :
x = xc + R.cosθ
y = yc + Y.sinθ
với θ

[0, 2π]

Do tính đối xứng của đƣờng trịn (xem hình 1.9) nên ta 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.

Với đƣờng trịn tâm (xc,Hình
yc) ta1.9cóĐường
thể vẽtrịn
đƣờng
trịn tâm (0,0) sau đó tịnh
với các
điểm đối xứng
tiến theo vectơ (xc, yc).
Cho x = 0, 1, 2, ..., int((

√

) với R > 1

Tại mỗi giá trị x, tính int(y =√

)

Vẽ điểm (x,y) cùng 7 điểm đối xứng của đƣờng trịn.
Cách làm này 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ồi ra đƣờng trịn vẽ ra theo cách này có thể không liền nét (trừ trƣờng
hợp R lớn)
khi x gần R (do chỉ có một giá trị y duy nhất cho một giá trị x).

8

Hình 1.10 Đường trịn vẽ ra khơng liền
nét theo cách vẽ trên

4.2. Thuật tốn MidPoint
Do tính đối xứng của đƣờng tròn nên ta xứng là vẽ đƣợc cả đƣờng tròn.
Thuật toán MidPoint đƣa ra cách chọn yi+1 là yi hay yi-1 bằng cách so sánh điểm
thực Q(xi+1,y) với điểm giữa MidPoind là trung điểm của S1 và S2. Chọn điểm
bắt đầu để vẽ là (0,R). Giả sử (xi, yi) là điểm nguyên đã tìm đƣợc ở bƣớc thứ i
(xem hình 1.8), thì điểm (xi+1, yi+1) ở bƣớc i+1 là sự lựa chọn giữa S1 và S2

Hình 1.11 Đường trịn với điểm
Q(xi+1, y) và điểm MidPoint

Đặt F(x,y) = x2 + y2 - R2 , ta có :
+ F(x,y) < 0 , nếu điểm (x,y) nằm trong đƣờng tròn.
+ F(x,y) = 0 , nếu điểm (x,y) nằm trên đƣờng tròn.
+ F(x,y) > 0 , nếu điểm (x,y) nằm ngồi đƣờng trịn
Xét Pi = F(MidPoint) = F(xi +1, yi -1/2) Ta có :
- Nếu Pi < 0 : điểm MidPoint nằm trong đƣờng trịn. Khi đó điểm thực Q
gần với điểm S1 hơn nên ta chọn yi+1 = yi .
9


- Nếu Pi >= 0 : điểm MidPoint nằm trong đƣờng trịn. Khi đó điểm thực Q
gần với điểm S2 hơn nên ta chọn yi+1 = yi - 1.
Mặt khác:
Pi+1- Pi = F(xi+1 +1, yi+ 1 - 1/2) - F(xi + 1, yi - 1/2)
= [(xi+1 +1)2 + (yi+1 - 1/2)2- R2] - [(xi +1) 2+ (yi - 1/2)2 – R2]

= 2xi + 3 + ((yi+1)2 + (yi)2 ) - (yi+1 - yi)
Vậy :
- Nếu Pi < 0 : chọn yi+1 = yi. Khi đó Pi+1 = Pi + 2xi +3
- Pi >= 0 : chọn yi+1 = yi - 1. Khi đó Pi+1 = Pi + 2xi - 2yi +5.
- Pi ứng với điểm ban đầu ( x0 , y0) = (0,R)
P0 = F(x0 + 1, y0 - 1/2) = F(1, R - 1/2) = 5/4 – R
Lƣu đồ thuật tốn

Hình 1.12 Lưu đồ vẽ đường
trịn bằng thuật tốn Midpoint
10


Ví dụ: Cho đƣờng trịn tâm C(0,0) bán kính 6 bằng giải thuật Midpoint
P = 5/4 – R = -5
x = 0; y = 6

i

Pi

xi

yi

(x, y)

0

-5

0

6

(0,6); (0,6); (0, -6); (0, -6); (6,0); (-6,0); (6,0); (-6,0)

1

-2

1

6

(1,6); (6, 1), (6,-1), (1,-6), (-1,-6), (-6,-1), (- 6,1), (-1,6)

2

3

2

6

(2,6); (6, 2), (6,-2), (2,-6), (-2,-6), (-6,-2), (- 6,2), (-2,6)

3

0

3

5

(3,5); (5, 3), (5,-3), (3,-5), (-3,-5), (-5,-3), (- 5,3), (-3,5)

4

1

4

4

(4,4); (4, 4), (4,-4), (4,-4), (-4,-4), (-4,-4), (- 4,4), (-4,4)

4.3. Vẽ đƣờng trịn bằng thuật tốn Bresenham
Tƣơng tự thuật tốn vẽ đƣờng thẳng Bresenham, các vị trí ứng với các tọa
độ ngun nằm trên đƣờng trịn có thể tính đƣợc bằng cách xác định một trong
hai pixel gần nhất với đƣờng trịn thực hơn trong mỗi bƣớc

Hình 1.13 Đường trịn với khoảng
cách d1 và d2.

Ta có :
d1 = (yi)2 - y2 = (yi)2 - (R2 - (xi + 1)2 )
d2 = y2 - (yi - 1)2 = (R2 - (xi + 1)2 ) - (yi - 1)2

11

Pi = d1 - d2
Tính Pi+1 - Pi
Pi+1 = Pi + 4xi + 6 + 2((yi+1)2 - (yi)2 ) - 2(yi+1 - yi)
- Nếu Pi < 0 : chọn yi+1 = yi. Khi đó Pi+1 = Pi + 4xi +6
- Nếu Pi >= 0 : chọn yi+1 = yi - 1. Khi đó Pi+1 = Pi + 4(xi - yi ) + 10.
- P0 ứng với điểm ban đầu ( x0 , y0 ) = (0,R) là: P0 = 3 – 2R
Lƣu đồ thuật tốn

Hình 1.14 Lưu đồ vẽ đường trịn
bằng thuật tốn Bresenham

Ví dụ: Cho đƣờng trịn tâm C(1,1) bán kính 3
xc = 1; yc = 1; R = 3
P = 3 – 2R = 3 - 2 *3 = - 3
x = 0; y = R = 3
i

Pi

xi

yi

(x, y)

0

-3

0

3

(1,4); (1,4); (2.-2); (0,-2); (4,2); (-2,2); (4,0); (-2,0)

1

3

1

3

(2, 4); (0,4) ; (2 , -2) ;(0 , -2) ; (4 , 2) ; (-2 , 2) ; (4 ,
0) ; (-2 , 0) ;

12


(3, 3); (-1 , 3) ; (3 , -1) ;(-1 , -1) ; (3 , 3) ; (-1 , 3) ;
2

5

2

2

(3 , -1) ; (-1 , -1) ;

4.4. Thuật toán vẽ Ellipse
Tƣơng tự thuật tốn vẽ đƣờng trịn, sử dụng thuật toán Bresenham để vẽ, ta
chỉ cần vẽ 1/4 ellipse, sau đó lấy đối xứng qua các trục tọa độ sẽ vẽ đƣợc tồn
bộ.
Xét ellipse có tâm O, các bán kính là a và b, phƣơng trình là :
Chọn tọa độ pixel đầu tiên cần hiển thị là (xi ,yi) = (0,b). Cần xác định
pixel tiếp theo là (xi+1 ,yi+1) Ta có:

d1 = (yi)2 - y2
d2 = y2 - (yi - 1)2
Pi = d1 - d2
Tính Pi+1 - Pi
Pi+1 = Pi + 2((yi+1)2 - (yi)2 ) - 2(yi+1 - yi) +

(2xi + 3)

- Nếu Pi < 0 : chọn yi+1 = yi. Khi đó Pi+1 = Pi +

(2xi +3)

- Nếu Pi >= 0 : chọn yi+1 = yi - 1. Khi đó Pi+1 = Pi +

(2xi +3) +4(1-

yi)
- Pi ứng với điểm ban đầu ( x0 , y0 ) = (0,b) là: P0 =

- 2b + 1

4.5. Vẽ đƣờng conics và một số đƣờng cong khác
Phƣơng trình tổng quát của các đƣờng conics có dạng :
Ax2 + Bxy + Cy2 + Dx + Ey + F = 0
Giá trị của các hằng số A, B, C, D, E, F sẽ quyết định dạng của đƣờng
conics, cụ thể là
nếu:
13


B2 - 4AC < 0 : dạng đƣờng tròn (nếu A=C và B=0) hay ellipse.
B2 - 4AC = 0 : dạng parabol.
B2 - 4AC > 0 : dạng hyperbol
Áp dụng ý tƣởng của thuật toán Midpoint để vẽ các đƣờng conics và một
số đƣờng cong khác theo các bƣớc theo các bƣớc tuần tự sau:
- Bƣớc 1: Dựa vào dáng điệu và phƣơng trình đƣờng cong, để xem thử có
thể rút gọn phần đƣờng cong cần vẽ hay không.
- Bƣớc 2: Tính đạo hàm, từ đó phân thành các vùng vẽ.
. Nếu 0 ≤ f '(x) ≤ 1 : xi+1 = xi + 1; yi+1 = yi (hoặc = yi +1)
. Nếu -1≤ f '(x) ≤ 0 : xi+1 = xi + 1; yi+1 = yi (hoặc = yi - 1)
. Nếu f '(x) > 1 : yi+1 = yi + 1; xi+1 = xi (hoặc = xi +1)
. Nếu f '(x) < -1 : yi+1 = yi + 1; xi+1 = xi (hoặc = xi +1)
- Bƣớc 3 : Tính Pi cho từng trƣờng hợp để quyết định f '(x) dựa trên dấu
của Pi. Pi thƣờng là hàm đƣợc xây dựng từ phƣơng trình đƣờng cong. Cho Pi=0
nếu (xi , yi) thuộc về đƣờng cong. Việc chọn Pi cần chú ý sao cho các thao tác
tínn Pi sau này hạn chế phép toán trên số thực.
- Bƣớc 4 : Tìm mối liên quan của Pi+1 và Pi bằng cách xét hiệu Pi+1 - Pi
- Bƣớc 5 : Tính P0 và hồn chỉnh thuật tốn
4.6. Vẽ đa giác
Định nghĩa đa giác (Polygone): Đa giác là một đƣờng gấp khúc kín có

đỉnh đầu và đỉnh cuối trùng nhau

Hình 1.15 Hai dạng của đường
gấp khúc

Việc biểu diễn đa giác thông qua:
- Tập các đoạn thẳng

14


- Tập các điểm thuộc đa giác
Đa giác lồi: là đa giác có đƣờng thẳng nối bất kỳ 2 điểm bên trong nào của
đa giác đều nằm trọn trong đa giác. Đa giác khơng lồi là đa giác lõm.

Hình 1.16 Đa giác lồi và đa giác
lõm

Các đƣờng thẳng bao đa giác - cạnh của đa giác. Các điểm giao của cạnh đỉnh của đa giác.
Thông tin cần thiết để xác định đa giác:
- Số cạnh
- Toạ độ các đỉnh của đa giác

15