Fő tartalom
Programozás
3D alakzatok rajzolása
Most, hogy már megvan, hogy milyen a kockánk, valahogyan ki kellene rajzolnunk.
3D alakzatot úgy tudunk kirajzolni 2D felületen, hogy „levetítjük”. Képzeld el, hogy egy fény világít a kocka mögött, és a kocka árnyékát a képernyőre vetíti. A vetítés legegyszerűbb módja az ortogonális vetítés, amit akkor kapsz meg, ha a fénysugarak párhuzamosak egymásra.
Lehet, hogy ez a vetítésről szóló rész bonyolultnak hangzik, de nagyon egyszerű implementálni: egyszerűen figyelmen kívül hagyjuk a z koordinátákat rajzoláskor.
Állítsuk be a dolgokat!
Szeretek a programom elején változókat létrehozni, amikben beállítom, hogy adott dolgok hogyan jelenjenek meg, és ezeket később könnyen meg tudom változtatni. Íme néhány olyan változó, amelyeket használni fogunk – ha szeretnéd, bátran változtasd meg bármelyik értékét!
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Most hozzáadjuk a draw függvényt:
draw = function() {
background(backgroundColor);
};Ezen kívül szükségünk lesz még az alábbi kódra is:
translate(200, 200);Ez a vásznunkat 200 pixelre jobbra, és 200 pixellel felfelé tolja el, így a (0,0)-ban lévő pixel a vászon közepén lesz. Ez azt jelenti, hogy a kockánk a képernyő közepére fog kerülni. Annak az oka, hogy miért így csináljuk a dolgokat, érthetővé fog válni, amint elkezdjük forgatni az objektumainkat.
Csúcsok kirajzolása
A draw függvényben végigjárjuk az összes csúcsot (csomópontot), és ellipszist rajzolunk ezek (x,y) koordinátájára.
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Élek rajzolása
A draw függvényhez adjuk hozzá azt a kódot is, ami az éleket rajzolja meg. Ezt a csúcsokat kirajzoló kód elé írjuk, hogy a csúcsok már az élekre legyenek rárajzolva.
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]);
}Ez a kód végigjárja az élek tömbjét. Veszi a két számot, ami az éleket definiálja, és fogja az ezekhez tartozó csúcsokat a csúcsok tömbjéből. Ezután kirajzolja az első csúcs (x,y) koordinátájából induló szakaszt a második csúcs (x,y) koordinátájáig.
Ennyi az egész?
Elmondtuk, hogyan lehet egy kockát megrajzolni, de amit eddig megrajzoltunk, az csak egy négyzet és négy kör:
Ezt sokkal kisebb erőfeszítéssel is elkészíthettük volna. Azonban ez tényleg a kockánk – csak épp szemből nézzük. Ha kidolgozzuk a kocka forgatását, már nem pont szemben lesz a képernyőnkkel, és látni fogjuk, hogy ez bizony nem csak egy négyzet és négy kör.
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.