Đồ họa máy tính pdf

1
18/05/2010 1
Đ
Đ
Ồ
Ồ
H
H
Ọ
Ọ
A
A
M
M
Á
Á
Y
Y
T
T
Í
Í
NH
NH
BỘ CÔNG THƯƠNG
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM
GV : Tr
GV : Tr
ầ
ầ
n B

n B
á
á
Á
Á
nh
nh
Email
Email
:
:


18/05/2010 2
Tài liệu tham khảo chính
 1. Cơ Sở Đồ Họa Máy Tính - Hoàng Kiếm, Dương Anh Đức
 2. Francis S. Hill, Computer Graphics
 WWW
2
18/05/2010 3
Thời lượng chương trình
 30 LT + 60 TH (Tổng: 90 Tiết)
 Qui định nghỉ học không quá: 20% số tiết (không quá 4
buổi)
 Điểm kiểm tra miệng: 2 (1 con điểm Lấy trong giờ thực
hành, 1 con điểm Chấm vở ghi)
 Điểm kiểm tra giữa kỳ: >=5 mới được phép dự thi cuối
kỳ (Không tổ chức thi lại giữa kỳ)
 Dự thi cuối kỳ: Nghỉ học không quá 4 buổi + Điểm giữa
kỳ >=5

C
C
Á
Á
C Đ
C Đ
Ố
Ố
I TƯ
I TƯ
Ợ
Ợ
NG Đ
NG Đ
Ồ
Ồ
H
H
Ọ
Ọ
A CƠ S
A CƠ S
Ở
Ở
Chương 2
1. Các đối tượng đồ họa cơ sở
2. Các thuật toán vẽ đường
3. Các thuật toán tô màu
3
Các đối tượng đồ họa cơ sở

Phần 1
18/05/2010
18/05/2010
6
6
6
6
P
wc
(x, y)
P
wc
(x, y)
x
max
y
max
x
y
O O
4
18/05/2010
18/05/2010
7
7
7
7
x
y
O

x
y
O
Quy ước bàn tay phải
Quy ước bàn tay trái
18/05/2010
18/05/2010
8
8
• Có hai cách biểu diễn các ảnh này, đó là:
– Biểu diễn bằng dãy các pixel.
– Biểu diễn bằng tập các đối tượng hình học cơ
sở như đoạn thẳng hay vùng tô đa giác, …
Sau đó, các đối tượng cơ sở sẽ được chuyển
sang dãy các pixel tương ứng để hiển thị.
• Quá trình chuyển các đối tượng đồ họa cơ sở
về dãy các pixel tương ứng được gọi là quá
trình chuyển đổi bằng dòng quét (scan-
converting).
8
8
5
18/05/2010
18/05/2010
9
9
9
9
18/05/2010
18/05/2010

10
10
• Điểm: (x, y, c)
– Thông tin: Tọa độ (x, y).
– Thuộc tính: Màu sắc (c).
10
10
6
18/05/2010
18/05/2010
11
11
• Thông tin: Điểm đầu (x1, y1) và điểm cuối (x2, y2).
11
11
18/05/2010
18/05/2010
12
12
12
12
7
18/05/2010
18/05/2010
13
13
13
13
18/05/2010
18/05/2010

14
14
14
14
8
18/05/2010
18/05/2010
15
15
15
15
18/05/2010
18/05/2010
16
16
• Màu sắc
• Độ rộng nét vẽ
• Kiểu vẽ
16
16
9
18/05/2010
18/05/2010
17
17
17
17
18/05/2010
18/05/2010
18

18
• Các thuộc tính:
– Màu sắc
– Font chữ
–Kích thước
– Khoảng cách
– Sự canh chỉnh
– Cách hiển thị tuần tự
18
18
10
Các thuật toán vẽ đường
Phần 2
• Đoạn thẳng
• Đường tròn
• Các đường cong Conic
18/05/2010
18/05/2010
20
20
• Giả sử tọa độ các điểm nguyên sau khi xấp xỉ
đối tượng thực lần lượt là (x
i
, y
i
), i = 0, Đây
là các điểm nguyên sẽ được hiển thị trên màn
hình.
• Bài toán đặt ra là nếu biết được (x
i

, y
i
) là tọa độ
nguyên xác định ở bước thứ i, điểm nguyên tiếp
theo (x
i+1
, y
i+1
) sẽ được xác định như thế nào?
20
20
11
18/05/2010
18/05/2010
21
21
• Đối tượng hiển thị trên lưới nguyên được liền
nét, các điểm mà (x
i+1
, y
i+1
) có thể chọn chỉ là
một trong tám điểm được đánh số từ 1 đến 8
trong hình sau (điểm đen chính là (x
i
, y
i
)).Hay
nói cách khác:
(x

i+1
, y
i+1
) = (x
i
 1, y
i
 1)
21
21
18/05/2010
18/05/2010
22
22
• Xét đoạn thẳng có hệ số góc 0 < m < 1 và
Dx > 0.
• Điểm cần chọn (x
i+1
, y
i+1
) ở bước thứ (i+1) sẽ là
một trong hai trường hợp như hình vẽ sau:
22
22
12
18/05/2010
18/05/2010
23
23
23

23
18/05/2010
18/05/2010
24
24
• Nếu tính trực tiếp giá trị thực y ở mỗi bước từ phương
trình y = mx + b thì phải cần một phép toán nhân và một
phép toán cộng số thực. Để cải thiện tốc độ, người ta
tính giá trị thực của y ở mỗi bước theo cách sau để khử
phép tính nhân trên số thực:
– Nhận xét rằng:
• y
sau
= mx
i+1
+ b = m(x
i
+ 1) + b = mx
i
+ b + m
• y
trước
= mx
i
+ b
– Suy ra: y
sau
= y
trước
+ m.

