윈스턴의 이야기를 그림 이야기책으로 만들고 사용자가 클릭을 통해 다음 화면으로 넘어갈 수 있게 만들어 봅시다. 제목이 있는 메인 장면으로 시작합니다.
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("The Story of Winston", 10, height/2);
다음은 사용자가 클릭하면 이야기의 다음 부분인 윈스턴의 위대한 탄생을 볼 수 있도록 만들 겁니다. 사용자가 마우스를 클릭할 때마다 호출될 mouseClicked 함수를 정의한 후 두 번째 장면을 그리는 코드를 그곳에 넣어서 이 기능을 구현해 봅시다. 두 번째 장면을 그리기 전에 background()를 호출해야 함을 주의하세요. 그렇지 않으면 각 장면이 겹쳐 보일 겁니다.
mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};
두 번째 장면에 대한 코드를 아래에서 수정해 보세요. 매번 클릭을 해야 두 번째 장면이 무엇인지를 볼 수 있기 때문에 수정할 때 많이 불편합니다.
우선 그 문제를 해결하도록 하겠습니다. 물론 이 성가심을 견딜 수 있지만, 훨씬 생산적인 프로그래머가 되어봅시다. 두 번째 장면을 수정하고 그 결과를 실시간으로 본다면 훨씬 더 생산적이지 않을까요? 이 경우 두 번째 장면의 모든 코드를 함수 안에 넣고 mouseClicked로부터 함수를 호출한 후 디버깅할 때 해당 함수를 호출하면 문제를 쉽게 해결할 수 있습니다.
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

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

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

drawScene2();
두 번째 장면을 함수로 만들었으므로 첫 번째 장면도 함수로 만드는 편이 좋습니다. 모든 코드를 묶어 호출합니다. 이제 아래에서 직접 해보세요. 해당 코드를 수정하려 할 때 drawScene2() 호출에 주석을 달고 결과를 바로 확인하는 것이 얼마나 쉬운지 알 수 있을겁니다.
이제 첫 장면과 두 번째 장면이 생겼습니다. 세 번째 장면을 보여주려면 어떻게 해야 할까요? 또는 세 번째 장면을 클릭하여 첫 번째 장면으로 되돌아 가려면 어떻게 할까요? mouseClicked 내의 코드를 변경해서 항상 두 번째 장면을 호출하는 대신 어떤 장면을 보여줄 것인지를 조건적으로 선택할 필요가 있습니다. 즉, 특정 종류의 조건을 확인할 if문이 필요합니다. 우선 의사코드(pseudo-code) 측면에서 생각해 봅시다.
// 사용자가 마우스를 클릭할 때:
    // 현재 장면이 첫 번째 장면이라면, 두 번째 장면으로 넘어 갑니다.
    // 현재 장면이 두 번째 장면이라면, 세 번째 장면으로 넘어 갑니다.
    // 현재 장면이 세 번째 장면이라면, 다시 첫 번째 장면으로 넘어 갑니다.
"현재 장면"을 식별할 필요가 있어 보이네요. 이것은 숫자로 저장하는 것이 좋습니다. 전역 변수 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;
    ...
};
아래 프로그램에 여태까지 한 모든 것을 합쳤습니다. 클릭해서 이야기의 시작부터 어떻게 동작하는지 살펴보세요. 원하는 대로 네 번째 장면을 추가하고 내 프로젝트로 저장해 보세요.
로딩 중