প্রোগ্রামিং দিয়ে এনিমেশন তৈরি করুন সহজেই - প্রসেসিং টিউটোরিয়াল ৫
প্রোগ্রামিং দিয়ে এনিমেশন তৈরি করুন সহজেই - প্রসেসিং টিউটোরিয়াল ৫

এনিমেশন দারুণ মজার একটি বিষয়। আর তা যদি কোডিং বা প্রোগ্রামিং করে তৈরি করা যায় তাহলে তো কথাই নেই। আজকে আমরা শিখবো এনিমেশন কি এবং কীভাবে প্রসেসিং দিয়ে এনিমেশন তৈরি করতে হয়। যদিও এনিমেশন সফটওয়্যার দিয়ে করা সম্ভব কিন্তু প্রোগ্রামিং এর মাধ্যমে করতে পারার মজাই আলাদা। আর আপনি যদি এনিমেশন ক্যারিয়ার তৈরি করবার চিন্তা করে থাকেন তাহলেও এ লেখার মাধ্যমে বেসিক কিছু ধারনা পাবেন। আর কোডিং এর মাধ্যমে এই এনিমেশন গুলো আয়ত্ব করতে পারলে আপনার তৈরি করা সফটওয়্যারেও আনতে পারেন দারুণ সব চমক!

এনিমেশন কি

আশাকরি এনিমেশন কী তা সবাই জানেন। তারপরও যারা জানেন না তাদের জন্য বলছি – টিভিতে যে বাচ্চাদের কার্টুন দেখানো হয়, সেরকম কম্পিউটারে তৈরি ভিডিওকেই এনিমেশন বলে। তবে প্রাচীনকালে হাতে এঁকেও এনিমেটেড ছবি বানানো হতো।

প্রাচীন কালে হাতে আঁকা এনিমেশন স্ট্রিপ
প্রাচীনকালে হাতে আঁকা এনিমেশন স্ট্রিপ

উপরের ছবিতে একটি হাতে আঁকা মল্লযুদ্ধের এনিমেশন স্ট্রিপ (অনেকগুলো ছবির গুচ্ছ) দেখা যাচ্ছে। প্রত্যেকটা ছবিতে দৃশ্য পরিবর্তন হয়ে যাচ্ছে। আমরা পরপর ছবিগুলো দেখতে থাকলে মনেহবে একটা ভিডিও থেকে এই ছবিগুলো নেয়া হয়েছে। এই এনিমেশন স্ট্রিপ টি প্রাচীন মিশরের দেয়ালে খোদাই করা ছিল।

এনিমেশনে ফ্রেম কি

উপরে আমরা যে মল্লযুদ্ধের এনিমেশন স্ট্রিপ টি দেখলাম, এই প্রত্যেকটা ছবিগুলোকে আলাদা ভাবে বলা হয় ফ্রেম (Frame)

ছবিতে লাল চিহ্নিত অংশটি একটি এনিমেশন ফ্রেম (Frame)
ছবিতে লাল চিহ্নিত অংশটি একটি এনিমেশন ফ্রেম (Frame)

এনিমেশন কিভাবে কাজ করে?

মানুষের চোখের সামনে থেকে কোন বস্তু সরে যাওয়ার পরেও ০.১ সেকেন্ড দেখা যায়। এই নীতির ওপর ভিত্তি করেই এনিমেশন কাজ করে। এনিমেশনে, স্ক্রিনে খুব দ্রুত (সেকেন্ডে ১৫ – ২৫বার) পরপর ফ্রেম পরিবর্তন করে দেখানো হয়। সেকেন্ডে ২৫বার ফ্রেম পরিবর্তন হলে মানুষের চোখ সেটাকে চলন্ত ছবি বা ভিডিও হিসেবে দেখে। তাই আমাদের মনেহয় এনিমেশনের বস্তুগুলো নড়াচড়া করছে।

