Ana içerik
3 boyutlu şekiller çizme
Artık küpümüzün bir gösterimi olduğuna göre, bunu çizmenin bir yolunu bulmamız gerekir.
3 boyutlu bir şekli, 2 boyutlu bir yüzeye çizmek için, "izdüşümünü" almalıyız. Küpün arkasından bir ışık açtığınızı ve bunun gölgesini bir ekrana yansıttığınızı varsayın. En basit izdüşüm şekli, dik izdüşümdür, ışık huzmeleri birbirine paralel olduğunda bu oluşur.
Bütün bu izdüşümlerle ilgili söylediklerimiz, kulağa karmaşık gelebilir, ama gerçekleştirmesi çok kolaydır: çizerken z-koordinatlarını görmezden geliyoruz.
Olayı kurma
Programlarımın başında değişkenleri oluşturmayı seviyorum, böylece her şeyin nasıl gösterildiğini kontrol ediyorum, sonra da onları kolaylıkla değiştirebiliyorum. Kısa süre sonra isteyeceğimiz bazı değişkenler: değerleri değiştirmekten çekinmeyin.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Şimdi basit bir çizim fonksiyonu ekliyoruz:
var draw = function() {
background(backgroundColor);
};Ayrıca kodumuza aşağıdakini eklememiz de gerekecek:
translate(200, 200);Bu, tuvalimizi 200 piksel sağa ve 200 piksel aşağı taşır, yani (0, 0) konumundaki piksel, artık tuvalimizin ortasında olur. Bunun anlamı, küpümüzün ekranın ortasına çizileceğidir. Bunu bu şekilde yapmamızın nedeni, nesnelerimizi döndürmeye başladığımızda, ortaya çıkacak.
Nod çizimi
Draw fonksiyonunda, tüm düğümlerden geçeriz ve o düğümün (x, y) koordinatında bir elips çizeriz:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Ayrıtları çizme
Ayrıca draw fonksiyonunun içinde, ayrıt çizmek için olan kodu ekleriz. Ben olsam, düğüm oluşturmak için olan kodun öncesine eklerim ki, düğümler ayrıtların üstünde çizilsin.
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]);
}Bu kod, ayrıtların dizisinden geçer. Bir ayrıtın tanımladığı iki sayıyı alır ve düğüm dizisinde buna karşılık gelen düğümü arar. Sonra, birinci nodun (x, y) koordinatından ikinci nodun (x, y) koordinatına bir çizgi çizer.
Hepsi bu kadar mı?
Küp çizmek istiyorduk, ancak tek yaptığımız, bir kare ve dört çember çizmek oldu:
Bunu çizmek için çok daha az çaba harcayabilirdik. Ancak, bu gerçekten de bizim küpümüz - sadece tam önden görüyoruz. Küpümüzü ekranın önünde olmayacak şekilde döndürmeyi becerebilirsek, sadece bir kare ve dört çemberden ibaret olmadığını göreceğiz.
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.