Conteúdo principal
Desenhando formas 3D
Então, agora que temos uma representação do nosso cubo, precisamos de um modo de desenhá-lo.
Para desenhar uma forma 3D em uma superfície 2D, precisamos "projetá-la". Imagine brilhar uma luz por trás do cubo e projetar sua sombra em uma tela. A forma mais simples de projeção é uma projeção ortogonal, que é o que você obteria se os feixes de luz fossem paralelos uns aos outros.
Toda essa conversa sobre projeções pode parecer complicada, mas é muito fácil de implementar: simplesmente ignoramos as coordenadas z quando desenhamos.
Preparações antes de começar
Eu gosto de criar variáveis no topo dos meus programas para controlar como as coisas são exibidas, assim posso facilmente mudá-las mais tarde. Aqui estão algumas variáveis que vamos querer em breve; sinta-se livre para alterar os valores.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Agora, adicionamos uma função draw básica:
var draw = function() {
background(backgroundColor);
};Também vamos precisar adicionar o seguinte ao nosso código:
translate(200, 200);Isso muda a nossa tela 200 pixels para a direita e 200 pixels para baixo, para que o pixel na posição (0,0) seja agora o centro da nossa tela. Isso significa que nosso cubo será desenhado no centro da tela. A razão para fazer as coisas desta forma se tornará clara quando começarmos a fazer a rotação dos nossos objetos.
Desenhos dos nós
Dentro da função draw, percorremos todos os nós e desenhamos uma elipse na coordenada (x, y) daquele nó:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Desenhos das arestas
Também dentro da função draw, adicionamos o código para desenhar as arestas. Eu o adicionaria antes do código para desenhar os nós, para que os nós sejam desenhados sobre as arestas.
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]);
}Esse código percorre a array das arestas. Ele obtém os dois números definidos por uma aresta e procura o nó correspondente no array de nós. Em seguida, ele desenha uma linha das coordenadas (x,y) do primeiro nó para as coordenadas (x,y) do segundo nó.
É só isso?
Nos propusemos a desenhar um cubo, mas tudo o que fizemos foi desenhar um quadrado e quatro círculos:
Nós poderíamos ter desenhado isso com muito menos esforço. No entanto, este é realmente o nosso cubo – só que estamos olhando para ele de frente. Se conseguirmos descobrir uma maneira de fazer a rotação do nosso cubo para que não fique mais de frente para a tela, vamos ver que não é só um quadrado e quatro círculos.
Quer participar da conversa?
Poderiam fazer um pseudo código mais detalhado? de como o for das linhas esta funcionando, eu não entendi.(1 voto)