মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
Course: কম্পিউটার প্রোগ্রামিং > Unit 5
Lesson 6: কৌণিক গতিমাউসের দিকে অবজেক্টকে গতিশীল করা
প্রথম উদাহরণে আমরা দেখেছিলাম, একটি
Mover অবজেক্ট মাউসের দিকে ত্বরান্বিত হয়।খেয়াল করলে বোঝা যায় এখন পর্যন্ত সকল ক্ষেত্রেই আমরা বৃত্ত এঁকেছি। এটা করার বেশ কিছু উপযুক্ত কারণ রয়েছে, তার মধ্যে অন্যতম কারণ হল বৃত্তের ক্ষেত্রে ঘূর্ণনের জন্য আমাদের কিছু করতে হয় না। কারণ একটি বৃত্তকে ঘুরালেও, এটা দেখতে একই রকম থাকে। কিন্তু, সকল প্রোগ্রামাররাই এমন সময়ের সম্মুখীন হন যখন তারা পর্দায় একটি অবজেক্ট আঁকতে চান যা তার গতির দিক নির্দেশ করে। হতে পারে তারা একটি পিঁপড়া, গাড়ি বা উড়োজাহাজ আঁকতে চান। যখন "গতির দিক নির্দেশ করে" বলা হয়, এটার অর্থ হল “বেগের ভেক্টরের উপর ভিত্তি করে ঘুরানো।” বেগ হল একটি ভেক্টর, যার x এবং y আছে, কিন্তু ProcessingJS এ ঘুরানোর জন্য কোণ প্রয়োজন। আমরা আরেকবার একটি অবজেক্টের বেগের ভেক্টরের ত্রিকোণমিতিক চিত্রটি আঁকি:
ঠিক আছে। আমরা ট্যানজেন্টের (tangent) সংজ্ঞা জানি:
উপরের সূত্র থেকে আমরা বেগ (velocity) পাই, কিন্তু কোণ (angle) পাই না। এখন আমাদের কোণের জন্য সমাধান করতে হবে। এখানে একটি বিশেষ ফাংশন, বিপরীত ট্যানজেন্ট ব্যবহার করা হয়, যাকে অনেক সময় arctangent (আর্কট্যানজেন্ট) বা tan-1 বলা হয়। (বিপরীত সাইন এবং কোসাইনও রয়েছে।)
যদি কোন ট্যানজেন্টের a এর মান b এর সমান হয়, তাহলে বিপরীত ট্যানজেন্টে b সমান a হবে। উদাহরণস্বরূপ:
| if | t, a, n, g, e, n, t, left parenthesis, a, right parenthesis, equals, b |
| then | a, equals, a, r, c, t, a, n, g, e, n, t, left parenthesis, b, right parenthesis |
বিপরীত ক্রমটি বোঝা যাচ্ছে কি? উপরের সূত্র থেকেই কোণ বের করা যাবে:
| if | t, a, n, g, e, n, t, left parenthesis, a, n, g, l, e, right parenthesis, equals, v, e, l, o, c, i, t, y, start subscript, y, end subscript, slash, v, e, l, o, c, i, t, y, start subscript, x, end subscript |
| then | a, n, g, l, e, equals, a, r, c, t, a, n, g, e, n, t, left parenthesis, v, e, l, o, c, i, t, y, start subscript, y, end subscript, slash, v, e, l, o, c, i, t, y, start subscript, x, end subscript) |
আমরা সূত্র পেয়ে গেছি, এখন এটা mover এর display() ফাংশনে বসাই। লক্ষ্য করি ProcessingJS এ, আর্কট্যানজেন্টকে
atan() বলা হয়। জাভাস্ক্রিপ্টেও Math.atan() আছে (মৌলিক ত্রিকোণমিতিক ফাংশনগুলোও আছে), কিন্তু আমরা ProcessingJS এর ফাংশনগুলোই ব্যবহার করবো।Mover.prototype.display = function () {
var angle = atan(this.velocity.y / this.velocity.x);
stroke(0, 0, 0);
fill(127, 127, 127);
pushMatrix();
rectMode(CENTER);
translate(this.position.x, this.position.y);
rotate(angle);
rect(0, 0, 30, 10);
popMatrix();
};উপরের কোডটি প্রায় সম্পূর্ণ হয়ে গেছে এবং কিছুটা কাজও করে। কিন্তু এখানে, অনেক বড় একটি সমস্যা আছে। নিচে দুইটি বেগের ভেক্টরের চিত্র দেখি।
যদিও একই রকম, কিন্তু দুইটি ভেক্টর ভিন্ন দিক নির্দেশ করে—বিপরীত দিক! যদি আমরা সূত্র দিয়ে কোণ বের করার সমাধান করি…
V1 ⇒ angle = atan(3/-4) = atan(-0.75) = -0.644 radians = -57 degrees
V2 ⇒ angle = atan(-3/4) = atan(-0.75) = -0.644 radians = -57 degrees
V2 ⇒ angle = atan(-3/4) = atan(-0.75) = -0.644 radians = -57 degrees
…প্রতিটি ভেক্টরের জন্য একই কোণ পাবো। কিন্তু উভয়ের জন্য এটা সঠিক নয়; ভেক্টরদ্বয় পরস্পর বিপরীতমুখী! আসলে, কম্পিউটার গ্রাফিক্সে এটা খুবই সাধারণ একটি সমস্যা। কোডে
atan() কন্ডিশনাল স্টেটমেন্টের সাথে ব্যবহার করে ধনাত্মক/ঋণাত্মক অবস্থা বের করা বেশ কঠিন, ProcessingJS এ (সাথে JavaScript এবং সকল প্রোগ্রামিং ভাষায়) একটি উপকারী atan2() ফাংশন আছে যা এই কাজটি স্বয়ংক্রিয়ভাবে করে।Mover.prototype.display = function () {
var angle = atan2(this.velocity.y, this.velocity.x);
stroke(0, 0, 0);
fill(127, 127, 127);
pushMatrix();
rectMode(CENTER);
translate(this.position.x, this.position.y);
rotate(angle);
rect(0, 0, 30, 10);
popMatrix();
};এটাকে আরও সরল করার জন্য,
PVector অবজেক্টে heading() ফাংশন আছে, যা যে কোন PVector এর জন্য, atan2() কে কল করে রেডিয়ানে 2D (দ্বিমাত্রিক) কৌণিক দিক বের করে।সবকিছু একসাথে করলে, প্রোগ্রামটি দেখতে এমন হয়। মাউস নিয়ে ঘুরিয়ে দেখা যাক!
এই "প্রাকৃতিক সিমুলেশন" কোর্সটি নেওয়া হয়েছে Daniel Shiffman (ড্যানিয়েল শিফম্যান) এর লেখা "The Nature of Code" (কোডের প্রকৃতি) থেকে এবং এটি ক্রিয়েটিভ কমন্সের এট্রিবিউশন-নন কমার্শিয়াল 3.0 আনপোরটেড লাইসেন্সের অধিনস্ত।
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।