Transitioning from one scene to the next with p5.js

Question

I'm currently using p5.js to create an interactive story. My main problem is that I can't seem to figure out how to write the logic for transitioning from the second scene to the third scene.

I have used p5.js's switching scenes example here as a reference guide. I haven't really quite grasped the logic behind the mousePressed() function in order to use it to my advantage.

function mousePressed() {
  if (scene1 == true) {
    if (mouseX < width / 2) {
      //do something
      scene2 = true;
    } else if (mouseX > width / 2) {
      //do something else
      scene3 = true;
    }
    // turn scene 1 off
    scene1 = false;
  } 
}

The function divides the canvas into two locations for the mousePressed() function to execute and transition to another scene.

I just want to press anywhere on the canvas as a starting point to transition from the first to the second scene, but later I would like to press on a specific object in order to transition from the second to third scene.

Snippet of current code:

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    easycam = new Dw.EasyCam(this._renderer, {
        distance: lunarDistance * 1.3
    });
}

function draw() {
  if (scene1 == true) {
    drawScene1();
  } else if (scene2 == true) {
    drawScene2();
  } else if(scene3 == true){
    drawScene3();
  }
}

function drawScene1() {
...
}
function drawScene2() {
...
}
function drawScene3() {
...
}

function mousePressed() {
  if (scene1 == true) {
    if (mouseX == width) {
      scene2 = true;
      if (mouseX == width) {
        scene3 = true;
      }
    }
    scene1 = false;
  } 
}

Unfortunately this doesn't seem to work. I've tried modifying it further by removing mousePressed():

function draw(){
    if (scene1 == true) {
        drawScene1();
        if(mouseIsPressed){
            scene1 = false;
            scene2 = true;
            drawScene2();
        }
    } 
}

This seems to work, but it disables my animations and messes it up completely.

How can I go about this?

Answer 1

MousePressed event: P5 reference

Language references should be the first place you should be scouring. The mouse pressed function is described here within the p5 reference

Here is a snippet of the event description from the reference.

The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined.

---

Negation

Think about how you can apply negation to manage your events.

scene1 = !scene1; // This would turn your scene on or off

---

Mouse Pressed event

Your code snippet here would break because it will draw just 1 frame and since scene 1 is set to false no other conditionals would be accessible after the first frame.

function draw(){
if (scene1 == true) {
    drawScene1();
    if(mouseIsPressed){
        scene1 = false;
        scene2 = true;
        drawScene2();
    }
}}

What you want to do is first check where the mouse click is happening. Based upon the mouseclick change your scene. There are a plethora of ways to do this. Keeping track of the booleans and variables is too tedious and erorr prone. So, how do you get around this? Is there any collection that might be able to help you? Yes!

You can use lists or any other flavor of collections to help track scenes easily. To do this, keep track of the current scene using a pointer and only draw that scene if the pointer is on that scene.

i.e: if (pointer==1){drawScene1();}

---

I believe you can solve the rest of the problem from this.