Trường Đại học Khoa học Huế Khoa CNTT Giáo trình Huãú, thaïng 10 nàm 2008 Trang 1 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Chương I: Các yếu tố cơ sở của đồ hoạ I. Các khái niệm cơ bản I.1. Thiết bị đồ hoạ và điểm ảnh (Pixel) Các thiết bị đồ hoạ thông dụng như màn hình máy tính, máy in,… cho phép chúng ta biểu diễn các hình vẽ trên đó. Các thiết bị đồ hoạ này tạo ra mặt phẳng, đó là một tập hữu hạn các điểm mà mỗi điểm được đánh một cặp chỉ số nguyên gọi là toạ độ, thông thường mặt phẳng đồ hoạ do thiết bị tạo ra là một ma trận điểm, mỗi điểm gọi là một Pixel có các thành phần toạ độ là x và y. (Hình I.1) I.2. Điểm và Đoạn thẳng trong mặt phẳng Về mặt toán học thì một đoạn thẳng bao gồm một tập vô hạn các điểm trong mặt phẳng với cặp toạ độ thực. Song do đặc điểm của các thiết bị hiển thị nên khi biểu diễn trên thiết bị hiển thị của máy tính (như màn hình, máy in,…) thì được nguyên hoá thành một tập hữu hạn các cặp toạ độ nguyên (Hình I.1). Trang 2 Chổồng 1: Caùc yóỳu tọỳ cồ sồớ cuớa õọử hoỹa - Nguyóựn Hổợu Taỡi II. Cỏc thut toỏn v on thng Phng trỡnh tng quỏt ca mt ng thng c vit di dng: y=a*x+b vi a: l h s gúc hay cũn gi l dc, nú phn ỏnh mi tng quan gia 2 bin s x v y. b: l khong chn trờn trc honh Phng trỡnh ng thng i qua 2 im A(x a ,y a ) v B(x b ,y b ) l: y y a y b y a = x x a x b x a (II.a) (vi x a <>x b v y a <>y b . Khi x a =x b thỡ phng trỡnh l x=x a cũn khi y a =y b phng trỡnh l y=y a ) t x = x b x a y = y b y a thỡ (II.a) tr thnh y = y x x y x x a + y a y x b = ax a + y a (II.b) II.1. V on thng da vo phng trỡnh Khi bit c phng trỡnh ca mt ng chỳng ta hon ton cú th v c ng biu din cho ng ú nh vo cỏc tớnh toỏn trờn phng trỡnh. õy ng m ta cn biu din l mt on thng AB vi A(x a ,y a ) v B(x b ,y b ). Phng trỡnh biu din c cho bi (II.b) vi x [ x a , x b ] ; y [ y a , y b ] Quy trỡnh cú th túm tt nh sau: Nu y x : ngha l bin s x bin thiờn nhanh hn bin s y, lỳc ny m bo tớnh liờn tc ca cỏc im v ta cho bin s x thay i tun t v tớnh bin s y qua phng trỡnh. C th nh sau: y = ax + b vi a = Trang 3 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Cho x nhận các giá trị nguyên lần lượt từ x a đến x b , với mỗi giá trị x ta thực hiện: Tính y=ax+b thông qua phương trình Vẽ điểm (x,Round(y)). Ở đây điểm trên đoạn thẳng có toạ độ là (x,y) song ta không thể vẽ điểm đó vì giá trị y là một giá trị thực, mà như đã nói ở mục I là các hệ thống biểu diễn đồ hoạ chỉ có hữu hạn điểm và mỗi điểm có toạ độ nguyên, Vì thể ta buột phải minh hoạ cho điểm (x,y) trên đường thẳng thực bởi một điểm trên hệ thống thiết bị đồ hoạ gần với nó nhất đó là điểm có toạ độ (x,round(y)). Ngược lại: nghĩa là biến số y biến thiên nhanh hơn biến số x, lúc này để đảm bảo tính liên tục của các điểm vẽ ta cho biến số y thay đổi tuần tự và tính biến số x qua phương trình. Cụ thể như sau: Cho y nhận các giá trị nguyên lần lượt từ y a đến y b , với mỗi giá trị y ta thực hiện: Tính x= y − b a (hay x = ∆x ∆y y − ∆x ∆y y a + x a ) Vẽ điểm (Round(x),y). Ví d ụ: Cho A(5,4) đến B(10,7) để vẽ đoạn thẳng AB ta thực hiện các bước sau: Tính ∆ x = x b − x a = 10 − 5 = 5 ∆ y = y b − y a = 7 − 4 = 3  ∆y 3  ∆x Vì ∆y ≤ ∆x nên ta thực hiện theo cách 1 là cho x nhận các giá trị nguyên lần lượt từ x a đến x b , với mỗi giá trị x ta thực hiện: Tính y=ax+b thông qua phương trình Vẽ điểm (x,Round(y)). Cụ thể như sau: Khi x = x a = 5: => y = ax+b = 4; Vẽ điểm (5,4) Khi x = 6: => y = 23/5 = 4.6; Vẽ điểm (6,5) Khi x = 7: => y = 26/5 = 5.2; Vẽ điểm (7,5)  a = =   b = − ax a + y a = 1 5 Trang 4 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Khi x = 8: => y = 29/5 = 5.8; Vẽ điểm (8,6) Khi x = 9: => y = 32/5 = 6.4; Vẽ điểm (9,6) Khi x = 10: => y = 7; Vẽ điểm (10,7) Kết quả ta có hình vẽ đoạn thẳng AB có thể minh họa như sau: 5 6 7 8 9 10 Hình ảnh minh họa một đoạn thẳng từ A(5,4) đến B(10,7) II.2. Vẽ đoạn thẳng dựa vào thuật toán Bresenham Từ quy trình vẽ đoạn thẳng trên (II.1) ta thấy đoạn thẳng AB có thể được vẽ một cách dễ dàng. Song số phép tính cần phải thực hiện trong mỗi bước vẽ còn lớn, cụ thể là ta còn phải tính 1 phép nhân và 1 phép cộng trên trường số thực và một phép tính làm tròn (Round). Cũng với tư tưởng như trên song thuật toán Bresenham hướng tới một sự phân tích bài toán sâu sắc hơn để tìm ra một quy trình vẽ được các điểm song ít tính toán hơn. Trong phần này ta chỉ trình bày giải thuật trong trường hợp hệ số góc của đoạn thẳng a ∈ [ 0,1 ] . Các trường hợp còn lại của hệ số góc như a ∈ [ 1, +∞ ] ; a ∈ [ − ∞,−1 ] ; a ∈ [ −1,0 ] chúng ta có thể lấy đối xứng đoạn thẳng qua các đường phân giác, OX, hay OY để quy về trường hợp a ∈ [ 0,1 ] . Trang 5 Chổồng 1: Caùc yóỳu tọỳ cồ sồớ cuớa õọử hoỹa - Nguyóựn Hổợu Taỡi Rừ rng l vỡ a [ 0,1 ] nờn quy trỡnh õy l cho x nhn cỏc giỏ tr nguyờn ln lt t x a n x b , vi mi giỏ tr x ta cn phi tỡm ra mt giỏ tr y nguyờn (x,y) chớnh l to ca im cn minh ho trờn thit b, song giỏ tr y tỡm ra õy phi thụng qua ớt phộp tớnh toỏn hn quy trỡnh II.1. Gi thit vi hai im u mỳt A(x a ,y a ) v B(x b ,y b ) cú to nguyờn v x a <x b . Rừ rng im u tiờn cn biu din trờn thit b ú l im cú to (x a ,y a ). Nu gi im chn c u tiờn l (x 0 ,y 0 ) thỡ (x 0 ,y 0 )= (x a ,y a ) theo lp lun quy np ta: Gi thit rng n bc th i ta ó chn c im th i, hay núi cỏch khỏc l im chn th i l (x i ,y i ) ó c xỏc nh giỏ tr. Vy n bc tip theo (i+1) ta s chn im no? Hay núi cỏch khỏc l im chn th (i+1) l (x i+1 ,y i+1 ) s cú to bng bao nhiờu. (Chỳ ý: x i ,y i l tờn gi ca to im chn th i, vớ d nh (x 0 ,y 0 ) l tờn gi ca im chn u tiờn (i=0) v nú cú giỏ tr l (x a ,y a )) tr li cõu hi ny ta cn da vo mt s lp lun sau: Nh trờn ó trỡnh by thỡ im chn th i+1 s phi cú honh x bng honh ca im trc ú cng thờm 1: Hay x i+1 =x i +1 Gi M l im thuc AB sao cho x M =x i+1 =x i +1 thỡ y M = ax M +b=a(x i +1)+b= (ax i +b)+a vy im tip theo thuc on thng m ta cn tỡm minh ho trờn thit b l M(x i +1, (ax i +b)+a). Cõu hi t ra l ta s chn im no trong 2 im P(x i +1,y i ) v Q(x i +1,y i +1) minh ho cho M trờn thit b ho. Trang 6 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi xi xi+1 yi I P d1 M yi+1 d2 Q Để trả lời câu hỏi này ta đi xét một biểu thức trung gian: Đặt d 1 =y M -y P ; và d 2 =y Q -y M Xét biểu thức:   y P + y Q  2 Nếu gọi I là trung điểm của QP thì: d 1 − d 2 = 2 [ y M − y I ] Rõ ràng là: Nếu d 1 -d 2 <0 thì điểm y M <y I , suy ra P gần điểm M hơn Q, vậy ta sẽ chọn điểm P là điểm minh họa cho M trên thiết bị đồ hoạ Nếu d 1 -d 2 >0 thì điểm y M >y I , suy ra Q gần điểm M hơn P, vậy ta sẽ chọn điểm Q là điểm minh họa cho M trên thiết bị đồ hoạ Nếu d 1 -d 2 =0 thì điểm y M =y I , suy ra khả năng lựa chọn P và Q là như nhau, song ta phải quyết định chọn một điểm. Trong tình huống này ta quyết định chọn điểm Q. Vậy để tìm được điểm minh hoạ tiếp theo ta cần xét dấu của biểu thức d 1 -d 2 . Song ta thấy biểu thức d 1 -d 2 còn khá phức tạp và phải thực hiện tính toán trên trường số thực do trong đó có xuất hiện phép chia: (*) ∆x ∆x ∆x Để tránh tính biểu thức d 1 -d 2 trên trường số thực người ta hướng tới một biểu thức tương đương về dấu đó là d 1 -d 2 =(y M -y P )-( y Q -y M )=2y M -(y P +y Q ) = 2  y M −   y M =(ax i +b)+a = (ax i + ( − ax a + y a )) + a = x i − x a + y a + ∆y ∆y ∆y P = ∆ x(d 1 − d 2 ) Trang 7 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Việc đưa ∆ x vào nhằm loại bỏ mẫu số trong biểu thức (d 1 -d 2 ) để thu được biểu thức P i tính trên trường số nguyên. Thật vậy: P = ∆ x(d 1 − d 2 ) = ∆ x(2 y M − ( y P + y Q )) = ∆ x(2 y M − ( y i + y i + 1)) = ∆ x(2 y M − 2 y i − 1) P = 2 ∆ xy M − 2 ∆ xy i − ∆ x Thay y M bởi giá trị ở (*) ta được: P = 2 ∆ yx i − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − 2 ∆ xy i − ∆ x = 2 ∆ yx i − 2 ∆ xy i − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − ∆ x (a) Ta thấy biểu thức P i được xác lập từ toạ độ của điểm chọn thứ i là (x i ,y i ). Vậy P i+1 sẽ được xác lập từ điểm chọn thứ i+1 là (x i+1 ,y i+1 ) như sau: P +1 = 2 ∆ yx i+1 − 2 ∆ xy i+1 − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − ∆ x (b) Vì dấu của P i và dấu của (d 1 -d 2 ) là tương đương nên có thể tóm tắt quy tắc chọn điểm tiếp theo như sau: Nếu P i <0: Thì chọn điểm P làm điểm minh họa cho M trên thiết bị đồ hoạ Hay nói cách khác là điểm chọn thứ i+1 là (x i+1 ,y i+1 ) sẽ có giá trị bằng P Nghĩa là: (x i+1 ,y i+1 )=(x i +1,y i ) Thay vào (b) ta có: P +1 = 2 ∆ y(x i + 1) − 2 ∆ xy i − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − ∆ x = P + 2∆y Nếu P ≥ 0 : Thì chọn điểm Q là điểm minh họa cho M trên thiết bị đồ hoạ Hay nói cách khác là điểm chọn thứ i+1 là (x i+1 ,y i+1 ) sẽ có giá trị bằng Q Nghĩa là: (x i+1 ,y i+1 )=(x i +1,y i +1) Thay vào (b) ta có: P +1 = 2 ∆ y(x i + 1) − 2 ∆ x( y i + 1) − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − ∆ x = P + 2∆y − 2∆x i i i i i i i i i i Khi i=0 thì ta có (x 0 ,y 0 )=(x a ,y a ) thay vào (a) ta có: P 0 = 2 ∆ yx 0 − 2 ∆ xy 0 − 2 ∆ yx a + 2 ∆ xy a + 2 ∆ y − ∆ x = 2∆y − ∆x Trang 8 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Vậy từ đây ta thấy được quy trình chọn ra các điểm trên thiết bị để minh hoạ cho đoạn thẳng AB theo thuật toán Bresenham như sau: Điểm chọn đầu tiên (i=0) là (x 0 ,y 0 )=(x a ,y a ) và giá trị P 0 = 2 ∆ y − ∆ x Dựa vào giá trị của P 0 là âm hay dương mà ta lại chọn được điểm tiếp theo (x 1 ,y 1 ) và tính được giá trị P 1 Dựa vào giá trị của P 1 là âm hay dương mà ta lại chọn được điểm tiếp theo (x 2 ,y 2 ) và tính được giá trị P 2 Cứ như vậy ta tìm ra được tập các điểm trên thiết bị đồ hoạ để minh hoạ cho đoạn thẳng AB. II.2.a. Tóm tắt thuật toán Bresenham: B ướ c 1: Tính ∆x;∆y Const1=2∆y; Const2=2∆y-2∆x P 0 =2∆y-∆x; (x 0 , y 0 ) = (x a , y a ) Vẽ điểm (x 0 , y 0 ) Bướ c 2: Với mỗi giá trị i (i=0,1,2,…) ta xét dấu P i Nếu P i <0: thì chọn điểm tiếp theo là (x i+1 ,y i+1 )=(x i +1,y i ) P i+1 =P i +Const1 Ngược lại (tức Pi ≥ 0): thì chọn điểm tiếp theo là (x i+1 ,y i+1 )=(x i +1,y i +1) P i+1 =P i +Const2 Vẽ điểm (x i+1 ,y i+1 ) vừa tìm được B ướ c 3: Lặp lại bước 2 với những giá trị i tiếp theo, cho đến khi điểm tìm được trùng với B, nghĩa là x i+1 =x b thì thuật toán kết thúc. II.2.b. Ví dụ: Cho đoạn thẳng AB với A(5,6) và B(10,10). Sử dụng thuật toán Bresenham chúng ta có thể tìm được các Pixel cần vẽ để biểu diễn đoạn AB trên màn hình như sau: B ướ c 1: ∆x = 10-5 = 5; ∆y = 10-6 = 4; Trang 9 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Const1 = 2∆y = 8; Const2 = 2∆y-2∆x = 8-10 = -2; P 0 = 2∆y-∆x = 8-5 = 3; (x 0 , y 0 ) = (x a , y a ) = (5,6) Vẽ điểm (x 0 , y 0 ) B ướ c 2: Bước lặp: i = 0: Ta có P 0 = 3≥0 nên: (x 1 ,y 1 ) = (x 0 +1,y 0 +1) = (6,7) P 1 =P 0 +Const2 = 3+(-2)=1 Vẽ điểm (x 1 , y 1 ) = (6,7) i = 1: Ta có P 1 = 1≥0 nên: (x 2 ,y 2 ) = (x 1 +1,y 1 +1) = (7,8) P 2 =P 1 +Const2 = 1+(-2)= -1 Vẽ điểm (x 2 , y 2 ) = (7,8) i = 2: Ta có P 2 = -1<0 nên: (x 3 ,y 3 ) = (x 2 +1,y 2 ) = (8,8) P 3 =P 2 +Const1 = -1+8 = 7 Vẽ điểm (x 3 , y 3 ) = (8,8) i = 3: Ta có P 3 = 7≥0 nên: (x 4 ,y 4 ) = (x 3 +1,y 3 +1) = (9,9) P 4 =P 3 +Const2 = 7+(-2) = 5 Vẽ điểm (x 4 , y 4 ) = (9,9) i = 4: Ta có P 4 = 5≥0 nên: (x 5 ,y 5 ) = (x 4 +1,y 4 +1) = (10,10) P 5 =P 4 +Const2 = 5+(-2) = 3 Vẽ điểm (x 5 , y 5 ) = (10,10) Vì x 5 = x b = 10 nên kết thúc vòng lặp và cũng là kết thúc thuật toán. Hình vẽ minh họa: [...]... im nguyờn gn nht vi B Mt im ỏng chỳ ý õy cỏc giỏ tr P tip theo cú c bng cỏch cng vi giỏ tr P trc ú vi mt lng nguyờn 2xi +3 hoc 2(xi yi) +5 tu theo du 1 4 cho vic tớnh cỏc giỏ tr P tip theo cng phi x lý trờn trng s thc Mt iu d thy l nu ta thay i giỏ tr P0 khi u l 1-R thỡ du ca P0 v cỏc Pi cú c sau ú khụng h thay i v du (mt dự cú b gim mt lng 0.25) do ú kt qu thut toỏn khụng h b thay i, song cỏc tớnh... div 2,getmaxy div 2,a,b); until readkey=#27; closegraph; END V Bi tp cui chng 1 Cho im A(5,7) v B(15,15) S dng thut toỏn Bresenham ó cho tỡm to cỏc im v (xi , yi) 2 Ci t mt th tc v ng thng tng quỏt (x lý c vi tt c mi tỡnh hung) theo thut toỏn Bresenham 3 S dng thut toỏn v ng trũn Midpoint tớnh giỏ tr cỏc im v (xi , yi) bit rng R=20 4 Ci t mt th tc v ng trũn theo thut toỏn MidPoint 5 Ci t mt th tc cho . Huế Khoa CNTT Giáo trình Huãú, thaïng 10 nàm 2008 Trang 1 Chæång 1: Caïc yãúu täú cå såí cuía âäö hoüa - Nguyãùn Hæîu Taìi Chương I: Các yếu tố cơ sở của đồ hoạ I. Các . bản I.1. Thiết bị đồ hoạ và điểm ảnh (Pixel) Các thiết bị đồ hoạ thông dụng như màn hình máy tính, máy in,… cho phép chúng ta biểu diễn các hình vẽ trên đó. Các thiết bị đồ hoạ này tạo. thẳng AB có thể minh họa như sau: 5 6 7 8 9 10 Hình ảnh minh họa một đoạn thẳng từ A(5,4) đến B(10,7) II.2. Vẽ đoạn thẳng dựa vào thuật toán Bresenham Từ quy trình vẽ đoạn thẳng