মূল বিষয়বস্তু

কম্পিউটার প্রোগ্রামিং

কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 5

পাঠ 4: ভেক্টর

ভেক্টর গতি

All this vector math stuff sounds like something we should know about, but why? How will it actually help us write code? The truth of the matter is that we need to have some patience. It will take some time before the awesomeness of using the PVector class fully comes to light.

This is actually a common occurrence when first learning a new data structure. For example, when you first learn about an array, it might seem like much more work to use an array than to just have several variables stand for multiple things. But that plan quickly breaks down when you need a hundred, or a thousand, or ten thousand things.

The same can be true for PVector. What might seem like more work now will pay off later, and pay off quite nicely. And you don’t have to wait too long, as your reward will come in the next chapter.

বেগ (Velocity)

For now, however, we want to focus on simplicity. What does it mean to program motion using vectors? We’ve seen the beginning of this in the bouncing ball example. An object on screen has a position (where it is at any given moment) as well as a velocity (instructions for how it should move from one moment to the next). Velocity is added to position:

position.add(velocity);

And then we draw the object at that position:

ellipse(position.x, position.y, 16, 16);

এটি হল গতি (motion) সম্পর্কে প্রাথমিকভাবে জানা:

Add velocity to position
Draw object at position

বল খেলার উদাহরণে, এই সকল কোড ProcessingJS এর ভেতরে থাকা draw ফাংশনের কাজ করে। আমরা এখন একটি object এর ভেতরে গতির জন্য থাকা সবগুলো যুক্তি (লজিক) আবদ্ধ (encapsulate) করতে চাই। এইভাবে আমরা ProcessingJS প্রোগ্রামে একটি গতিশীল অবজেক্ট তৈরি করার ভিত্তি স্থাপন করতে পারি।

এই ক্ষেত্রে, আমরা একটি সাধারণ Mover (মুভার) অবজেক্ট তৈরি করব যা পর্দার চারপাশে ঘুরে বেড়াবে। এজন্য নিচের দুইটি প্রশ্ন বিবেচনায় রাখতে হবে:

একটি Mover এর কাছে কি ডাটা আছে?
একটি Mover কি ধরনের বৈশিষ্ট্য আছে?

Our Motion 101 algorithm tells us the answers to these questions. A Mover object has two pieces of data: position and velocity, which are both PVector objects. We can start by writing the constructor function that initializes those properties to appropriate random values:

var Mover = function() {
  this.position = new PVector(random(width), random(height));
  this.velocity = new PVector(random(-2, 2), random(-2, 2));
};

এটার কার্যকারিতা একদম সহজ। Mover এর স্থানান্তর এবং এটা দেখতে পাওয়া জরুরি। আমরা এই প্রয়োজনগুলো update() এবং display() নামের মেথডে বাস্তবায়ন করতে পারি। আমরা আমাদের সবগুলো গতির লজিক কোডগুলো update() ফাংশনের ভিতরে এবং অবজেক্ট আঁকানোর সবগুলো কোড display() ফাংশনের ভিতরে রাখব।

Mover.prototype.update = function() {
  this.position.add(this.velocity);
};

Mover.prototype.display = function() {
  stroke(0);
  strokeWeight(2);
  fill(127);
  ellipse(this.position.x, this.position.y, 48, 48);
};

If object-oriented programming is at all new to you, one aspect here may seem a bit confusing. After all, we spent the beginning of this chapter discussing PVector. The PVector object is the template for making the position object and the velocity object. So what are they doing inside of yet another object, the Mover object? In fact, this is just about the most normal thing ever. An object is simply something that holds data (and functionality). That data can be numbers, strings, arrays or other objects! We’ll see this over and over again in this course. For example, in the Particles tutorial, we’ll write an object to describe a system of particles. That ParticleSystem object will have as its data an array of Particle objects…and each Particle object will have as its data several PVector objects!

এখন, উইন্ডোর একদম শেষপ্রান্তে অবজেক্ট যাবার পরে কি করবে তা নির্দেশ করার জন্য Mover অবজেক্টের মধ্যে একটি ফাংশনের তৈরি করি। এখনকার খুবই সাধারণ একটি কাজ করা যাক, উইন্ডোর শেষ প্রান্তে গিয়ে এটি আরেদিক থেকে চালু হবে:

