主要内容
绘制 3D 图形
现在我们学会了如何表示立方体，我们需要找到一种方法来画它。
要在二维平面上绘制三维图形，我们需要对其进行“投影”。想象一下，在立方体的后面点亮一盏灯，把它的阴影投射到屏幕上。最简单的投影形式是正交投影，这是光束相互平行时得到的结果。
所有这些关于投影的定义可能听起来很复杂，但是它很容易实现：我们在绘制时忽略z坐标。
初始设定
我喜欢在程序开始的地方创建变量来控制显示的方式，这样以后就可以很容易地修改它们。下面是一些我们需要的变量；请随意更改数值。
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;现在我们添加一个基本的绘制函数：
draw = function() {
background(backgroundColor);
};我们还需要在代码中添加以下内容：
translate(200, 200);这行代码将画布向右移动200像素，向下移动200像素，因此位于(0,0)的像素现在位于画布的中心。这意味着我们将在屏幕的中心绘制立方体。当我们开始旋转物体时，我们就知道为什么这样设置了。
绘制节点
在绘制函数内，我们遍历所有节点，并在该节点的 (x, y) 坐标处绘制一个椭圆：
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}绘制边
此外，在绘图函数中，我们添加了绘制边的代码。我将在绘制节点的代码之前添加绘制边的代码，以便在边的顶端处绘制节点。
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)坐标画一条线。
就这些了？
我们开始打算画一个立方体，但我们现在就画了一个正方形和四个圆：
我们可以用简单的方法画出来。然而，这确实是我们的立方体——只是我们是从一个侧面看到它。如果我们能想出如何旋转立方体使它不再在屏幕上只显示一个侧面，我们会看到的就不只是一个正方形和四个圆。