Problem with scenes management on processing.js

Processing Beginners
1

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):

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();   
    }
};
2

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

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

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

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: :star_struck:
https://www.KhanAcademy.org/computer-programming/new/pjs

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

  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. :crying_cat_face:

1 Like
3

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