ছোট একটা উদাহরণ দেয়া যেতে পারে- আপনি যদি সিলিং ফ্যানের দিকে তাকান তাহলে আপনার মনে হবে যে একটি গোল ব্লেডের ফ্যান ঘুরছে। ফ্যানে ৩টা ব্লেড থাকে, কিন্তু ওগুলো এত জোরে ঘুরে যে আপনার চোখ ৩টা ব্লেডের বৃত্তাকার গতিপথকে একটি গোল ব্লেড বলে মনেহয়।

মূলত এটিই সকল প্রকার এনিমেশনের মূল ভিত্তি। এবং আমরা আজকে এই পদ্ধতিতেই প্রোগ্রামিং কোড ব্যবহার করে এনিমেশন তৈরি করবো।

প্রসেসিং এ কিভাবে এনিমেশন তৈরি করবো?

আমরা যদি প্রসেসিং এ একই ভাবে খুব দ্রুত একটি বস্তুর অবস্থান পরিবর্তন করে স্ক্রিনে দেখাই, তাহলে সেটাও এনিমেশন হয়ে যাবে। কীভাবে? সেটাই আমরা এখন দেখবো।

প্রথমেই এই কোডটি লিখে রান করাই-


int circleX = 50, circleY = 50;
void setup(){size (800,400);}

void draw()

{
background (0);
fill(255);
ellipse(circleX,circleY, 50,50); /*drawing an ellipse*/ 
circleX++; /* incrementing the value of circleX by 1*/
}

রান করানোর পরে স্ক্রিনে দেখা যাবে একটি সাদা রঙের বল ডানদিকে সরে যাচ্ছে। অভিনন্দন! আপনি সফলভাবে প্রসেসিং এ নিজের প্রথম এনিমেশন করতে পেরেছেন। 😀

কোড ব্যাখ্যা

কোডে, প্রথমে একটি এলিপ্সের স্টেটমেন্ট লেখা হয়েছে, যেখানে পজিশনের জায়গায় circleX ও circleY ভেরিয়েবল ব্যবহার করা হয়েছে। এরপরের লাইনে circleX এর ভ্যাল্যু ১ করে বাড়ানো হয়েছে।

circleX এর ভ্যাল্যু প্রথমে ৫০ ছিল। যেহেতু circleX এর ভ্যাল্যু বাড়ানোর অংশটি void drawতে করা হয়েছে, তাই কম্পিউটার খুব দ্রুত বারবার circleX এর ভ্যাল্যু বাড়াতে থাকায় মনে হচ্ছে এলিপ্সটি আস্তে আস্তে ডানদিকে সরে যাচ্ছে।

আমরা যদি circleX এর জায়গায় circleY এর ভ্যাল্যু বাড়াতাম তাহলে এলিপ্সটি নিচের দিকে যেতো। আবার যদি circleX ও circleY দুটির ভ্যাল্যু একসাথে বাড়াতাম তাহলে এলিপ্সটি স্ক্রিনের ডানদিকের নিচের কোণার দিকে যেতো।

আপনি যদি circleX++ এর জায়গায় circleX+=1 লেখেন তাহলেও একই কাজ হবে, যেহেতু circleX++ ও circleX+=1 একই কাজ করে। আবার, circleX+=speed লিখে স্পিডের জায়গায় পছন্দমত সংখ্যা বসিয়ে এলিপ্সটি কত স্পিডে জায়গা পরিবর্তন করবেন তা ঠিক করতে পারবেন।

তবে স্পিডের জায়গায় ৫ এর বেশি দিলে মনেহবে এলিপ্সটি লাফিয়ে লাফিয়ে যাচ্ছে। তাই সাবলীল এনিমেশন এর জন্য একবারে ৫ এর বেশি ভ্যাল্যু বাড়ানো উচিত নয়।

উল্লেখ্য – স্পিডের মান দশমিক থাকলে (0.5/1.5) থাকলে অবশ্যই ফ্লোট ভ্যারিয়েবল ব্যবহার করতে হবে।

