ძირითადი მასალა
კომპიუტერული პროგრამირება
კურსი: კომპიუტერული პროგრამირება > თემა 4
გაკვეთილი 7: სამგანზომილებიანი ფიგურებისამგანზომილებიანი ფიგურის დატრიალება
საგნების 3 განზომილებაში ბრუნვა რთული ჩანს, მაგრამ არსებობს მარტივი ბრუნვებიც. მაგალითად, თუ წარმოვიდგენთ ჩვენი კუბის z ღერძის ირგვლივ ბრუნვას (z ღერძი ეკრანისკენაა მიმართული), სინამდვილეში მხოლოდ კვადრატს ვატრიალებთ ორ განზომილებაში:
ტრიგონომეტრიის შესწავლის მიზეზი
შეგვიძლია, კიდევ უფრო გავამარტივოთ მხოლოდ ერთ წვეროზე შეხედვით (x, 0) პოზიციაზე. მარტივი ტრიგონომეტრიის გამოყენებით შეგვიძლია, გავიგოთ, რომ ათვლის სათავის ირგვლივ θ-თი მობრუნების შემდეგ წერტილის ადგილმდებაროება არის:
თუ არ იცით, საიდან მოვიდა ეს განტოლებები, ეს ვიდეო შეიძლება, გამოგადგეთ.
წერტილის სათავის მიმართ ბრუნვა
r-ს და (x, y)-მდე გავლებულ ხაზსა და x ღერძს შორის კუთხეს დავარქმევთ α-ს, მაშინ:
ზემოთ მოცემული მაგალითი საშუალებას გვაძლევს, სათავის მიმართ მოვაბრუნოთ წერტილი, რომელიც იწყება x ღერძზე, მაგრამ რა ხდება მაშინ, როცა ის x ღერძზე არ მდებარეობს? ეს საჭიროებს ოდნავ უფრო რთულ ტრიგონომეტრიას. თუ სათავესა და (x, y) წერტილს შორის მანძილს დავარქმევთ თუ β კუთხით მოვაბრუნებთ (x', y') წერტილში, მაშინ:
ტრიგონომეტრიული იგივეობების გამოყენებით მივიღებთ:
x-ისა და y-ის მნიშვნელობების ჩასმის შემდეგ ახალი კოორდინატებისთვის ვიღებთ განტოლებას ძველი კოორდინატებისა და მობრუნების კუთხის ფუნქციად:
ბრუნვის ფუნქციის დაწერა
ახლა ვიცით მათემატიკური ნაწილი და შეგვიძლია, დავწეროთ ფუნქცია წვეროს მოსაბრუნებლად ან, კიდევ უკეთესი, ჩვენი წვეროების მასივის z-ღერძის გარშემო მოსაბრუნებლად. ეს ფუნქცია გადაუყვება წვეროების მასივში ყველა წვეროს, იპოვის მათ მიმდინარე x და y კოორდინატებს და შემდეგ განაახლებს მათ.
sin(theta)
-სა და cos(theta)
-ს ვინახავთ ციკლის გარეთ, ასე რომ, მათი გამოთვლა მხოლოდ ერთხელ გვიწევს:var rotateZ3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var x = node[0];
var y = node[1];
node[0] = x * cosTheta - y * sinTheta;
node[1] = y * cosTheta + x * sinTheta;
}
};
კუბის 30 გრადუსით დასატრიალებლად ფუნქციას შემდეგნაირად ვიძახებთ:
rotateZ3D(30);
დატრიალებული კუბი შეგიძლიათ, იხილოთ ქვემოთ – ის ოდნავ უფრო საინტერესოა, ვიდრე ადრე:
მობრუნება სამ განზომილებაში
ახლა უკვე შეგვიძლია ჩვენი კუბის მობრუნება ორ განზომილებაში, მაგრამ ის ჰგავს კვადრატს. რა ხდება იმ შემთხვევაში, თუ ჩვენი კუბის მობრუნება გვინდა y (ვერტიკალური) ღერძის გარშემო? თუ წარმოვიდგენთ, რომ კუბს ზემოდან ვუყურებთ მისი y ღერძის გარშემო მობრუნებისას, დავინახავთ მბრუნავ კვადრატს, ზუსტად ისე, როგორც z ღერძის გარშემო მობრუნების შემთხვევაში ვხედავდით.
შეგვიძლია, ჩვენი ძველი ტრიგონომეტრია და ფუნქცია ავიღოთ და ხელახლა მივუთითოთ ღერძი, რათა z ღერძი გახდეს y ღერძი. ამ შემთხვევაში, წვეროს y კოორდინატები არ იცვლება, იცვლება მხოლოდ x და z:
var rotateY3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var x = node[0];
var z = node[2];
node[0] = x * cosTheta - z * sinTheta;
node[2] = z * cosTheta + x * sinTheta;
}
};
და შეგვიძლია, გამოვიყენოთ იგივე არგუმენტი ფუნქციის შესაქმნელად, რომელიც ჩვენს კუბს მოაბრუნებს x ღერძის ირგვლივ.
var rotateX3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var y = node[1];
var z = node[2];
node[1] = y * cosTheta - z * sinTheta;
node[2] = z * cosTheta + y * sinTheta;
}
};
ახლა ვინაიდან ეს ფუნქციები განსაზღვრული გვაქვს, შეგვიძლია, დავატრიალოთ 30 გრადუსით დანარჩენი 2 ღერძი:
rotateX3D(30);
rotateY3D(30);
სრული კოდის ნახვა შეგიძლიათ ქვემოთ. სცადეთ რიცხვების შემცვლელის გამოყენება ფუნქციის გამოძახებაში მნიშვნელობების შესაცვლელად.
მომხმარებელთან ინტერაქცია
კუბის მობრუნება შეგვიძლია ფუნქციის გამოძახებების დამატებით, მაგრამ გაცილებით უფრო გამოყენებადია (და სასიამოვნო), თუ მომხმარებელს შეეძლება კუბის მობრუნება მაუსის გამოყენებით. ამისათვის უნდა შევქმნათ
mouseDragged()
ფუნქცია. ეს ფუნქცია ავტომატურად გამოიძახება მაუსით ყოველი გადატანისას.mouseDragged = function() {
rotateY3D(mouseX - pmouseX);
rotateX3D(mouseY - pmouseY);
};
mouseX
და mouseY
ჩაშენებული ცვლადებია, რომლებიც შეიცავს მაუსის მიმდინარე მდებარეობას. pmouseX
და pmouseY
არის ჩაშენებული ცვლადები, რომლებიც შეიცავს მაუსის მდებარეობას წინა კადრში. ასე რომ, თუ x კოორდინატი გაიზარდა (მაუსს ვამოძრავებთ მარჯვნივ), ვუგზავნით დადებით მნიშვნელობას rotateY3D()
-ს და ვაბრუნებთ კუბს საათის ისრის საწინააღმდეგო მიმართულებით y ღერძის გარშემო.შეგიძლიათ, თქვენით ნახოთ ქვემოთ.
გსურთ, შეუერთდეთ დისკუსიას?
პოსტები ჯერ არ არის.