সরল দৃশ্য পরিবর্তন

মনে কর, আমরা উইন্সটনের গল্প নিয়ে একটি গল্পের বই বানাতে চাই, যেখানে ব্যবহারকারী ক্লিক করে করে গল্পের পরবর্তী অংশ জানতে পারবে। আমরা শুরু করব মূল দৃশ্যটি নিয়ে যেখানে শুধু একটি শিরোনাম থাকবে:

background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);

Now, we want it so the user can click to see the first part of the story, Winston's epic birth. To do that, we can define a mouseClicked function that will be called whenever the user clicks the mouse, and we can put in the code to draw our second scene there. Note that we have to call background() before drawing the second scene; otherwise we'll see both scenes on top of each other:

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

Try it out in the program below - click to see the scene change, and little Winston get born!

Now I want you to try editing the code for the second scene, like changing the text or the image placement. Do you notice that every time you want to see the results of your edited code, you have to click to see the second scene?

Personally, I find that annoying, as it means it takes so long to edit scene 2 to be exactly how I like it. Imagine if we had 10 scenes and wanted to edit scene 10 - we'd have to click 10 times for each edit. Yeesh!

So let's solve that problem. Yes, you and I can survive with annoyingness, but we all want to be more productive programmers, and won't we be more productive if we can see the results of our coding in real time? In this case, an easy thing to do is to wrap all of the scene 2 code inside a function, call that function from mouseClicked, and then call that function when we're debugging. Here's what I mean:

var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

mouseClicked = function() {
    drawScene2();
};

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);

drawScene2();

As long as we've made scene 2 into a function, we may as well make scene 1 into a function as well, just wrapping all that code up and calling it.

var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("The Story of Winston", 10, 200);
};

Now, try out the program below. This time, if you want to make edits to scene 2, you can simply uncomment the drawScene2() call and see your edits rendered immediately.

চমৎকার, এখন আমাদের একটি মূল দৃশ্য এবং দ্বিতীয় দৃশ্য আছে। তৃতীয় দৃশ্যের জন্য কি করবো? তৃতীয় দৃশ্যে ক্লিক করলে কি প্রথম দৃশ্যে ফিরে যাব? এখন mouseClickedফাংশনের ভিতরে থাকা লজিকটি এমনভাবে পরিবর্তন করা যাক যেন এটা সবসময় দৃশ্য 2 কল না করে কন্ডিশনের উপর ভিত্তি করে কোন দৃশ্যটি এখন দেখাতে হবে তা নির্বাচন করবে। অর্থাৎ আমাদের একটি if স্টেটমেন্ট দরকার যা কন্ডিশন যাচাই করবে। এখন এই শর্তগুলো সুডো-কোডের মাধ্যমে আগে চিন্তা করে দেখা যাক:

// When the user clicks the mouse:
    // if the current scene is #1, go to #2
    // if the current scene is #2, go to #3
    // if the current scene is #3, go back to #1

দেখে মনে হচ্ছে আমাদের "বর্তমান দৃশ্যের" একটি হিসাব এখানে রাখতে হবে এবং এটার হিসাব সংখ্যায় সংরক্ষণ করা যাক। currentScene নামে একটি সার্বজনীন চলক নেই এবং mouseClicked এর মধ্যে এটা যাচাই করে নেওয়া যাক।

var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};

এই কন্ডিশনটি দেখতে সুডো-কোডের মতই, কিন্তু এখানে একটি সমস্যা আছে: আমরা currentScene এর কোন মান দেই নাই, এজন্য কন্ডিশনগুলো কখনও সত্য হবে না। আমরা চাইলে এটাকে if কন্ডিশনের মধ্যে রাখতে পারতাম, কিন্তু এটাকে অঙ্কন করার ফাংশনের মধ্যেই রাখা উচিত, যাতে যে স্থান থেকেই অঙ্কন ফাংশনকে কল করা হোক না কেন চলকের মানটি সঠিক থাকে।

var drawScene1 = function() {
    currentScene = 1;
    ...
};

var drawScene2 = function() {
    currentScene = 2;
    ...
};

var drawScene3 = function() {
    currentScene = 3;
    ...
};

সবকিছু একসাথে করে নিচে প্রোগ্রামটি দেওয়া হল। ক্লিক করতে থাকলে দেখা যাবে যে গল্পটি আবার প্রথম থেকে শুরু হয়েছে অর্থাৎ গল্পের পুনরাবৃত্তি ঘটেছে। চতুর্থ একটি দৃশ্য যোগ করার চেষ্টা করা যাক (যেখানে উইনস্টনের সাথে ওহ নোসের সাথে দেখা করবে? নাকি উইনস্টন আবার উইনস্টনিইয়ার সাথে দেখা করে উইনস্টসিনে চলে যাবে?), এটা চেষ্টা করে দেখা উচিত:

আলোচনায় অংশ নিতে চাও?

প্রবেশ কর

সাজানো আছেঃ

কোন আলাপচারিতা নেই।

ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।