আপনি একইভাবে অন্যান্য শেপ/অবজেক্ট যেমন ত্রিভুজ, চতুর্ভুজ ইত্যাদিও প্রসেসিংএ এনিমেট করতে পারবেন। এমনকি এসব শেপ দিয়ে মানুষ বা অন্য কিছু বানিয়ে সেটা এনিমেট করে নিজের কার্টুন ফিল্মও বানাতে পারবেন! 😀

আমরা এখন আরও একটি জিনিস দেখবো, যা এনিমেশনের জন্য খুব গুরুত্বপূর্ণ। তা হচ্ছে, যুক্তি বা লজিক।

এই এনিমেশন টিউটোরিয়াল কোডিং এর ভিডিও

নিচের টিউটোরিয়াল ভিডিওতে দেখতে পাচ্ছেন আমার তৈরি করা এনিমেশনের ভিডিও-

প্রোগ্রামিং দিয়ে এনিমেশনের গুরুত্বপূর্ণ লজিক

আমরা আমাদের চারপাশের পৃথিবীতে যা দেখি, এনিমেশন ফিল্মের বস্তু যদি তার সাথে সঙ্গতিপূর্ণ না হয় তবে তা আমাদের চোখে বিসদৃশ বা অদ্ভুত মনে হতে পারে।

যেমন, আমরা জানি সাইকেল চালানোর সময়ে সামনের চাকা ডানদিকে ঘোরালে সাইকেল ডানে যায়, সামনের চাকা বামদিকে ঘোরালে সাইকেল বামে যায়। কিন্তু আপনার এনিমেশনে যদি দেখা যায় সাইকেলের চাকা ঘুরছে ডানদিকে, অথচ সাইকেল যাচ্ছে বামদিকে, তাহলে সেটা দেখতে ভাল লাগবেনা।

তাই, এনিমেশন বানানোর সময় কিছু সাধারণ নিয়মকানুন মেনে চলতে হয়, তাহলে এনিমেশনগুলো দেখে অবাস্তব মনে হয়না।

এ নিয়মকানুন আবার যা এনিমেট করছেন তার উপর নির্ভর করে, অর্থাৎ এনিমেটরের উপর নির্ভরশীল।

ধরুন, আপনি যদি একটি প্লেন এনিমেট করতে চান, তাহলে আপনাকে মাধ্যাকর্ষণ ও ফিজিক্সের কিছু নিয়ম মেনে চলতে হবে।

একটি বাস্তব উদাহরণ – বাউন্সিং বল এনিমেশন

আমরা এখন একটি বল মাটিতে ড্রপ খাচ্ছে, এরকম একটি এনিমেশন বানাবো। সেজন্য আমাদের বলটি এনিমেট করার সময় মাধ্যাকর্ষণ এর নিয়ম মেনে চলতে হবে।
নিচের কোডটি লিখে ফেলি –


int circleX = 50; int circleY = 50;
int direction = 1;
void setup(){size (800,400);}
void draw(){
background (0);
fill(255);
ellipse(circleX,circleY, 50,50);
circleY+=direction;
if (circleY >= 375){
direction = (-1);
}
}

কোড ব্যাখ্যাঃ এই কোড টি আগের কোডটির মতই, তবে কিছু নতুন জিনিস যোগ করা হয়েছে। int direction = 1; এই লাইন দিয়ে direction নামে একটি ভেরিয়েবল ডিক্লেয়ার করা হয়েছে, যার কাজ একটু পরেই দেখবো।

void setup(){size (800,400);}

