Giới thiệu các thuật toán vẽ và tô các đường cơ bản

Mục tiêu của chương 1

Học xong chương này, sinh viên phải nắm bắt được các vấn đề sau:

- Thế nào là hệ đồ họa

- Thiết kế và cài đặt được các thủ tục vẽ và tô các đường cơ bản như đường thẳng, đường tròn, elip, và các đường cong khác.

Kiến thức cơ bản cần thiết

Các kiến thức cơ bản cần thiết để học chương này bao gồm :

- Các khái niệm toán học về đường thẳng như : đường thẳng là gì : dạng tổng quát phương trình đường thẳng, hệ số góc, tung độ dốc.

- Hiểu rõ hình dáng của đường thẳng phụ thuộc vào hệ số góc như thế nào.

- Phương trình tổng quát của đường tròn, ellippse ( không có tham số và có tham số).

- Kĩ thuật lập trình: thiết lập thủ tục, hàm (lưu ý truyền qui chiếu và truyền giá trị).

Tài liệu tham khảo

Donald Hearn, M. Pauline Baker. Computer Graphics . Prentice-Hall, Inc., Englewood Cliffs, New Jersey , 1986 (chapters 3, 55-76).

Nội dung cốt lõi

Thiết lập thủ tục vẽ :

- Đường thẳng bằng giải thuật DDA

- Đường thẳng bằng giải thuật Bresenham

- Đường tròn bằng giải thuật đối xứng

- Đường tròn bằng giải thuật Bresenham

- Đường tròn bằng giải thuật MidPoint

- Ellippse

- Đa giác

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 độ (x_p,y_p) với x_p, y_p ∈R (xem hình 1.1).

. Ox : gọi là trục hoành.

. Oy : gọi là trục tung.

. x_p : hoành độ điểm P.

. y_p : tung độ điểm P.

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

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ệ tọa độ thiết bị chuẩn (Normalized device coordinates)

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.

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 vuông đơn vị có góc trái dưới (0, 0) và góc phải trên là (1, 1).

Quá trình mô tả các đối tượng thực như sau (xem hình 1.3):

Thuật toán vẽ đoạn thẳng

Xét đoạn thẳng có hệ số góc 0<m<=1 và Δx>0. Với các đoạn thẳng dạng này, nếu (x_i, y_i) là điểm đã được xác định ở bước thứ i thì điểm kế tiếp (x_i+1, y_i+1) ở bước thứ i+1 sẽ là một trong hai điểm sau (xem hình vẽ 1.4) :

Vấn đề đặt ra là chọn điểm vẽ như thế nào để đường thẳng được vẽ gần với đường thẳng muốn vẽ nhất và đạt được tối ưu hóa về mặt tốc độ ?

Thuật toán DDA (Digital DifferentialAnalyzer)

Là thuật toán tính toán các điểm vẽ dọc theo đường thẳng dựa vào hệ số góc của phương trình đường thẳng y=mx+b.

Trong đó, m= ΔyΔx size 12{ { {Δy} over {Δx} } } {}, Δy = y_i+1 - y_i , Δx = x_i+1 - x_i

Nhận thấy trong hình vẽ 1.4 thì tọa độ của điểm x sẽ tăng 1 đơn vị trên mỗi điểm vẽ, còn việc quyết định chọn y_{i +1} là y_i +1 hay y_i sẽ phụ thuộc vào giá trị sau khi làm tròn của tung độ y. Tuy nhiên, nếu tính trực tiếp giá trị thực của y ở mỗi bước từ phương trình y=mx+b thì cần một phép toán nhân và một phép toán cộng số thực.

y_{i +1} = mx_{i +1} + b = m(x_i + 1) + b = mx_i + b + m

Để cải thiện tốc độ, người ta khử phép nhân trên số thực.

Ta có : y_i = mx_i + b

Suy ra y_{i +1} = y_i + m → int(y_{i +1})

• Tóm lại khi 0<m<=1 :

x_{i +1} = x_i + 1

y_{i +1} = y_i + m → int(y_{i +1})

• Trường hợp m>1: chọn bước tăng trên trục y một đơn vị.

