মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
ত্রিমাত্রিক (3D) আকৃতিকে ঘোরানো
ত্রিমাত্রিক জগতে কোন বস্তুকে ঘোরানো (rotate) জটিল একটি বিষয়, কিন্তু সহজে ঘোরানোরও উপায় আছে। উদাহরণস্বরূপ, ঘনকটিকে z-অক্ষ সাপেক্ষে ঘোরালে (যা পর্দার বাহিরের দিক নির্দেশ করে), মূলত দ্বিমাত্রিকভাবে একটি চতুর্ভুজকে ঘোরানো হয়ঃ
ত্রিকোণমিতি শেখার কারণ
শুধু একটি নোডের অবস্থান (x, 0) এর দিকে খেয়াল করলেই ব্যাপারটিকে অনেক সহজে বোঝা যায়। আমরা বিন্দুটিকে θ কোণে ঘোরানোর পর সাধারণ ত্রিকোণমিতি ব্যবহার করে কেন্দ্র সাপেক্ষে এটার অবস্থান বের করতে পারিঃ
এই সমীকরণগুলো বুঝতে না পারলে, এই ভিডিওটি দেখা উচিত।
একটি বিন্দুকে কেন্দ্র সাপেক্ষে ঘোরানো
r ও (x, y) রেখার এবং x-অক্ষের কোণ α হলে, আমরা পাইঃ
উপরের উদাহরণটিতে x-অক্ষের উপর অবস্থিত কোন বিন্দুকে কেন্দ্র সাপেক্ষে ঘোরানো যায়, কিন্তু বিন্দুটি x-অক্ষে না থাকলে কি হবে? এটার জন্য উচ্চতর ত্রিকোণমিতি জানা দরকার। দুইটি বিন্দু (x, y) এর মধ্যকার দূরত্ব এবং কেন্দ্রবিন্দু (x', y') বিন্দুকে β কোণে ঘুরালে, আমরা পাইঃ
ত্রিকোণমিতিক পরিচয় অনুযায়ী, আমরা পাইঃ
উপরের মানগুলোর পরিবর্তে x এবং y বসালে, আমরা আগের স্থানাঙ্ক এবং ঘূর্ণন কোণের ফাংশনরূপে নতুন স্থানাঙ্কের সমীকরণ পাইঃ
ঘোরানোর ফাংশন কোড করা
এটার গাণিতিক সূত্র আমরা জেনে গেছি, এখন আমরা একটি নোডকে (node) ঘোরানোর কোড করতে পারবো অথবা 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 ডিগ্রী কোণে অপর দুইটি অক্ষকে ঘোরাতে পারিঃ
rotateX3D(30);
rotateY3D(30);
সম্পূর্ণ কোডটি নিচে দেওয়া হল। ফাংশন কলের মানগুলো বদলানো যাবে।
ব্যবহারকারীর প্রতিক্রিয়া
আমরা ফাংশন কল করে ঘনকটিকে ঘোরাতে পারি, কিন্ত বিষয়টা অনেক উপকারী (এবং মজাদার) হবে যদি ঘনকটিকে মাউস ব্যবহার করে ঘোরানো যায়। এজন্য
mouseDragged()
ফাংশন তৈরি করা হয়েছিল। এই ফাংশন মাউস নড়ালে স্বয়ংক্রিয়ভাবে কল হয়।mouseDragged = function() {
rotateY3D(mouseX - pmouseX);
rotateX3D(mouseY - pmouseY);
};
বর্তমান মাউসের অবস্থানের মান
mouseX
এবং mouseY
চলকের মধ্যে থাকে। আরও দুইটি চলক pmouseX
এবং pmouseY
এ আগের ফ্রেমে মাউসের অবস্থানের মান থাকে। যদি x-স্থানাঙ্ক বৃদ্ধি পায় (আমরা মাউস ডানে সরাই), একটি ধনাত্মক মান rotateY3D()
এ পাঠাই এবং ঘনকটিকে y-অক্ষ সাপেক্ষে ঘড়ির কাটার বিপরীত দিকে ঘোরাই।প্রোগ্রামটি নিচে দেখা যাচ্ছে।
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।