void draw(){
background (0);
fill(255);
ellipse(circleX,circleY, 50,50);

আশাকরি এই লাইনগুলো কী কাজ করছে তা বোঝানো লাগবেনা।

circleY+=direction; এখানে circleY এর ভ্যাল্যুর সাথে direction এর মান যোগ করা হচ্ছে। যেহেতু direction এর মান ১, তাই এলিপ্সটি নিচের দিকে যাচ্ছে।

if (circleY >= 375){
direction = (-1);
}

এই লাইনটি দিয়েই এলিপ্স বা বলটি ড্রপ খাওয়ানো হচ্ছে।

বলটি যখন স্ক্রিনের ঠিক নিচের দিক স্পর্শ করে, তখন circleY এর মান হয় ৩৭৫, তখন if statement এর ভেতরে direction এর মান (-1) এসাইন (assign/declare) করা হয়। এতক্ষন direction এর মান +1 থাকায় circleY এর মান ১ করে বাড়ছিল। এখন direction এর মান (-1) হয়ে যাওয়ায় যখন circleY এর মান এর সাথে direction এর মান যোগ হবে, তখন আসলে circleY এর মান ১ করে কমা শুরু করবে, এবং বলটি উপরের দিকে ওঠা শুরু করবে। ঠিক বাস্তব জীবনে যেমন করে একটি বল বাউন্স করে তেমনি 😉

বলটি কখন স্ক্রিনের নিচেরদিক স্পর্শ করবে তা সহজেই একটি সূত্র দিয়ে বের করে নিতে পারবেন। সেই সূত্রটি হচ্ছে – screenHeight-(ellipseHeight/2)

এখানে, screenHeight হচ্ছে আপনার স্ক্রিনের উচ্চতা, যা এ কোডের ক্ষেত্রে ৪০০। এলিপ্সের উচ্চতাকে ২ দিয়ে ভাগ করলে কেন্দ্র থেকে নিচের পৃষ্ঠের দূরত্ব পাওয়া যায়। এই কেন্দ্র যখন স্ক্রিনের উচ্চতার মান থেকে এলিপ্সের উচ্চতার ১/২ উপরে থাকবে, তখন ধরে নেয়া যেতে পারে যে এলিপ্সটির নিচের পৃষ্ঠ ভূমি স্পর্শ করেছে।

আপনি ইচ্ছা করলে উপরে সূত্রটিতে মান বসিয়ে দেখতে পারেন, ৩৭৫ই আসবে।

প্রোগ্রামটি কিছুক্ষন চালিয়ে রাখলে দেখা যাবে বলটি ড্রপ খেয়ে উঠতে উঠতে স্ক্রিনের বাইরে চলে যাবে। কিন্তু আমরা একটি বল মাটিতে ফেললে তা কিছুক্ষণ ড্রপ খেয়ে থেমে যায়। তাই এটিও আমাদের কোডে করে নিতে হবে।

নিচের কোডটি লিখে ফেলি –

(উল্লেখ্য – এই কোডে বলের ড্রপ স্পিড বাস্তবসম্মত করার জন্য ৫ দেয়া হয়েছে। বলটিকে আকর্ষণীয় করে তোলার জন্য বলের উচ্চতার সাথে সাথে যেন রঙ পরিবর্তন হয় সে ব্যবস্থা করা হয়েছে)


int circleX = 50; int circleY = 50;
int dir = 5;
int droplimit = 150;
void setup(){size (800,400);}

void draw()
{
background (0);
fill(circleY,circleY*0.5,255);ellipse(circleX,circleY, 50,50);
circleY+=dir;
if (circleY >= 375){
dir = (-5);
}
if (circleY <= droplimit && dir == (-5)){
if (droplimit<=350)
{droplimit +=100; dir = 5;}
else {dir=0;}

}
}

int droplimit = 150;

এখানে নতুন আরেকটি ভ্যারিয়েবল ডিক্লেয়ার করেছি droplimit নামে। বলটি ড্রপ করে কতটা উপরে উঠবে তা এখানে ডিক্লেয়ার করা হয়েছে।

if (circleY <= droplimit && dir == (-5))
{
if (droplimit<=350)
{droplimit +=100; dir = 5;}
else {dir=0;}
}

এই if statementটি দিয়েই বলটি বাস্তবসম্মতভাবে ড্রপ খাওয়ানো হয়েছে। এখানে, একটি if statement এর ভেতরে আরেকটি if statement ব্যবহার করা হয়েছে। এধরণের if statementকে বলা হয় nested if statement। অর্থাৎ, একাধিক if statement একটির ভেতরে আরেকটি ব্যবহার করলে তাকে nested if statement বলা হয়। if statement এর মত nested for loop, nested while loop ও হয়, যা আমরা পরের পর্বগুলোতে দেখবো।

if (circleY <= droplimit && dir == (-5))

এখানে circleY অর্থাৎ এলিপ্সটির পজিশন ড্রপলিমিট এর নিচে কিনা তা পরীক্ষা করা হয়েছে এবং এলিপ্সটি উপরের দিকে যাচ্ছে কিনা তা পরীক্ষা করা হয়েছে।

if (droplimit<=350)

এখানে ড্রপলিমিট এর মান ৩৫০ এর চেয়ে ছোট কিনা তা পরীক্ষা করা হয়েছে। যেহেতু এলিপ্সটির সাইজ ৫০, তাই ড্রপলিমিট এর মান ৩৫০ এর বেশি হয়ে গেলে এলিপ্সটি স্ক্রিনের বাইরে বের হয়ে যাবে।

{droplimit +=100; dir = 5;}

যদি ড্রপলিমিট পূর্ববর্তী শর্তটি পূরণ করে তাহলে ড্রপলিমিট এর মান ১০০ বেড়ে যাবে, অর্থাৎ বলটির ড্রপ খাওয়ার পরিমাণ ১০০ কমে যাবে। এবং তখন dir=5 হয়ে যাবে, তাতে বলটি ড্রপ খেয়ে উপরে ওঠা শুরু করবে।

এভাবে প্রতিবারে ড্রপ খেলে বলটির ড্রপ খাওয়ার পরিমাণ ১০০ করে কমতে থাকবে।

else {dir=0;}

যখন ড্রপলিমিট বেড়ে ৩৫০ এর বেশি হয়ে যাবে,অর্থাৎ বলটি আর ড্রপ খাওয়ার পরিমাণ একেবারেই কমে যাবে, তখন এই else statementটি রান হবে এবং dir=0 হয়ে যাবে। তখন বলটি স্থির হয়ে যাবে।

প্রসেসিং সংক্রান্ত অন্যান্য লেখাগুলো পড়তে চাইলে এখানে ক্লিক করুন – প্রসেসিং টিউটোরিয়াল

চেষ্টা করলে এই এনিমেশনটি আরও সুন্দর ও বাস্তবসম্মত করে তোলা যায়। কীভাবে করবেন তা আপনাদের ওপরই ছেড়ে দিলাম। তাহলে প্রোগ্রামার বন্ধুরা লেগে পরুন কোডিং দিয়ে এনিমেশন তৈরি করতে। আর হ্যাঁ প্রোগ্রামিং এনিমেশনে ক্যারিয়ার গড়তে চাইলে অবশ্যই আপনাকে দক্ষ এনিমেটর হতে হবে। আর জানেন নিশ্চয়ই একজন মোটামুটি কাজ জানা এনিমেশন ক্যারিয়ার হোল্ডার এর বেতন লাখ টাকার কাছাকাছিও হয় 😉

2 মন্তব্য

  1. এটা কি সি তে করা হয়েছে? নাকি অন্য কোন লেংগুয়েজ?
    আর আমার অ্যানিমেশন এ আগ্রহ আছে। প্রাথমিকভাবে কোথা থেকে শুরু করব যদি একটু বলতেন ভাল হয়…
    ধন্যবাদ।

উত্তর প্রদান

আপনার মন্তব্য লিখুন
আপনার নাম লিখুন