Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
BÀI 1. GIỚI THIỆU
I. Giới thiệu về đồ họa máy tính
1. Đồ hoạ Máy tính
Đồ hoạ máy tính (Computer Graphics) là một phần mềm máy tính, nghiên cứu các phương
pháp, kỹ thuật và công cụ xử lý ảnh (lưu trữ, thể hiện, biến đổi, tăng chất lượng…).
Những ứng dụng chính của đồ hoạ máy tính:
• Giao diện người dùng đồ hoạ (GUI)
• Xử lý ảnh (Photoshop)
• Thiết kế kỹ thuật (các hệ thống CAD như AutoCAD)
• Dựng hoạt hình (Flash MX, Director)
• Mô phỏng và dựng hình 3D (Maya, 3D Studio Max)
• Video game (trò chơi điện tử)
2. Môn học vẽ Đồ hoạ Máy tính
Môn học Đồ hoạ Máy tính là môn học tự chọn dành cho hệ đào tạo trung cấp nghề có thời
lượng 60 tiết, trong đó lý thuyết 20 tiết, thực hành 40 tiết nhằm hai mục tiêu chính: Cung cấp
những khái niệm, kỹ thuật và phương pháp cơ bản của phần mềm Đồ hoạ photoshop, hiệu
chỉnh hình ảnh, xỷ lý lắp ghép tọa hiệu ứng cho hình ảnh,, phối màu cho hình ảnh
II. Một số khái niệm
1. Chế độ hiển thị
Chế độ hiển thị là khái niệm về cách thức máy tính hiển thị kết quả của quá trình xử lý thông
tin và quá trình tương tác giữa người và máy trên thiết bị ra. Có hai chế độ hiển thị:
Chế độ ký tự (text mode) là chế độ hiển thị mà phần tử hiển thị cơ bản là kí tự. Màn hình
được chia thành các hàng và các cột xác định (80x25), giao điểm của các hàng và các cột tạo
thành các ô. Mỗi ô hiển thị được 1 kí tự. Do đó phần tử bé nhất có thể hiển thị được trên màn
hình là kí tự.
Chế độ kí tự có các ưu điểm là tốn ít bộ nhớ, xử lí và hiển thị rất đơn giản và nhanh. Nhược
điểm của chế độ này là chỉ hiển thị được các kí tự, không hiển thị được hình ảnh và các đối
tượng có độ chi tiết cao, phổ màu rộng, các kí tự chỉ có một dạng font duy nhất.
Chế độ đồ hoạ (graphic mode) là chế độ hiển thị mà phần tử hiển thị cơ bản là điểm ảnh. Màn
hình cũng được chia thành các hàng và các cột, giao điểm của các hàng và các cột tạo thành

nghĩa là màn hình được chia thành 800 cột, 600 dòng và có 800 x 600 = 480.000 điểm
ảnh.
• Số pixel tối đa mà thiết bị đồ hoạ có thể lưu trữ, thường dùng mô tả độ phân giải của
máy ảnh số. Chẳng hạn máy ảnh số 3 mega pixel, 5 mega pixel… Từ số điểm ảnh tối
đa ta có thể ước lượng được kích thước tối đa của ảnh. Chẳng hạn máy ảnh 3MP có
thể chụp được ảnh có độ phân giải 2000x1500 (trong khi đó độ phân giải thông
thường của màn hình là 800x600).
• dpi (dot per inch): số dot tạo được trên mỗi inch (thường dùng cho máy in hoặc máy
quét ảnh). Độ nét của trang in hoặc ảnh quét phụ thuộc vào dpi. Các thông số thường
dùng cho máy in laser là 300 dpi hoặc 600 dpi. Từ tham số dpi ta cũng có thể suy ra
được kích thước ảnh. Chẳng hạn nếu ta quét 1 tấm ảnh tức là 5x4 inch với độ phân
giải 300 dpi thì kích thước ảnh ta có là 1500x1200 điểm ảnh.
4. Hệ toạ độ và phép chiếu
Hệ toạ độ dùng để xác định vị trí các đối tượng hoặc điểm ảnh, nhờ đó ta thực hiện được các
thao tác đồ hoạ (chẳng hạn để vẽ một đoạn thẳng ta cần chỉ ra toạ độ của 2 điểm đầu mút của
đoạn thẳng đó). Có 3 loại hệ toạ độ khác nhau:
• Hệ toạ độ hiển thị là hệ tọa độ xác định vị trí các điểm ảnh trên thiết bị hiển thị. Do
hạn chế bởi độ phân giải và do đặc điểm của đồ hoạ bitmap, hệ toạ độ hiển thị sử dụng
số nguyên, có trục y hướng xuống dưới và chỉ sử dụng các giá trị toạ độ hữu hạn. Ví
dụ nếu độ phân giải là 800x600 thì tất cả các điểm ảnh đều có giá trị toạ độ x là số
nguyên từ 0 đến 799, toạ độ y từ 0 đến 599.
• Hệ toạ độ thế giới là hệ toạ độ xác định vị trí các đối tượng đồ hoạ khác nhau trong
một thế giới (mặt phẳng, không gian) chung. Hệ toạ độ thế giới sử dụng số thực, các
giá trị toạ độ không bị giới hạn và trục y hướng lên trên như hệ toạ độ trong toán học.
Hệ toạ độ thế giới có thể có 2 chiều (2D) hoặc 3 chiều (3D).
• Hệ toạ độ đối tượng là hệ toạ độ dùng mô tả kích thước của đối tượng đồ hoạ và vị trí
tương đối của các thành phần tạo nên đối tượng đó.
Trang 2
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Khi muốn hiển thị đối tượng đồ hoạ lên thiết bị đồ họa ta cần thực hiện ánh xạ giữa toạ độ đối

