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

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

სამგანზომილებიანი ფიგურის ხატვა

ახლა, როცა ჩვენი კუბის წარმოდგენის შესაძლებლობა გვაქვს, მისი დახატვის გზა უნდა ვიპოვოთ.
3-განზომილებიანი ფიგურის 2-განზომილებიან ზედაპირზე დასახატად გვჭირდება მისი „პროექცია". წარმოიდგინეთ კუბზე უკნიდან შუქის მინათება და მისი ჩრდილის ეკრანზე გამოსახვა. პროექციის უმარტივესი ფორმაა ორთოგონალური პროექცია, რომელსაც იმ შემთხვევაში მიიღებდით, თუ სინათლის სხივები ერთმანეთის პარალელური იქნებოდა.
შესაძლოა, პროექციის შესახებ მთელი ეს საუბარი რთულად გეჩვენებათ, მაგრამ მისი იმპლემენტაცია ძალიან იოლია: უბრალოდ, დახატვისას უგულებელვყოფთ z კოორდინატებს.

წინაპირობების შექმნა

მიყვარს პროგრამის ზედა ნაწილში ცვლადების შექმნა ეკრანზე გამოსაჩენი საგნების სამართავად, რათა შემდეგ მათი შეცვლა მარტივად შევძლო. აი, რამდენიმე ცვლადი, რომლებიც მალე დაგვჭირდება; შეგიძლიათ, მნიშვნელობები შეცვალოთ.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;
ახლა ვამატებთ მარტივ დახატვის ფუნქციას:
var draw = function() { 
    background(backgroundColor);
};
ჩვენი კოდისათვის შემდეგი რამის დამატებაც დაგვჭირდება:
translate(200, 200);
ეს გადაწევს ჩვენს სამუშაო სივრცეს 200 პიქსელით მარჯვნივ და 200 პიქსელით ქვემოთ, ანუ, (0, 0) ადგილმდებარეობაზე მყოფი პიქსელი ახლა არის ჩვენი სამუშაო სივრცის ცენტრში. ეს ნიშნავს, რომ ჩვენი კუბი დაიხატება ეკრანის ცენტრში. ამ გზით მუშაობის მიზეზი ნათელი გახდება მაშინ, როცა ჩვენი ობიექტების მობრუნებას დავიწყებთ.

წვეროების დახატვა

დახატვის ფუნქციაში გადავუყვებით ყველა წვეროს და ვხატავთ ელიფსს ამ წიბოს (x, y) კოორდინატებზე:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
   var node = nodes[n];
   ellipse(node[0], node[1], nodeSize, nodeSize);
}

წიბოების დახატვა

დახატვის ფუქციის შიგნით წიბოების დახატვის კოდსაც ვამატებთ. მე მას დავამატებდი წვეროების დახატვის კოდამდე, რათა წიბოები დაიხატოს წვეროებზე ზემოდან.
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]);
}
ეს კოდი გადაუყვება წიბოების მასივს. ის იღებს წიბოს მიერ განსაზღვრულ ორ რიცხვს და ეძებს შესაბამის წვეროს წვეროების მასივში. შემდეგ ავლებს ხაზს პირველი წვეროს (x, y) კოორდინატიდან მეორე წვეროს (x, y) კოორდინატამდე.

მოვრჩით?

ჩვენ გვინდოდა კუბის დახატვა, თუმცა დავხატეთ კვადრატი და 4 წრე:
ამის გაკეთება გაცილებით ნაკლები ძალისხმევით შეგვეძლო. მიუხედავად ამისა, ეს ნამდვილად თქვენი კუბია — უბრალოდ, მას პირდაპირ ვუყურებთ. თუ გავარკვევთ, როგორ მოვაბრუნოთ ჩვენი კუბი, ის პირდაპირი ხედით აღარ გამოჩნდება ეკრანზე, ვნახავთ, რომ ის არ არის მხოლოდ კვადრატი და 4 წრე.

გსურთ, შეუერთდეთ დისკუსიას?

პოსტები ჯერ არ არის.
გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.