মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
অ্যানিমেটেড দৃশ্য
আমরা দেখেছি কীভাবে একাধিক সাধারণ দৃশ্য তৈরি করতে হয় - কিন্তু আমাদের দৃশ্যগুলি "স্থির" ছিল - তারা অ্যানিমেটেড ছিল না, এছাড়াও এইসব দৃশ্যে ব্যবহারকারীর প্রতিক্রিয়ার ভিত্তিতে কোন কাজও হয় না। আমরা জানি, আকর্ষণীয় দৃশ্য তৈরি করার জন্য কিছু কৌশল প্রয়োজন। এবার তাহলে কাজ শুরু করা যাক!
প্রথমেই অ্যানিমেশন সম্পর্কে কিছু কথা বলি। যদি আমরা রকস্টার উইন্সটোনকে (Winston) দিয়ে ড্রাম বাজাতে চাই, তাহলে আমাদের কি করা উচিত? এটি করার জন্য সাধারণভাবে আমরা
draw ফাংশনটি সংজ্ঞায়িত করব যার মধ্যে আঁকানো আকৃতিকে প্রতি ফ্রেমে নড়াচড়া করানোর জন্য কোড লেখা থাকবে। উদাহরণস্বরূপ, বর্তমান millis() এর মানের উপরে ভিত্তি করে, ড্রাম বাজানোর হাতগুলির বর্তমান অবস্থান কোথায় তা নির্ভর করবে, অর্থাৎ অতিবাহিত মিলি সেকেন্ডের মানের উপর এটি নির্ভর করবে:আগের উদাহরণে এটাকে 4 নং দৃশ্য হিসেবে যোগ করলে কি হবে? কোডটিকে আমরা
drawScene4() ফাংশনে নিয়ে যাব এবং mouseClicked লজিকটি কিছুটা পরিবর্তন করব।var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};চেষ্টা করা যাক - কয়েক বার ক্লিক করে দেখা যাক কি হয়:
লক্ষ্য করলে কি দেখতে পাচ্ছি? এটি কিছুটা কাজ করেছে। আমরা উইন্সটোনকে তার ড্রাম নিয়ে দেখতে পাচ্ছি, কিন্তু তার ড্রাম স্টিকগুলি নড়ছে না। মুশকিল! এভাবে স্থির হয়ে থাকলে গান বাজানো অসম্ভব। মনে হয় তুমি ব্যাপারটা ধরতে পেরেছ:
draw() ফাংশনের ভেতর থেকে ড্রামের স্টিক আঁকানোর কোডটি আমরা আর কল করছি না, এজন্যই এটিকে শুধুমাত্র একবারই কল করা হচ্ছে-- বারবার নয়--এবং একারণেই স্টিকগুলি একবার আঁকা হচ্ছে। মনে হয় সমাধানটি তুমি বের করে ফেলেছ: একটি draw() ফাংশনকে সংজ্ঞায়িত করতে হবে এবং উপযুক্ত সময়ে drawScene4() ফাংশনটি কল করতে হবে।draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Let's just think through that for a bit: whenever we define a
draw() function in our code, it will then get called repeatedly (defaulting to 60 FPS), and whenever it's called, when the current scene has already been set to 4, then it'll call the function to draw scene 4. When it's any other value, it won't attempt to draw anything at all-- keeping whatever was already on the screen. We still need to do the initial scene drawing in mouseClicked, this logic just takes care of animating every frame after.কেউ কেউ হয়তো ভেবে থাকতে পারে: কেন আমরা সকল দৃশ্য আঁকানোর ফাংশনকে
draw() ফাংশনের ভেতরে কল করছি না? আসলে, এটা করা যেত এবং তখন ফলাফল এমন হত যে অন্যান্য দৃশ্যে অ্যানিমেশন যুক্ত করলে, সেগুলো তৎক্ষণাৎ কাজ করা শুরু করে দিত। কিন্তু ধারণা করা হচ্ছে যে অন্য কোন দৃশ্যে তুমি অ্যানিমেশন যুক্ত করনি, যার অর্থ হল কোন কারণ ছাড়াই কম্পিউটার বারবার বারবার করে ঐ একই দৃশ্যগুলো অঙ্কন করছে। কম্পিউটারের কর্মক্ষমতার দিক থেকে বিবেচনা করলে, ব্যাপারটি ভালো নয়। আমরা যদি কম্পিউটারকে অতিরিক্ত কাজ থেকে বাঁচাতে পারি, তাহলে সেটি আমাদের করা উচিত। ফলশ্রুতিতে আমাদের প্রোগ্রাম দ্রুত হবে এবং ব্যবহারকারীও খুশি থাকবে।সুতরাং, আমাদের শেখা যেহেতু শেষ, এখানে ক্লিক করা যায় এমন দৃশ্য আছে, আমাদের অ্যানিমেশন করা দৃশ্যটি। মনে হবে যেন, 4 নং দৃশ্য থেকে গান শোনা যাচ্ছে!
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।