(hơn 16 triệu) màu khác nhau.
Có hai phương pháp số hoá màu: số hoá trực tiếp và số hoá theo chỉ số.
Số hoá màu trực tiếp ta số hoá mỗi màu bằng cách mô tả sắc độ của từng thành phần R,G,B
tương ứng với màu đó. Chẳng hạn trong chế độ màu 24 bit, ta dùng 8 bit cho mỗi màu cơ bản,
như vậy có 256 mức độ khác nhau mô tả cường độ của từng màu cơ bản đó.
Trong trường hợp độ sâu màu không lớn, người ta dùng phương pháp biểu diễn màu theo chỉ
số. Chẳng hạn với độ sâu màu 8 bit (tương ứng với 2
8
= 256 màu), người ta sẽ có một bảng
màu (palette) gồm 256 mục, mỗi mục mô tả thành phần RGB của một màu và giá trị màu của
mỗi điểm ảnh sẽ là chỉ số của mục mô tả màu tương ứng.
4. Các hệ màu
Ngoài hệ màu RGB, trong đồ hoạ máy tính còn sử dụng một số hệ màu khác như HSV,
CMYK.
5. Vùng đệm ảnh (frame buffer) và bộ nhớ đồ hoạ
Trang 3
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Bộ nhớ đồ hoạ (Video RAM) là nơi chứa các thông tin mô tả từng pixel của màn hình đồ hoạ,
thường là nằm trên card video. Nếu độ phân giải của màn hình là M cột x N dòng và độ sâu
màu là d bit thì bộ nhớ đồ hoạ có kích thước ít nhất là M x N x d (bit).
Vùng đệm ảnh là vùng nhớ lưu trữ tạm thời dữ liệu đồ hoạ bitmap trong quá trình xử lý. Vùng
đệm ảnh thường được chia thành nhiều khung ảnh, mỗi khung mô tả một ảnh bitmap. Đôi khi
người ta cũng gọi bộ nhớ đồ hoạ (nơi chứa dữ liệu đồ hoạ bitmap được hiển thị trên màn hình)
là vùng đệm ảnh.
IV. PHẦN CỨNG ĐỒ HOẠ
1. Thiết bị ra
Thiết bị ra thực hiện nhiệm vụ hiển thị hình ảnh hoặc kết xuất đối tượng đồ hoạ. Người ta chia
thiết bị ra thành 2 loại là: kết xuất cứng (hard copy) và kết xuất mềm (soft copy).
Thiết bị ra kết xuất cứng là các thiết bị ra mà kết quả hiển thị không thể sửa chữa được như
máy in (printer), mắy vẽ (plotter), máy cắt… Có nhiều công nghệ máy in đang phổ biến như

