Ahora que tenemos una representación de nuestro cubo, tenemos que encontrar una manera de dibujarlo.
Para dibujar una figura 3D en una superficie 2D, necesitamos "proyectarla". Imagina que iluminas con una luz detrás del cubo y proyectas su sombra sobre una pantalla. La forma más sencilla de proyectar es una proyección ortogonal, que es lo que obtendrías si los rayos de luz fueran paralelos unos a otros.
Toda esta plática de proyecciones puede sonar complicada, pero es muy fácil de implementar: solo ignoramos las coordenadas z cuando dibujamos.

Preparar las cosas

Me gusta crear variables en la parte superior de mis programas para controlar cómo se muestran las cosas, de modo que pueda cambiarlas fácilmente más adelante. Aquí están algunas variables que vamos a querer dentro de poco; siéntete libre de cambiar los valores.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;
Ahora añadimos una función básica de dibujo:
var draw = function() {
    background(backgroundColor);
};
También necesitaremos agregar lo siguiente a nuestro código:
translate(200, 200);
Esto mueve nuestro lienzo 200 pixeles hacia la derecha y 200 pixeles hacia abajo, de modo que el pixel en la posición (0, 0), está ahora en el centro de nuestro lienzo. Esto significa que nuestro cubo se dibujará en el centro de la pantalla. La razón para hacer las cosas de esta manera se aclarará cuando empecemos a rotar nuestros objetos.

Dibujar nodos

Dentro de la función de dibujo, iteramos sobre todos los nodos y dibujamos una elipse en la coordenada (x, y) de ese nodo:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
   var node = nodes[n];
   ellipse(node[0], node[1], nodeSize, nodeSize);
}

Dibujar aristas

También dentro de la función de dibujo agregamos el código para dibujar las aristas. Yo lo agregaría antes del código para dibujar los nodos, de modo que los nodos se dibujen encima de las aristas.
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]);
}
Este código itera sobre el arreglo de las aristas. Obtiene los dos números definidos por una arista y busca el nodo correspondiente en el arreglo de nodos. Luego dibuja una recta desde la coordenada (x, y) del primer nodo a la coordenada (x, y) del segundo nodo.

¿Eso es todo?

Nos dispusimos a dibujar un cubo, pero todo lo que hemos hecho es dibujar un cuadrado y cuatro círculos:
Podríamos haber dibujado eso con mucho menos esfuerzo. Sin embargo, esto es realmente nuestro cubo, solo que lo estamos viendo de frente. Si podemos resolver cómo rotar nuestro cubo de modo que no esté de frente a la pantalla, veremos que no solo es un cuadrado y cuatro círculos.
Cargando