24
24
13
18/05/2010
18/05/2010
25
25
25
25
18/05/2010
18/05/2010
26
26
• Cho A(12, 20) và B(22, 27), ta có m = 0.7
26
26
i x
i
y
i
y
0 12 20 20
1 13 21 20.7
2 14 21 21.4
3 15 22 22.1
4 16 23 22.8
5 17 24 23.5
6 18 24 24.2
7 19 25 24.9
8 20 26 25.6

9 21 26 26.3
10 22 27 27
14
18/05/2010
18/05/2010
27
27
#define Round(a) int(a+0.5)
int Color = GREEN;
void LineDDA (int x1, int y1, int x2, int y2)
{
int x = x1;
float y = y1;
float m = float(y2-y1)/(x2-x1);
putpixel(x, Round(y), Color);
for(int i=x1; i<x2; i++){
x++;
y +=m;
putpixel(x, Round(y), Color);
}
} // LineDDA
#define Round(a) int(a+0.5)
int Color = GREEN;
void LineDDA (int x1, int y1, int x2, int y2)
{
int x = x1;
float y = y1;
float m = float(y2-y1)/(x2-x1);
putpixel(x, Round(y), Color);
for(int i=x1; i<x2; i++){

x++;
y +=m;
putpixel(x, Round(y), Color);
}
} // LineDDA
27
27
18/05/2010
18/05/2010
28
28
28
28
• Đặt d
1
= y – y
i
; d
2
= (y
i
+ 1) – y
• Xét p
i
= Dx(d
1
– d
2
) = Dx(2y – 2y
i

– 1)
 p
i
= Dx[2(m(x
i
+ 1) + b) – 2y
i
– 1]
• Thay m = Dy/Dx vào phương trình
trên, ta được:
p
i
= 2Dyx
i
– 2Dxy
i
+ c
với c = 2Dy + (2b – 1)Dx
15
18/05/2010
18/05/2010
29
29
29
29
18/05/2010
18/05/2010
30
30
• Từ đây ta có thể suy ra cách tính p

i+1
từ p
i
như
sau:
– Nếu p
i
< 0 thì p
i+1
= p
i
+ 2Dy,
do ta chọn y
i+1
= y
i
.
– Ngược lại, nếu p
i
≥ 0, thì p
i+1
= p
i
+ 2Dy – 2Dx,
do ta chọn y
i+1
= y
i
+ 1.
30

30
16
18/05/2010
18/05/2010
31
31
• Giá trị p
0
được tính từ điểm vẽ đầu tiên (x
0
, y
0
)
theo công thức:
p
0
= 2Dyx
0
– 2Dxy
0
+ c
= 2Dyx
0
– 2Dxy
0
+ 2Dy + (2b – 1)Dx
• Do (x
0
, y
0

) là điểm nguyên thuộc về đoạn thẳng
nên ta có y
0
= mx
0
+ b = (Dy/Dx)x
0
+ b. Thế vào
phương trình trên, suy ra:
p
0
= 2Dy – Dx
31
31
18/05/2010
18/05/2010
32
32
32
32
Lưu đồ thuật toán
Bresenham
17
18/05/2010
18/05/2010
33
33
• Ví dụ: Cho A(12, 20) và B(22, 27),
• Ta có:
– Dx = 22 – 12 = 10, Dy = 27 – 20 = 7

– Const
1
= 2Dy = 14, Const
2
= 2(Dy – Dx) = -6
– p0 = 2Dy – Dx = 14 – 10 = 4
33
33
18/05/2010
18/05/2010
34
34
i x
i
y
i
p
0 12 20 4
1 13 21 -2
2 14 21 12
3 15 22 6
4 16 23 0
5 17 24 -6
6 18 24 8
7 19 25 2
8 20 26 -4
9 21 26 10
10 22 27 4
34
34

18
18/05/2010
18/05/2010
35
35
void LineBres (int x1, int y1, int x2, int y2)
{
int Dx, Dy, p, Const1, Const2;
int x, y;
Dx = x2 - x1;
Dy = y2 - y1;
p = 2*Dy - Dx; // Dy <<1 - Dx
Const1 = 2*Dy; // Dy <<1
Const2 = 2*(Dy-Dx); // (Dy-Dx) <<1
x = x1;
y = y1;
putpixel(x, y, Color);
for(i=x1; i<x2; i++){
if (p<0)
p += Const1;
else{
p += Const2;
y++;
}
x++;
putpixel(x, y, Color);
}
} // LineBres
void LineBres (int x1, int y1, int x2, int y2)
{

int Dx, Dy, p, Const1, Const2;
int x, y;
Dx = x2 - x1;
Dy = y2 - y1;
p = 2*Dy - Dx; // Dy <<1 - Dx
Const1 = 2*Dy; // Dy <<1
Const2 = 2*(Dy-Dx); // (Dy-Dx) <<1
x = x1;
y = y1;
putpixel(x, y, Color);
for(i=x1; i<x2; i++){
if (p<0)
p += Const1;
else{
p += Const2;
y++;
}
x++;
putpixel(x, y, Color);
}
} // LineBres
35
35
18/05/2010
18/05/2010
36
36
36
36
19

18/05/2010
18/05/2010
37
37
• Ta có dạng tổng quát của phương trình đường
thẳng: Ax + By + C = 0
với A = y
2
– y
1
, B = – (x
2
– x
1
), C = x
2
y
1
– x
1
y
2
• Đặt F(x, y) = Ax + By + C , ta có nhận xét:
• Lúc này việc chọn các điểm S, P ở trên được
đưa về việc xét dấu của
p
i
= 2F(MidPoint) = 2F(x
i
+ 1, y

i
+ ½)
37
37
18/05/2010
18/05/2010
38
38
38
38