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

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

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

სამგანზომილებიანი ფიგურების შექმნა

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

მართკუთხა პარალელეპიპედის განსაზღვრება

მართკუთხა პარალელეპიპედს გააჩნია სამი განზომილება: სიგანე, სიმაღლე და სიღრმე:
გარდა ამისა, მას გააჩნია ადგილმდებარეობა 3D სივრცეში, რაც 6 პარამეტრს გვაძლევს. არსებობს კუბის ადგილმდებარეობის განსაზღვრების რამდენიმე გზა: შეგვიძლია, განვსაზღვროთ მისი ცენტრი ან მისი ერთი კუთხე. ცენტრის განსაზღვრა უფრო ხშირია, მაგრამ ვფიქრობ, რომ კუთხის განსაზღვრა უფრო ადვილი გამოსაყენებელია.
ჩვენმა ფუნქციამ უნდა დააბრუნოს როგორც წვეროების, ისე წიბოების მასივი. ორი ცვლადის დაბრუნების ერთ-ერთი გზაა ცვლადების ერთ ობიექტში მოთავსება, გასაღებით წვეროებისთვის და გასაღებით წიბოებისთვის. დააკვირდით, რომ ცვლადზე მისამართად შეგიძლიათ, ნებისმიერი სტრინგი გამოიყენოთ, ჩემთვის, უბრალოდ, ადვილია ერთისა და იმავე სიტყვის გამოყენება.
// შექმენით მართკუთხა პარალელეპიპედი, რომელსაც აქვს წვერო (x, y, z)-ზე
// w სიგანით, h სიმაღლით და d სიღრმით.
var createCuboid = function(x, y, z, w, h, d) {
   var nodes = [];
   var edges = [];
   var shape = { 'nodes': nodes, 'edges': edges };
   return shape;
};
თუ ამ ფუნქციას გამოვიყენებდით მართკუთხა პარალელეპიპედის შესაქმნელად, მაშინ პირველ წვეროზე წვდომას შემდეგნაირად შევძლებდით:
var object = createCuboid(0, 0, 0, 100, 160, 50);
var node0 = shape.nodes[0];
ეს node0-ს მიანიჭებს nodes მასივის პირველი ელემენტის მნიშვნელობას. თუმცა, ახლა არც nodes (წვეროების) მასივში და არც edges (წიბოების) მასივში არ არის არცერთი მნიშვნელობა.
განვსაზღვროთ წვეროები შემდეგნაირად: წვეროები არის ადგილმდებარეობის ყველა კომბინაცია შესაბამისი განზომილებით ან მის გარეშე. წიბოები ისევეა განსაზღვრული, როგორც ადრე (იმ განსხვავებით, რომ ახლა თითოეული წვეროს ცალკე განსაზღვრის ნაცვლად ყველას ერთად განვსაზღვრავ). აღვნიშნოთ, რომ ეს ფუნქცია საშუალებას გაძლევთ, მართკუთხა პარალელეპიპედისთვის მიუთითოთ უარყოფითი განზომილებები.
var createCuboid = function(x, y, z, w, h, d) {
   var nodes = [[x, y, z ], [x, y, z+d], [x, y+h, z ], [x, y+h, z+d], [x+w, y, z ], [x+w, y, z+d], [x+w, y+h, z ], [x+w, y+h, z+d]];

   var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6], [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];

   return { 'nodes': nodes, 'edges': edges};
};
შემდეგ შეგვიძლია, შევქმნათ მართკუთხა პარალელეპიპედი სიგანით 100, სიმაღლით 160, სიღრმით 50 და ერთი წვერო სათავეზე შემდეგნაირად:
var shape = createCuboid(0, 0, 0, 100, 160, 50);
ვინაიდან ჩვენი წინა კოდი მიუთითებს გლობალური წვეროებისა და წიბოების ცვლადებზე, ამ გლობალურ ცვლადებში უნდა შევინახოთ ჩვენი ობიექტის თვისებები:
var nodes = shape.nodes; var edges = shape.edges;
სრული კოდის ნახვა შეგიძლიათ ქვემოთ

რამდენიმე ფიგურასთან მუშაობა

შეგვიძლია, შევქმნათ ფიგურები სხვადასხვა განზომილებებით, მაგრამ რა ხდება მაშინ, როცა ერთზე მეტი გვინდა? როდესაც წინასწარ განუსაზღვრელი რაოდენობის რაიმე გვსურს, გამოგვადგება მასივი, ამიტომ შევქმნათ ფიგურების მასივი.
var shape1 = createCuboid(-120, -20, -20, 240, 40, 40);
var shape2 = createCuboid(-120, -50, -30, -20, 100, 60);
var shape3 = createCuboid( 120, -50, -30, 20, 100, 60);
var shapes = [shape1, shape2, shape3];
ახლა უნდა შევცვალოთ ეკრანზე ჩვენებისა და მობრუნების ფუნქციები ისე, რომ იმუშაონ ობიექტების მასივებთან. დავიწყოთ წვეროების ჩვენების კოდის იმ for ციკლში გადატანით, რომელიც ყველა ფიგურას გადაუყვება:
//წვეროების ხატვა
stroke(edgeColor);
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
   var nodes = shapes[shapeNum].nodes;
   var edges = shapes[shapeNum].edges;
   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]);
   }
}
და ანალოგიური for ციკლი წვეროების საჩვენებლად:
// დახატე წვეროები
fill(nodeColor);
noStroke();
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
   var nodes = shapes[shapeNum].nodes;
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n]; ellipse(node[0], node[1], nodeSize, nodeSize);
   }
}
შეგვიძლია, მობრუნების თითოეულ ფუნქციას დავამატოთ ანალოგიური for ციკლი, მაგრამ, ვფიქრობ, უფრო მოსახერხებელია წვეროების მასივის გადაცემა თითოეული ფუნქციისთვის - ამ გზით შეგვიძლია, მოვაბრუნოთ ფიგურები ერთმანეთისგან დამოუკიდებლად. მაგალითად, rotateZ3D() ფუნქცია შემდეგნაირი იქნებოდა:
var rotateZ3D = function(theta, nodes) { ... };
ახლა, როდესაც მაუსს მოსაბრუნებლად გამოვიყენებთ, ციკლით უნდა გადავუყვეთ ფიგურებს და თითოეული მათგანისთვის გამოვიძახოთ ფუნქცია:
mouseDragged = function() {
   var dx = mouseX - pmouseX;
   var dy = mouseY - pmouseY;
   for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
      var nodes = shapes[shapeNum].nodes;
      rotateY3D(dx, nodes);
      rotateX3D(dy, nodes);
   }
};
წაშალეთ მობრუნების ფუნქციების ყველა სხვა გამოძახება, რომელიც წვეროს არ გადასცემს. სრული კოდის ნახვა შეგიძლიათ ქვემოთ.

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

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