If you're seeing this message, it means we're having trouble loading external resources on our website.

Nếu bạn đang sử dụng bộ lọc web, vui lòng kiểm tra lại xem bộ lọc có chặn hai tên miền *.kastatic.org*.kasandbox.org hay không.

Nội dung chính

Phép tịnh tiến

Khi tạo một chương trình trên Khan Academy với các câu lệnh trong thư viện ProcessingJS, đầu ra sẽ được hiển thị trên khung kết quả bên cạnh. Ta có thể coi khung kết quả này như một tờ giấy kẻ ô vuông mô phỏng hệ trục tọa độ. Để vẽ hình, ta cần xác định các tọa độ liên quan trên hệ trục tọa độ tương ứng.
Để có thể hiểu rõ hơn, hãy cùng tham khảo ví dụ dưới đây. Ta có một hình chữ nhật được vẽ bằng lệnh rect(20, 20, 40, 40). Hệ trục tọa độ được vẽ cụ thể bằng màu xám. Để dễ quan sát hình ảnh hơn, ta sử dụng hệ trục tọa độ có kích thước 200 x 200 pixel (thay vì kích thước mặc định là 400 x 400). Có thể thấy, tọa độ đỉnh phía trên bên trái hình chữ nhật là x = 20, y = 20, chiều rộng và chiều cao là 40:
Trong trường hợp muốn di chuyển hình chữ nhật sang phải 60 đơn vị và xuống dưới 80 đơn vị, ta chỉ cần thay đổi tọa độ bằng cách cộng thêm vào giá trị xy ban đầu: rect(20 + 60, 20 + 80, 40, 40). Hình chữ nhật sẽ xuất hiện ở một vị trí khác. (Hình mũi tên mô tả sự dịch chuyển.)
Tuy nhiên, có một cách thú vị hơn để di chuyển hình chữ nhật, đó là di chuyển cả hệ trục tọa độ. Nếu bạn di chuyển hệ trục tọa độ sang phải 60 đơn vị và xuống dưới 80 đơn vị, bạn sẽ thu được kết quả trực quan giống hệt với cách làm trước. Việc di chuyển hệ trục tọa độ được gọi là phép tịnh tiến.
Một điểm quan trọng cần lưu ý là, bản thân hình chữ nhật đang xét không hề di chuyển. Góc trên bên trái của nó vẫn có tọa độ (20, 20). Trong các phép biến đổi, vị trí của hình vẽ không thay đổi, chỉ có vị trí của hệ trục tọa độ thay đổi.
Hãy cùng nghiên cứu chương trình dưới đây. Chương trình vẽ một hình chữ nhật, sau đó di chuyển hình chữ nhật đó sang vị trí mới bằng cách thay đổi tọa độ rồi tô màu đỏ. Tiếp theo, di chuyển hệ trục tọa độ bằng lệnh translate() và tô màu xanh dương cho hình chữ nhật mới. Lớp màu được tô có tính chất trong suốt nên khi màu đỏ và màu xanh dương chồng lên nhau sẽ tạo thành màu tím. Điều này đồng nghĩa với việc hai hình chữ nhật mới có vị trí trùng nhau. Chỉ có phương pháp di chuyển các hình chữ nhật là khác nhau.
Hàm pushMatrix() là một hàm được tích hợp sẵn giúp chương trình ghi nhớ vị trí hiện tại của hệ trục tọa độ. Hàm translate(60, 80) di chuyển hệ trục tọa độ sang phải 60 đơn vị và xuống dưới 80 đơn vị. Hàm rect(20, 20, 40, 40) vẽ hình chữ nhật với các tham số tương tự như khi chưa dịch chuyển. Cuối cùng, hàm popMatrix() khôi phục lại hệ trục tọa độ về trạng thái như trước khi tịnh tiến.
Tại sao ta lại dùng pushMatrix()popMatrix()? Trên lý thuyết, ta có thể sử dụng lệnh translate(-60, -80) để di chuyển hệ trục tọa độ trở lại vị trí ban đầu. Tuy nhiên, khi phải thực hiện các thao tác phức tạp hơn với hệ trục tọa độ, sử dụng các hàm pushMatrix()popMatrix() để lưu và khôi phục trạng thái thay vì hoàn tác tất cả các thao tác sẽ giúp mọi chuyện trở nên đơn giản hơn.

Lợi ích của phép tịnh tiến

Bạn có thể nghĩ rằng việc di chuyển cả hệ trục tọa độ phức tạp hơn rất nhiều so với việc cộng trừ từng tọa độ. Đối với một ví dụ đơn giản như hình chữ nhật thì điều này là đúng. Tuy nhiên trong một số trường hợp, hàm translate() sẽ giúp việc lập trình trở nên dễ dàng hơn.
Dưới đây là chương trình vẽ một dãy các ngôi nhà, sử dụng vòng lặp gọi liên tiếp hàm drawHouse(). Tham số hàm này là hoành độ x và tung độ y của góc trên bên trái hộp giới hạn của ngôi nhà. Lưu ý rằng hàm drawHouse() phải thực hiện nhiều thao tác liên quan đến tham số để vẽ ngôi nhà ở tọa độ được yêu cầu:
Điều gì sẽ xảy ra nếu ta dùng hàm translate() thay vì tính toán tọa độ của ngôi nhà tiếp theo? Khi đó, các ngôi nhà sẽ được vẽ ở cùng một vị trí với tọa độ của góc trên bên trái hộp giới hạn là (0, 0). Phép tịnh tiến sẽ lo mọi vấn đề khác.
Dĩ nhiên, không phải lúc nào ta cũng nên dùng hàm translate() thay vì tính toán tọa độ mới. Hãy coi đây là một công cụ mới trong hộp công cụ của bạn và bạn có toàn quyền quyết định khi nào nên sử dụng công cụ translate() mới này.
Bài đọc này được biên soạn dựa trên bài viết 2D Transformations của tác giả J David Eisenberg, sử dụng với giấy phép Creative Commons Attribution-NonCommercial-ShareAlike.

Tham gia cuộc thảo luận?

Chưa có bài đăng nào.
Bạn có hiểu Tiếng Anh không? Bấm vào đây để thấy thêm các thảo luận trên trang Khan Academy Tiếng Anh.