x_{i +1} = x_i + 1/m → int(x_{i +1})

y_{i +1} = y_i + 1

Hai trường hợp này dùng để vẽ một điểm bắt đầu từ bên trái đến điểm cuối cùng bên phải của đường thẳng (xem hình 1.5). Nếu điểm bắt đầu từ bên phải đến điểm cuối cùng bên trái thì xét ngược lại :

• 0<m<=1: x_{i +1} := xi - 1

y_{i +1}:= yi - m ® int(yi+1)

• m>1: x_{i +1}:= xi – 1/m ® int(xi+1)

y_{i +1}:= yi – 1

Tương tự, có thể tính toán các điểm vẽ cho trường hợp m<0: khi |m|<=1 hoặc |m|>1 (sinh viên tự tìm hiểu thêm).

Lưu đồ thuật toán DDA

Cài đặt minh họa thuật toán DDA

Procedure DDA ( x1, y1, x2, y2, color : integer );
    Var dx, dy, step : integer;
    X_inc, y_inc , x, y : real ;
    Begin 
    dx:=x2-x1;
    dy:=y2-y1;
    if abs(dx)>abs(dy) then steps:=abs(dx)
    else steps:=abs(dy);
    x_inc:=dx/steps;
    y_inc:=dy/steps;
    x:=x1; y:=y1;
    putpixel(round(x),round(y), color);
    for k:=1 to steps do
    begin
    x:=x+x_inc;
    y:=y+y_inc;
    putpixel(round(x),round(y), color);
    end;
    end;
    
    

Thuật toán Bresenham

Gọi (x_i +1,y_{i +1}) là điểm thuộc đoạn thẳng (xem hình 1.6). Ta có y:= m(x_i +1)+b.

Đặt d₁ = y_{i +1} - y_i

d₂ = (y_i +1) - y_{i +1}

