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

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

3D 도형 그리기

이제 정육면체의 표현을 이용하여 정육면체를 그리는 방법을 알아보겠습니다.
3D 모양을 2D 표면에 그리기 위해서는 모양을 "투영해야"합니다. 정육면체 뒤에서 빛을 비춰서 스크린에 정육면체의 그림자를 투영하는 것을 생각해 보세요. 투영한 것의 가장 단순한 형태를 정사영(orthogonal projection)이라 하며 광선이 서로 평행할 때 얻을 수 있습니다.
투영이 복잡하게 들릴 수 있으나 수행하는 것은 매우 쉽습니다. 그림을 그릴 때 z- 좌표를 생각하지 않으면 됩니다.

설정하기

사물이 보이는 방법을 제어하고 나중에 사물을 쉽게 변경할 수 있도록 프로그램 앞쪽에 변수를 생성하면 됩니다. 다음은 곧 사용할 variable들입니다. 값은 자유롭게 변경할 수 있습니다.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;
이제 기본적인 draw 함수를 추가해 보겠습니다.
var draw = function() { 
    background(backgroundColor);
};
또한 코드에 다음을 추가합니다.
translate(200, 200);
추가된 코드는 배경을 오른쪽으로 200 픽셀 그리고 아래로 200 픽셀로 옮깁니다. 이제 (0, 0) 위치의 픽셀이 배경의 중심에 있게 됩니다. 즉 스크린의 중심에 정육면체를 그릴 수 있게 됩니다. 객체를 회전하기 시작하면 이 방법으로 하는 이유가 명확해질 것입니다.

노드(Node) 그리기

Draw 함수 내부에서 모든 노드에 대해 반복문을 적용하고 해당 노드의 (x, y) 좌표에서 타원을 그립니다.
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
   var node = nodes[n];
   ellipse(node[0], node[1], nodeSize, nodeSize);
}

엣지(Edge) 그리기

또한 draw 함수 내부에 엣지를 그리기 위한 코드를 추가합니다. 노드를 그리기 위한 코드 전에 추가하여 노드를 엣지 위에 그립니다.
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]);
}
이 코드를 통해 엣지 배열에 대해 반복문을 적용합니다. 엣지로 정의되는 두 개의 숫자를 얻을 수 있고 노드 배열에서 일치하는 노드를 찾을 수 있습니다. 이후 첫 번째 노드의 (x, y) 좌표에서 두 번째 노드의 (x, y) 좌표까지 선을 그립니다.

이제 된 것일까요?

정육면제를 그리기 시작해야 하지만 아직은 정사각형과 4개의 원만 그린 것입니다.
보다 적은 노력으로 그릴 수 있습니다. 그러나 이것은 정말로 정육면체입니다. 단지 정면으로 바라보고 있을 뿐입니다. 정육면체를 회전하는 방법을 알면 이것은 단순한 정사각형과 네 개의 원이 아니라는 것을 알게 될 것입니다.