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

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

3D-Formen zeichnen

Jetzt wo wir eine Darstellung unseres Würfels haben, müssen wir einen Weg finden, ihn zu zeichnen.
Um eine 3D-Form auf einer 2D-Oberfläche zu zeichnen, müssen wir sie "projizieren". Stell dir vor, du leuchtest einen Würfel von hinten an und projizierst seinen Schatten auf einen Bildschirm. Die einfachste Form einer Projektion ist eine orthogonale Projektion, welche man erhalten würde, wenn die Lichtstrahlen parallel zueinander wären.
All dieses Gerede von Projektionen mag kompliziert klingen, sie sind aber sehr leicht zu implementieren: wir ignorieren einfach die z-Koordinaten beim Zeichnen.

Alles einrichten

Zu Beginn meiner Programme möchte ich über Variablen festlegen, wie alles dargestellt wird, damit ich diese Werte später leicht ändern kann. Hier sind einige Variablen, die wir sehr bald brauchen werden - ändere gern die Werte, wenn du möchtest.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;
Jetzt fügen wir eine einfache Zeichenfunktion hinzu:
draw = function() { 
    background(backgroundColor);
};
Wir müssen unserem Code auch noch Folgendes hinzufügen:
translate(200, 200);
Dies verschiebt unsere Canvas 200 Pixel nach rechts und 200 Pixel nach unten, so dass sich das Pixel auf Position (0, 0) nun in der Mitte der Canvas befindet. Dies bedeutet, dass unser Würfel in der Mitte des Bildschirms gezeichnet wird. Warum wir das machen, wird deutlich, wenn wir anfangen, unsere Objekte zu drehen.

Knotenpunkte zeichnen

Innerhalb der Zeichenfunktion durchlaufen wir in einer Schleife alle Knoten und zeichnen eine Ellipse bei der (x, y)-Koordinate jedes Knotens:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
   var node = nodes[n];
   ellipse(node[0], node[1], nodeSize, nodeSize);
}

Zeichnen von Kanten

Außerdem fügen wir innerhalb der Zeichenfunktion den Code zum Zeichnen von Kanten hinzu. Ich würde ihn vor den Code zum Zeichnen der Knotenpunkte stellen, damit die Knotenpunkte über den Kanten gezeichnet werden.
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]);
}
Dieser Code durchläuft das Array von Kanten. Er holt die zwei Zahlen, die durch eine Kante definiert sind, und sucht sich daraufhin den entsprechenden Knotenpunkt im Knotenpunkt-Array. Dann zeichnet er eine Linie von der (x, y)-Koordinate des ersten Knotens zur (x, y)-Koordinate des zweiten Knotens.

Ist das alles?

Wir wollten eigentlich einen Würfel zeichnen, und haben bisher nur ein Quadrat mit vier Kreisen bekommen:
Das hätten wir mit viel weniger Aufwand zeichnen können. Allerdings handelt es sich dabei wirklich um unseren Würfel - wir schauen nur direkt von vorne drauf, Wenn wir herausfinden, wie wir unseren Würfel so drehen können, dass er nicht mehr genau Ecke auf Ecke auf dem Bildschirm liegt, werden wir sehen, dass es sich nicht nur um ein Quadrat mit vier Kreisen handelt.

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.