মূল বিষয়বস্তু
ইন্টার্যাক্টিভ দৃশ্য
ভালোভাবে কীভাবে অ্যানিমেশনের দৃশ্য (scene) তৈরি করতে হয় তা এখন আমরা জানি, এরকম আরও কয়েকটি দৃশ্য তৈরি করা শেখা যাক: যে দৃশ্যগুলো ব্যবহারকারীর সক্রিয়তার ভিত্তিতে প্রতিক্রিয়া দেবে। উদাহরণস্বরূপ, আমরা এমন একটি দৃশ্য তৈরি করতে চাই যেখানে উইন্সটোনের (Winston) কয়েকটি বাচ্চা থাকবে (অবশ্যই, রকস্টার হবার পর) -- কিন্তু আমরা চাই ব্যবহারকারীরা যেন ক্লিক করে উইন্সটোনের জন্য আরও কয়েকটি বাচ্চা উইনস্টন তৈরি করতে পারে। কারণ পৃথিবীতে আমাদের আরও কয়েকটি উইন্সটোনের দরকার রয়েছে, তাই না?
প্রোগ্রামে একটি দৃশ্যকে এমন দেখায়। প্রোগ্রামটি দৃশ্যের স্থির (static) অংশগুলো আঁকায় এবং তারপর
mouseClicked ফাংশনে, এটা ক্লিক করা স্থানগুলোতে উইন্সটোনের বাচ্চাগুলো আঁকে, বাচ্চা উইনস্টনগুলো সবসময় উপরের লেয়ারে থাকে, নিচের লেয়ারে যাই অঙ্কন করা থাকুক না কেন।কীভাবে আমাদের একাধিক-দৃশ্য বিশিষ্ট প্রোগ্রামে এটা যোগ করা যায়? প্রথমেই, সকল আঁকানোর কোডকে দৃশ্য আঁকানোর ফাংশন
drawScene5() এ নিতে হবে এবং দৃশ্য পরিবর্তনের লজিক mouseClicked এ যোগ করতে হবে:var drawScene5 = function() {
currentScene = 5;
background(173, 239, 255);
fill(7, 14, 145);
textSize(39);
text("Winston has babies!", 10, 47);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
};প্রোগ্রামটি দেখতে নিম্নরূপ:
কিন্তু
mouseClicked ফাংশনটি কীভাবে যোগ করবো? আগেই একবার কোডে mouseClicked ফাংশনকে সংজ্ঞায়িত করা হয়েছে এবং দ্বিতীয়বার এটা করা সম্ভব নয়। জাভাস্ক্রিপ্টে, একই নামে সর্বশেষ সংজ্ঞায়িত ফাংশন পূর্ববর্তী সকল ফাংশনকে উপেক্ষা করে "কাজ করে"। এজন্য, বাচ্চা উইনস্টন অঙ্কন করার কোডটি mouseClicked ফাংশনে ঠিকমত বসাতে হবে। এটার কিছু উপায় পর্যালোচনা করা যাক:1. ফাংশনের শুরুতেই কোডটি বসানো যায়:
mouseClicked = function() {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
...
};তাহলে ব্যবহারকারী প্রতিবার মাউসে ক্লিক করলেই ফাংশনটি কল হবে, উইন্সটোনের বাচ্চা অঙ্কনের দৃশ্য না হলেও এটা কাজ করবে। একেবারে ঠিক নয়।
2. কোডটি
currentScene === 4 এর if ব্লকে বসানো যায়:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
} else if (currentScene === 5) {
drawScene1();
}
};আসলে, এখানেই আমরা
drawScene5() কল করব এবং বাচ্চা উইনস্টনগুলো দৃশ্য (scene) 5 এ আসবে। কিন্তু চিন্তা করে দেখা যাক: এর মানে হল প্রতিবার নতুন দৃশ্য আঁকানোর সময়, সবসময় একটি অতিরিক্ত বাচ্চা উইনস্টন অঙ্কন করতে হবে। অর্থাৎ, আর কোন বাচ্চা উইনস্টন আঁকা হবে না, কারণ currentScene দৃশ্য 5 এ নিযুক্ত হয়ে যাবে এবং if ব্লকের কোডটি আর কাজ করবে না।3. কোডটি
currentScene === 5 এর if ব্লকে বসানো যেতে পারে:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
drawScene1();
}
};অর্থাৎ প্রথম দৃশ্য আঁকানো হলে, প্রথম মাউস ক্লিকের পর বাচ্চা উইনস্টনগুলোকে আঁকতে পারব। কিন্তু, পরের লাইন থেকে দেখা যাচ্ছে, দৃশ্য (scene) 1 তৎক্ষণাৎ বাচ্চা উইনস্টনের দৃশ্যের সাথে প্রতিস্থাপিত হয়ে যাচ্ছে।
বাচ্চা উইনস্টন-ক্লিক করা দৃশ্যকে, আমাদের দৃশ্যে যোগ করায় একটি বিরাট সমস্যা দেখা দিয়েছে: দৃশ্য পরিবর্তন এবং দৃশ্যের মধ্যে কাজ করার জন্য একই প্রতিক্রিয়া ব্যবহার করা হচ্ছে যা হল--পর্দার যে কোন স্থানে মাউস ক্লিক--এটাই মূল সমস্যা। আমরা একটি কঠিন সমস্যার সম্মুখীন হয়েছি এবং এটা সমাধান করার জন্য একটি অসাধারণ উপায় বের করতে হবে।
4. দৃশ্য 1 এর শেষে পুনরায় আঁকানোর কোড বন্ধ করে দিয়ে ব্যবহারকারীকে আবার শুরু করার নির্দেশ দেওয়া যেতে পারে। এটা, অবশ্যই কাজ করবে, কিন্তু এক্ষেত্রে ক্লিক করা যায় এমন দৃশ্য শেষে থাকতে হবে। কিন্তু আমরা যদি তার আগেই ক্লিক-নিয়ন্ত্রিত দৃশ্য পেতে চাই? তাহলে এই সমাধানটিও কাজ করবে না।
5. ভিন্ন ধরনের প্রতিক্রিয়া ব্যবহার করা যায় - যেমন
mouseDragged। এটা কাজ করবে, কারণ মাউস নড়ালে কখনই মাউসে ক্লিক হয় না। তবুও currentScene === 5 যাচাই করতে হবে, যেন মাউস নড়ালে অন্য কোন দৃশ্যে বাচ্চা উইনস্টন আঁকানো না হয়:mouseDragged = function() {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
};নিচে এটা চেষ্টা করে দেখা যাক, শেষ দৃশ্যে অবশ্যই মাউস নড়াতে হবে:
তাহলে, এটা কোনরকমে কাজ করে, যদিও আমি বাচ্চা উইনস্টনের সংখ্যা নিয়ে শঙ্কিত। স্বাভাবিকভাবেই, এটা কার্যকরী সমাধান নয়, কারণ এক্ষেত্রে আমাদের এমন দৃশ্য তৈরি করতে হবে যা মাউস ক্লিকে কোন প্রতিক্রিয়া দেয় না। এই সমস্যাটি দূর করা উচিত, অবশ্যই সমাধানের উপায় আছে।
যদি মাউস ক্লিকের অবস্থানের উপর ভিত্তি করে ক্লিক সনাক্তকরণ করা হয়, তাহলে কি দৃশ্য পরিবর্তনের জন্য এক স্থানে ক্লিক এবং দৃশ্যের মধ্যে কাজ করার জন্য আরেক স্থানে ক্লিক ব্যবহার করা যাবে? একেবারে, একটি বাটনের মত! সত্যিকার অর্থে, এভাবেই বেশিরভাগ একাধিক-দৃশ্যের প্রোগ্রাম কাজ করে এবং আমরা এটা পরবর্তীতে দেখব।
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।