Contenido principal
Dibujar figuras 3D
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:
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), ahora está 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.
¿Quieres unirte a la conversación?
When drawing edges. it's confusing to use the same name for the array node0 and node1 and for the local variable node0 and node1.
Just to clarify it I just changed the name of the local variable this way:
// Draw edges
stroke(edgeColour);
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var nodee0 = nodes[n0];
var nodee1 = nodes[n1];
line(nodee0[0], nodee0[1], nodee1[0], nodee1[1]);
}
I think it works correctly and it's easier to understand.
It's that correct for you?(7 votos)
¿por qué tiene que estar la mayoria dentro de la función draw si no es una animación?(4 votos)
soy homero chino xd(1 voto)
no sean chavales como se gana el juego de pong(0 votos)