Hlavní obsah
Programování
Kreslení 3D tvarů
A teď, když už máme základ naší krychle, musíme najít způsob, jak ji nakreslit.
Abychom nakreslili 3D tvar na 2D povrchu, musíme ho "promítnout". Představ si, že by za krychlí svítilo světlo a promítalo její stín na obrazovku. Nejjednodušší formou projekce je kolmá projekce, tedy když jsou jednotlivé světelné paprsky rovnoběžné.
Všechny tyto informace o projekcích mohou znít složitě, ale je velmi snadné je implementovat: při kreslení jednoduše ignorujeme souřadnice z.
Příprava
Bývá dobrým zvykem deklarovat proměnné v horní části kódu, abychom mohli kontrolovat, jak se věci zobrazují, takže je pak možné je snadno podle potřeby změnit později. Zde jsou některé proměnné, které budeme brzy potřebovat; klidně jejich hodnoty uprav.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Nyní přidáme základní funkci pro kreslení:
draw = function() {
background(backgroundColor);
};Do našeho kódu budeme muset přidat následující:
translate(200, 200);Tím se posune naše plátno 200 pixelů doprava a 200 pixelů dolů, takže pixel na pozici (0, 0) je nyní ve středu našeho plátna. To znamená, že naše krychle bude nakreslena uprostřed obrazovky. Důvod tohoto postupu pochopíš, až začneme otáčet naše objekty.
Nakreslení uzlů
Uvnitř funkce draw iterujeme cyklus přes všechny uzly a kreslíme elipsu na souřadnici (x, y) daného uzlu:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Nakreslení hran
Uvnitř funkce draw přidáváme kód pro kreslení hran. Když jej přidáme před kód pro kreslení uzlů, uzly budou nakresleny na vrcholu hran.
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]);
}Tento kód se iteruje přes pole hran. Získá dvě čísla definovaná hranou a hledá odpovídající uzel v poli uzlů. Pak nakreslí čáru od souřadnice (x, y) prvního uzlu k souřadnici (x, y) druhého uzlu.
To je vše?
Chtěli jsme nakreslit krychli, ale jediné, co se nám povedlo, je nakreslit čtverec a čtyři kruhy:
Tohle celé jsme mohli nakreslit jinak a snadněji. Jedná se však opravdu o naši krychli - akorát se díváme kolmo na jednu její stranu. Pokud přijdeme na to, jak ji otočit, uvidíme, že to není jen čtverec a čtyři kruhy.
Chceš se zapojit do diskuze?
Zatím žádné příspěvky.