Nội dung chính
Vẽ hình 3D
Google ClassroomKhi đã hình dung ra hình biểu diễn một khối lập phương trông như thế nào, chúng ta cần tìm cách vẽ hình biểu diễn đó.
Vẽ hình 3D trên mặt phẳng 2D chính là vẽ hình chiếu của hình 3D đó trên mặt phẳng. Hãy tưởng tượng bạn đang chiếu một luồng ánh sáng phía sau khối lập phương và vẽ lại bóng của nó trên màn hứng. Phép chiếu đơn giản nhất là phép chiếu trực giao. Bạn có thể hình dung phép chiếu này là phép chiếu với các tia sáng song song.
Phần giới thiệu về phép chiếu ở trên có vẻ hơi phức tạp nhưng trên thực tế lại rất dễ thực hiện: chúng ta chỉ cần bỏ qua tọa độ z khi vẽ.
Chuẩn bị
Chúng ta sẽ cần tạo một số biến ở đầu của chương trình để điều chỉnh các thông số liên quan đến hiển thị. Khi đó, ta có thể dễ dàng thay đổi các thông số nếu cần. Dưới đây là một số biến mà ta sẽ sử dụng:
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Tiếp theo, chúng ta thêm một hàm "draw" cơ bản:
draw = function() {
background(backgroundColor);
};Chúng ta cũng cần có hàm dưới đây:
translate(200, 200);Hàm này dịch chuyển hệ trục tọa độ sang phải 200 pixel và xuống dưới 200 pixel. Sau khi dịch chuyển, điểm có tọa độ (0, 0) sẽ nằm chính giữa khung kết quả, đồng nghĩa với việc khối lập phương của chúng ta sẽ được vẽ tại vị trí đó. Bạn sẽ hiểu tại sao chúng ta lại cần làm như vậy khi lập trình đến phần xoay vật thể.
Vẽ các điểm
Bên trong hàm "draw", chúng ta chạy vòng lặp duyệt qua các điểm và vẽ một hình elip ở tọa độ (x, y) của điểm đó:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Vẽ các cạnh
Bên trong hàm "draw", ta cũng cần có lệnh để vẽ các cạnh. Ta cần vẽ cạnh trước khi vẽ các điểm, khi đó các điểm mới được vẽ ở trên cạnh và không bị che khuất.
stroke(edgeColor);
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var node0 = nodes[n0];
var node1 = nodes[n1];
line(node0[0], node0[1], node1[0], node1[1]);
}Vòng lặp trên duyệt qua mảng chứa thông tin về các cạnh, nhận hai số trong mảng mô tả một cạnh và tìm điểm tương ứng trong mảng mô tả điểm. Sau đó, nó sẽ vẽ một đường thẳng từ tọa độ (x, y) của điểm đầu tiên đến tọa độ (x, y) của điểm thứ hai.
Chúng ta đã hoàn thành chưa nhỉ?
Chúng ta cần vẽ một khối lập phương. Tuy nhiên, chúng ta thu về một hình vuông và bốn hình tròn:
Chúng ta có thể vẽ khối lập phương theo cách đơn giản hơn. Tuy nhiên, khối lập phương ở trên không sai, chỉ là chúng ta đang nhìn nó từ góc độ chưa phù hợp. Vì vậy, chúng ta cần tìm ra cách để người dùng có thể xoay khối lập phương theo nhiều hướng khác nhau.
Tham gia cuộc thảo luận?
Chưa có bài đăng nào.