# Problem with scenes management on processing.js

**URL:** <https://discourse.processing.org/t/problem-with-scenes-management-on-processing-js/1543>\
**Category:** Beginners\
**Created:** [July 6, 2018, 9:32am UTC](https://discourse.processing.org/t/problem-with-scenes-management-on-processing-js/1543 "2018-07-06T09:32:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vik007](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@Vik007](https://discourse.processing.org/u/Vik007)\
**Post date:** [July 6, 2018, 9:32am UTC](https://discourse.processing.org/t/problem-with-scenes-management-on-processing-js/1543/1 "2018-07-06T09:32:47Z")

</div>

Hi, I´m studying in Khan Academy “processing.js” I haven’t seen an specific category for processing.js so I´ll ask here.

Ask a question

```
Questions Tips & Thanks 

```

Top Recent  
I am coding a side scroll game and I have created 2 scenes the first one is the game itself and the second one is just a logo that says: “YOU WIN!!”. Inside the first scene I have put a condition to change the currentScene varible to 2 if you get enough points, later I have put a condition to draw scene 2 if currentScene === 2 but when the condition is reached, the program just stops the draw function but it doesnt draw scene2 Why? I can run this program if I call the drawScene2 inside the draw function but I don´t want to do that because it is not efficient as it was said earlier in the lectures.

Here is the interesting part of the code (I could put all of it if necessary):

```auto
currentScene = 1;

var draw = function() {
  if (currentScene === 1) {
     drawScene1();   
  } 
};

if (currentScene === 2) {
 drawScene2();   
}

Also I have tried other option that doesn´t work and I dont know why:

currentScene = 1;

if (currentScene === 1) {
var draw = function() {
drawScene1();
};
} else if (currentScene === 2) {
drawScene2();
}

This solution works but I've been told that because scene 2 is static there is no need to have it inside the draw function as it is a waste of energy redrawing it 30 times per second.

currentScene = 1;
draw = function() {
    if (currentScene === 1) {
     drawScene1();   
    } else if (currentScene === 2) {
     drawScene2();   
    }
};

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 6, 2018, 3:19pm UTC](https://discourse.processing.org/t/problem-with-scenes-management-on-processing-js/1543/2 "2018-07-06T15:19:19Z")

</div>

When posting code in this forum, please highlight it and click the button `</>` or hit CTRL+SHIFT+C. ✍

Khan Academy got so many “protections” there that is almost impossible to do anything other than strict vanilla Pjs code! 🤬

After many attempts, I’ve managed to come up w/ this concept sample: 💦

```auto
var nextScene, currentScene = -1;
var WIN = 10, score = 0;

var scene1 = function () {
  ++score;
  this.println(score);

  if (score >= WIN) {
    score = 0;
    nextScene();
  }
};

var scene2 = function () {
  this.background(0, 0, 255);
  this.text('YOU WIN!!!', width>>1, height>>1);

  this.println('YOU WIN!!!');
  this.exit();
};

var scenes = [scene1, scene2];

nextScene = function () {
  currentScene = (currentScene + 1) % scenes.length;
  draw = scenes[currentScene];
};

fill(255, 255, 0);
background(0, 0x80, 0);

textAlign(CENTER, BASELINE);
textSize(0100);

nextScene();

```

Copy & paste the sketch above at the link below in order to run it: 🤩  
[https://www.KhanAcademy.org/computer-programming/new/pjs](https://www.KhanAcademy.org/computer-programming/new/pjs)

Notice though that I had to prefix all Pjs methods inside **scene1()** & **scene2()** w/ `this.`: 😑

1. `this.println(score);`
2. `this.background(0, 0, 255);`
3. `this.text('YOU WIN!!!', width>>1, height>>1);`
4. `this.println('YOU WIN!!!');`
5. `this.exit();`

That’s the price to pay for dynamically customized **draw()** callbacks under Khan Academy’s custom Pjs. 😿

---

<div class="post-metadata">

**Author:** ![Vik007](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@Vik007](https://discourse.processing.org/u/Vik007)\
**Post date:** [July 10, 2018, 9:07am UTC](https://discourse.processing.org/t/problem-with-scenes-management-on-processing-js/1543/3 "2018-07-10T09:07:03Z")

</div>

Thanks a lot for your answer, I´m going to check it now. Thanks for the advices on how to post code too!!