টাইম বেসড অ্যানিমেশন কি?
টাইম বেসড অ্যানিমেশন হলো এমন একটি অ্যানিমেশন পদ্ধতি যেখানে অ্যানিমেশন চলাকালীন সময়ের ব্যবধান (time delta) ব্যবহার করে অবজেক্টের গতি বা অবস্থান নিয়ন্ত্রিত হয়। এতে কোনো ফ্রেম রেটের উপর নির্ভরশীল না হয়ে, একটি নির্দিষ্ট সময়ের মধ্যে অ্যানিমেশন একীভূত হতে পারে। এটি বিশেষ করে ওয়েবজিএল বা গ্রাফিক্স প্রোগ্রামিং-এ ব্যবহার করা হয় যেখানে বিভিন্ন অবজেক্টের অ্যানিমেশন গতি স্বাভাবিক রাখতে হয়।
Delta Time (Δt) হল প্রতিটি ফ্রেমের মধ্যে পেরিয়ে যাওয়া সময়ের পরিমাণ, যা অ্যানিমেশনগুলোকে ফ্রেম রেটের উপর নির্ভরশীল না করে সমন্বয় করতে সহায়তা করে।
Delta Time কি এবং কেন প্রয়োজন?
Delta Time (Δt) হলো দুটি ফ্রেমের মধ্যে সময়ের পার্থক্য। ওয়েবজিএল বা গেম ডেভেলপমেন্টে, প্রতি ফ্রেমে Delta Time হিসাব করা হয়, যাতে অ্যানিমেশনগুলো ভিন্ন ভিন্ন ডিভাইসে সঠিকভাবে রান করে, তার ফ্রেম রেট বা GPU ক্ষমতার উপর নির্ভর না হয়ে।
যদি আপনি 60 FPS (Frames Per Second) গতিতে কাজ করছেন, তবে Delta Time হবে প্রতি ফ্রেমের মধ্যে 1/60 সেকেন্ড। যদি আপনি 30 FPS-এ থাকেন, তবে Delta Time হবে 1/30 সেকেন্ড। এই পার্থক্যটি গতি বা অ্যানিমেশনকে সামঞ্জস্যপূর্ণ করে।
Delta Time ব্যবহার করে অ্যানিমেশন কিভাবে করা যায়?
Delta Time ব্যবহার করে অ্যানিমেশন তৈরি করতে কিছু সাধারণ পদক্ষেপ অনুসরণ করা হয়:
1. Delta Time হিসাব করা
প্রথমত, প্রতি ফ্রেমের জন্য Delta Time হিসাব করতে হয়, যা সাধারণত requestAnimationFrame() ফাংশন ব্যবহার করে করা হয়।
let lastTime = 0;
function animate(currentTime) {
// Delta Time হিসাব করা
let deltaTime = (currentTime - lastTime) / 1000; // সময় সেকেন্ডে রূপান্তর করা
lastTime = currentTime;
// অ্যানিমেশন ফাংশন কল
update(deltaTime);
// পরবর্তী ফ্রেম রেন্ডার
requestAnimationFrame(animate);
}
2. অ্যানিমেশন আপডেট করা
অ্যানিমেশন আপডেট করার সময় Delta Time ব্যবহার করতে হবে যাতে অবজেক্টটি একটি নির্দিষ্ট গতিতে চলতে থাকে, নির্ভর না করে সিস্টেমের ফ্রেম রেটের উপর। উদাহরণস্বরূপ, একটি অবজেক্টের অবস্থান আপডেট করার জন্য:
let position = 0;
const speed = 5; // প্রতি সেকেন্ডে গতি
function update(deltaTime) {
// অবস্থান আপডেট করা Delta Time ব্যবহার করে
position += speed * deltaTime;
// অবজেক্টের অবস্থান রেন্ডার করা
render(position);
}
function render(position) {
// অবজেক্টের নতুন অবস্থান ব্যবহার করে গ্রাফিক্স রেন্ডারিং করা
console.log("Object position:", position);
}
এখানে, অবজেক্টের অবস্থান প্রতি সেকেন্ডে 5 ইউনিট গতি হবে। Delta Time ব্যবহার করার ফলে, গতি পরিবর্তন হতে পারে ফ্রেম রেটের উপর নির্ভর না করে।
3. অ্যানিমেশন স্টপ বা লুপিং
এটি নিশ্চিত করা দরকার যে অ্যানিমেশনটি সঠিকভাবে চালু বা বন্ধ হচ্ছে। সাধারণত requestAnimationFrame() ফাংশনটি লুপিং ফাংশন হিসেবে কাজ করে, যাতে অ্যাসিনক্রোনাসভাবে অ্যানিমেশন চালানো যায়।
টাইম বেসড অ্যানিমেশনের সুবিধা
- ফ্রেম রেটের উপর নির্ভরশীল না হওয়া: Delta Time ব্যবহার করে অ্যানিমেশন সিস্টেমের ফ্রেম রেটের উপর নির্ভরশীল নয়, যা সিস্টেমের মধ্যে সামঞ্জস্য বজায় রাখে।
- কনসিস্টেন্ট অ্যানিমেশন: এটি বিশেষ করে গেম বা ওয়েব অ্যাপ্লিকেশনে গুরুত্বপূর্ণ, যেখানে একাধিক ডিভাইস ও হার্ডওয়্যারে একই অভিজ্ঞতা প্রদান করা হয়।
- অ্যানিমেশন সমন্বয়: যেকোনো পরিস্থিতিতে অ্যানিমেশন সহজে সমন্বিত করা যায়, যেমন ভিন্ন ভিন্ন ডিভাইসে একই অভিজ্ঞতা নিশ্চিত করা।
ওয়েবজিএল-এ টাইম বেসড অ্যানিমেশন ব্যবহার
ওয়েবজিএল-এ টাইম বেসড অ্যানিমেশন করার জন্য Delta Time ব্যবহার করে গ্রাফিক্স রেন্ডারিং বা অবজেক্ট মুভমেন্ট নিয়ন্ত্রণ করা যায়। ওয়েবজিএল অ্যাপ্লিকেশনগুলোর ক্ষেত্রে এটি সিস্টেমের উপর নির্ভরশীলতা কমিয়ে দেয় এবং প্রতিটি ফ্রেমে অ্যাক্টিভিটি সময়ের সাথে সঙ্গতিপূর্ণ থাকে।
let lastTime = 0;
let rotationAngle = 0;
function animate(currentTime) {
let deltaTime = (currentTime - lastTime) / 1000; // সেকেন্ডে সময়
lastTime = currentTime;
// অবজেক্টের ঘূর্ণন (rotation) আপডেট করা
rotationAngle += 45 * deltaTime; // প্রতি সেকেন্ডে 45 ডিগ্রি ঘূর্ণন
if (rotationAngle > 360) rotationAngle = 0; // ঘূর্ণন 360 ডিগ্রি পার হলে রিসেট
update(rotationAngle);
requestAnimationFrame(animate);
}
function update(rotationAngle) {
// ওয়েবজিএল-এ 3D অবজেক্টের ঘূর্ণন বা অবস্থান আপডেট করা
console.log("Rotation Angle:", rotationAngle);
}
Delta Time ব্যবহার করে টাইম বেসড অ্যানিমেশন ওয়েবজিএল ও অন্যান্য গ্রাফিক্স প্রোগ্রামিং প্ল্যাটফর্মে অভ্যন্তরীণ গতি বা অ্যানিমেশন নিয়ন্ত্রণের জন্য অত্যন্ত কার্যকর। এটি নিশ্চিত করে যে, অভিজ্ঞতা কোনো ডিভাইস বা সিস্টেমের মধ্যে ফ্রেম রেটের পরিবর্তনের জন্য পরিবর্তিত হবে না, এবং অ্যানিমেশন আরও সমন্বিত ও বাস্তবসম্মত হবে।
Read more