Việc chọn điểm (x_{i +1}, y_{i +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à y_{i +1}= y_i

- Nếu d1-d2 ≥0 : chọn điểm P2, tức là y_{i +1}= y_i +1

Xét P_i = Δx (d₁ - d₂)

Ta có : d₁ - d₂ = 2 y_i+1 - 2y_i - 1

= 2m(x_i+1) + 2b - 2y_i - 1

Suy ra P_i = Δx (d₁ - d₂) = Δx[2m(x_i+1) + 2b - 2y_i - 1]

= Δx[2 DyDx size 12{ { {Dy} over {Dx} } } {} (x_i+1) + 2b - 2y_i - 1]

= 2Δy(x_i+1) - 2Δx.y_i + Δx(2b - 1)

= 2Δy.x_i - 2Δx.y_i + 2Δy + Δx(2b - 1)

Vậy C = 2Δy + Δx(2b - 1) = Const

⇒ P_i = 2Δy.x_i - 2Δx.y_i + C

Nhận xét rằng nếu tại bước thứ i ta xác định được dấu của P_i thì xem như ta xác định được điểm cần chọn ở bước (i+1). Ta có :

P_{i +1} - P_i = (2Δy.x_i+1 - 2Δx.y_i+1 + C) - (2Δy.x_i - 2Δx.y_i + C )

⇔ P_{i +1} = P_i + 2Δy - 2Δx ( y_i+1 - .y_i )

- Nếu P_i < 0 : chọn điểm P1, tức là y_{i +1}= y_i và P_{i +1} = P_i + 2Δy.

- Nếu P_i ≥ 0 : chọn điểm P2, tức là y_{i +1}= y_i +1 và P_{i +1} = P_i + 2Δy - 2Δx

- Giá trị P₀ được tính từ điểm vẽ đầu tiên (x₀ ,y₀ ) theo công thức :

P₀ = 2Δy.x₀ - 2Δx.y₀ + C

Do (x₀ ,y₀ ) là điểm nguyên thuộc về đoạn thẳng nên ta có :

y₀ = m .x₀ + b = DyDx size 12{ { {Dy} over {Dx} } } {}.x₀ + b

Thế vào phương trình trên ta được :

P₀ = 2Δy - Δx

Lưu đồ thuật toán Bresenham

Cài đặt minh họa thuật toán Bresenham

Procedure Bres_Line (x1,y1,x2,y2 : integer);
    Var dx, dy, x, y, P, const1, const2 : integer;
    Begin
    dx : = x2 - x1; dy : = y2 - y1;   
    P : = 2*dy - dx; 
    Const1 : = 2*dy ; const2 : = 2*(dy - dx) ;
    x:= x1; y:=y1;     
    Putpixel ( x, y, Color);
    while (x < x-2 ) do
     begin
    x : = x +1 ;
    if (P < 0) then P : = P + const1
    else 
     begin
     y : = y+1 ;
     P : = P + const2
     end ;
    putpixel (x, y, color) ;
     end ;
    End ; 
    

Nhận xét :

Thuật toán Bresenham chỉ thao tác trên số nguyên và chỉ tính toán trên phép cộng và phép nhân 2 (phép dịch bit). Điều này là một cải tiến làm tăng tốc độ đáng kể so với thuật toán DDA.

Ý tưởng chính của thuật toán này là ở chổ xét dấu P_i để quyết định điểm kế tiếp, và sử dụng công thức truy hồi P_{i +1} - P_i để tính P_i bằng các phép toán đơn giản trên số nguyên.

Tuy nhiên, việc xây dựng trường hợp tổng quát cho thuật toán Bresenham có phức tạp hơn thuật toán DDA.

Thuật toán vẽ đường trò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) : x² + y² = R²

Với tâm C(x_c,y_c): (x - x_c )² + (y - y_c )² = R²

Trong hệ tọa độ cực :

x = x_c + R.cosθ

y = y_c + Y.sinθ

với θ ∈ [0, 2π].

Do tính đối xứng của đường tròn C (xem hình 1.7) 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.

Thuật toán đơn giản

Cho x = 0, 1, 2, ..., int(R22 size 12{ { {R sqrt {2} } over {2} } } {}) với R>1.

- Tại mỗi giá trị x, tính int(y = R2−x2 size 12{ sqrt {R rSup { size 8{2} } - x rSup { size 8{2} } } } {}).

- Vẽ điểm (x,y) cùng 7 điểm đối xứng của nó.

Cài đặt minh họa thuật toán đơn giản.

Procedure Circle (xc, yc, R : integer) ;
    Var x, y : integer ;
    Procedure DOIXUNG ;
    Begin
    putpixel (xc + x , yc +y, color) ; 
    putpixel (xc - x , yc + y, color) ; 
    putpixel (xc + x , yc - y, color) ; 
    putpixel (xc - x , yc- y, color) ; 
    putpixel (xc + y , yc + x, color) ; 
    putpixel (xc - y , yc + x, color) ; 
    putpixel (xc + y , yc - x, color) ; 
    putpixel (xc - y , yc - x, color) ; 
    End ;
    Begin
    For x : = 0 to round(R*Sqrt(2)/2) do
    Begin
    y : = round(Sqrt(R*R - x*x)) ;
    DOIXUNG;
    End ;
    End ;
    

Thuật toán xét điểm giữa (MidPoint)

Do tính đối xứng của đường tròn nên ta chỉ cần vẽ 1/8 cung tròn, sau đó lấy đối xứng là vẽ được cả đường tròn. Thuật toán MidPoint đưa ra cách chọn y_i+1 là y_i hay y_i-1 bằng cách so sánh điểm thực Q(x_i+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ử (x_i, y_i) là điểm nguyên đã tìm được ở bước thứ i (xem hình 1.8), thì điểm (x_i+1, y_i+1) ở bước i+1 là sự lựa chọn giữa S1 và S2.

Đặt F(x,y) = x² + y² - R² , 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 ngoài đường tròn.

Xét P_i = F(MidPoint) = F(x_i +1, y_i - 1/2). Ta có :

- Nếu P_i < 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 y_i+1 = y_i .

- Nếu P_i >= 0 : điểm MidPoint nằm ngòai đường tròn. Khi đó, điểm thực Q gần với điểm S2 hơn nên ta chọn y_i+1 = y_i - 1.

Mặt khác :

P_i+1 - P_i = F(x_i+1 +1, y_i+1 - 1/2) - F(x_i + 1, y_i - 1/2)

= [(x_i+1 +1)² + (y_i+1 - 1/2)² - R² ] - [(x_i +1)² + (y_i - 1/2)² - R² ]

= 2x_i + 3 + ((y_i+1)² + (y_i)² ) - (y_i+1 - y_i)

Vậy :

- Nếu P_i < 0 : chọn y_i+1 = y_i. Khi đó P_i+1 = P_i + 2x_i +3

- Nếu P_i >= 0 : chọn y_i+1 = y_i - 1. Khi đó P_i+1 = P_i + 2x_i - 2y_i +5.

- P_i ứng với điểm ban đầu ( x₀ , y₀ ) = (0,R) là:

P₀ = F(x₀ + 1, y₀ - 1/2) = F(1, R - 1/2) = 54 size 12{ { {5} over {4} } } {} -R

Lưu đồ thuật toán MidPoint vẽ đường tròn

Minh họa thuật toán MidPoint:

Procedure DTR(xc, yc, r, mau : integer); 
Var 	dx, dy, step : integer;
	X_inc, y_inc , x, y : real ;
Begin 
	dx:=x2-x1;
        	dy:=y2-y1;
	if abs(dx)>abs(dy) then   steps:=abs(dx)
		else 	steps:=abs(dy);
           x_inc:=dx/steps;
        	y_inc:=dy/steps;
        	x:=x1; 	y:=y1;
	putpixel(round(x),round(y), color);
	for k:=1 to steps do
	begin
           			x:=x+x_inc;
           			y:=y+y_inc;
           			putpixel(round(x),round(y),  color);
           end;
end;

Vẽ đường tròn bằng thuật toán Bresenham

Tương tự thuật toán vẽ đường thẳng Bresenham, các vị trí ứng với các tọa độ nguyên 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 ( xem hình 1.9).

Ta có :

d1 = (y_i)² - y² = (y_i)² - (R²- (x_i + 1)² )

d2 = y² - (y_i - 1)² = (R²- (x_i + 1)² ) - (y_i - 1)²

P_i = d1 - d2

Tính P_i+1 - P_i

⇒ P_i+1 = P_i + 4x_i + 6 + 2((y_i+1)² - (y_i)² ) - 2(y_i+1 - y_i)

- Nếu P_i < 0 : chọn y_i+1 = y_i. Khi đó P_i+1 = P_i + 4x_i +6

- Nếu P_i >= 0 : chọn y_i+1 = y_i - 1. Khi đó P_i+1 = P_i + 4(x_i - y_i ) + 10.

- P₀ ứng với điểm ban đầu ( x₀ , y₀ ) = (0,R) là: P₀= 3 - 2R.

Minh họa thuật toán vẽ đường tròn bằng Bresenham

Procedure DTR_BRES(xc,yc,r,mau : integer); 
  var  x,y,p:integer; 
   begin 
       x:=0 ;  y:=r; 
       p:= 3 – 2*r ; 
        while ( x < y )  do 
           begin 
	 doi_xung; 
                if (p < 0) then p:= p + 4*x + 6 
                else begin 
                              p:= p + 4*(x-y) + 10 ; 
                              y:=y-1; 
                       end; 
                 x:=x+1; 
            end;{while} 
        end; 

Thuật toán vẽ Ellipse

Tương tự thuật toá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 toàn bộ ellipse.

Xét ellipse có tâm O, các bán kính là a và b, phương trình là : x2a2+y2b2=1 size 12{ { {x rSup { size 8{2} } } over {a rSup { size 8{2} } } } + { {y rSup { size 8{2} } } over {b rSup { size 8{2} } } } =1} {}

Chọn tọa độ pixel đầu tiên cần hiển thị là (x_i ,y_i) = (0,b). Cần xác định pixel tiếp theo là (x_i+1 ,y_i+1). Ta có :

d1 = (y_i)² - y²

d2 = y² - (y_i - 1)²

P_i = d1 - d2

Tính P_i+1 - P_i

⇒ P_i+1 = P_i + 2((y_i+1)² - (y_i)² ) - 2(y_i+1 - y_i) + 2b2a2 size 12{ { {2b rSup { size 8{2} } } over {a rSup { size 8{2} } } } } {}(2x_i + 3)

- Nếu P_i < 0 : chọn y_i+1 = y_i. Khi đó P_i+1 = P_i + 2b2a2 size 12{ { {2b rSup { size 8{2} } } over {a rSup { size 8{2} } } } } {}(2x_i +3)

- Nếu P_i >= 0 : chọn y_i+1 = y_i - 1. Khi đó P_i+1 = P_i + 2b2a2 size 12{ { {2b rSup { size 8{2} } } over {a rSup { size 8{2} } } } } {}(2x_i +3) +4(1- y_i)

- P_i ứng với điểm ban đầu ( x₀ , y₀ ) = (0,b) là: P₀ = 2b2a2 size 12{ { {2b rSup { size 8{2} } } over {a rSup { size 8{2} } } } } {} - 2b + 1

Minh họa thuật toán vẽ Ellipse

Procedure Ellipse(xc,yc,a,b : integer);
    varx,y : integer;
    z1, z2, P : real;
    procedure dx;
    begin
    putpixel (xc + x , yc +y, color) ; 
    putpixel (xc - x , yc + y, color) ; 
    putpixel (xc + x , yc - y, color) ; 
    putpixel (xc - x , yc- y, color) ; 
    end;
    begin 
    x:=0 y:=b;
    z1:= (b*b)/(a*a);
    z2:= 1/ z1;
    P:= 2*z1 - 2*b +1;
    while (z1* (x/y) ≤ 1) do
    begin
    dx;
    if P < 0 then P:= P + 2*z1*(2*x+3)
    else begin
    P:= P + 2*z1*(2*x+3) + 4*(1-y);
    y:= y -1;
    end;
    x:= x+1;
    end;
    x:=a ; y:= 0;
    P:= 2*z2 - 2*a +1;
    while (z2* (y/x) < 1) do
    begin
    dx;
    if P < 0 then P:= P + 2*z2*(2*y+3)
    else begin
    P:= P + 2*z2*(2*y+3) + 4*(1-x);
    x:= x -1;
    end;
    y:= y +1;
    end;
    end;
    

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 :

Ax² + Bxy + Cy² + 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:

B² - 4AC < 0 : dạng đường tròn (nếu A=C và B=0) hay ellipse.

B² - 4AC = 0 : dạng parabol.

B² - 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 : x_i+1 = x_i + 1; y_i+1 = y_i (hoặc = y_i +1)

. Nếu -1≤ f '(x) ≤ 0 : x_i+1 = x_i + 1; y_i+1 = y_i (hoặc = y_i - 1)

. Nếu f '(x) > 1 : y_i+1 = y_i + 1; x_i+1 = x_i (hoặc = x_i +1)

. Nếu f '(x) < -1 : y_i+1 = y_i + 1; x_i+1 = x_i (hoặc = x_i +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 (x_i , y_i) 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 P_i+1 và P_i bằng cách xét hiệu P_i+1 - P_i

- Bước 5 : Tính P₀ và hoàn chỉnh thuật toán.

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 (xem hình 1.10)

Xây dựng cấu trúc dữ liệu để vẽ đa giác

Type 
    d_dinh = record
    x,y: longint;
    end;
    dinh = array[0..10] of d_dinh;
    var
    d: dinh;
    

Với cách xây dựng cấu trúc dữ liệu như thế này thì chúng ta chỉ cần nhập vào tọa độ các đỉnh và sau đó gọi thủ tục vẽ đường thẳng lần lượt qua 2 đỉnh như (0, 1), (1,2), ..., (n-1, n), trong đó đỉnh n trùng với đỉnh 0 thì ta sẽ vẽ được toàn bộ đa giác.

Đa giác được gọi là lồi: nếu bất kỳ đường thẳng nào đi qua một cạnh của đa giác thì toàn bộ đa giác nằm về một phía của đường thẳng đó. Ngược lại, nếu tồn tại ít nhất một cạnh của đa giác chia đa giác làm 2 phần thì gọi là đa giác lõm (xem hình 1.11).