সরানো

এখন  ProcessingJS ব্যবহার করে একটি প্রোগ্রাম তৈরি করলে, প্রোগ্রামটির ফলাফল ক্যানভাসে আঁকা হয়, যা একটি ছক কাগজের মত কাজ করে। একটি আকৃতি আঁকার জন্য, ছক কাগজে স্থানাঙ্ক স্থাপন করতে হয়।

As an example, here is a simple rectangle drawn with the code rect(20, 20, 40, 40). The coordinate system (a fancier word to describe that "graph paper") is shown in gray, and to keep our example images smaller, the coordinate system shown is 200 pixels by 200 pixels (instead of the default 400x400 size). Here you can see the rectangle is at x=20, y=20, with a width and height of 40:

আয়তক্ষেত্রকে 60 একক ডানে এবং 80 একক নিচে সরানোর জন্য, শুরুর বিন্দু x এবং y এর সাথে এটা যোগ করে স্থানাঙ্কের পরিবর্তন করি: rect(20 + 60, 20 + 80, 40, 40)। ফলশ্রুতিতে এখন আয়তক্ষেত্রটি অন্য স্থানে থাকবে। (তীর চিহ্ন দিয়ে অবস্থান নির্দেশ করা হয়েছে।)

কিন্তু এটা করার আরেকটি মজার উপায় হল: ছক কাগজটিকেই সরানো। যদি ছক কাগজটিকে 60 একক ডানে এবং 80 একক নিচে সরানো হয়, দৃশ্যত একেবারে একই ফলাফল পাওয়া যায়। স্থানাঙ্ক ব্যবস্থা এভাবে সরানোকে translation তথা স্থানান্তর বলা হয়।

The important thing to notice in the preceding diagram is that, as far as the rectangle is concerned, it hasn’t moved at all. Its upper left corner is still at (20, 20). When you use transformations, the shapes you draw never change position; the coordinate system does.

এখানে একটি প্রোগ্রাম দেওয়া হল যা মূল আয়তক্ষেত্রটি আঁকে, তারপর স্থানাঙ্ক পরিবর্তন করে এটা নতুন অবস্থানে লাল রঙে আঁকা হয়, তারপর ছক সরিয়ে (translate() করে) এটাকে নতুন অবস্থানে নীল রঙে আঁকা হয়। আয়তক্ষেত্রগুলোর রঙ স্বচ্ছ হয়, যেন লাল এবং নীল রঙের আয়তক্ষেত্র একটির উপর আরেকটি থাকায় একসাথে মিলে বেগুনী রঙ তৈরি করে। শুধু তাদেরকে সরানোর মেথড পরিবর্তিত হয়েছে। নিচের সংখ্যাগুলো পরিবর্তন করলে বিভিন্ন ফলাফল দেখা যায়:

স্থানান্তরের কোডটি আরও ভালভাবে জানি। pushMatrix() হল একটি বিল্ট-ইন তথা স্ব-ধারণকৃত ফাংশন যা স্থানাঙ্ক ব্যবস্থার বর্তমান অবস্থান সংরক্ষণ করে। এখন translate(60, 80) স্থানাঙ্ক ব্যবস্থাকে 60 একক ডানে এবং 80 একক নিচে সরায়। এখন rect(20, 20, 40, 40) আগের স্থানেই একটি আয়তক্ষেত্র আঁকে। লক্ষ্য করি, যে বস্তুগুলো আঁকা হয় সেগুলো আসলে নড়ে না—বরং ছকটি নড়ে। অবশেষে, popMatrix() স্থানাঙ্ক ব্যবস্থাকে স্থানান্তরের পূর্ববর্তী অবস্থানে নিয়ে যায়।

কেন pushMatrix() এবং popMatrix() ব্যবহার করা হয়? আমরা একটি translate(-60, -80) করেই তো ছকটিকে পূর্বের স্থানে ফিরিয়ে আনতে পারতাম। কিন্তু, যখন স্থানাঙ্ক ব্যবস্থায় আরও জটিল সকল কার্যক্রম করা হয়, তখন সংরক্ষণ করার এবং পূর্বাবস্থায় ফেরার জন্য pushMatrix() এবং popMatrix() ব্যবহার করা সহজ হয়। পরবর্তীতে এই অংশে, আমরা ফাংশনের এমন উদ্ভট নামগুলোর কারণ সম্পর্কে জানবো।

মনে হতে পারে যে, স্থানাঙ্ক ব্যবস্থায় কোন কিছু যোগ করার চেয়ে স্থানাঙ্ক ব্যবস্থাকে সরানো অনেক বেশি জটিল। একটি সাধারণ আয়তক্ষেত্রের জন্য, কথাটি একদম সঠিক। কিন্তু এখন আমরা এমন একটি উদাহরণ দেখবো যেখানে translate() এর ব্যবহার খুবই উপকারি।

এখানের প্রোগ্রামটি এক সারিতে কয়েকটি বাড়ি আঁকে। এটা একটি লুপ ফাংশন drawHouse() ব্যবহার করে, যা বাড়ির উপরের বাম কোণার x এবং y অবস্থানকে প্যারামিটার হিসেবে নেয়। লক্ষ্য করি যে, দিয়ে দেওয়া স্থানাঙ্কে বাড়ি আঁকতে drawHouse ফাংশনে প্যারামিটার দিয়ে অনেক কোড করতে হয়:

কিন্তু নতুন স্থানাঙ্ক হিসাব করার জন্য translate() ফাংশন ব্যবহার করলে কি হয়? এক্ষেত্রে, কোড করে বাড়িকে একই স্থানে আঁকা হয়, যার বাম কোণার স্থানাঙ্ক (0, 0) হয় এবং স্থানান্তর দিয়েই অন্যান্য কাজ সম্পাদন করে।

কিন্তু তার মানে এই নয় যে, নতুন স্থানাঙ্ক হিসাব না করে সবসময়ই translate() ব্যবহার করতে হবে। আসলে আমাদের অনুশীলনীগুলো এমনভাবে তৈরি যে, এটা নতুন বিষয় সম্পর্কে শিখতে সাহায্য করে। এখন তুমি নিজেস্ব প্রয়োজন অনুযায়ী translate() ব্যবহার করতে পারবে।

এই প্রবন্ধটি জে ডেভিড আইসেনবার্গ লিখিত দ্বিমাত্রিক পরিবর্তন এর আদলে তৈরি করা, যা ক্রিয়েটিভ কমন্সের এট্রিবিউশন-নন কমার্শিয়াল-শেয়ারএলাইক লাইসেন্সের অধিনস্ত।