Główna zawartość
Rysowanie brył w trzech wymiarach
Teraz, skoro mamy już reprezentację naszej kostki w postaci kodu, musimy znaleźć sposób, aby ją narysować.
By narysować kształt trójwymiarowy na powierzchni dwuwymiarowej, musimy go "rzutować". Wyobraź sobie oświetlanie tej kostki od tyłu, a następnie odrysowywanie jej cienia na ekranie. Najłatwiejsza forma rzutowania to rzutowanie prostopadłe, które uzyskamy gdy promienie światła będą równoległe do siebie.
Cały ten wstęp o rzutowaniu może wydawać się skomplikowany, ale jest bardzo łatwy do zaimplementowania - po prostu pominiemy współrzędną z podczas rysowania.
Przygotowanie
Lubię tworzyć zmienne w moim programie, które kontrolują to, jak rzeczy są wyświetlane. Dzięki temu mogę je znacznie łatwiej modyfikować później. Oto parę zmiennych, których będziemy niedługo potrzebować; nie krępuj się przed zmianą wartości.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Teraz dodajmy podstawową funkcję rysowania:
draw = function() {
background(backgroundColor);
};Musimy również dodać następującą rzecz do naszego kodu:
translate(200, 200);To przesunie nasze płótno 200 pikseli w prawo i 200 pikseli w dół, dzięki czemu piksel na pozycji (0,0) jest teraz na środku naszego płótna. To oznacza, że nasza kostka będzie narysowana na środku ekranu. Powód, dla którego to robimy stanie sie jasny gdy zaczniemy obracać nasze obiekty.
Rysowanie węzłów
W funkcji rysującej iterujemy po wszystkich węzłach i rysujemy elipsy w koordynatach (x,y) tego węzła:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Rysowanie krawędzi
Również w funkcji rysowania dodamy kod do rysowania krawędzi. Dodajmy go przed kodem rysującym węzły, tak aby węzły były rysowane nad krawędziami.
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]);
}Ten kod iteruje po tablicy krawędzi. Bierze dwa numery określane przez każdą krawędź i sprawdza odpowiadające jej węzły w tablicy węzłów. Następnie rysuje linię od punktu (x,y) pierwszego wezła do punktu (x,y) drugiego węzła.
To wszystko?
Mieliśmy narysować sześcian, a do tej pory jedyne co narysowaliśmy to kwadrat i cztery kółka:
Mogliśmy narysować to wkładając znacznie mniej pracy. jednak to naprawdę jest nasza kostka - po prostu widzimy ją od przodu. Jeżeli uda nam się ją obrócić tak, aby nie była już na wprost ekranu, zobaczymy że to nie tylko kwadrat i cztery kółka.
Chcesz dołączyć do dyskusji?
Na razie brak głosów w dyskusji