Trang 4
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Các loại đĩa quang phổ biến là CD và DVD. Ưu điểm của đĩa quang là gọn nhẹ, rất cơ động
và có các thiết bị đọc rất phổ biến. Dung lượng của các đĩa CD từ 650 MB đến 700 MB, dung
lượng của DVD có thể lên đến 4.7 GB. Nhược điểm của đĩa quang là chỉ đọc (không ghi xoá
được). Cũng có những loại đĩa quang có thể ghi-xoá được nhưng không phổ biến và cần các
thiết bị đọc-ghi đắt tiền. Ngoài ra đĩa quang cũng dễ bị hỏng do va đập, trầy xước…
Đĩa Flash USB hiện đang được dùng ngày một phổ biến do sự gọn nhẹ, tính cơ động và khả
năng ghi xoá tuỳ ý. Dung lượng của đĩa Flash USB ngày một tăng (128MB, 256MB,
512MB…).
Thẻ nhớ cũng là một loại thiết bị lưu trữ đang dần phổ biến, chủ yếu sử dụng cho các thiết bị
nhỏ gọn như máy ảnh kĩ thuật số, điện thoại di động… Với máy tính thì thẻ nhớ ít được sử
dụng hơn do đòi hỏi phải có những thiết bị đọc chuyên dụng.
4. Bộ điều khiển đồ hoạ
Bộ điều khiển đồ hoạ (video controller) phụ trách việc hiển thị hình ảnh trên màn hình, thực
hiện các thao tác đồ hoạ như vẽ hoặc xoá màn hình, thay đổi màu sắc… Bộ điều khiển đồ hoạ
có thể nằm trên một card video rời hoặc được chế tạo sẵn trên mainboard (thường gọi là
onboard).
Để lưu trữ thông tin hình ảnh cần hiển thị trên màn hình, bộ điều khiển đồ hoạ làm việc trực
tiếp với phần bộ nhớ chuyên biệt là bộ nhớ đồ hoạ (Video RAM). Nếu bộ điều khiển đồ hoạ
nằm trên card rời thì trên card cũng lắp sẵn VRAM (và thường có tốc độ nhanh hơn RAM hệ
thống rất nhiều). Ngược lại, nếu bộ điều khiển đồ hoạ là onboard thì sẽ sử dụng một phần của
RAM hệ thống làm VRAM (do đó khả năng và tốc độ sẽ thấp hơn so với card rời).
Bộ điều khiển đồ hoạ thực hiện các thao tác đồ hoạ bằng các thay đổi các thông tin trong
VRAM. Nội dung của VRAM sẽ được các bộ chuyển đổi biến thành tín hiệu chuyển tới màn
hình để thực hiện việc hiển thị.
Các bộ điều khiển đồ hoạ hiện đại còn có thêm các chức năng xử lí 3D như tính toán phép
chiếu, tạo bóng, phủ vân bề mặt…
5. Các thiết bị xử lí khác
Bộ xử lí (CPU) là thiết bị thực hiện tất cả các thao tác xử lí dữ liệu đồ hoạ (video controller cơ

chế độ đồ hoạ trong Turbo Pascal là:
InitGraph(Gd,Gm:Integer;Path:String);
Trong đó:
• Gd: Biến kiểu integer chỉ định card màn hình. Do các card màn hình thông dụng hiện
nay đều hỗ trợ chế độ VGA nên ta chỉ cần đặt Gd :=Detect để máy tính tự chọn chế độ
thích hợp.
• Gm: Biến kiểu integer chỉ mode màn hình, thực chất là xác định độ phân giải và độ
sâu màu. Tuy nhiên ta đặt Gd là Detect nên không cần thiết phải khai báo Gm, máy
tính sẽ tự xác định loại card cho màn hình và thiết lập mode màn hình có độ phân giải
và độ sâu màu lớn nhất tương ứng với loại card màn hình đó.
• Path: Biến kiểu string chỉ định đường dẫn vào thư mục chứa các tập tin *.BGI. Nếu
tập tin nằm trong thư mục hiện hành thì có thể khai báo Path là ' '. Ta cũng thường
dùng đường dẫn mặc định là C:\TP\BGI.
Trong một số trường hợp việc khởi tạo đồ họa có thể không thành công (không tìm thấy
driver, driver không tương thích card màn hình, không đủ bộ nhớ ) Để kiểm tra việc khởi tạo
đồ hoạ có thành công không, ta có thể dùng hàm GraphResult. Nếu GraphResult = GrOK thì
quá trình khởi tạo đồ hoạ là thành công.
Muốn ngắt chế độ đồ hoạ để trở lại chế độ văn bản, ta dùng lệnh CloseGraph. Tuy nhiên nếu
ta không dùng lệnh đó thì khi kết thúc chương trình, Turbo Pascal cũng tự động chuyển về
chế độ văn bản.
Trang 6
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Chương trình ví dụ sau khởi tạo chế độ đồ hoạ, nếu khởi tạo thành công thì sẽ vẽ một đoạn
thẳng chéo màn hình, ngược lại sẽ có một thông báo lỗi.
uses crt,graph;
var gd, gm, i : integer;
BEGIN
gd := detect;
initgraph(gd,gm,'C:\TP\BGI');
if GraphResult <> GrOk then begin

phân giải màn hình (ví dụ, nếu độ phân giải là 640x480 thì ta phải chọn 0≤x1≤x2≤639,
0≤y1≤y2≤479). Tham số clip mô tả thao tác cắt xén với khung nhìn: nếu clip là true thì ta chỉ
được vẽ trong hình chữ nhật được thiết lập làm khung nhìn, các đối tượng vẽ đều bị cắt xén
bởi các cạnh hình chữ nhật. Nếu clip là false thì ta có thể vẽ trên toàn bộ màn hình và các đối
tượng không bị cắt xén. Như vậy, nếu ta dùng khung nhìn với mục đích tạo hệ toạ độ tạm thời
cho dễ thao tác vẽ thì nên đặt tham số clip là false, ngược lại nếu muốn giới hạn vùng màn
hình cần vẽ thì nên đặt clip là true.
Ví dụ, để chuyển gốc toạ độ ra giữa màn hình, ta có thể dùng lệnh:
SetViewPort(320, 240, 600, 400, false);
Chú ý là sau khi thiết lập khung nhìn, gốc toạ độ sẽ là điểm (x1,y1) và các thao tác vẽ tiếp
theo đều sử dụng toạ độ theo gốc mới đó (ngoại trừ lệnh SetViewPort luôn sử dụng toạ độ
tuyệt đối). Ví dụ, sau khi thiết lập khung nhìn bằng lệnh SetViewPort trên, lệnh vẽ tại điểm
(0,0) sẽ là thực hiện tại điểm (320,240) theo toạ độ màn hình.
Con trỏ đồ hoạ
Trong chế độ văn bản có một vị trí gọi là con trỏ (cursor) hay điểm nhắc được biểu thị bằng
một điểm sáng nhấp nháy, là vị trí là nơi thực hiện các thao tác xử lí, chẳng hạn các kí tự được
nhập từ bàn phím sẽ được hiện ra ở vị trí điểm nhắc. Tương tự như vậy, trong chế độ đồ hoạ
cũng có một vị trí gọi là con trỏ đồ hoạ, là vị trí sẽ diễn ra các thao tác đồ hoạ nếu không mô
tả rõ toạ độ. Chẳng hạn nếu ta dùng lệnh OutText để viết ra một chuỗi kí tự mà không mô tả
toạ độ thì xâu kí tự đó sẽ hiện ra ở con trỏ đồ hoạ. Chỉ khác là con trỏ đồ hoạ không nhấp
nháy cũng không hiển thị bằng một điểm sáng nhấp nháy như con trỏ trong chế độ văn bản.
* Các thao tác với con trỏ đồ hoạ:
Để di chuyển con trỏ đồ hoạ đến một vị trí trên màn hình đồ hoạ, ta dùng lệnh MoveTo. Toạ
độ của vị trí đó phụ thuộc vào khung nhìn (là toạ độ tính tương đối theo khung nhìn).
Trang 8
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
MoveTo(x,y: integer)
Để xác định vị trí hiện tại của con trỏ đồ hoạ, ta có 2 hàm GetX và GetY, mỗi hàm trả lại giá
trị hoành độ và tung độ tương ứng của con trỏ đồ hoạ.
2. Màu sắc

các lệnh vẽ đường hoặc vẽ chữ sau đó đều dùng màu c cho các đối tượng được vẽ cho đến khi
có một lệnh SetColor tiếp theo thiết lập một màu vẽ khác. Sau khi khởi tạo đồ hoạ màu vẽ
mặc định là màu trắng (white 15).
Trang 9
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
* Thiết lập màu nền:
SetBkColor(c : word)
Màu nền trong TP tương ứng với màu 0 (mặc định là màu đen – black). Khi thực hiện các
thao tác xoá màn hình (ClearDevice) hoặc xoá khung nhìn (ClearViewPort) thì toàn bộ vùng
bị xoá sẽ được tô màu là màu nền.
* Thiết lập màu tô:
Lệnh SetColor chỉ thiết lập màu cho các đối tượng là đường nét hoặc chữ. Với các đối tượng
đặc như hình chữ nhật, một vùng kín, để tô màu ta cần dùng lệnh sau để thiết lập:
SetFillStyle(t: word;c : word)
Trong đó tham số c là màu cần thiết lập để tô, t là tham số mô tả mẫu tô (pattern). Có thêm
tham số mẫu tô là vì không phải lúc nào cũng tô đối tượng theo kiểu màu đặc mà có thể muốn
tô đối tượng theo các mẫu khác như: gạch ngang, gạch chéo, chấm chấm… Các mẫu khác
nhau mà TP hỗ trợ khi tô màu như sau:
3. Các lệnh vẽ điểm
Điểm ảnh (pixel) là đối tượng nhỏ nhất được hiển thị trên màn hình đồ hoạ. Từ các điểm ảnh
ta có thể xây dựng các hình đồ hoạ phức tạp hơn. Mô tả một điểm ảnh ta cần thông tin về vị
trí (toạ độ) và màu sắc.
* Vẽ điểm ảnh
Lệnh PutPixel dùng để vẽ một điểm ảnh lên màn hình đồ hoạ.
PutPixel(x,y: integer; color: word)
Tham số x,y mô tả toạ độ của điểm ảnh, tham số color mô tả màu sắc của điểm ảnh.
* Đọc màu một điểm ảnh
Hàm GetPixel dùng xác định màu của một điểm ảnh.
GetPixel(x,y:integer): word
Hàm này cho ta kết quả là màu của điểm ảnh tại toạ độ x,y.

• UserBitLn=4: Đường nét do người dùng định nghĩa
Pt xác định mẫu vẽ. Nếu ta chọn Ls=4 thì Pt là một số nguyên kiểu word chỉ mẫu nét vẽ do
chúng ta định nghĩa. Trong đó bit 1 của Pt tương ứng với pixel sẽ được vẽ, bit 0 tương ứng
với pixel không được vẽ.
Tk: Xác định độ dày của đường nét, có thể chọn Tk bằng các hằng đã định nghĩa trong thư
viện đồ hoạ:
• NormWidth=1
• ThickWidth=3
5. Các lệnh vẽ hình chữ nhật
Có 2 kiểu vẽ hình chữ nhật trong TP: vẽ hình chữ nhật chỉ có đường viền và vẽ hình chữ nhật
có tô màu bên trong.
Để vẽ hình chữ nhật chỉ có khung, ta dùng lệnh Rectangle. Màu sắc của đường viền do lệnh
SetColor đặt. Các tham số của lệnh Rectangle mô tả toạ độ của 2 đỉnh chéo nhau của hình chữ
nhật.
Rectangle(x1,y1,x2,y2:Integer);
Để vẽ hình chữ nhật có tô màu ta dùng lệnh Bar. Màu sắc của đường viền do lệnh SetColor
thiết lập, kiểu tô và màu tô của hình chữ nhật do lệnh SetFillStyle thiết lập. Các tham số cũng
xác định 2 đỉnh chéo nhau của hình chữ nhật.
Bar(x1,y1,x2,y2:Integer);
Ngoài ra ta có thể dùng lệnh Bar3D vẽ khối hình hộp chữ nhật.
Bar3D(x1,y1,x2,y2, dep:Integer; nap : boolean);
Trong đó tham số depth mô tả bề dày của hình hộp và tham số nap là true thì sẽ vẽ hình hộp
có nắp, là false thì là hình hộp hở.
6. Vẽ đa giác
Trang 11
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Tương tự như vẽ hình chữ nhật: có 2 lệnh vẽ đa giác trong TP, một lệnh là DrawPoly để vẽ đa
giác không tô màu và lệnh FillPoply để vẽ đa giác có tô màu.
DrawPoly(Np: Word; Var P);
FillPoly(Np: Word; Var P);

OutText(St:String);
Trong đó st là xâu chữ cần hiển thị.
Nếu muốn hiển thị chữ ở vị trí bất kì ta có thể dùng lệnh OutTextXY:
OutTextXY(x,y: integer; St:String);
Trong đó x,y là điểm sẽ hiển thị xâu chữ st.
Trang 12
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Muốn có các kiểu chữ khác nhau (font chữ, hướng, kích cỡ), ta có thể dùng lệnh sau để thiết
lập (phải thiết lập trước khi gọi các lệnh OutText, OutTextXY):
SetTextStyle(Ft,Dr,Sz: Word);
Thủ tục này dùng để chọn kiểu chữ, trong đó:
• Ft là kiểu chữ, Ft có các giá trị từ 0 đến 9. Trong đó 0 là font bitmap 8x8 mặc định.
• Dr là hướng chữ, Dr=0 thì chữ được hiển thị theo chiều ngang từ trái sang phải, Dr=1 chữ
sẽ được hiển thị theo chiều dọc từ trên xuống dưới.
• Sz là kích thước của chữ, có giá trị từ 1 đến 10.
Ta cũng có thể thiết lập vị trí căn chữ, tức là căn chỉnh vùng sẽ hiển thị chữ so với điểm mô tả
vị trí hiển thị (điểm (x,y) trong lệnh OutTextXY, vị trí con trỏ đồ hoạ trong lệnh OutText).
SetTextJustify(ngang, doc: word)
Trong đó các giá trị hợp lệ cho các tham số ngang và doc như sau:
Hằng số (cho hướng ngang) Giá trị Ý nghĩa
LeftText 0 Chữ sẽ hiển thị từ trái sang phải, bắt đầu từ điểm
mô tả hiển thị (căn trái).
CenterText 1 Chữ được hiển thị sao cho điểm mô tả hiển thị
nằm ở giữa vùng chữ (căn giữa).
RightText 2 Chữ sẽ hiển thị từ trái sang phải, kết thúc ở điểm
mô tả hiển thị (căn phải).
Hằng số (cho hướng dọc) Giá trị Ý nghĩa
TopText 0 Chữ sẽ hiển thị từ trên xuống dưới, ở phía dưới
điểm mô tả hiển thị.
CenterText 1 Chữ được hiển thị sao cho điểm mô tả hiển thị

tương ứng bằng lệnh GetImage
GetImage(x1,y1,x2,y2: Integer; var buf);
Lệnh thực hiên lưu vùng màn hình trong hình chữ nhật (x1,y1), (x2,y2) vào vùng nhớ buf.
Thường thì vùng nhớ đó là vùng nhớ động do biến con trỏ p trỏ đến nên ta sẽ viết lệnh là
GetImage(x1,y1,x2,y2,p^).
Sau khi đã lưu trữ vùng màn hình tương ứng, ta có thể sao chép dữ liệu đồ hoạ đã lưu trữ lên
màn hình ở một vị trí bất kì bằng lệnh PutImage
PutImage(x,y: integer;var buf; BitBlt: word);
Lệnh thực hiện sao chép ảnh đã lưu trong vùng nhớ buf ra màn hình tại điểm (x,y) với phép
toán bit BitBlt. Điểm (x,y) là điểm trái trên của hình chữ nhật lưu ảnh. Buf là vùng nhớ chứa
ảnh, thường thì đó là vùng nhớ động trỏ bởi con trỏ p nên ta viết là p^.
Tham số phép toán BitBlt có ý nghĩa như sau: khi tiến hành sao chép ảnh, máy không chỉ thực
hiện việc ghi đè các pixel của ảnh lên điểm ảnh tương ứng trên màn hình và còn cho phép
thực hiện một phép toán nào đó giữa pixel của ảnh và pixel tương ứng trên màn hình. Vì các
giá trị màu là các con số nên phép toán đó là một phép toán nhị phân. Chẳng hạn nếu ta chọn
phép toán BitBlt là XorPut thì máy sẽ tiến hành phép toán xor giữ pixel ảnh và pixel tương
ứng trên màn hình, được kết quả là bao nhiêu thì vẽ điểm ảnh có màu tương ứng với kết quả
đó.
Các phép toán BitBlt được TP cung cấp:
Tên phép toán Giá trị Ý nghĩa
NormalPut (CopyPut) 0 Sao chép pixel ảnh đè lên pixel tương ứng, không
thực hiện phép toán nhị phân nào cả.
XorPut 1 Thực hiện phép toán xor giữa pixel nguồn và pixel
đích. Đặc điểm của phép toán xor là pixel kết quả
có màu không giống cả pixel nguồn và pixel đích,
đồng thời nếu copy ảnh 2 lần bằng phép toán
XorPut thì sẽ trở lại màn hình ban đầu. Phép toán
XorPut do đó được sử dụng trong vẽ mô phỏng
chuyển động để bảo vệ nền.
OrPut 2 Thực hiện phép toán or giữa pixel nguồn và pixel

SetVisualPage(Page: Integer);
Trang 15
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
BÀI 3. MÔ PHỎNG CHUYỂN ĐỘNG
Mô phỏng chuyển động là một ứng dụng rất hữu ích của đồ hoạ máy tính. Mô phỏng chuyển
động là phần thiết yếu của computer games, hoạt hoạ flash, mô phỏng 3D…
I. NGUYÊN TẮC
1. Ảo giác về sự chuyển động
Sự chuyển động ta quan sát được trên thiết bị hiển thị đồ hoạ thực chất là một ảo giác do hiện
tượng lưu ảnh của mắt. Khi mắt quan sát một nguồn sáng, các tế bào thị giác sẽ bị kích thích.
Sau khi nguồn sáng kích thích tắt đi, sự kích thích đó vẫn kéo dài một thời gian ngắn (khoảng
40ms). Nếu trong khoảng thời gian đó ta phát lại nguồn sáng ở vị trí mới thì mắt sẽ không
phát hiện được thực tế nguồn sáng đã bị tắt đi rồi bật lại, mắt chỉ cảm nhận được là nguồn
sáng phát sáng liên tục và đã chuyển sang vị trí mới. Từ đó tạo ra ảo giác về sự chuyển động.
2. Nguyên tắc vẽ mô phỏng chuyển động
Có hai phương pháp khác nhau để mô phỏng chuyển động bằng đồ hoạ máy tính. Phương
pháp thứ nhất giống như trong điện ảnh: xây dựng một dãy hình ảnh mô tả các trạng thái
chuyển động khác nhau của đối tượng và chiếu liên tục các hình ảnh đó trong khoảng thời
gian thích hợp. Phương pháp thứ hai là vẽ rồi xoá đối tượng ở những vị trí khác nhau một
cách liên tục.
Do Turbo Pascal không mạnh về mặt xử lý ảnh nên chúng ta chủ yếu dùng phương pháp thứ
hai để vẽ mô phỏng chuyển động.
Vòng lặp vẽ mô phỏng chuyển động sẽ có dạng như sau:
Repeat
Draw; // vẽ đối tượng
Delay; // ngưng màn hình một khoảng thời gian ngắn để quan sát
Clear; // xoá đối tượng, phục hồi màn hình nền cũ
Update; // cập nhật toạ độ đối tượng.
Until finish;
II. MỘT SỐ KỸ THUẬT VẼ MÔ PHỎNG CHUYỂN ĐỘNG

BÀI 4. ĐỒ HOẠ RÙA
Với hệ đồ họa sẵn có của Turbo Pascal để vẽ một số dạng hình như đa giác đều, ngôi sao… ta
phải sử dụng những công thức lượng giác khá phức tạp. Nguyên nhân là vì hệ đồ hoạ đó thiếu
những thao tác liên quan đến khoảng cách và góc (chỉ chủ yêu tập trung đến toạ độ). Hệ đồ
hoạ rùa cung cấp cho chúng ta những công cụ đơn giản hơn để vẽ trong các trường hợp này.
I. CÁC CÔNG CỤ CỦA HỆ ĐỒ HOẠ RÙA
1. Tham số của hệ đồ hoạ
Hệ đồ hoạ rùa có hai tham số:
• Vị trí hiện tại của bút vẽ. Tham số này có thể mô tả bằng cặp biến (rx,ry)
• Hướng hiện tại của bút (góc nghiêng so với phương ngang của trục Ox). Mô tả bằng
biến ra.
2. Các thao tác của hệ đồ hoạ
Hệ đồ họa rùa có tối thiểu các thao tác sau:
• RMoveTo(x,y): di chuyển bút vẽ đến điểm (x,y).
• RLineTo(x,y): vẽ đoạn thẳng từ vị trí hiện tại đến điểm (x,y), sau đó di chuyển vị trí bút
đến điểm (x,y).
• RMove(d): di chuyển đến điểm cách vị trí hiện tại một khoảng d theo hướng hiện tại của
bút.
• RLine(d): vẽ đoạn thẳng từ điểm hiện tại (CP) theo hướng của bút vẽ đến điểm cách CP
một đoạn d, sau đó di chuyển bút vẽ đến điểm đó.
• Right(a): quay hướng hiện tại sang phải góc a. Nếu muốn quay sang trái thì chỉ lấy góc
đối của góc a.
• RAngle(a): đặt hướng của bút vẽ tạo với phương ngang (tia Ox) góc a.
II. MỘT SỐ ỨNG DỤNG
1. Vẽ các hình hình học đơn giản
a. Vẽ hình chữ nhật
Vẽ hình chữ nhật có 1 đỉnh là (x,y), chiều dài là d, chiều rộng là r bằng các thao tác:
- Di chuyển đến điểm (x,y).
- Vẽ một đoạn dài d. Quay 90 độ.
- Vẽ một đoạn dài r. Quay 90 độ.

1. Đặc điểm
Hệ đồ hoạ vector 2D có hệ toạ độ vuông góc 2 chiều, sử dụng các giá trị toạ độ là số thực và
không giới hạn độ lớn. Trục Oy của hệ toạ độ hướng lên, giống như hệ toạ độ Đê-các trong
toán học.
Do đồ hoạ 2D sử dụng số thực nên không thể chọn điểm làm phần tử cơ sở. Vì nếu dùng điểm
để mô tả các phần tử khác, chẳng hạn 1 đường cong thì ta cần vô hạn điểm. Nếu chỉ dùng hữu
hạn điểm thì đối tượng được mô tả sẽ không liên tục.
Hệ đồ hoạ 2D chọn phần tử đồ hoạ cơ bản là đoạn thẳng, vì đoạn thẳng có thể dùng xấp xỉ
một đường cong liên tục bất kỳ (số lượng đoạn thẳng cần dùng là hữu hạn, và số lượng càng
lớn thì đường cong càng mịn). Và một điểm cũng có thể mô tả bằng 1 đoạn thẳng (2 điểm đầu
trùng nhau).
Các phần tử khác của hệ đồ hoạ như đường tròn, đường cong, đa giác… sẽ được xây dựng
xấp xỉ bằng một số hữu hạn các đoạn thẳng. Số đoạn thẳng cần dùng tuỳ theo yêu cầu về độ
mịn và độ chính xác.
2. Cửa sổ và khung nhìn
Mặc phẳng toạ độ của hệ đồ hoạ 2D là vô hạn, tuy nhiên màn hình hiển thị vẫn là hữu hạn.
Hơn nữa ta thường chỉ muốn vẽ lên 1 khu vực nhất định của màn hình chứ không phải toàn bộ
của màn hình. Để thực hiện điều này ta sử dụng công cụ cửa sổ và khung nhìn.
Cửa sổ (window) là một phần giới hạn của mặt phẳng 2D được chọn để hiển thị lên màn hình
đồ hoạ. Thông thường cửa sổ được chọn là một hình chữ nhật có các cạnh song song với trục
toạ độ. Để thay đổi vùng quan sát ta sẽ thay đổi vị trí và kích thước của cửa sổ. Như vậy cửa
sổ cho phép chúng ta thể hiện mặt phẳng 2D vô hạn trên màn hình đồ hoạ hữu hạn bằng cách
tại mỗi thời điểm chỉ chọn một vùng nhất định để hiển thị và cho phép thay đổi vị trí và kích
thước vùng đó.
Tham số mô tả cửa sổ gồm có: (xw,yw) là toạ độ đỉnh trên trái, dw là chiều rộng và hw là
chiều cao của cửa sổ.
Khung nhìn (viewport) là một phần giới hạn của màn hình dùng để hiển thị. Toàn bộ các đối
tượng xuất hiện trong cửa sổ sẽ được hiển thị lên khung nhìn. Do đó khung nhìn cũng là một
hình chữ nhật có các cạnh song song với các trục của hệ toạ độ màn hình. Ta cũng có thể thay
đổi vị trí và kích thước khung nhìn tuỳ theo yêu cầu.

2 điểm đầu của phần đoạn thẳng nằm trong của sổ. Nếu đoạn thẳng nằm ngoài của sổ thì ta sẽ
không vẽ gì hết. Ngược lại thì sẽ vẽ đoạn thẳng nối 2 điểm đầu ta tìm được.
Thuật toán cắt xén Cohen-Sutherland:
• Lập mã nhị phân để mô tả vị trí của các điểm so với cửa sổ (1 là nằm ngoài, bit 0 là
nằm trong).
• Nếu mã 2 điểm đều là 0000 thì chúng đều nằm trong => đoạn thẳng nằm trong, không
cần xén.
• Nếu mã 2 điểm AND nhau khác 0000 thì chúng hoàn toàn nằm ngoài, không cần vẽ.
• Ngược lại thì chúng có đoạn nằm trong và đoạn nằm ngoài. Ta sẽ thực hiện cắt xén
với từng cạnh của cửa sổ cho đến khi được 2 điểm hoàn toàn là 0000.
Chú ý: Turbo Pascal cho phép thiết lập cắt xén tự động khi đặt khung nhìn. Do đó ta có thể
không cần trực tiếp cài đặt thuật toán trên mà chỉ cần thiết lập tham số cắt xén và khung nhìn
thích hợp.
4. Vẽ đoạn thẳng, đa giác và đường tròn
Vẽ đoạn thẳng là thủ tục cơ bản của hệ đồ hoạ 2D. Trong Pascal ta có thể viết như sau:
procedure Line2D(x1,y1,x2,y2: real);
begin
Line(Cx(x1),Cy(y1),Cx(x2),Cy(y2));
end;
Trang 21
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Đa giác được vẽ bằng cách nối tuần tự các đỉnh theo thứ tự bằng các đoạn thẳng. Thủ tục vẽ
đa giác có thể cài đặt như sau:
type mangreal = array[1 100] of real;
procedure dagiac(n : integer; x,y : mangreal);
var i : integer;
begin
Moveto(Cx(x[n]), Cy(y[n]));
for i := 1 to n do Lineto(Cx(x[i]), Cy(y[i]));
end;

a. Đường cong hàm số
Đường cong hàm số mô tả bởi phương trình y=f(x) với các giá trị x∈[a,b].
Trang 22
Bài giảng Vẽ đồ hoạ máy tính - Nguyễn Văn Đồng -Trường TC nghề số 15
Đoạn chương trình sau minh hoạ các thao tác vẽ đường cong đó:
dx := (b-a)/n;
x := a; y := f(a);
MoveTo(Cx(x), Cy(y));
for i:=1 to n do begin
x := x + dx; y := f(x);
LineTo(Cx(x), Cy(y));
end;
b. Đường cong tham số
Đường cong tham số có phương trình dạng x=fx(t), y=fy(t), t∈[a,b]
dt := (b-a)/n;
t := a; x := fx(t); y := fy(t);
MoveTo(Cx(x), Cy(y));
for i:=1 to n do begin
t := t + dt; x := fx(t); y := fy(t);
LineTo(Cx(x), Cy(y));
end;
c. Đường cong trong toạ độ cực
Đường cong r=fr(ϕ), ϕ∈[a,b]
Ta có công thức chuyển đổi từ hệ toạ độ cực sang hệ toạ độ vuông góc như sau:
x = r* cos(ϕ)
y = r* sin(ϕ)
dp := (b-a)/n;
p := a; r := fr(p);
x := r * cos(p); y := r * sin(p);
MoveTo(Cx(x), Cy(y));

2. Kĩ thuật băng cao su (rubber band)
Kĩ thuật này nhằm mục đích: … mô tả kết quả sản phẩm vẽ (đường thẳng, đường tròn) thay
đổi theo vị trí con trỏ.
Phương pháp:
Dùng write mode dạng xor để vẽ và xoá.
1. Đặt write mode là xor mode.
2. Hiển thị hình (đường thẳng, đường tròn…)
3. Lưu lại toạ độ hiện thời.
4. Cập nhật toạ độ mới (kiểm tra con trỏ di chuyển).
5. Hiển thị hình với toạ độ đã lưu ở bước 3, quay lại bước 2.
Khi vẽ đối tượng lần thứ nhất thì đối tượng được hiển thị trên nền, khi vẽ lần thứ hai thì do tác
dụng của write mode dạng xor, nền sẽ được hiển thị.
*Write mode
Khi ghi 1 pixel lên nền, write mode mô tả pixel kết quả được xác định dựa trên pixel nền và
pixel ghi như thế nào:
pixel
kết quả
= pixel
cần ghi
<op> pixel
nền
Trong đó <op> là write mode, về bản chất đó là phép toán logic thực hiện giữa 2 giá trị nhị
phân.
Các write mode thường dùng
 copy: ghi đè màu mới lên nền: pixel
kết quả
= pixel
ghi
 xor: thực hiện xor màu nền và màu ghi thành 1 màu thứ 3 và hiển thị màu thứ 3 đó. Chú ý:
xor 2 lần sẽ trở về màu nền ban đầu.