Giới thiệu khái niệm đồ hoạ máy tính

Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI GIỚI THIỆU I GIỚI THIỆU VỀ ĐHMT Ngành Đồ hoạ Máy tính Đồ hoạ máy tính (Computer Graphics) nhánh khoa học máy tính, nghiên cứu phương pháp, kỹ thuật công cụ xử lý đồ hoạ (lưu trữ, thể hiện, biến đổi, tăng chất lượng…) Những ứng dụng đồ 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 AutoCAD) • Dựng hoạt hình (Flash MX, Director) • Mơ dựng hình 3D (Maya, 3D Studio Max) • Video game (trị chơi điện tử) Mơn học Đồ hoạ Máy tính Mơn học Đồ hoạ Máy tính dành cho hệ đào tạo chức có thời lượng 45 tiết, nhằm hai mục tiêu chính: - Cung cấp khái niệm, kỹ thuật phương pháp ngành Đồ hoạ Máy tính - Tạo hội cho sinh viên thực hành lập trình đồ hoạ môi trường đồ hoạ Chúng chọn môi trường đồ hoạ BGI Turbo Pascal 7.0 tính đơn giản, dễ sử dụng ngôn ngữ Pascal quen thuộc với người học Thời lượng môn học chia thành 30 tiết lý thuyết 15 tiết thực hành II MỘT SỐ KHÁI NIỆM Chế độ hiển thị Chế độ hiển thị khái niệm cách thức máy tính hiển thị kết q trình xử lý thơng tin q trình tương tác người máy thiết bị Có hai chế độ hiển thị: Chế độ ký tự (text mode) chế độ hiển thị mà phần tử hiển thị kí tự Màn hình chia thành hàng cột xác định (80x25), giao điểm hàng cột tạo thành ô Mỗi ô hiển thị kí tự Do phần tử bé hiển thị hình kí tự Chế độ kí tự có ưu điểm tốn nhớ, xử lí hiển thị đơn giản nhanh Nhược điểm chế độ hiển thị kí tự, khơng hiển thị hình ảnh đối tượng có độ chi tiết cao, phổ màu rộng, kí tự có dạng font Chế độ đồ hoạ (graphic mode) chế độ hiển thị mà phần tử hiển thị điểm ảnh Màn hình chia thành hàng cột, giao điểm hàng cột tạo thành ô, ô hiển thị điểm ảnh So với chế độ kí tự số dịng số cột chế độ đồ hoạ lớn nhiều (ví dụ 800 x 600), điểm ảnh nhỏ so với kí tự Ưu điểm chế độ đồ hoạ là: hiển thị hình ảnh đối tượng có độ chi tiết cao, phổ màu rộng, cho phép hiển thị kí tự có dạng font khác Ngược lại nhược điểm chế độ đồ hoạ đòi hỏi nhiều nhớ lực xử lí Đồ hoạ bitmap đồ hoạ vector Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Đồ hoạ bitmap phương pháp biểu diễn liệu đồ hoạ đối tượng đồ hoạ mô tả dạng ma trận điểm ảnh Đồ hoạ bitmap phù hợp với đối tượng có độ chi tiết cao, màu sắc phong phú Nhược điểm đồ hoạ bitmap không giữ độ nét co giãn ảnh tốn nhớ Thường dùng với ảnh số, video số… Đồ hoạ vector phương pháp biểu diễn liệu đồ hoạ đối tượng đồ hoạ từ phần tử đoạn thẳng đối tượng xây dựng từ đoạn thẳng đa giác, đường gấp khúc, đường cong… Đồ hoạ vector tốn nhớ, giữ độ nét co giãn không phù hợp để mô tả đối tượng phức tạp phổ màu rộng, thường dùng cho hình vẽ, logo… Điểm ảnh độ phân giải Điểm ảnh phần tử nhỏ hiển thị thiết bị hiển thị phần tử bé dùng để mô tả đối tượng đồ hoạ Tuỳ theo kiểu đồ hoạ thiết bị đồ hoạ mà ta có thuật ngữ khác mơ tả điểm ảnh • pixel (picture element) thuật ngữ mơ tả điểm ảnh đồ hoạ bitmap • point thuật ngữ mô tả điểm ảnh đồ hoạ vector • dot đơn vị nhỏ mà thiết bị hiển thị (màn hình, máy in,…) hiển thị Độ phân giải biểu thị khả hiển thị độ nét chế độ đồ hoạ, đối tượng thiết bị đồ hoạ Độ phân giải cao khả hiển thị lớn độ nét lớn Có nhiều cách mơ tả độ phân giải: • Số cột x số dịng: mơ tả hình đồ hoạ chia thành cột dịng (từ suy số pixel kích thước pixel) Thường dùng mơ tả kích thước ảnh số, độ phân giải hình Ví dụ nói độ phân giải hình 800x600 có nghĩa hình chia thành 800 cột, 600 dịng có 800 x 600 = 480.000 điểm ảnh • Số pixel tối đa mà thiết bị đồ hoạ lưu trữ, thường dùng mô tả độ phân giải máy ảnh số Chẳng hạn máy ảnh số mega pixel, mega pixel… Từ số điểm ảnh tối đa ta ước lượng kích thước tối đa ảnh Chẳng hạn máy ảnh 3MP chụp ảnh có độ phân giải 2000x1500 (trong độ phân giải thơng thường hình 800x600) • dpi (dot per inch): số dot tạo inch (thường dùng cho máy in máy quét ảnh) Độ nét trang in ảnh quét phụ thuộc vào dpi Các thông số thường dùng cho máy in laser 300 dpi 600 dpi Từ tham số dpi ta suy kích thước ảnh Chẳng hạn ta quét ảnh tức 5x4 inch với độ phân giải 300 dpi kích thước ảnh ta có 1500x1200 điểm ảnh Hệ toạ độ phép chiếu Hệ toạ độ dùng để xác định vị trí đối tượng điểm ảnh, nhờ ta thực thao tác đồ hoạ (chẳng hạn để vẽ đoạn thẳng ta cần toạ độ điểm đầu mút đoạn thẳng đó) Có loại hệ toạ độ khác nhau: • Hệ toạ độ hiển thị hệ tọa độ xác định vị trí điểm ảnh thiết bị hiển thị Do hạn chế độ phân giải đặc điểm đồ hoạ bitmap, hệ toạ độ hiển thị sử dụng số nguyên, có trục y hướng xuống sử dụng giá trị toạ độ hữu hạn Ví dụ độ phân giải 800x600 tất điểm ảnh có giá trị toạ độ x số nguyên từ đến 799, toạ độ y từ đến 599 • Hệ toạ độ giới hệ toạ độ xác định vị trí đối tượng đồ hoạ khác giới (mặt phẳng, không gian) chung Hệ toạ độ giới sử dụng số thực, giá Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) trị toạ độ không bị giới hạn trục y hướng lên hệ toạ độ toán học Hệ toạ độ giới có chiều (2D) chiều (3D) • Hệ toạ độ đối tượng hệ toạ độ dùng mơ tả kích thước đối tượng đồ hoạ vị trí tương đối thành phần tạo nên đối tượng Khi muốn hiển thị đối tượng đồ hoạ lên thiết bị đồ họa ta cần thực ánh xạ toạ độ đối tượng, toạ độ giới toạ độ hiển thị Q trình ánh xạ gọi phép chiếu III BIỂU DIỄN MÀU Các chế độ màu sắc Đồ hoạ máy tính xử lý chế độ màu sắc khác nhau: • Đơn sắc: có màu màu màu (có thể đen trắng, xanh trắng…) Được dùng phổ biến để mơ tả ảnh nhị phân, ma trận kí tự… • Đa mức xám (grayscale): dùng màu xám đậm nhạt khác (trải từ đen đến trắng) để mô tả sắc độ (giống ảnh chụp đen trắng) Dùng phổ biến cho kết xuất máy in • Màu (color): dùng màu sắc tự nhiên (đen, trắng, xanh, đỏ, tím, vàng…) Số lượng màu sử dụng dao động từ 16 màu đến 16 triệu màu Trong đồ hoạ máy tính điểm ảnh mang màu Phân tích tổng hợp màu Màu sắc ánh sáng phụ thuộc vào bước sóng ánh sáng Mỗi màu tự nhiên phân tích tổng hợp từ số màu Thường đồ hoạ người ta sử dụng màu đỏ (Red), xanh (Green) xanh da trời (Blue) Phân tích màu xác định màu tạo thành từ màu với thành phần Để xác định thành phần màu đỏ màu đó, ta chiếu ánh sáng màu qua kính lọc màu đỏ đo cường độ ánh sáng sau qua kính lọc Làm tương tự để xác định thành phần màu lại Ngược lại, ta tổng hợp màu cách chiếu nguồn sáng đơn sắc với cường độ thích hợp (tương ứng với thành phần phân tích được) để tạo nên màu Số hố màu Trong máy tính, tất liệu phải số hố để xử lý Màu sắc đồ hoạ máy tính số hoá thành số nhị phân Độ sâu màu số bit số nhị phân biểu diễn màu Nếu độ sâu màu d số màu khác biểu diễn 2d Ví dụ ta dùng 24 bit để biểu diễn màu cho điểm ảnh ta có 224 (hơn 16 triệu) màu khác Có hai phương pháp số hoá màu: số hoá trực tiếp số hoá theo số Số hoá màu trực tiếp ta số hố màu cách mơ tả sắc độ thành phần R,G,B tương ứng với màu Chẳng hạn chế độ màu 24 bit, ta dùng bit cho màu bản, có 256 mức độ khác mô tả cường độ màu 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 số Chẳng hạn với độ sâu màu bit (tương ứng với 28 = 256 màu), người ta có bảng màu (palette) gồm 256 mục, mục mô tả thành phần RGB màu giá trị màu điểm ảnh số mục mô tả màu tương ứng Các hệ màu Ngoài hệ màu RGB, đồ hoạ máy tính cịn sử dụng số hệ màu khác HSV, CMYK Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Vùng đệm ảnh (frame buffer) nhớ đồ hoạ Bộ nhớ đồ hoạ (Video RAM) nơi chứa thơng tin mơ tả pixel hình đồ hoạ, thường nằm card video Nếu độ phân giải hình M cột x N dịng độ sâu màu d bit nhớ đồ hoạ có kích thước M x N x d (bit) Vùng đệm ảnh vùng nhớ lưu trữ tạm thời liệu đồ hoạ bitmap trình xử lý Vùng đệm ảnh thường chia thành nhiều khung ảnh, khung mô tả ảnh bitmap Đôi người ta gọi nhớ đồ hoạ (nơi chứa liệu đồ hoạ bitmap hiển thị hình) vùng đệm ảnh IV PHẦN CỨNG ĐỒ HOẠ Thiết bị Thiết bị thực nhiệm vụ hiển thị hình ảnh kết xuất đối tượng đồ hoạ Người ta chia thiết bị thành loại là: kết xuất cứng (hard copy) kết xuất mềm (soft copy) Thiết bị kết xuất cứng thiết bị mà kết hiển thị sửa chữa máy in (printer), mắy vẽ (plotter), máy cắt… Có nhiều cơng nghệ máy in phổ biến máy in laser, máy in phun, máy in kim Ngược lại, thiết bị kết xuất mềm cho phép cập nhật kết hiển thị cách nhanh chóng khơng hạn chế Thiết bị kiểu phổ biến hình Hiện có cơng nghệ hình sử dụng rộng rãi: • Màn hình CRT: thực việc hiển thị hình ảnh cách phóng tia âm cực lên hình huỳnh quang, tạo điểm sáng (như nguyên tắc TV) Để vẽ toàn hình, máy vẽ điểm, dịng (scan line) Sau vẽ xong tồn hình, kích thích huỳnh quang ngừng điểm sáng tương ứng khơng sáng nữa, máy lại vẽ lại Số lần máy vẽ lại tồn hình giây gọi tần số làm tươi (refresh rate) Tần số cao hình ảnh nét hình khơng có tượng rung • Màn hình LCD: điểm ảnh phần tử hiển thị tinh thể lỏng Mỗi tinh thể mạch điện riêng điều khiển Do máy trực tiếp bật sáng hay tắt điểm ảnh Ngồi hình cịn có thiết bị kết xuất mềm khác máy chiếu (projector)… Thiết bị vào Thiết bị vào cung cấp thông tin đồ hoạ từ giới bên ngồi vào Ta chia thiết bị vào thành loại: • Thiết bị vào cung cấp thơng tin điều khiển: bàn phím, chuột, bút vẽ, hình cảm ứng… • Thiết bị vào cung cấp thơng tin hình ảnh: máy ảnh số, máy qt, webcam, máy quay kĩ thuật số… Thiết bị lưu trữ Nhiệm vụ thiết bị lưu trữ lưu giữ lâu dài liệu đồ hoạ (ảnh, phim, hoạt hoạ…) Các công nghệ chế tạo thiết bị lưu trữ đa dạng với dung lượng ngày tăng Thiết bị lưu trữ có dung lượng tốt độ cao đĩa cứng Các đĩa cứng có dung lượng đến 250 – 300 GB Điểm yếu đĩa cứng phải lắp cố định máy tính, khơng tiện cho việc di chuyển liệu Để giải vấn đề người ta truyền liệu qua hệ thống mạng sử dụng thiết bị lưu trữ động đĩa quang hay đĩa Flash USB, thẻ nhớ Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Các loại đĩa quang phổ biến CD DVD Ưu điểm đĩa quang gọn nhẹ, động có thiết bị đọc phổ biến Dung lượng đĩa CD từ 650 MB đến 700 MB, dung lượng DVD lên đến 4.7 GB Nhược điểm đĩa quang đọc (khơng ghi xố được) Cũng có loại đĩa quang ghi-xố khơng phổ biến cần thiết bị đọc-ghi đắt tiền Ngoài đĩa quang dễ bị hỏng va đập, trầy xước… Đĩa Flash USB dùng ngày phổ biến gọn nhẹ, tính động khả ghi xoá tuỳ ý Dung lượng đĩa Flash USB ngày tăng (128MB, 256MB, 512MB…) Thẻ nhớ loại thiết bị lưu trữ dần phổ biến, chủ yếu sử dụng cho thiết bị nhỏ gọn máy ảnh kĩ thuật số, điện thoại di động… Với máy tính thẻ nhớ sử dụng địi hỏi phải có thiết bị đọc chuyên dụng 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 hình, thực thao tác đồ hoạ vẽ xoá hình, thay đổi màu sắc… Bộ điều khiển đồ hoạ nằm card video rời chế tạo sẵn mainboard (thường gọi onboard) Để lưu trữ thơng tin hình ảnh cần hiển thị hình, điều khiển đồ hoạ làm việc trực tiếp với phần nhớ chuyên biệt nhớ đồ hoạ (Video RAM) Nếu điều khiển đồ hoạ nằm card rời card lắp sẵn VRAM (và thường có tốc độ nhanh RAM hệ thống nhiều) Ngược lại, điều khiển đồ hoạ onboard sử dụng phần RAM hệ thống làm VRAM (do khả tốc độ thấp so với card rời) Bộ điều khiển đồ hoạ thực thao tác đồ hoạ thay đổi thông tin VRAM Nội dung VRAM chuyển đổi biến thành tín hiệu chuyển tới hình để thực việc hiển thị Các điều khiển đồ hoạ đại cịn có thêm chức xử lí 3D tính tốn phép chiếu, tạo bóng, phủ vân bề mặt… Các thiết bị xử lí khác Bộ xử lí (CPU) thiết bị thực tất thao tác xử lí liệu đồ hoạ (video controller thực thao tác liên quan đến hiển thị) Các CPU đại có tập lệnh chuyên dành cho xử lí 3D (tập lệnh MMX, tập lệnh 3D Now!) Bộ nhớ (RAM) nơi lưu trữ liệu đồ hoạ cần thiết q trình xử lí CPU khơng đọc liệu đồ hoạ trực tiếp từ thiết bị lưu trữ (đĩa cứng, đĩa CD…) mà chúng đưa vào RAM trước Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI ĐỒ HOẠ TRONG TURBO PASCAL 7.0 I, GIỚI THIỆU VỀ MÔI TRƯỜNG Các file thư viện cần thiết để lập trình đồ hoạ mơi trường Turbo Pascal 7.0 Để lập trình thực thi chương trình đồ hoạ TP, ta phải có đầy đủ tập tin sau:  TURBO.EXE TURBO.TPL: file tối thiểu để chạy mơi trường lập trình Turbo Pascal Nếu file TURBO.TPL chưa sửa lỗi (gây lỗi 200 sử dụng unit CRT) ta cần cập nhật file TURBO.TPL sửa lỗi để sử dụng đồ hoạ  GRAPH.TPU: file chứa unit Graph, thư viện đồ hoạ, chứa lệnh, hàm định nghĩa khác cho lập trình đồ hoạ TP Để sử dụng thư viện Graph, ta phải có khai báo uses Graph đầu chương trình  Các tập tin *BGI chứa trình điều khiển card hình Thường card hình hỗ trợ chuẩn VGA, ta cần file EGAVGA.BGI Ngồi muốn trình bày hình ảnh đồ hoạ đẹp hơn, ta cần thêm tập tin *.CHR chứa font chữ vector (GOTH.CHR font chữ Gothic, LITT.CHR font chữ Small, SANS.CHR font chữ Sans-Serif, TRIP.CHR font chữ Triplex) Nếu TP cài đặt theo tham số chuẩn file TURBO.EXE TURBO.TPL nằm thư mục C:\TP\BIN, file GRAPH.TPU thư mục C:\TP\UNITS, file *.BGI *.CHR nằm thư mục C:\TP\BGI Do chương trình đồ hoạ, người ta thường dùng đường dẫn chuẩn đến trình điều khiển đồ hoạ C:\TP\BGI Khởi tạo môi trường đồ hoạ Mặc định môi trường Turbo Pascal hoạt động chế độ văn bản, chương trình viết Turbo Pascal có giao diện mặc định chế độ văn Muốn viết chương trình đồ hoạ mơi trường Pascal ta phải khởi tạo chế độ đồ hoạ cho hình Lệnh khởi tạo chế độ đồ hoạ Turbo Pascal là: InitGraph(Gd,Gm:Integer;Path:String); Trong đó: • Gd: Biến kiểu integer định card hình Do card hình thơng dụng hỗ trợ chế độ VGA nên ta cần đặt Gd :=Detect để máy tính tự chọn chế độ thích hợp • Gm: Biến kiểu integer mode hình, thực chất xác định độ phân giải độ sâu màu Tuy nhiên ta đặt Gd Detect nên không cần thiết phải khai báo Gm, máy tính tự xác định loại card cho hình thiết lập mode hình có độ phân giải độ sâu màu lớn tương ứng với loại card hình • Path: Biến kiểu string định đường dẫn vào thư mục chứa tập tin *.BGI Nếu tập tin nằm thư mục hành khai báo Path ' ' Ta thường dùng đường dẫn mặc định C:\TP\BGI Trong số trường hợp việc khởi tạo đồ họa khơng thành cơng (khơng tìm thấy driver, driver khơng tương thích card hình, khơng đủ nhớ ) Để kiểm tra việc khởi tạo đồ hoạ có thành cơng khơng, ta dùng hàm GraphResult Nếu GraphResult = GrOK q trình khởi tạo đồ hoạ 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 ta khơng dùng lệnh kết thúc chương trình, Turbo Pascal tự động chuyển chế độ văn Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Chương trình ví dụ sau khởi tạo chế độ đồ hoạ, khởi tạo thành cơng vẽ đoạn thẳng chéo hình, ngược lại có 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 writeln('Loi hoa, khong khoi tao duoc!!'); halt; end; Line(0,0,GetMaxX,GetMaxY); readkey; CloseGraph; END II CÁC THÀNH PHẦN CỦA HỆ ĐỒ HOẠ TP 7.0 Hệ toạ độ Turbo Pascal hỗ trợ nhiều chế độ đồ hoạ khác chế độ thông dụng VGA 640x480x16 màu (nếu ta khởi tạo đồ hoạ tham số Detect ln khởi tạo chế độ VGA) Hệ toạ độ Turbo Pascal hệ toạ độ hình dùng mơ tả vị trí điểm ảnh (toạ độ nguyên, hữu hạn) Sau khởi tạo, gốc toạ độ có toạ độ (0,0) điểm trái hình Khung nhìn Để thay đổi gốc toạ độ ta sử dụng lệnh thiết lập khung nhìn Khung nhìn hình chữ nhật có cạnh song song với trục toạ độ nơi ta giới hạn vị trí kết xuất Khung nhìn dùng vào mục đích: • Giới hạn thao tác đồ hoạ khu vực xác định hình đồ hoạ khơng phải tồn hình Việc nhằm mục đích bảo vệ hình ảnh vùng khác tăng tốc độ lệnh tơ màu xố màu Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) • Tạo hệ toạ độ tạm thời giúp cho việc xử lí tham số toạ độ đơn giản (chẳng hạn xác định gốc cho phép ta vẽ đối tượng theo toạ độ tương điểm khơng cần xác định toạ độ tuyệt đối hình) Lệnh thiết lập khung nhìn: SetViewPort(x1,y1,x2,y2: integer; clip: boolean) Trong (x1,y1), (x2,y2) toạ độ đỉnh trái phải hình chữ nhật ta muốn thiết lập làm khung nhìn Các giá trị x1,y1,x2,y2 phải số nguyên nằm độ phân giải hình (ví dụ, độ phân giải 640x480 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: clip true ta vẽ hình chữ nhật thiết lập làm khung nhìn, đối tượng vẽ bị cắt xén cạnh hình chữ nhật Nếu clip false ta vẽ tồn hình đối tượng khơng bị cắt xén Như vậy, 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ẽ nên đặt tham số clip false, ngược lại muốn giới hạn vùng hình cần vẽ nên đặt clip true Ví dụ, để chuyển gốc toạ độ hình, ta dùng lệnh: SetViewPort(320, 240, 600, 400, false); Chú ý sau thiết lập khung nhìn, gốc toạ độ điểm (x1,y1) thao tác vẽ sử dụng toạ độ theo gốc (ngoại trừ lệnh SetViewPort sử dụng toạ độ tuyệt đối) Ví dụ, sau thiết lập khung nhìn lệnh SetViewPort trên, lệnh vẽ điểm (0,0) thực điểm (320,240) theo toạ độ hình Con trỏ đồ hoạ Trong chế độ văn có vị trí gọi trỏ (cursor) hay điểm nhắc biểu thị điểm sáng nhấp nháy, vị trí nơi thực thao tác xử lí, chẳng hạn kí tự nhập từ bàn phím vị trí điểm nhắc Tương tự vậy, chế độ đồ hoạ có vị trí gọi trỏ đồ hoạ, vị trí diễn thao tác đồ hoạ không mô tả rõ toạ độ Chẳng hạn ta dùng lệnh OutText để viết chuỗi kí tự mà khơng mơ tả toạ độ xâu kí tự trỏ đồ hoạ Chỉ khác trỏ đồ hoạ không nhấp nháy không hiển thị điểm sáng nhấp nháy trỏ chế độ văn * Các thao tác với trỏ đồ hoạ: Để di chuyển trỏ đồ hoạ đến vị trí hình đồ hoạ, ta dùng lệnh MoveTo Toạ độ vị trí phụ thuộc vào khung nhìn (là toạ độ tính tương đối theo khung nhìn) Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) MoveTo(x,y: integer) Để xác định vị trí trỏ đồ hoạ, ta có hàm GetX GetY, hàm trả lại giá trị hoành độ tung độ tương ứng trỏ đồ hoạ Màu sắc Màu sắc hệ đồ hoạ TP phụ thuộc vào card hình trình điều khiển Vào thời gian TP 7.0 xây dựng (1990-1992) cơng nghệ phần cứng cịn chưa phát triển Do chế độ đồ hoạ cao mà TP7.0 có trình điều khiển làm việc chế độ VGA chuẩn 640x480x16 màu Chế độ có độ sâu màu bit nên cần nhớ đồ hoạ tối thiểu 640x480x4bit = 156300B = 156 KB Màu sắc TP màu mô tả số, tức màu 16 màu số nguyên nằm miền từ đến 15 Bảng sau mô tả số tên màu TP: Tên Mã Mầu Black Màu đen Blue Màu xanh lơ Green Màu xanh Cyan Màu thiên Red Màu đỏ Magenta Màu đỏ tươi Brown Màu nâu LightGray Màu xám sáng DarkGray Màu xám tối LightBlue Màu xanh sáng LightGreen 10 Màu xanh sáng LightCyan 11 Màu thiên sáng LightRed 12 Màu đỏ sáng LightMagenta 13 Màu đỏ tươi sáng Yellow 14 Màu vàng White 15 Màu trắng Các thao tác để xử lý màu sắc TP: * Thiết lập màu vẽ: SetColor(c : word) Tham số c tham số mơ tả màu cần thiết lập, nhận giá trị từ đến 15 tên số màu mô tả bảng Lệnh SetColor thiết lập màu để vẽ đối tượng đường nét (đoạn thẳng, đường tròn, cung…) chữ Sau dùng lệnh SetColor với màu c, tất lệnh vẽ đường vẽ chữ sau dùng màu c cho đối tượng vẽ có lệnh SetColor thiết lập màu vẽ khác Sau khởi tạo đồ hoạ màu vẽ mặc định màu trắng (white 15) Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) * Thiết lập màu nền: SetBkColor(c : word) Màu TP tương ứng với màu (mặc định màu đen – black) Khi thực thao tác xố hình (ClearDevice) xố khung nhìn (ClearViewPort) tồn vùng bị xố tô màu màu * Thiết lập màu tô: Lệnh SetColor thiết lập màu cho đối tượng đường nét chữ Với đối tượng đặc hình chữ nhậ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 màu cần thiết lập để tô, t tham số mô tả mẫu tơ (pattern) Có thêm tham số mẫu tơ khơng phải lúc tơ đối tượng theo kiểu màu đặc mà muốn tơ đối tượng theo mẫu khác như: gạch ngang, gạch chéo, chấm chấm… Các mẫu khác mà TP hỗ trợ tô màu sau: Các lệnh vẽ điểm Điểm ảnh (pixel) đối tượng nhỏ hiển thị hình đồ hoạ Từ điểm ảnh ta xây dựng hình đồ hoạ phức tạp Mô tả điểm ảnh ta cần thông tin vị trí (toạ độ) màu sắc * Vẽ điểm ảnh Lệnh PutPixel dùng để vẽ điểm ảnh lên hình đồ hoạ PutPixel(x,y: integer; color: word) Tham số x,y mô tả toạ độ điểm ảnh, tham số color mô tả màu sắc điểm ảnh * Đọc màu điểm ảnh Hàm GetPixel dùng xác định màu điểm ảnh GetPixel(x,y:integer): word Hàm cho ta kết màu điểm ảnh toạ độ x,y Các lệnh vẽ đường thẳng Có hai cách vẽ đường thẳng hệ đồ hoạ TP: vẽ theo toạ độ tuyệt đối toạ độ tương đối Để vẽ đoạn thẳng theo toạ độ tuyệt đối, ta cần mô tả toạ độ điểm đầu cuối đoạn thẳng Lệnh vẽ đoạn thẳng theo toạ độ tuyệt đối lệnh Line: Line(x1,y1,x2,y2:integer) Trong (x1,y1) toạ độ điểm, (x2,y2) toạ độ điểm lại Khi vẽ theo toạ độ tương đối, ta cần mô tả toạ độ điểm, điểm cịn lại vị trí trỏ đồ hoạ Sau thực thao tác xong, TP chuyển trỏ đồ hoạ đến điểm lại Lệnh LineTo(x,y) dùng để vẽ đoạn thẳng từ vị trí trỏ đồ hoạ đến điểm (x,y), sau vẽ xong chuyển trỏ đồ hoạ đến điểm (x,y) LineTo(x,y:integer); Lệnh LineRel(dx,dy) dùng để vẽ đoạn thẳng từ vị trí trỏ đồ hoạ đến có toạ độ tương trỏ đồ hoạ theo vector (dx,dy), tức đến điểm có toạ độ tuyệt đối (getx + dx, gety + dy) Sau vẽ xong, trỏ đồ hoạ chuyển đến vị trí điểm Trang 10 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) SetTextStyle(Ft,Dr,Sz: Word); Thủ tục dùng để chọn kiểu chữ, đó: • Ft kiểu chữ, Ft có giá trị từ đến Trong font bitmap 8x8 mặc định • Dr hướng chữ, Dr=0 chữ hiển thị theo chiều ngang từ trái sang phải, Dr=1 chữ hiển thị theo chiều dọc từ xuống • Sz kích thước chữ, có giá trị từ đến 10 Ta thiết lập vị trí chữ, tức chỉnh vùng hiển thị chữ so với điểm mơ tả vị trí hiển thị (điểm (x,y) lệnh OutTextXY, vị trí trỏ đồ hoạ lệnh OutText) SetTextJustify(ngang, doc: word) Trong giá trị hợp lệ cho tham số ngang doc sau: Hằng số (cho hướng ngang) Giá trị Ý nghĩa LeftText Chữ hiển thị từ trái sang phải, điểm mô tả hiển thị (căn trái) CenterText Chữ hiển thị cho điểm mô tả hiển thị nằm vùng chữ (căn giữa) RightText Chữ 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 Chữ hiển thị từ xuống dưới, phía điểm mơ tả hiển thị CenterText Chữ hiển thị cho điểm mô tả hiển thị nằm vùng chữ (căn giữa) BottomText Chữ hiển thị từ xuống dưới, phía điểm mơ tả hiển thị Mặc định chữ thiết lập LeftText, TopText, tức chữ hiển thị từ điểm mô tả sang phải xuống Đơi ta thiết lập chữ CenterText, CenterText để hiển thị chữ cho điểm mô tả hiển thị tâm vùng hiển thị chữ Tơ loang màu Ta có lệnh tơ màu cho hình hình học đơn giản (hình chữ nhật, hình trịn…) Có lúc ta cần tơ màu vùng (ví dụ tam giác, hình trăng khuyết…) Một vùng xác định đường biên khép kín TP có lệnh FloodFill để tô màu vùng Chỉ cần xác định màu đường biên điểm nằm vùng cần tô FloodFill(x,y:Integer,Color: Word); Tham số (x,y) mô tả điểm nằm vùng cần tô, tham số color mô tả màu đường biên Nếu đường biên khơng khép kín q trình tơ loang màu tồn hình Chú ý lệnh FloodFill tiện dùng tốc độ không cao 10 Lưu trữ ảnh Đơi ta có nhu cầu phải lưu vùng hình vào nhớ bên ngồi đưa vùng lưu trở lại hình, chẳng hạn vẽ mơ chuyển động, lát hình… TP cung cấp cho số công cụ để thực cơng việc Trang 13 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Để xác định dung lượng nhớ cần thiết để lưu trữ vùng hình (bắt buộc phải hình chữ nhật), ta dùng hàm ImageSize ImageSize(x1,y1,x2,y2:integer): word; Hàm ImageSize cho kết số byte cần thiết để lưu trữ vùng hình chữ nhật có toạ độ cho điểm (x1,y1) (x2,y2) Giá trị hàm dùng để cấp phát nhớ động dùng cho việc chép vùng hình tương ứng lệnh GetMem: GetMem(var P:Pointer; sz: word); Lệnh thực việc cấp phát vùng nhớ động có kích thước sz byte, biến P trỏ đến Vùng nhớ truy cập kí hiệu p^ dùng lưu trữ vùng hình tương ứng lệnh GetImage GetImage(x1,y1,x2,y2: Integer; var buf); Lệnh thực hiên lưu vùng hình hình chữ nhật (x1,y1), (x2,y2) vào vùng nhớ buf Thường vùng nhớ vùng nhớ động biến trỏ p trỏ đến nên ta viết lệnh GetImage(x1,y1,x2,y2,p^) Sau lưu trữ vùng hình tương ứng, ta chép liệu đồ hoạ lưu trữ lên hình vị trí lệnh PutImage PutImage(x,y: integer;var buf; BitBlt: word); Lệnh thực chép ảnh lưu vùng nhớ buf hình điểm (x,y) với phép toán bit BitBlt Điểm (x,y) điểm trái hình chữ nhật lưu ảnh Buf vùng nhớ chứa ảnh, thường vùng nhớ động trỏ trỏ p nên ta viết p^ Tham số phép tốn BitBlt có ý nghĩa sau: tiến hành chép ảnh, máy không thực việc ghi đè pixel ảnh lên điểm ảnh tương ứng hình cịn cho phép thực phép tốn pixel ảnh pixel tương ứng hình Vì giá trị màu số nên phép tốn phép toán nhị phân Chẳng hạn ta chọn phép tốn BitBlt XorPut máy tiến hành phép toán xor giữ pixel ảnh pixel tương ứng hình, kết vẽ điểm ảnh có màu tương ứng với kết Các phép tốn BitBlt TP cung cấp: Tên phép toán Giá trị Ý nghĩa NormalPut (CopyPut) Sao chép pixel ảnh đè lên pixel tương ứng, không thực phép toán nhị phân XorPut Thực phép toán xor pixel nguồn pixel đích Đặc điểm phép tốn xor pixel kết có màu khơng giống pixel nguồn pixel đích, đồng thời copy ảnh lần phép tốn XorPut trở lại hình ban đầu Phép tốn XorPut sử dụng vẽ mô chuyển động để bảo vệ OrPut Thực phép toán or pixel nguồn pixel đích AndPut Thực phép tốn or pixel nguồn pixel đích NotPut Đảo màu (thực phép toán not) pixel ảnh trước ghi lên hình Dùng phép tốn ta Trang 14 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) ảnh âm Sau sử dụng sau vùng nhớ động, ta giải phóng vùng nhớ cấp phát lệnh FreeMem: FreeMem(Var P: Pointer; Size: Integer); 11 Sử dụng nhiều trang hình Bộ nhớ loại card hình EGA,…VGA có kích thước lớn cỡ khoảng từ 512Kb đến 2Mb nên có đủ nhớ để chứa nhiều trang hình Một trang hình vùng nhớ card hình đủ để lưu trữ tất điểm ảnh hình Đối với loại card hình có kích thước nhớ lớn cho nhiều trang hình Nếu trang có hình ảnh gần giống nhau, việc hiển thị trang làm cho ta có cảm tưởng hình ảnh chuyển động Trong chế độ đồ hoạ hình quản lí theo trang khác tuỳ theo Mode Trên hình lên trang nó,mặc định trang Để tạo hình chuyển động ta đặt chế độ hình đồ hoạ nhiều trang, sau trang hình vẽ hình cho trang hình lên theo thứ tự Nếu sử dụng phương pháp để tạo cho hình chuyển động ta khơng nên để Mode Detect, máy tính tự động chọn chế độ Mode có độ phân giải cao thường có trang hình nên khơng dùng cho phương pháp Ta sử dụng thủ tục sau đây: SetActivePage(Page:Integer) Đặt trang Page để vẽ lên trang Thứ tự trang đánh số từ 0, sau thủ tục tất vẽ lên trang đặt lại trang hình khác Muốn cho trang hình lên hình ta sử dụng thủ tục sau: SetVisualPage(Page: Integer); Trang 15 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI MƠ PHỎNG CHUYỂN ĐỘNG Mơ chuyển động ứng dụng hữu ích đồ hoạ máy tính Mô chuyển động phần thiết yếu computer games, hoạt hoạ flash, mô 3D… I NGUYÊN TẮC Ảo giác chuyển động Sự chuyển động ta quan sát thiết bị hiển thị đồ hoạ thực chất ảo giác tượng lưu ảnh mắt Khi mắt quan sát nguồn sáng, tế bào thị giác bị kích thích Sau nguồn sáng kích thích tắt đi, kích thích kéo dài thời gian ngắn (khoảng 40ms) Nếu khoảng thời gian ta phát lại nguồn sáng vị trí mắt khơng phát thực tế nguồn sáng bị tắt bật lại, mắt cảm nhận nguồn sáng phát sáng liên tục chuyển sang vị trí Từ tạo ảo giác chuyển động Nguyên tắc vẽ mô chuyển động Có hai phương pháp khác để mơ chuyển động đồ hoạ máy tính Phương pháp thứ giống điện ảnh: xây dựng dãy hình ảnh mơ tả trạng thái chuyển động khác đối tượng chiếu liên tục hình ảnh khoảng thời gian thích hợp Phương pháp thứ hai vẽ xoá đối tượng vị trí khác cách liên tục Do Turbo Pascal không mạnh mặt xử lý ảnh nên chủ yếu dùng phương pháp thứ hai để vẽ mơ chuyển động Vịng lặp vẽ mơ chuyển động có dạng sau: Repeat Draw; // vẽ đối tượng Delay; // ngưng hình khoảng thời gian ngắn để quan sát Clear; // xoá đối tượng, phục hồi hình 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 Để vẽ, xố cập nhật đối tượng q trình mơ chuyển động, cần mô tả thông tin toạ độ vận tốc chúng Tuỳ thuộc vào dạng chuyển động đối tượng mà ta mô tả thơng tin theo cách khác Chuyển động thẳng, chuyển động tịnh tiến chuyển động kiểu phản xạ Với chuyển động dạng này, mô tả toạ độ đối tượng theo tọa độ vng góc (x,y) vận tốc dạng vector (dx,dy), mô tả thay đổi toạ độ đối tượng theo thời gian Ví dụ: mơ chuyển động bóng Chuyển động quay Với chuyển động quay, ta mô tả toạ độ đối tượng dạng toạ độ cực, gồm bán kính quay góc quay Vận tốc chuyển động mơ tả dạng gia số góc Ví dụ: mơ chuyển động kim giây đồng hồ Chuyển động tịnh tiến đồng thời với chuyển động quay Ta mô tả đồng thời hai dạng toạ độ vị trí góc hai dạng vận tốc Trang 16 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Ví dụ: mơ bánh xe đạp chuyển động tịnh tiến quay Nhiều đối tượng chuyển động Khi mô nhiều đối tượng chuyển động, ta lưu trữ thông tin toạ độ, vận tốc hình ảnh đối tượng độc lập với Nhưng vẽ, xố cập nhật thơng tin lại thực đồng thời với tất đối tượng Xử lý va chạm Khi mô nhiều đối tượng chuyển động, cần xem xét trường hợp chúng va chạm với để điều chỉnh toạ độ vận tốc thích hợp III HOẠT HOẠ Kỹ thuật hoạt hoạ dạng sprite Kỹ thuật hoạt hoạ vùng đệm ảnh vùng đệm đôi Kỹ thuật hoạt hoạ dựa biến đổi nội suy Trang 17 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI ĐỒ HOẠ RÙA Với hệ đồ họa sẵn có Turbo Pascal để vẽ số dạng đa giác đều, sao… ta phải sử dụng công thức lượng giác phức tạp Nguyên nhân hệ đồ hoạ thiếu thao tác liên quan đến khoảng cách góc (chỉ chủ yêu tập trung đến toạ độ) Hệ đồ hoạ rùa cung cấp cho công cụ đơn giản để vẽ trường hợp I CÁC CÔNG CỤ CỦA HỆ ĐỒ HOẠ RÙA Tham số hệ đồ hoạ Hệ đồ hoạ rùa có hai tham số: • Vị trí bút vẽ Tham số mơ tả cặp biến (rx,ry) • Hướng bút (góc nghiêng so với phương ngang trục Ox) Mô tả biến Các thao tác hệ đồ hoạ Hệ đồ họa rùa có tối thiểu 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í đế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í khoảng d theo hướng bút • RLine(d): vẽ đoạn thẳng từ điểm (CP) theo hướng bút vẽ đến điểm cách CP đoạn d, sau di chuyển bút vẽ đến điểm • Right(a): quay hướng sang phải góc a Nếu muốn quay sang trái lấy góc đối góc a • RAngle(a): đặt hướng bút vẽ tạo với phương ngang (tia Ox) góc a II MỘT SỐ ỨNG DỤNG Vẽ hình hình học đơn giản a Vẽ hình chữ nhật Vẽ hình chữ nhật có đỉnh (x,y), chiều dài d, chiều rộng r thao tác: - Di chuyển đến điểm (x,y) - Vẽ đoạn dài d Quay 90 độ - Vẽ đoạn dài r Quay 90 độ - Vẽ đoạn dài d Quay 90 độ - Vẽ điểm (x,y) b Vẽ tam giác c Vẽ đa giác d Vẽ hình ngơi Vẽ ngơi cánh có đỉnh (x,y), chiều dài cánh d - Di chuyển đến điểm (x,y) - Thực lần vẽ đoạn dài d quay 144 độ Đường xoắn ốc (polysprial) Trang 18 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Polysprial (đường xoắn ốc) xây dựng theo quy tắc sau: xuất phát từ điểm, vẽ đến điểm cách khoảng d, sau quay phải góc a tăng d khoảng dd Quá trình thực n lần để vẽ xoắn ốc có n đoạn thẳng Procedure Polyspiral(d, a, dd, n); begin for i := to n begin RLineto(d); Right(a); d := d + dd; end; end; Trang 19 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI ĐỒ HOẠ VECTOR 2D Hệ đồ hoạ sẵn có sử dụng toạ độ nguyên, bị giới hạn độ phân giải nên không tiện để mô tả hiển thị trực tiếp đối tượng có vị trí, kích thước số thực (chẳng hạn: đồ thị hàm số, đường cong, hình hình học, thiết kế…) Hệ đồ hoạ vector 2D xây dựng để giải vấn đề I CÁC CÔNG CỤ CỦA HỆ ĐỒ HOẠ VECTOR 2D Đặc điểm Hệ đồ hoạ vector 2D có hệ toạ độ vng góc chiều, sử dụng giá trị toạ độ số thực không giới hạn độ lớn Trục Oy hệ toạ độ hướng lên, giống hệ toạ độ Đê-các 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ử sở Vì dùng điểm để mô tả phần tử khác, chẳng hạn đường cong ta cần vơ hạn điểm Nếu dùng hữu hạn điểm đối tượng mô tả không liên tục Hệ đồ hoạ 2D chọn phần tử đồ hoạ đoạn thẳng, đoạn thẳng dùng xấp xỉ đường cong liên tục (số lượng đoạn thẳng cần dùng hữu hạn, số lượng lớn đường cong mịn) Và điểm mô tả đoạn thẳng (2 điểm đầu trùng nhau) Các phần tử khác hệ đồ hoạ đường tròn, đường cong, đa giác… xây dựng xấp xỉ số hữu hạn đoạn thẳng Số đoạn thẳng cần dùng tuỳ theo yêu cầu độ mịn độ xác Cửa sổ khung nhìn Mặc phẳng toạ độ hệ đồ hoạ 2D vơ hạn, nhiên hình hiển thị hữu hạn Hơn ta thường muốn vẽ lên khu vực định hình khơng phải tồn hình Để thực điều ta sử dụng công cụ cửa sổ khung nhìn Cửa sổ (window) phần giới hạn mặt phẳng 2D chọn để hiển thị lên hình đồ hoạ Thơng thường cửa sổ chọn hình chữ nhật có cạnh song song với trục toạ độ Để thay đổi vùng quan sát ta thay đổi vị trí kích thước cửa sổ Như cửa sổ cho phép thể mặt phẳng 2D vô hạn hình đồ hoạ hữu hạn cách thời điểm chọn vùng định để hiển thị cho phép thay đổi vị trí kích thước vùng Tham số mơ tả cửa sổ gồm có: (xw,yw) toạ độ đỉnh trái, dw chiều rộng hw chiều cao cửa sổ Khung nhìn (viewport) phần giới hạn hình dùng để hiển thị Tồn đối tượng xuất cửa sổ hiển thị lên khung nhìn Do khung nhìn hình chữ nhật có cạnh song song với trục hệ toạ độ hình Ta thay đổi vị trí kích thước khung nhìn tuỳ theo u cầu Tham số mơ tả khung nhìn gồm có: (xv,yv) toạ độ đỉnh trái, dv chiều rộng hv chiều cao cửa sổ Công thức đổi toạ độ (phép chiếu 2D) Cửa sổ vùng mặt phẳng 2D nên đối tượng cửa sổ có thơng tin toạ độ thuộc hệ toạ độ giới Ngược lại điểm ảnh khung nhìn có toạ độ thuộc hệ toạ độ hình Hai hệ toạ độ khơng giống (chẳng hạn hệ dùng toạ độ thực, hệ dùng toạ độ Trang 20 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) ngun), ta cần có cơng thức chuyển đổi toạ độ điểm cửa sổ toạ độ hệ toạ độ hiển thị Công thức xác định sau: Ta chuyển đổi toạ độ điểm (x,y) mặt phẳng 2D thành toạ độ điểm (x*,y*) hình hiển thị theo cơng thức sau với mục đích đảm bảo tỉ lệ cửa sổ khung nhìn xtl = dv/dw; ttl = hv/hw x* = xo + xtl * (x – xw) y* = yo + ytl * (yw – y) Quá trình chuyển đổi thực Pascal hàm sau: function Cx(x : real): integer; begin Cx := xo + round((x-xw)*xtl); end; function Cy(y : real): integer; begin Cy := yo + round((yw-y)*ytl); end; Bài toán cắt xén (clipping) thuật toán cắt xén Cohen-Sutherland Trong nhiều trường hợp ta không phép hiển thị hình phần hình nằm ngồi cửa sổ, phải cắt xén phần đoạn thẳng nằm để có phần nằm cửa sổ hiển thị Vì đoạn thẳng phần tử hệ đồ hoạ 2D nên trình cắt xén phải tiến hành ngay vẽ đoạn thẳng yêu cầu tốc độ cắt xén đoạn thẳng phải nhanh Bài toán cắt xén cho ta điểm đầu đoạn thẳng, cửa sổ yêu cầu ta phải xác định điểm đầu phần đoạn thẳng nằm sổ Nếu đoạn thẳng nằm ngồi sổ ta khơng vẽ hết Ngược lại vẽ đoạn thẳng nối điểm đầu ta tìm Thuật tốn cắt xén Cohen-Sutherland: • Lập mã nhị phân để mơ tả vị trí điểm so với cửa sổ (1 nằm ngoài, bit nằm trong) • Nếu mã điểm 0000 chúng nằm => đoạn thẳng nằm trong, không cần xén • Nếu mã điểm AND khác 0000 chúng hồn tồn nằm ngồi, khơng cần vẽ • Ngược lại chúng có đoạn nằm đoạn nằm Ta thực cắt xén với cạnh cửa sổ điểm hoàn toàn 0000 Chú ý: Turbo Pascal cho phép thiết lập cắt xén tự động đặt khung nhìn Do ta khơng cần trực tiếp cài đặt thuật toán mà cần thiết lập tham số cắt xén khung nhìn thích hợp Vẽ đoạn thẳng, đa giác đường tròn Vẽ đoạn thẳng thủ tục hệ đồ hoạ 2D Trong Pascal ta viết 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 Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Đa giác vẽ cách nối đỉnh theo thứ tự đoạn thẳng Thủ tục vẽ đa giác cài đặt 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 := to n Lineto(Cx(x[i]), Cy(y[i])); end; Đường trịn xấp xỉ đa giác nhiều cạnh (72-360 cạnh) procedure duongtron(xo,yo,r : real); var x,y,goc : real; n,i : integer; begin goc := 0; n := 360; x := r * cos(goc); y := r * sin(goc); Moveto(Cx(xo+x), Cy(yo+y)); PutPixel(Cx(xo), Cy(yo),15); for i := to n begin goc := goc + 2*pi/n; x := r * cos(goc); y := r * sin(goc); Lineto(Cx(xo+x), Cy(yo+y)); end; end; Người đọc đặt câu hỏi: ta dùng lệnh line Pascal để vẽ đoạn thẳng mà không dùng lệnh Circle, Drawpoly có sẵn để vẽ đường trịn đa giác Nguyên nhân vấn đề tỉ lệ Nếu ta chọn tỉ lệ trục x trục y khơng giống đường trịn cần hiển thị ellipse, dùng lệnh Circle ta vẽ hình trịn Hơn có thêm u cầu cắt xén lệnh Circle khơng thực Vẽ đường cong Ta xét đường cong liên tục (nếu đường cong không liên tục ta cần chia thành hữu hạn đường cong liên tục) Nguyên tắc để vẽ đường cong liên tục hệ đồ hoạ 2D: • Chia đường cong thành đoạn đủ nhỏ, xấp xỉ đoạn thẳng • Cho tham số chạy với đoạn tăng nối hai điểm tương ứng đoạn thẳng II MỘT SỐ ỨNG DỤNG Vẽ đường cong Các đường cong mặt phẳng đồ hoạ chia thành loại theo phương trình mơ tả đường cong a Đường cong hàm số Đường cong hàm số mơ tả phương trình y=f(x) với giá trị x∈[a,b] Trang 22 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Đoạn chương trình sau minh hoạ 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 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 begin t := t + dt; x := fx(t); y := fy(t); LineTo(Cx(x), Cy(y)); end; c Đường cong 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ạ độ vng góc 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)); for i:=1 to n begin p := p + dp; r := fr(p); x := r * cos(p); y := r * sin(p); LineTo(Cx(x), Cy(y)); end; Vẽ mô chuyển động toạ độ thực Trang 23 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI CÁC PHÉP BIẾN ĐỔI 2D I CÁC PHÉP BIẾN ĐỔI 2D Phép tịnh tiến Phép biến đổi tịnh tiến phép biến đổi 2D làm thay đổi vị trí đối tượng đồ hoạ, khơng làm thay đổi hướng kích thước Phép quay Phép co giãn II BIỂU DIỄN PHÉP BIẾN ĐỔI BẰNG MA TRẬN Vì nên dùng ma trận biểu diễn phép biến đổi Hệ toạ độ Trang 24 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI MỘT SỐ KĨ THUẬT ĐỒ HOẠ THƯỜNG DÙNG Kĩ thuật lát Lát việc cần phủ bề mặt số hoạ tiết (texture) đối tượng đồ hoạ Phương pháp:  Chia miền cần lát thành ô lát ô  Nếu lát hoạ tiết bitmap phải lựa chọn mẫu lát sở cho đảm bảo khít  Nếu lát cách vẽ đối tượng cần phối hợp sử dụng viewport tính tốn toạ độ cách thích hợp Kĩ thuật băng cao su (rubber band) Kĩ thuật nhằm mục đích: … mơ tả kết sản phẩm vẽ (đường thẳng, đường tròn) thay đổi theo vị trí trỏ Phương pháp: Dùng write mode dạng xor để vẽ xoá Đặt write mode xor mode Hiển thị hình (đường thẳng, đường trịn…) Lưu lại toạ độ thời Cập nhật toạ độ (kiểm tra trỏ di chuyển) Hiển thị hình với toạ độ lưu bước 3, quay lại bước Khi vẽ đối tượng lần thứ đối tượng hiển thị nền, vẽ lần thứ hai tác dụng write mode dạng xor, hiển thị *Write mode Khi ghi pixel lên nền, write mode mô tả pixel kết xác định dựa pixel pixel ghi nào: pixel kết = pixel cần ghi pixel Trong write mode, chất phép tốn logic thực giá trị nhị phân Các write mode thường dùng  copy: ghi đè màu lên nền: pixel kết = pixel ghi  xor: thực xor màu màu ghi thành màu thứ hiển thị màu thứ Chú ý: xor lần trở màu ban đầu  or: có tác dụng “cộng thêm màu”, không phá huỷ màu Nếu pixel ghi màu đen khơng tác dụng  and: có tác dụng “phá huỷ màu” Nếu pixel ghi màu trắng khơng ảnh hưởng Kĩ thuật suốt Mục đích: đặt ảnh (nguồn) lên ảnh (nền) mà vùng ảnh không che ảnh Kĩ thuật quan trọng xây dựng game hình ảnh có nhiều lớp (layer) Trang 25 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Phương pháp:  Phương pháp 1: vẽ pixel ảnh 1, không vẽ pixel ảnh  Phương pháp 2: đặt key color (còn gọi transparent color) màu ảnh  Phương pháp 3: hiển thị ảnh mặt nạ (mask) thủ tục BitBLT (bit block transfer) BitBLT (bit block transfer) BitBLT thủ tục copy vùng ảnh sang ảnh kia: BitBLT(source, target, area, pos, writemode) source: ảnh nguồn target: ảnh đích area:toạ độ vùng cần copy nguồn, thường hình chữ nhật pos: vị trí copy lên đích writemode: xác định pixel tương ứng kết từ pixel nguồn đích Mặt nạ (mask) Mặt nạ ảnh ảnh nguồn, vùng tương ứng với có màu trắng, vùng tương ứng với hình có màu đen (ảnh đen trắng) Phương pháp hiển thị ảnh mặt nạ thủ tục BitBLT BitBLT kiểu XOR ảnh nguồn lên đích BitBLT kiểu AND mặt nạ lên đích BitBLT kiểu XOR ảnh nguồn lên đích (lần 2) Kĩ thuật hoạt hoạ (sprite) Mục đích: hiển thị đối tượng hoạt động, chuyển động với độ chân thực, thẩm mĩ tốc độ hiệu Phương pháp:  Vẽ chuỗi ảnh (sprite), ảnh (frame) mô tả thời điểm trình vận động hiển thị theo trình tự thời gian  Để mô tả đối tượng di chuyển: kết hợp thêm toạ độ đối tượng thay đổi theo thời gian Toạ độ dùng làm vị trí để hiển thị frame thời  Khi hiển thị sprite cần ý đến vấn đề vùng suốt  Nếu hiển thị nhiều sprite ý đến tính xa gần, sprite (dùng z-order để xác định sprite vẽ trước, sprite vẽ sau) Kĩ thuật chuyển động Mục đích: tạo cảm giác chuyển động việc thay đổi theo di chuyển đối tượng (thay đối tượng di chuyển, tĩnh, đối tượng vận động chỗ, di chuyển) Phương pháp: Dùng kĩ thuật double buffer Coi hình hiển thị cửa sổ quan sát ảnh rộng (dùng buffer để lưu trữ ảnh đó, buffer để lưu trữ nội dung cửa sổ) Mỗi đối tượng di chuyển ta thay đổi toạ độ cửa sổ tương ứng cập nhật nội dung cửa sổ Kĩ thuật vẽ chuyển động cao cấp Trang 26 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Mục đích: hiển thị chuyển động nhiều đối tượng khơng giật (smooth, non flickering) Nguyên nhân việc hình bị giật tốc độ vẽ xố khơng đủ nhanh (nhất vẽ nhiều đối tượng vẽ đối tượng phức tạp) Phương pháp: Phương pháp 1: đệm đôi (double buffer) Phương pháp 2: lưu trữ ngồi hình (off-screen store) a) Phương pháp đệm đôi Ý tưởng: không vẽ trực tiếp lên hình hiển thị mà vẽ hình ảo hiển thị hình ảo cần thiết Khi q trình vẽ khơng hiển thị hình chính, người dùng khơng cảm nhận hình giật Vấn đề làm để chuyển nội dung từ hình ảo sang hình cách nhanh  Tách biệt vùng nhớ hiển thị (display buffer) vùng nhớ hoạt động (active buffer)  Các thao tác vẽ, ghi, xoá ảnh thực vùng nhớ hoạt động  Đến chu kì cập nhật hình ảnh thì copy liệu từ vùng nhớ hoạt động sang vùng nhớ hiển thị  Dùng phương pháp tối ưu để tăng tốc độ copy (cài đặt BitBLT phần cứng đồ hoạ, assembly, không copy byte-byte mà word-word) b) Phương pháp lưu trữ ngồi hình Ý tưởng: Khi cần phục hồi đối tượng chuyển động ta khơng vẽ lại tồn hình, mà lưu trữ vùng có thay đổi, sau copy lại để phục hồi hình trở lại tình trạng trước thay đổi Nên dùng trường hợp: vùng thay đổi nhỏ so với toàn hình Dùng phương pháp tối ưu để tăng tốc độ copy Trang 27 ...Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Đồ hoạ bitmap phương pháp biểu diễn liệu đồ hoạ đối tượng đồ hoạ mô tả dạng ma trận điểm ảnh Đồ hoạ bitmap phù hợp... màu RGB, đồ hoạ máy tính cịn sử dụng số hệ màu khác HSV, CMYK Trang Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) Vùng đệm ảnh (frame buffer) nhớ đồ hoạ Bộ nhớ đồ hoạ (Video... Kỹ thuật hoạt hoạ vùng đệm ảnh vùng đệm đôi Kỹ thuật hoạt hoạ dựa biến đổi nội suy Trang 17 Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội) BÀI ĐỒ HOẠ RÙA Với hệ đồ họa sẵn