Mover.prototype.checkEdges = function() {

  if (this.position.x > width) {
    this.position.x = 0;
  } 
  else if (this.position.x < 0) {
    this.position.x = width;
  }

  if (this.position.y > height) {
    this.position.y = 0;
  } 
  else if (this.position.y < 0) {
    this.position.y = height;
  }
};

Mover অবজেক্টটির কাজ শেষ, এখন আমরা আসল প্রোগ্রাম নিয়ে কি করতে পারি সেটা নিয়ে চিন্তা করবো। আমরা প্রথমে নতুন একটি Mover অস্তিত্ব (instance) সংজ্ঞায়িত করার মাধ্যমে কাজ শুরু করতে পারি:

var mover = new Mover();

তারপরে আমরা draw ফাংশনে যথাযথ একটি ফাংশন কল করব:

draw = function() {
  background(255, 255, 255);

  mover.update();
  mover.checkEdges();
  mover.display(); 
};

এটা হল সম্পূর্ণ উদাহরণ। সংখ্যা এবং কোডগুলো পরিবর্তন করে কি হয় দেখা উচিৎ:

ত্বরণ (Acceleration)

OK. At this point, we should feel comfortable with two things: (1) what a PVector is and (2) how we use PVectors inside of an object to keep track of its position and movement. This is an excellent first step and deserves a mild round of applause. Before standing ovations and screaming fans, however, we need to make one more, somewhat bigger step forward. After all, watching the Motion 101 example is fairly boring—the circle never speeds up, never slows down, and never turns. For more interesting motion, for motion that appears in the real world around us, we need to add one more PVector to our Mover object—acceleration.

The strict definition of acceleration we’re using here is: the rate of change of velocity. Let’s think about that definition for a moment. Is this a new concept? Not really. Velocity is defined as the rate of change of position. In essence, we are developing a “trickle-down” effect. Acceleration affects velocity, which in turn affects position (for some brief foreshadowing, this point will become even more crucial in the next chapter, when we see how forces affect acceleration, which affects velocity, which affects position). In code, this reads:

velocity.add(acceleration);
position.add(velocity);

As an exercise, from this point forward, let’s make a rule for ourselves. Let’s write every example in the rest of these tutorials without ever touching the value of velocity and position (except to initialize them). In other words, our goal now for programming motion is: Come up with an algorithm for how we calculate acceleration and let the trickle-down effect work its magic. (In truth, you’ll find reasons to break this rule, but it’s important to illustrate the principles behind our motion algorithm.) And so we need to come up with some ways to calculate acceleration:

একটি ধ্রুবক ত্বরণ
সম্পূর্ণ দৈব একটি ত্বরণ
মাউসের দিকে গতিশীল ত্বরণ

অ্যালগোরিদম #1, একটি ধ্রুবক ত্বরণ, এটা কিন্তু বিশেষভাবে আকর্ষণীয় নয়, কিন্তু এটি সবচেয়ে সরল এবং এটি আমাদের কোডে ত্বরণ সংযুক্ত করা শুরু করতে সাহায্য করবে।

আমাদের প্রথম কাজটি হল Mover এর কন্সট্রাক্টরে আরেকটি PVector বৈশিষ্ট্য (property) যোগ করা যা ত্বরণকে প্রকাশ করবে। আমরা এটা

(- 0.001, 0.01)

এ সংজ্ঞায়িত করব এবং এর মানটি যেরকম আছে সেরকমই রাখবো, যেহেতু আমাদের অ্যালগোরিদমটি constant (ধ্রুবক) ত্বরণের। মনে হতে পারে যে, “এই মানগুলো এতো ছোট!” সত্যিই মানগুলো বেশ ছোট। এটা বুঝতে পারা খুবই গুরুত্বপূর্ণ যে আমাদের ত্বরণের মানগুলো (পিক্সেলে হিসাব করা) বেগের মানের সাথে সাথে ধীরে ধীরে বাড়তে থাকবে, ফ্রেমরেটের উপরে নির্ভর করে এটি প্রতি সেকেন্ডে ত্রিশ বার হতে পারে। তাই বেগের ভেক্টরের মান সীমাবদ্ধ রাখার জন্য, আমাদের ত্বরণের মানটি একদম ছোট থেকে শুরু করার উচিৎ এবং ছোটই রাখা উচিৎ।

var Mover = function() {
  this.position = new PVector(width/2,height/2);
  this.velocity = new PVector(0, 0);
  this.acceleration = new PVector(-0.001, 0.01);
};

