If you're seeing this message, it means we're having trouble loading external resources on our website.

Ha webszűrőt használsz, győződj meg róla, hogy a *.kastatic.org és a *.kasandbox.org nincsenek blokkolva.

Fő tartalom

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.
Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.