উপরে লক্ষ্য করলে দেখবে যে, আমরা বেগ (velocity) 0 থেকে শুরু করেছিলাম - কারণ আমরা জানি যে প্রোগ্রাম চালু করলে এটির বেগও বৃদ্ধি পাবে, এজন্য ত্বরণকে ধন্যবাদ। আমরা এই কাজটি update() মেথডে করবো:

Mover.prototype.update = function() {
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);  
};

যেহেতু আমরা অব্যহতভাবে বেগ বাড়িয়ে চলেছি, এখন প্রোগ্রামটি অনেক সময় ধরে চালালে বেগের মান অনেক বড় হয়ে যাবার ঝুঁকি থাকে। আমরা বেগের মানটি সীমাবদ্ধ রাখতে চাই। আমরা এটা করতে পারি PVector এর limit মেথড ব্যবহার করার মাধ্যমে, যেটা একটি ভেক্টরকে নির্দিষ্ট সীমার মধ্যে আবদ্ধ করে রাখে।

Mover.prototype.update = function() {
  this.velocity.add(this.acceleration);
  this.velocity.limit(10);
  this.position.add(this.velocity);  
};

এর অনুবাদটি এরকম হবে:
বেগের মান কত হবে? এটা যদি 10 এর কম হয়, উদ্বেগের কোন কারণ নেই; যেরকম আছে সেরকমই রেখে দাও। যদি এর মান 10 থেকে বেশি হয়, তাহলে এটিকে 10 এ কমিয়ে নিয়ে এসো!

এখন acceleration এবং limit() দিয়ে সম্পূর্ণ তৈরি করা Mover অবজেক্টের দিকে লক্ষ্য করি:

এখন অ্যালগোরিদম #2 দেখা যাক, সম্পূর্ণ দৈব একটি ত্বরণ। এক্ষেত্রে, অবজেক্টের কন্সট্রাক্টরে ত্বরণ যোগ করার পরিবর্তে, আমরা প্রতিটি চক্রের যেমন প্রতিবার update() কল করার সময় একটি করে নতুন ত্বরণ নিতে চাই।

Mover.prototype.update = function() {
  this.acceleration = PVector.random2D();
  this.velocity.add(this.acceleration);
  this.velocity.limit(10);
  this.position.add(this.velocity);  
};

দৈব ভেক্টর নরমালাইজড হবার কারণে, আমরা দুইটি ভিন্ন কৌশল অবলম্বন করে এটি পরিমাপ তথা স্কেল (scaling) করতে পারি:

ত্বরণকে একটি ধ্রুবক মান দিয়ে পরিমাপ করা:

    acceleration = PVector.random2D();
    acceleration.mult(0.5);

ত্বরণকে একটি দৈব মান দিয়ে পরিমাপ করা:

    acceleration = PVector.random2D();
    acceleration.mult(random(2));

এখন এটা দেখে অবশ্যই বোঝা কঠিন যে ত্বরণ দিয়ে শুধুমাত্র একটি গতিশীল অবজেক্টের গতি বৃদ্ধি বা গতি কমানোকে বোঝানো হয় না, কিন্তু যে কোন ধরনের বেগ, মান বা দিকের পরিবর্তনকে নির্দেশ করা হয়। ত্বরণ দিয়ে সাধারণত একটি অবজেক্টের দিক নির্দেশ করা হয় এবং আমরা এটাকে সামনে আরও অনুশীলনীতে পুনরায় দেখতে পারবো কারণ আমরা তখন এমন কিছু অবজেক্ট প্রোগ্রামিং করব যা নিজে সিদ্ধান্ত নিয়ে পর্দায় ঘুরতে পারবে।

এই "প্রাকৃতিক সিমুলেশন" কোর্সটি নেওয়া হয়েছে Daniel Shiffman (ড্যানিয়েল শিফম্যান) এর লেখা "The Nature of Code" (কোডের প্রকৃতি) থেকে এবং এটি ক্রিয়েটিভ কমন্সের এট্রিবিউশন-নন কমার্শিয়াল 3.0 আনপোরটেড লাইসেন্সের অধিনস্ত।

আলোচনায় অংশ নিতে চাও?

প্রবেশ কর

সাজানো আছেঃ

কোন আলাপচারিতা নেই।

ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।